1、列表渲染(循环指令)
<li v-for="(值,索引) in 数组">{{值}}/{{索引}}</li>
<li v-for="(对象,索引) in 数组">{{对象.key}}/{{索引}}</li>
<li v-for="(值,键) in 对象">
<li v-for="(数,索引) in 数字">
<li v-for="(单字符,索引) in 字符">
-
列表渲染时的key 在标签里使用属性key，可以唯一标识一个元素。
1、当使用 v-for更新已渲染过的元素列表时，它默认用“就地复用”策略。即：尽量不进行dom元素的操作，只替换文本。
2、进行dom操作，就用key。尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为（就地复用）以获取性能上的提升。
<ul>
<li v-for="(goods,index) in goodslist">
<p>序号：{{index+1}}</p>
<p>商品名称：{{goods.goodsName}}</p>
<p>价格：{{goods.goodsPrice}}</p>
</li>
</ul>
let vm = new Vue({
el:"#app",
data:{
goodslist:[
{
goodsName:"铅笔",
goodsPrice:1.5
},
{
goodsName:"刚笔",
goodsPrice:35
},
{
goodsName:"毛笔",
goodsPrice:55
}
],
}
});
注意：key不要使用（数组）下标，并不是会报错，而是失去了唯一标识的意义。
2、事件绑定(指令)
2.1、事件绑定
-
v-on可简写为：@
功能：绑定事件，事件处理函数需要放在methods选项当中去，事件名不带on -
绑定事件的几种情况
<input type="button" v-on:事件名="方法" >
<input type="button" v-on:事件名="方法(参数)" >
<input type="button" v-on:事件名="方法($event,参数)">
<div id="app">
<input type="button" value="无参" v-on:click="fn1" >
<input type="button" value="无参时获取事件对象" v-on:click="fn2" >
<input type="button" value="有参时获取事件对象" v-on:click="fn3($event,12)" >
</div>
let vm = new Vue({
el:"#app",
data:{
msg:"hello"
},
methods:{
fn1(){
console.log("fn1");
},
fn2(e){
console.log(e);
},
fn3(e,a){
console.log(e);
console.log(a);
},
}
});
-
获取事件对象 不传参，默认第一个参数，就是事件对象
传参，事件对象需要手动传入(使用官方提供的 $event) -
事件处理函数中的this methods选项里的函数里的this都是vue对象本身
注意：vue提供的选项的值如果是函数时，不可用箭头函数 , 因为会造成this丢失。
2.2、事件修饰符
<div @click.修饰符="函数"></div>
.stop 阻止单击事件继续传播（阻止事件流）
.prevent 阻止默认行为
.capture 使用事件捕获模式
.self 点到自己时才触发
.once 只会触发一次
.passive onScroll事件 结束时触发一次，不会频繁触发
注意：使用修饰符时，顺序很重要；比如，用 v-on:click.stop.self 会阻止所有的点击，而 `v-on:click.self.stop 阻止自身的点击，stop就不起作用了。
2.3、按键修饰符
<!--普通键-->
<div @keyup.修饰符="函数"></div>
.left 左
.enter 回车
.13 可以使用键码
<!--(组合)键-->
<div @keyup.修饰符="函数"></div>
.ctrl
.alt
.shift
.exact 精准控制,@键盘事件.修饰符1.修饰符2.exact
<!--鼠标-->
<div @mousedown.修饰符="函数"></div>
.left
.right
.middle 鼠标中键
3、双向绑定(指令)-表单控件绑定
3.1、双向绑定(指令)
-
v-model
功能：视图控制数据，数据也可控制视图
<input type="text" :value="data数据" v-on:input="changeIptValue">
<input type="text" v-model="data数据">
//通过v-model双向绑定
//input框内容改变，msg跟随改变，反之同理
<div id="app">
<input type="text" v-model="msg" >
</div>
let vm = new Vue({
el:"#app",
data:{
msg:"hello"
}
});
更多表单元素的双向绑定请参考https://cn.vuejs.org/v2/guide/forms.html
3.2、表单修饰符
<input v-model.修饰符="数据" />
.number 把标签的值转成数字赋给vue的数据
.trim 删除前后空格
.lazy 确认时才修改model数据
经典案例：动态产生响应数量文本框
<select v-model.number="num" >
<option value="1">1人间</option>
<option value="2">2人间</option>
<option value="3">3人间</option>
</select>
<input v-for="i in num" type="text" :value="i" >
4、指令补充
//需要在样式中对该标签加入display:none
<style>
div[v-cloak]{
display: none;
}
</style>
//方能使用v-cloak
<div v-cloak>{{num}}</div>
-
v-once
功能：只渲染元素和组件一次，随后的重新渲染，
|