Vue指令用法1

Vue指令用法1

先简单介绍Vue的特点：

• 1、是一套构建用户界面的框架，有提过双向数据绑定的功能，实现前后端的相互通信。
• 2、只关注视图层，也就是说，通过框架中所提供的指令，使得前端只需要关心数据的业务逻辑，不用关心dom是如何渲染的。

Vue指令及其试用场景：

一、适用于文本的指令

• v-text：使用该指令用来显示文本内容，但不会解析html标签，即把标签当做文本显示出来。

• v-html：能够解析html标签，把文本内容渲染成指定的样式之后再显示。

• v-cloak：(不常用)，主要用来解决文本显示前闪烁的问题。场景一般为：当我们设置某个块的淡入淡出的速度很慢的时候，在页面显示内容时，会先显示出对应的html标签以及文本内容，然后在慢慢的闪烁跳转显示为html标签被解析后，内容被渲染之后的效果。

二、属性绑定和数据绑定指令

• v-bind：用来绑定属性。缩写是冒号。
• v-model：实现数据的双向绑定，v-model可以将M中的数据渲染到V中，也能将V中的数据绑定到M层。但只能运用在表单元素中(text、checkbox、radio、button等)

三、数组循环指令

• v-for：用来实现对数组的循环遍历，通过键值对来实现查找下标和下标对应的值。

四、事件绑定机制*

• v-on：可简写为@，这类指令适用于按钮的点击事件.类似于jQuery中$(“button”).click(function(){})。

<input type="button" @click="myFunction"> 
 // 该函数调用不需要传参
<input type="button" v-on:click="myFunction()">  
// 在methods中定义方法时，需要传递参数