Vue.js实战——内置指令
2018-12-28 09:46
162 查看
- 基本指令
1.1 v-cloak
v-cloak不需要表达式,它会在Vue实例结束编译时从绑定的HTML元素上移除,经常和CSS的display:none;配合使用:
<div id="app" v-cloak> {{message}} </div> <script> var app = new Vue({ el: '#app', data: { message: '这是一段文本' } }) </script>
这时虽然已经加了指令v-cloak,但起始并没有起到任何作用,当网速较慢、Vue.js文件还没加载完成时,在页面上会显示{{message}}的字样,知道Vue创建实例、编译模板时,DOM才会被替换,所以这个过程屏幕是有闪动的。只要加一句CSS就可以解决这个问题了:
[v-cloak] { display: none; }
一般情况下,v-cloak是一个解决初始化慢导致页面闪动的最佳实践,对于简单的项目很实用,但是在具有工程化的项目里,项目的HTML结构只有一个空的div元素,剩余的内容都是由路由取挂载不同的组件完成的,所以不再需要v-vloak。
1.2 v-once
v-once也是一个不需要表达式的指令,作用是定义它的元素或组件只渲染一次,包括元素或组件的所有字节点。首次渲染后,不再随数据的变化重新渲染,将被视为静态内容。
- 列表渲染指令v-for
2.1 基本用法
当需要将一个数组遍历或枚举一个对象循环显示时,就会用到列表渲染指令v-for。它的表达式需结合in来使用,类似item in item的形式。
2.2 数组更新
Vue的核心是数据与视图的双向绑定,当我们修改数组时,Vue会检测到数据变化,所以用v-for渲染的视图也会立即更新。Vue包含了一组观察数组变异的方法,使用它们改变数组也会触发视图更新:
push() pop() shift() unshift() splice() sort() reverse()
使用以上方法会改编被这些方法调用的原始数组,有些方法不会改变原数组,例如:
filter() concat() slice()
它们返回的是一个新数组,在使用这些非变异方法时,可以用新数组来替换原数组。
2.3 过滤与排序
当你不想改变原数组,想通过一个数组的副本来做过滤或排序的显示时,可以使用计算属性来返回过滤或排序后的数组。
- 方法与事件
3.1 基本用法
Vue提供了一个特殊变量$event,用于访问原生DOM事件,例如下面的实例可以阻止链接打开:
<div id="app"> <a href="http://www.apple.com" @click="handleClick('禁止打开', $event)">打开链接</a> </div> <script> var app = new Vue({ el: '#app', methods: { handleClick: function(message, event) { event.preventDefault(); window.alert(message); } } }) </script>
3.2 修饰符
在上例使用的event.preventDefault()也可以用Vue事件的修饰符来实现,在@绑定的事件后加小圆点".",再跟一个后缀来使用修饰符。Vue支持以下修饰符:
.stop .prevent .capture .self .once
具体用法如下:
<!--阻止单体事件冒泡--> <a @click.stop="handle"></a> <!--提交事件不再重载页面--> <form @submit.prevent="handle"></form> <!--修饰符可以串联--> <a @click.stop.prevent="handle"></a> <!--只有修饰符--> <form @submit.prevent></form> <!--添加事件侦听器时使用事件捕获模式--> <div @click.capture="handle">...</div> <!--只当事件在该元素本身(而不是子元素)触发时回调--> <div @click.self="handle">...</div> <!--只触发一次,组件同样适用--> <div @click.once="handle">...</div>
在表单元素上监听键盘事件时,还可以使用按键修饰符,比如按下具体某个键时才调用方法:
<!--只有在keyCode是13时调用vm.submit()--> <input @keyup.13="submit">
也可以自己配置具体按键:
Vue.config.keyCodes.f1 = 112 //全局定义后,就可以使用@keyuo.f1
除了具体的某个keyCode外,Vue还提供了一些快捷名称,以下是全部的别名:
.enter .tab .delete .esc .space .up .down .left .right
这些按键修饰符也可以组合使用,或和鼠标一起配合使用:
.ctrl .alt .shift .meta(Mac下是Command键,Windows下是窗口键)
例如:
<!--Shift + S--> <input @keyup.shift.83="handleSave"> <!--Ctrl + Click--> <div @click.ctrl="handle"></div>
相关文章推荐
- Vue.js-内置指令总结
- Vue.js入门-内置指令v-html
- Vue.js实战第三章笔记
- ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目
- vue.js 实现v-model与{{}}指令方法
- 2019最新vue.js仿锤子商城实战
- 2019最全最新 vue.js仿锤子商城实战
- 【vuejs路由】vuejs 路由基础入门实战操作详细指南
- Vue.js常用指令之循环使用v-for指令教程
- Vue.js实战系列---饿了么(1)基础知识
- Vue.js 系列教程 1:渲染,指令,事件
- Vuejs——(2)Vue生命周期,数据,手动挂载,指令,过滤器
- vuejs-指令详解
- vue.js移动端app实战3:从一个购物车入门vuex
- 说说 Vue.js 中的 v-cloak 指令
- Vue.js 系列教程 1:渲染,指令,事件
- Vue.js 学习(6) -- Vue指令之:列表渲染
- Vue.js学习笔记:在元素 和 template 中使用 v-if 指令
- 学习使用vue.js(二)声明式渲染 和 指令绑定
- Vue.js实战—组件详解