- v-cloak
- v-once
- v-if(v-else)
- v-show
- v-for
一、基本指令
v-cloak
作用：解决初始化慢导致的页面闪动，常与display：none结合使用
*加载缓慢的情况下，页面会出现如{{msg}}，加载完之后才会显示对应的内容，影响用户体验。v-cloak解决了这个问题。
v-once
作用：定义它的元素只能渲染一次，后续都不会再渲染
例：
<style> [v-cloak]: { display: none } </style> <div id="app"> <div v-cloak>{{msg}}</div> <span v-once>{{word}}</span> <hr> <button @click='changeEnglish'>点击修改</button> </div>
new Vue({ el: '#app', data: { msg: '今天周一', word: 'Today is Monday.' }, methods: { changeEnglish() { this.msg = '今天周二' //中文修改 this.word = 'Today is Tuesday' //v-once 使得英文不会被修改 } } })
二、条件渲染指令
v-if（v-else）
v-if后面接的是等号，等号后面接的是布尔值；if true显示if后面的内容，if false显示else后面的额内容。
- 真正的渲染
- v-else需要紧跟在v-if后面
- v-else-if（vue.2.1.0新增）
- key管理可复用的元素（key唯一，提供key值来决定是否复用该元素）
例：点击按钮，用户、密码框切换
<div id="app"> <template v-if="ok === 'you'"> 用户名：<input type="text" value="请输入用户名" key="userName"> </template> <template v-else> 密码：<input type="password" value="" key="userPass"> </template> <button @click='clickChange()'>点击切换</button> </div>
new Vue({ el: '#app', data: { ok: 'you' }, methods: { clickChange() { if (this.ok === 'you') { this.ok = '' } else { this.ok = 'you' } } } })
这里如果不加key，会有bug
*如果想跟踪每个节点的身份，从而重用或重新排列现有元素，可使用key。
*在表单或者选框中，加上key，可以使得原先填写的内容或勾选的选项，虽有顺序或切换的变化,但是原先填写的内容或勾选处始终跟着原来对应的项。
v-show
- 简单的切换display属性
- v-show=‘条件’ 当条件为true时，则内容显现
- v-show不支持template语法
- v-show不支持v-else
<span v-show='3>1'>{{num}}</span>
总结：
v-if
- 当条件不成立时，不会渲染
- 切换开销较大，适合不太变化的场景
- 实时渲染：页面显示，元素渲染；不显示，元素移除（切换用户、密码的例子可以看出，当从用户切换到密码时，页面中用户代码会被移除）
v-show
- 无论成不成立都会渲染
- 首次渲染开销较大，但切换开销较小，因此适合经常变化的场景
- 只是改变了display的属性，元素会一直在页面中
应用：
- 渲染的结果根据时间而变化，推荐v-if
- 频繁切换页面推荐v-show
三、列表渲染指令
v-for
应用：
-
当需要将一个数组遍历或枚举一个对象属性的时候循环显示时，就会用列表渲染指定v-for。
-
两种使用场景：
- 遍历多个对象
遍历多个对象，遍历的一定是数组
这里的fruit值的是 {name:'banana'} ...
<div id="app"> <ul> <li v-for='fruit in fruits'>{{fruit.name}}</li> </ul> </div>
new Vue({ el: '#app', data: { fruits:[ {name:'banana'}, {name:'apple'}, {name:'orange'} ] } })
带索引的写法
<div id="app"> <ul> <li v-for='(fruit,index) in fruits'>{{index}}---{{fruit.name}}</li> </ul> </div>
- 遍历一个对象的多个属性
<div id="app"> <ul> <li v-for='value in fruits'>{{value}}</li> </ul> </div>
new Vue({ el: '#app', data: { fruits:{ a:'banana', b:'apple', c:'orange' } } })
带value key index的写法（v--k--i 顺序不可变）
<div id="app"> <ul> <li v-for='(value,key,index) in fruits'>第{{index}}个是{{value}}，键是{{key}}</li> </ul> </div>
new Vue({ el: '#app', data: { fruits:{ a:'banana', b:'apple', c:'orange' } } })
四、数组更新检测
<div id="app"> <div v-for="fruit in arr">{{fruit}}</div> </div>
new Vue({ el: '#app', data: { arr: ['apple', 'banana', 'orange'] } })
以下代码均在此代码基础上修改
- 变异方法
.push() 往数组的末尾添加一个元素，返回的是添加完元素后整个数组的长度
.pop() 将数组的最后一个元素删除，返回的是删除的那个元素
.shift() 将数组的第一个元素删除，返回的是那个删除的元素
.unshift() 在数组的第一个元素位置添加一个元素，返回的是添加完元素后整个数组的长度
.splice()
含三个参数：
第一个参数表示开始操作的位置（索引）
第二个参数表示要操作的长度
第三个参数表示可选参数（可以添加一个元素，但是这个元素会自动跳到数组索引为0的位置上）
.sort() 给数组排序
.reverse() 翻转数组
<div id="app"> <div v-for="fruit in arr">{{fruit}}</div> <button @click='num1'>点击排序</button> <button @click='num2'>点击翻转</button> </div>
var app = new Vue({ el: '#app', data: { arr: ['apple', 'banana', 'pizza'], }, methods: { num1(a, b) { this.arr.sort((a, b) => { return a.length - b.length }) }, num2(){ this.arr.reverse() } } })
- 修改数组的某一项内容
Vue.set(该数组，要修改的那一项的索引，替换的内容)
Vue.set(app.arr,1,"mango")
- 修改数组的长度
.splice(索引) 从哪一项开始删除后面的内容，包括这一项
app.arr.splice(1) //["banana","pizza"] 页面上还有apple
- 重塑数组（不会改变原来的数组，而是返回一个新的数组）
.filter（）过滤
{{matchpp}}
computed: { matchpp() { return this.arr.filter(function(pro) { return pro.match(/pp/) }) } }
.concat() 合并
...... matchpp() { return this.arr.concat('water','juice') //[ "apple", "banana", "pizza", "water", "juice" ] } ......
.slice(开始索引，结束索引) 返回选定的元素
...... matchpp() { return this.arr.slice(1,2) //[ "banana" ] } ......
五、方法与事件
例：点击按钮数字加1
<div id="app"> {{count}} <button @click='add1(1)'>点击加1</button> </div>
new Vue({ el: '#app', data: { count: 0 }, methods: { add1() { this.count += 1 } }, // addNum(count) { // count = count || 1 // this.count += count // } })
*如果方法中带有参数，但是调用时没有加括号，默认传原生事件对象event
修饰符
.stop
阻止单击事件向上冒泡
<div id='app'> <div @click='divClick' style='100px;height:100px;background:skyblue'> <button @click.stop='btnClick'>点击</button> </div> </div>
new Vue({ el: '#app', methods: { divClick() { alert('div被点击了') }, btnClick() { alert('btn被点击了') } } })
.prevent
提交事件并且不重载页面
<div id='app'> <form action="" @submit.prevent='hangle'> <button type='submit'>提交</button> </form> </div>
new Vue({ el: '#app', methods: { hangle() { alert('sub提交') } } })
只是作用在元素本身而非子元素的时候调用
<div id='app'> <div @click.self='divClick' style='100px;height:100px;background:skyblue'> <button @click='btnClick'>点击</button> </div> </div>
.once
<button @click.once='aaa'>这个按钮只能执行一次哦</button>
可以监听键盘事件：
<input @keyup.13 = 'submitMe'> <input @keyup.enter = 'submitMe'>
submitMe(){ alert('enter被按了') }
*vue提供了一些如enter，可以直接使用
六、表单与v-model
v-model作用：用于表单类元素上的双向绑定事件
v-model默认做了两件事
<input type="text" v-model="message"/> //相当于 <input typt="text" :value="message" @input="message = $event">
-
input框、textarea
<div id='app'> <input type="text" v-model='msg'> {{msg}} </div> new Vue({ el:'#app', data:{ msg:'' } })
*所显示的值只依赖于所绑定的数据，不再关心初始化时插入的value
-
单选框
单个单选框，v-bind绑定布尔值（v-model不生效）
多个单选框，使用v-model配合value使用，绑定选中的单选框的value值，绑定的初始值可以随意给
<div id='app'> 苹果<input type="radio" name="checks" value="苹果" v-model="checkname"> <br> 香蕉<input type="radio" name="checks" value="香蕉" v-model="checkname"> <br> 橘子<input type="radio" name="checks" value="橘子" v-model="checkname"> <br> 现在选中的是---{{checkname}} </div> new Vue({ el: '#app', data: { checkname:'' } })
-
复选框
单个复选框
v-bind v-model 均可使用
v-bind单个复选框 <input type="checkbox" v-bind:checked = 'onCheck1'> <br> v-model单个复选框 <input type="checkbox" v-model='onCkeck1'> new Vue({ el: '#app', data: { onCheck1:true } })
多个复选框
使用v-model，绑定一个数组
如果绑定的是字符串，则会转化为true，false，与所有绑定的复选框的checked属性相对应
苹果 <input type="checkbox" value='苹果' v-model='onCheck2'> 香蕉 <input type="checkbox" value='香蕉' v-model='onCheck2'> 橘子 <input type="checkbox" value='橘子' v-model='onCheck2'> {{onCheck2}} new Vue({ el: '#app', data: { onCheck2:[] } })
-
下拉框
v-model一定是绑定在select上
单选下拉框
<select v-model="sele"> <option value="苹果">苹果</option> <option value="香蕉">香蕉</option> <option value="橘子">橘子</option> </select> {{sele}}
new Vue({ el: '#app', data: { sele: [] //sele:'' } })
多选下拉框
按住ctrl键选择
<select v-model="sele" multiple> <option value="苹果">苹果</option> <option value="香蕉">香蕉</option> <option value="橘子">橘子</option> </select> {{sele}} new Vue({ el: '#app', data: { sele: [] } })
总结
如果是单选，初始化给定字符串，因为v-model此时绑定的是字符串或者布尔值。
如果是多选，初始化给定一个数组。
绑定值
单选按钮
只要给单选按钮v-bind一个value值，此时v-model绑定的就是这个value值
<div id="app"> 一个单选框<input type="radio" v-model='picked' v-bind:value='value'> <br> picked---{{picked}} value---{{value}} </div> new Vue({ el: '#app', data: { picked: true, value: '111' } })
复选框
要求：选中和不选中的value不一样
<div id="app"> 复选框 <br> <input type="checkbox" v-model='toggle' :true-value='value1' :false-value='value2'> <br> {{toggle == value1}} -- {{value1}}<br> {{toggle == value2}} -- {{value2}} </div> new Vue({ el: '#app', data: { toggle: true, value1: '被选中', value2: '未被选中' } })
下拉框
在select标签上绑定value值对option没有影响；
在option标签上绑定value值，v-model绑定的就是这个value的值。
修饰符
.lazy
v-model默认是在input输入时实时同步输入框的数据
.lazy可以使其在失去焦点或者敲回车键之后再更新
<div id="app"> <input type="text" v-model='changeSth'> {{changeSth}} <input type="text" v-model.lazy='lazySth'> {{lazySth}} </div> new Vue({ el: '#app', data: { changeSth:'', lazySth:'' } })
.number
输入的内容，只要都是数字内容则实时转化为数字类型
<div id="app"> <input type="text" v-model.number='isNum'> <br> {{isNum}}---{{typeof isNum}} </div> new Vue({ el: '#app', data: { isNum:'' } })
.trim
过滤输入框中的首尾空格
<div id="app"> <input type="text" v-model.trim='trimStr'> <br> {{trimStr.split('').length}} </div> new Vue({ el: '#app', data: { trimStr:'' } })
自定义指令
- 全局自定义指令
<div id="app"> 获取焦点：<input type="text" v-focus> </div>
<script> Vue.directive('focus',{ inserted(el){ el.focus() } }) new Vue({ el: '#app' }) </script>
- 局部自定义指令
new Vue({ el: '#app', directives: { focus: { inserted(el) { el.focus() } } } })