您的位置:首页 > Web前端 > Vue.js

Vue草稿

2020-05-11 04:09 926 查看

Vue学习笔记

1.概述、特征、以及初始化

  • Vue 是一种灵活的渐进式相应框架
  • 采用声明式的编程范式
    引用Vue的方法
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app', //用于挂载需要挂载的元素
data: {
message: 'fuck you'
}
})
</script>

通过采用el挂载和HTML代码定义id的方式来使用Vue.
data是vue实例对应的数据对象
methods定义属于vue的一些方法,可以再其他地方调用,也可以在指令中使用

2. 创建、显示、更新列表

<div id="app">
<ul>
<li v-for="item in movies">{{item}}</li>
</ul></div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'ssda',
movies: ['星际穿越', '大话西游', '少年派'],
}
})
</script>

声明式的编程范式,使得列表操作变得简易。

3.案例:计数器

包含新的指令,v-on 和新的属性 methods,可以通过函数的形式来匹配复杂的操作

<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>

<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
add: function () {
console.log('+++')
this.counter++
},
sub: function () {
console.log('---')
this.counter--
}

},
})
</script>

此处 v-on:click 可以用语法糖 @click 来替代。

4.关于插值的操作

mustache 语法

<h2>{{message}}, 李银河!</h2>
<h2>{{firstName + lastName}}</h2>

mustache语法中不仅可以写变量,亦可以写简单的表达式。

v-once 指令

表示页面的元素和组件只渲染一次,不会随着数据的改变而改变。

<h2 v-once>{{message}}</h2>

v-for 指令
表示循环元素或组件中的内容,后接表达式。

<ul>
<li v-for="item in movies">{{item}}</li>
</ul>

v-html 指令
表示有选择性地解析html中的内容

<h2 v-html='url'>{{url}}</h2>

v-text 指令

<h2 v-text='message'>,栗子</h2>

表示显示指定的数据,但是很不灵活,会直接覆盖原标签内的数据,而且不支持拼接等操作。
该指令用得不多

v-pre 指令

<h2 v-pre>{{message}}</h2>

表示原封不动地显示标签内的内容,而不会对其进行解析。
该指令用得不多

v-cloak 指令
一般用来消除抖动

<style>
[v-cloak] {
display: none
}
</style>

<div id="app">
<h2 v-cloak>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
// 由于 v-cloak 在被解析之后会被删除,所以
// 在vue解析之前,div中有v-cloak属性
// 在vue解析之后,div中没有v-cloak
setTimeout(function () {
const app = new Vue({
el: '#app',
data: {
message: '你好'
}
})
}, 1000)
</script>

5.v-bind 数据绑定

v-bind 的基本使用
绑定属性

<img v-bind:src='imgURL' alt="谷歌">
<a v-bind:href="ahref">百度一下</a>

v-bind 语法糖

<a :href="ahref">百度一下</a>

实际上是省略了v-bind指令。

v-bind 绑定到class有两种方式 对象语法和数组语法
用法一 可以直接通过{}绑定一个类
用法二 可以通过判断传入多个值
用法三 和普通的类同时存在,并不冲突

v-bind 绑定到class(对象语法)
此案例添加了一个按钮,并设置了一个监听事件,使得点击按钮时改变绑定到

<h2>
的class中的布尔值,从而实现对样式的改变。

<div id='app'>
<h2 v-bind:class='{active: isActive, line: isLine}'>{{message}}</h2>
<button v-on:click='btnClick'>按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好',
isActive: true,
isLine: false,
},
methods: {
btnClick: function () {
this.isActive = !this.isActive
}
}
})

v-bind 绑定到class(数组语法)

<div id='app'>
<h2 class="title" :class="[active, line]">{{message}}</h2>
<h2 class="title" :class="getClasses()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
active: 'one',
line: 'two'
},
methods: {
getClasses: function () {
return [this.active, this.line]
}
}
})
</script>

v-bind 动态绑定style(对象语法)

原理大致相同,引号后面改成style即可。

<div id='app'>
<!-- <h2 v-bind:style='{属性名:属性值}'>{{message}}</h2> -->
<!-- <h2 v-bind:style='{fontSize: theSize + "px", color: theColor}'>{{message}}</h2> -->
<h2 v-bind:style='getStyles()'>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
theSize: 100,
theColor: 'red',
},
methods: {
getStyles: function () {
return { fontSize: this.theSize + "px", color: this.theColor }
},
}
})
</script>

v-bind 动态绑定style(数组语法)

<div id="app">
<h2 :style='[baseStyle, baseStyle1]'>{{message}}</h2>
</div>
<script src='../js/vue.js'></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
baseStyle: { backgroundColor: 'red' },
baseStyle1: { fontSize: '88px' }
}
})
</script>

