Vue内置指令
v-cloak
解决页面加载时闪烁出现vue标签或者指令的问题（比如一闪而过的{{message}}）
和 [v-cloak] { display: none } 一起使用
<div v-cloak>{{msg}}</div>
也可以把它写在根元素上
<div id="app" v-cloak></div>复制代码
如果有的时候不起作用,可能是以下两种情况：
-
v-cloak的display属性被层级更高的给覆盖掉了，提高层级
[v-cloak] { display: none !important; } -
样式放在了@import引入的css文件中（传统的开发方式） v-cloak的这个样式放在@import 引入的css文件中不起作用，可以放在link引入的css文件里或者内联样式中
v-once
只渲染元素和组件一次，可以用于性能优化
v-if
v-if后接的是等号,等号后必须是布尔值
v-if的基本用法 (逻辑与if 语句相同)
<div v-if="true">{{msg}}</div>
<div v-else-if="false">{{divBorder}}</div>
<div v-else>{{divBackground}}</div>
这是一个简单的点击按钮，切换用户名密码输入框的实例:
HTML:
<div v-if="type==='name'">
用户名: <input type="text" placeholder="请输入用户名" key="name">
</div>
<div v-if="type==='password'">
密码: <input type="text" placeholder="请输入密码" key="password">
</div>
<button v-on:click="toggleType">点击切换</button>
JS:
var app = new Vue({
el: '#app',
data: {
type: 'name'
},
methods: {
toggleType: function () {
this.type = (this.type === 'name' ? "password" : "name")
}
}
})
我在输入框后面加入key值,这是因为v-if存在弊端
Vue 在渲染元素时 ，出于效率考虑，会尽可能地复用已有的元素而非重新渲染， 因此会出现乌龙 ，只会渲染变化的元素，也就是说，input元素被复用了 (input输入框的值也会出现在password输入框内。)
解决方法：加key，唯一，提供key值可以来决定是否复用该元素
v-show
只改变了css属性display
v-if和v-show的比较：
v-if: 实时渲染 ,页面显示就渲染，不显示就移除
v-show: v-show的元素永远存在也页面中，只是改变了css的display的属性
v-for
当需要将一个数组遍历或枚举一个对象属性循环显示时，就会用到列表渲染指令v-for。
v-for的用法: v-for一定是卸载要遍历的元素上,v-for后接等号,类似于item in items
遍历多个对象一定是遍历数组
两种使用场景：
-
遍历多个对象
-
遍历一个对象的多个属性
遍历多个对象
<li v-for="item in fruits">{{item.name}}</li>
获取索引:
<br><li v-for="(item,index) in fruits">{{index}}--{{item.name}}</li>
fruits:[
{name: 'apple'},
{name: 'banana'},
{name: 'mango'}
]
效果:
image.png
遍历一个对象的多个属性
遍历一个对象的多个属性:
<li v-for="value in fruits">{{value}}</li>
获取对象的value,key,index
<li v-for="(value,key,index) in fruits">{{index}}--{{key}}:{{value}}</li>
fruits:{
fruit1: 'apple',
fruit2: 'banana',
fruit3: 'mango'
}
效果:
image.png
数组更新，过滤与排序
改变数组的一系列方法：
- push() 在末尾添加元素 ，返回添加元素后数组长度
app.arr.push('pear')
- pop() 将数组的最后一个元素移除，返回被删除的元素
app.arr.pop()
- shift() 删除数组的第一个元素 ，返回被删除的元素
app.arr.shift()
- unshift（）：在数组的第一个元素位置添加一个元素 ，返回添加元素后数组长度
app.arr.unshift('pear')
-
splice() ：可以添加或者删除
-
sort（）：排序
-
reverse() 翻转
-
filter() 过滤器
splice()方法:
三个参数：
- 第一个参数 表示开始操作的位置
- 第二个参数表示：要操作的长度
- 第三个为可选参数
app.arr.splice(0,3) // 从第零个元素开始,删除三个元素
app.arr.splice(0,1,'tom') // 从第零个元素开始,删除1个元素,在改位置添加一个'tom'
app.arr.splice(1,0,'tom','jerry') // 从第1个元素开始,删除0个元素,在该位置插入'tom'，'jerry'
sort()方法示例:
<li v-for="item in arr">{{item}}</li>
<button @click="sortArray">从大到小排序</button>
data: {
arr:['apple','banana','pear']
},
methods: {
sortArray:function(){
this.arr.sort(function(a,b){
// 从大到小排序(a-b从小到大) return b.length-a.length
})
}
}
reverse()方法示例:
<li v-for="item in arr">{{item}}</li>
<button @click="reverse">点我翻转数组</button>
data: {
arr:['apple','banana','pear']
},
methods: {
reverse:function(){
this.arr.reverse()
}
}
两个数组变动vue检测不到:
- 改变数组的指定项
- 改变数组长度
解决方法:
改变指定项
Vue.set(app.arr,1,”car”)
// Vue.set()第一个参数要改变的对象, 第二个参数是index或者key, 第三个参数是替换的值
改变数组长度 app.arr.splice(1)
filter() 过滤
含有pp字符串的是: {{matchpp}} // 含有pp字符串的是: [ "apple" ]
data: {
arr:['apple','banana','pear']
},
computed:{
matchpp:function(){
return this.arr.filter(function(item){
return item.match(/pp/)
})
}
}
方法和事件
v-on绑定的事件类似于原生 的onclick等写法
methods:{ handle:function (count) { count = count || 1; this.count += count; } }
如果方法中带有参数，但是你没有加括号，默认传原生事件对象event
修饰符
在vue中传入event对象用 $event
向上冒泡
- stop:阻止单击事件向上冒泡
- prevent::提交事件并且不重载页面
- self:只是作用在元素本身而非子元素的时候调用
- once: 只执行一次的方法
可以监听键盘事件:
<input @keyup.13 ="submitMe"> ——指定的keyCode
vueJS为我们提供了：
.enter
.tab
.delete
......
