| Vue内置指令 | 您所在的位置：网站首页 › vue标签结构的内置指令 › Vue内置指令 |
Vue内置指令
|
v-cloak
解决页面加载时闪烁出现vue标签或者指令的问题（比如一闪而过的{{message}}） 和 [v-cloak] { display: none } 一起使用 {{msg}}也可以把它写在根元素上 复制代码如果有的时候不起作用,可能是以下两种情况： v-cloak的display属性被层级更高的给覆盖掉了，提高层级 [v-cloak] { display: none !important; } 样式放在了@import引入的css文件中（传统的开发方式） v-cloak的这个样式放在@import 引入的css文件中不起作用，可以放在link引入的css文件里或者内联样式中 v-once只渲染元素和组件一次，可以用于性能优化 v-ifv-if后接的是等号,等号后必须是布尔值 v-if的基本用法 (逻辑与if 语句相同) {{msg}} {{divBorder}} {{divBackground}}这是一个简单的点击按钮，切换用户名密码输入框的实例: HTML: 用户名: 密码: 点击切换 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 遍历多个对象一定是遍历数组 两种使用场景： 遍历多个对象 遍历一个对象的多个属性 遍历多个对象 {{item.name}} 获取索引: {{index}}--{{item.name}} fruits:[ {name: 'apple'}, {name: 'banana'}, {name: 'mango'} ]效果: 
image.png
遍历一个对象的多个属性
遍历一个对象的多个属性:
{{value}}
获取对象的value,key,index
{{index}}--{{key}}:{{value}}
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()方法示例: {{item}} 从大到小排序 data: { arr:['apple','banana','pear'] }, methods: { sortArray:function(){ this.arr.sort(function(a,b){ // 从大到小排序(a-b从小到大) return b.length-a.length }) } }reverse()方法示例: {{item}} 点我翻转数组 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: 只执行一次的方法可以监听键盘事件: ——指定的keyCode vueJS为我们提供了： .enter .tab .delete ...... |
【本文地址】