6.计算属性

特点:html代码里面非常清晰

<h2>{{fullMessage}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'asd',
message2: 'dd',
},
computed: {
fullMessage() {
return this.message + ' ' + this.message2
}
},
methods: {
getFullMessage() {
return this.message + ' ' + this.message2
}
}
})
</script>

复杂操作

<script>
const app = new Vue({
el: '#app',
data: {
books: [
{ id: 110, name: 'Unix程艺术', price: 119 },
{ id: 111, name: 'Unx编程艺术', price: 1192 },
{ id: 112, name: 'Uix编程艺术', price: 1191 },
{ id: 113, name: 'Uni编程艺术', price: 11945 },
]
},
methods: {},
computed: {
totalPrice: function () {
let result = 0
// for (let i = 0; i < this.books.length; i++) {
//   result += this.books[i].price
// }
for (let book of this.books) {
result += book.price
}
return result
}
}
});
</script>

7.es6语法补充

<script>
// 属性的增强写法

const name = 'chen'
const age = 18
const obj = {
name: name,
age: age
}
//以上是es5的写法
// es60的写法如下
const obj = {
name, age
}

// 函数的增强写法
//es5中的
const obj = {
run: function () {

},
eat: function () {

},
}
//es6中的
const obj = {
run() {

},
eat() {

},
}
</script>

var没有块级作用域,所以用let
const指定对象之后不可更改,但是const内部可以进行更改

可变参数

function sum(...num) {
console.log(num)
}
sum(1,2,3,4,5)

for of 的使用

var arr = ['nick','freddy','mike','james'];
for(var item of arr){
console.log(item);
}

数组对象都支持,非常的简洁!

高阶函数 filter/map/reduce
1.filter函数的使用
filter中的回调函数有一个要求:必须返回一个boolean值
true:当返回true时,函数内部会自动将这次回调的n加入到新的数组中
false:当返回false时,函数内部会过滤掉这次的n

const nums = [10, 230, 22, 55, 11]
let newNums = nums.filter(function(n) {
return n < 100
})

2.map函数的使用

let new2Nums = newNums.map(function(n) {
return n * 2
})

3.reduce函数的使用
作用:对数组中的所有内容进行汇总。

new2Nums.reduce(function(preValue, n) {
return preValue + n
}, 0)

高阶函数链式编程

const nums = [1,2,3,55,66,22,66,33]
let total = nums.filter(function(n) {
return n < 100
}).map(function (n) {
return n * 2
}).reduce(function (prevValue, n) {
return prevValue + n
}, 0)

// 箭头函数
let total2 = num.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n)

8.事件监听

v-on的基本使用

<div id='app'>
<h2>{{message}}</h2>
<h2>{{counter}}</h2>
<!-- <button v-on:click="increment">+</button>
<button v-on:click="decrement">-</button> -->
<button @click="increment">+</button>
<button @click="decrement">-</button>

</div>
<script src='../js/vue.js'></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello, world!',
counter: 0
},
methods: {
increment() {
return this.counter++
},
decrement() {
return this.counter--
},
},
computed: {

},
})
</script>

v-on的参数问题

<div id='app'>
<!-- 事件调用的方法没有参数 -->
<button @click="btnClick()">按钮1</button>
<!-- 在事件定义时,写方法时省略了小括号,但是方法本身是需要一个参数的,
这个时候,vue会默认将浏览器生成的event对象作为参数传入到方法。 -->
<button @click="btn2Click">按钮2</button>
<!-- 方法定义时,我们需要event对象,同时又需要其他参数 -->
<!-- 在调用方法时,如何手动获取到浏览器参数的event对象:$event -->
<button @click="btn3Click(123, $event)">按钮3</button>
<button>按钮4</button>
</div>
<script src='../js/vue.js'></script>
<script>
const app = new Vue({
el: '#app',
data: {
event: 'chen'
},
methods: {
btnClick() {
console.log('hello world!')
},
btn2Click(item) {
console.log('====', item)
},
btn3Click(item, event) {
console.log('+++++', item, event);
}
}
})
</script>

v-on修饰符

<div @click='divClick'>
点这里
<button @click.stop="btnClick">按钮1</button>
</div>
<br>
<div>
<!-- 2.prevent 修饰符使用,阻止默认事件 -->
<form action='baidu'>
<input type='submit' value="提交" @click.prevent='submitClick'>
</form>

<!-- 3.监听某个键盘案件的点击,加.enter 则监听回车 -->
<input type='text' @keyup='keyUp'>

<!-- 4.once修饰符的使用  只触发一次回调-->
<button @click.once="btn2Click">按钮2</button>
</div>

9.条件判断

