vue入门——4内置指令介绍

vue的指令带有v-前缀。

 

一、基本指令v-cloak、v-once；二、条件渲染指令；三、列表渲染指令；四、方法与事件；五、v-model指令

一、基本指令

v-cloak在vue实例结束编译的时候从绑定的html元素上移除。

经常和css的display:none配合使用。如下图，当网速慢，vue文件还没有加载完成时，页面会显示{msg}的字样，直到vue创建实例、编译模板时，dom才会被替换，这时屏幕可能会有闪动。用v-cloak加一句display:none便可解决。

一般情况下，v-cloak是解决页面初始化慢闪动的最佳方案。对于简单的项目很实用。但在项目页面通过Vue-router路由、配合webpack打包实现下，页面只有一个空的div元素，剩余的内容由页面不同路由挂载vue组件渲染，便不需要使用v-cloak。

v-once作用是定义它的元素或组件只渲染一次。包括元素或组件的所有节点，不会随着数据变化而重新渲染。使之纯静态化处理。

 

 

二、条件渲染指令

v-show只是简单的css的display切换，元素是渲染在页面的。

v-if和v-else组合是完全不会加载不要的代码部分的。

v-if适用于不频繁切换的，否则切换开销很大。

三、列表渲染指令

v-for循环遍历，结合in使用。index为对应索引。

v-for的核心是数据与视图的双向绑定，所以数据展示会随数据变化而动态展示。push、pop等方法结合使用。

四、方法与事件

vue提供的$event用于访问原生事件。可当参数传入js中。

vue的修饰符可串联使用。.stop阻止事件冒泡，.prevent提交事件不再重载页面，.self只当事件在该元素本身时触发回调。.once只触发一次。

五、v-model指令

v-model表单控件承载网页数据的录入和交互。可用于单选、多选、下拉选择、输入框等。可进行数据录入、校验、提交等操作。可在表单元素上双向绑定数据。

如下图单选按钮，当绑定的值是动态的时候，可用v-model结合v-bind使用。

v-model也有修饰符。用于控制数据交互的时机。