vue中V-指令（部分）（简明笔记）

一、v-once

该指令后面不需要跟任何表达式

改指令表示元素和组件值渲染一次，不会随着数据的概念而改变

eg：

<div id="a">

  <h1 v-once>{{message}}</h2>  

</div>

<script>

  const a = new Vue(){

    el:'#a',

    data:{

      message:"哈哈哈哈哈！"

    }

  }

</script>

二、v-html

改指令后面跟一个string类型字符串，而v-html会将string中的html代码解析出来，并且在网页上进行渲染

eg：

<div id="a">

  <h1 v-html="url"></h2>  

</div>

<script>

  const a = new Vue(){

    el:'#a',

    data:{

      message:"哈哈哈哈哈！",

        url:"<a href='https://www.taobao.com'>淘宝官网</a>"

    }

  }

</script>

三、v-text

该指令通常情况下接受一个string类型，然后将数据显示在界面中（注：和Mustache比较相似）

eg：

<div id="a">

  <h1>{{message}}</h2>  

  <h1 v-text="message"></h2>  

</div>

<script>

  const a = new Vue(){

    el:'#a',

    data:{

      message:"哈哈哈哈哈！"

    }

  }

</script>

四、v-pre

改指令用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法

五、v-cloak

可在浏览器中直接显示Mustache标签

六、v-bind

可动态绑定页面中元素的属性

（一）动态绑定class

两种方式：对象语法和数组语法

对象语法用法：

用法一：直接通过{ }绑定一个类

<p :class="{'key':value}">Hello World</p>

用法二：也可通过判断，传入多个值

<p :class="{'key1':value1,'key2',value2,'key3',value3}">Hello World</p>

用法三：和其他普通类同时存在时，并不冲突

<p class='class' :class="{'key':value}">Hello World</p>

用法四：若使用的过多，可以直接直接放在一个methods或者computed中

<p class='class' :class="classes">Hello World</p>

数组语法：直接放在数组中

<p :class="[class1,class2,class3]">Hello World</p>

（二）绑定style

<p :style="[style1,style2,style3]">Hello World</p>

七、v-on

绑定事件监听器

语法糖：@

（一）v-on参数

在通过methods中定义方法，供@click调用时，要注意参数问题

1、若不需参数，则方法后的{}可以省略不添加

注：若方法本身有一个参数，会默认将原生事件event参数传进去

没有传入参数为undefined

2、若需同时传入某个参数，同时需要event时，可以通过$event传入事件

（二）v-on修饰符

vue提供修饰符用于处理一些事件

• . stop  调用event.stopPropagation（），阻止事件冒泡
• . prevent  调用event.preventDefault（），阻止默认事件
• . native  监听组件根元素的原生事件
• . once  只触发一次回调

八、v-if、v-else-if、v-else

这三个指令与JavaScript中if、else-if、else类似，可一同理解

可根据表达式的值在DOM中渲染元素和事件

原理：

当指令的值为false时，对应元素及其子元素不会被渲染，即不会出现在在页面中

九、v-show

用法类似v-if，用于决定元素和事件是否被渲染

原理：

当v-show条件为false，会将元素的display属性设置为none

十、v-for

用于遍历数组在页面上渲染

语法类似JavaScript中的for循环

（一）不需要索引值

语法：

<ul>

  <li v-for="item in items">{{item}}</li>  

</ul>

（二）需要索引值

语法：

<ul>

  <li v-for="(item、index) in items">{{item}}{{index}}</li>  

</ul>

十一、v-model

用于实现表单元素和数据之间的双向绑定

个人理解：

input中的v-model绑定了message，会将实时传入的数据内容传递给message，message会发生改变，Mustache语法将message的值插入到DOM中，DOM发生响应改变，即实现双向绑定

<div>

    <type="text" v-model="message">

    <p>{{message}}</p>//显示改变的内容

</div>

其实v-model是一个语法糖，它包括两个操作

1、v-bind绑定一个value属性

2、v-on指令给当前元素绑定input事件

//上述代码相当于以下代码

<input type="text" v-bind:value="message" v-on:input="message=$event.target.value">

v-model修饰符

• lazy：取消实时绑定，在失去焦点的时候

  <input type="text" v-model.lazy="message">

   

• number：自动解析输入的为number类型

  <input type="text" v-model.number="message">

   

• trim：剥除字符串两边的空格

  <input type="text" v-model.trim="message"