v-if 和 v-else的使用

<div id='app'>
<h2 v-if='score>=90'>优秀</h2>
<h1 v-else-if='score>=80'>良好</h1>
<h1 v-else-if='score>=60'>及格</h1>
<h1 v-else>不及格</h1>
</div>

指令判断,不建议写到标签里,建议写计算属性

登陆切换的一个小案例

<div id='app'>
<span v-if='isUser'>
<label for="username">用户账户</label>
<input type="text" id="username" placeholder="用户账户">
</span>
<span v-else=''>
<label for="useremail">用户邮箱</label>
<input type="text" id="useremail" placeholder="用户邮箱">
</span>
<button @click='isUser=!isUser'>切换类型</button>
</div>

如果不希望输入框内容复用。可以加入一个key属性

<span v-if='isUser'>
<label for="username">用户账户</label>
<input type="text" id="username" placeholder="用户账户" key='username'>
</span>
<span v-else=''>
<label for="useremail">用户邮箱</label>
<input type="text" id="useremail" placeholder="用户邮箱" key='useremail'>
</span>

v-show的使用

<div id='app'>
<h2 v-if='isShow' id='aaa'>{{message}}</h2>
<h2 v-show='isShow' id='bbb'>{{message}}</h2>
</div>

v-if中,条件为false时,包含v-if指令的元素,根本不会出现在dom中。
v-show中,当条件为false时,v-show只是给元素增加了一个行内样式 display:none。
如何选择:频繁切换时用show,否则用if。

10.循环遍历

遍历数组

<div id='app'>
<!-- 1.在遍历的过程中,没有使用索引值 -->
<h2>{{message}}</h2>
<ul>
<li v-for='item in names'>{{item}}</li>
</ul>
<!-- 2.在遍历的过程中,获取索引值。 -->
<ul>
<li v-for='(item, index) in names'>{{index+1}}.{{item}}</li>
</ul>
</div>

遍历对象

<div id='app'>
<!-- 1.在遍历对象的过程中,如果只是获取一个值,那么获取到的是value -->
<ul>
<li v-for='item in info'>{{item}}</li>
</ul>
<!-- 2.获取key和value 格式(value, key)-->
<ul>
<li v-for='(value, key) in info'>{{key}}-{{value}}</li>
</ul>
<!-- 3.获取key和value和index 格式(value, key index) -->
<ul>
<li v-for='(value, key, index) in info'>{{key}}-{{value}}-{{index}}</li>
</ul>
</div>

v-for使用过程绑定key

<ul>
<li v-for='item in letters' v-bind:key='item'>{{item}}</li>
</ul>

添加唯一标志key进行绑定后,中间插入效率高。

哪些数组的方法是响应式的

push(), pop(), shift(), unshift(), splice(), sort(), reverse()

methods: {
btnClick() {
// 1.push方法。改变的时候是响应式的
this.letters.push(this.mark)
this.mark += 1

// 2.pop(),响应式,删除数组中最后一个元素。
this.letters.pop();

// 3.shift(),响应式,删除数组中的第一个元素。
this.letters.shift();

// 4.unshift(), 响应式,在数组开头添加元素
this.letters.unshift('thing', 'asd', 'ddd')

5.splice()
// 可以删除、插入、替换元素
// 删除元素: 第二个参数传入你要删除几个元素(如果不传,则删除后面所有的元素)
// 替换元素: 第二个参数表示我们要替换几个元素,后面接用于替换的元素
// 插入元素:第二个参数,传入0,后面跟上要插入的元素。
// splice(start, ), 响应式
this.letters.splice()

// 6.sort() 响应式,排序
this.letters.sort()

// 7.reverse() 响应式,反转
this.letters.reverse()

// 0.通过索引值修改数组中的元素,不是响应式
this.letters[0] = 'haa'},

通过索引值修改数组中的元素,不是响应式

this.letters[0] = 'haa'

this.letters[0] = ‘haa’

Vue中定义的响应式修改方式:

Vue.set(this.letters, 0, 'bbbbbb')

一个点击变色小作业的实现

<ul>
<li v-for='(item, index) in movies' v-bind:key='item' v-bind:class='{active: currentIndexL === index}'
@click='liClick(index)'>{{item}}
</li>
</ul>
</div>
<script src='../js/vue.js'></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello world!',
movies: ['海王', '肖申克的救赎', '海上钢琴师', '复仇者联盟'],
currentIndex: 0,
},
methods: {
liClick(index) {
this.currentIndex = index
}
}
})
</script>

解决此作业的精髓在于:在列表处循环时讲index 分离出来,并在点击事件中调用liClick(index)方法时把index传回去,并在data里面定义一个currentIndex来记录状态,作为动态绑定样式的依据,非常精妙!妙啊!

11.书籍购物车案例

过滤器的实现

<td>{{item.price | getFinalPrice}}</td>
filters: {
getFinalPrice (price) {
return '$' + price.toFixed(2)
}

计算总价格的四种循环实现方法

computed: {
totalPrice () {
let totalPrice = 0
// 1.普通的for循环
// for (let i = 0; i < this.books.length; i++) {
//   totalPrice += this.books[i].price * this.books[i].count
// }
// return totalPrice

// 2.for (let i in this.books)
// for (let i in this.books) {
//   totalPrice += this.books[i].price * this.books[i].count
// }
// return totalPrice

// 3. for的
// for (let item of this.books) {
// totalPrice += item.price * item.count
// }
//return totalPrice
//}
//},
// 4.reduce实现
return this.books.reduce((pre, book) => pre + book.price * book.count)
}
},

v-if/else的实现

<div id='app'>
<div v-if='books.length'>
<table>
<thead>
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for='(item, index) in books'>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<!-- <td>{{getFinalPrice(item.price)}}</td> -->
<td>{{item.price | getFinalPrice}}</td><td>
<button @click='decrement(index)' v-bind:disabled='item.count <= 1'>-</button>
{{item.count}}
<button @click='increment(index)'>+</button>
</td>
<td>
<button @click='removeHandle(index)'>移除</button>
</td>
</tr>
</tbody>
</table>
<h2>总价格 {{totalPrice | getFinalPrice}}</h2>
</div>
<h2 v-else>购物车为空</h2>
</div>

12.v-model使用

v-model基本使用

<div id='app'>
<input type="text" v-model='message'>
<h2>{{message}}</h2>
</div>

v-model原理
v-model其实是一个语法糖,它的背后本质上时包含两个操作:
1.v-bind绑定一个value属性.
2.v-on指令给当前元素绑定input事件.

<input type="text" v-bind:value='message' v-on:input='message = $event.target.value'>

v-model结合radio类型

<div id='app'>
<h2>您选择的性别是:{{sex}}</h2>
<label for='male'>
<input type="radio" id='male' name='gender' value="男zxc" v-model='sex'>男
</label>
<label for='female'>
<input type="radio" id='female' name='gender' value="女" v-model='sex'>女
</label>
</div>

v-model结合checkbox单选、多选框使用
单选框对应布尔值,多选框则对应数组类型。

<div id='app'>
<!-- checkbox单选框 -->
<!-- <label for="license">
<input type="checkbox" id='license' v-model='isAgree'>同意协议
</label> -->
<!-- <h2>您选择的是{{isAgree}}</h2>
<button v-bind:disabled='!isAgree'>下一步</button> -->

<!-- checkbox复选框 -->
<label for="hobby1">
<input type="checkbox" value="唱" id='hobby1' v-model='hobbies'>唱
</label>
<label for="hobby2">
<input type="checkbox" value="跳" id='hobby2' v-model='hobbies'>跳
</label>
<label for="hobby3">
<input type="checkbox" value="Rap" id='hobby3' v-model='hobbies'>Rap
</label>
<label for="hobby4">
<input type="checkbox" value="篮球" id='hobby4' v-model='hobbies'>篮球
</label>
<h2>您的爱好是: {{hobbies}}</h2>
</div>

v-model结合checkbox进行值绑定

值不要写死,去动态获取

<label v-for='item in originHobbies' v-bind:for='item'>
<input type="checkbox" v-bind:value="item" v-bind:id='item' v-model='hobbies'>{{item}}
</label>
<h2>您的爱好是: {{hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello world!',
isAgree: false,
hobbies: [],
originHobbies: ['唱', '跳', 'rap', '篮球']
}
})
</script>

v-model结合select

<div id='app'>
<select name='name' v-model='fruit'>
<option value="唱">唱</option>
<option value="跳">跳</option>
<option value="rap">rap</option>
<option value="篮球">篮球</option>
</select>
<h2>{{message}} {{fruit}}</h2>
</div>

select多选现在用的不多,不做介绍。

v-model修饰符的使用

<div id='app'>
<!-- 修饰符lazy,添加后不实时更新,失去焦点时再更新 -->
<input type="text" v-model.lazy='message'>
<h2>{{message}}</h2>
<!-- 修饰符number,强制将绑定值更新为number类型 -->
<input type="text" v-model.number='age'>
<h2>{{age}}-{{typeof age}}</h2>
<!-- 修饰符trim,剥除空格 -->
<input type="text" v-model.trim='name'>
<h2>您输入的名字:{{name}}</h2>
</div>
讨嫌喵 原创文章 7获赞 4访问量 198 关注 私信
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: