Vue Vue常用的一些指令

Vue指令

Vue指令指的是以v-开头的特殊语法。

1. 内容绑定，事件绑定
2. 显示切换，属性绑定
3. 列表循环，表单元素绑定

序号	指令	说明
1	v-text	设置标签的内容（只解析文本）
2	v-html	设置元素的innerHTML
3	v-on	监听 DOM 事件，为元素绑定事件
4	v-show	根据表达式的真假，切换元素的显示和隐藏
5	v-if	根据表达式的真假，切换元素的显示和隐藏
6	v-bind	响应式更新设置HTML属性
7	v-for	根据数据响应式生成列表数据
8	v-model	便捷地获取和设置表单元素的值，实现双向数据绑定

1 v-text

• 设置标签的内容（只解析文本）。

• 默认写法替换全部内容，差值表达式{{}}可以替换指定内容。

• 内部支持写表达式。

  <div id="box">
      <h2 v-text="msg + '!'">123</h2>		<!--hello world!-->
      <h2>{{msg + '!'}}123</h2>			<!--hello world!123-->
  </div>
  <script>
      // 定义VUe对象
      const app = new Vue({
          el:'#box',
          data:{
              msg:'hello world',
          },
      });
  </script>
  

2 v-html

• 作用：设置元素的innerHTML。
• 若内容中有html结构会被解析为标签。
• 内容按普通html插入，不会作为vue模板编译。
• 不能使用v-html来复合局部模板。因为vue不是基于字符串的模板引擎。
• 会忽略解析属性值中的数据绑定。
• v-text无论内容是什么，都只会解析文本。
• Vue.set(app.属性,‘aa’,true)拦截设置。

<div id="box">
    <p v-html="con1"></p>		//文本内容
    <p v-text="con1"></p>		//文本内容
    <p v-hmtl="con2"></p>		//超链接
</div>
<script>
    // 定义VUe对象
    const app = new Vue({
        el:'#box',
        data:{
            con1:'文本内容',
            con2:'<a href="#">超链接</a>',
        },
    });
</script>

3 v-on

• 作用：用于监听 DOM 事件，为元素绑定事件。
• 参数是监听的事件名，事件名不需加on。
• 指令可以简写为@。
• 绑定的方法定义在methods属性中。
• 方法内部可以通过this关键字访问定义在data内的数据。

<div id="box">
    //方式一：v-on:
    <input type="button" value="事件绑定" v-on:click="doIt">		//点击事件
    //方式二：@
    <input type="button" value="事件绑定" @click="doIt">			//点击事件
    <button @click="changeFood">{{food}}</button>			//西瓜 苹果		
</div>
<script>
    // 定义VUe对象
    const app = new Vue({
        el:'#box',
        data:{
            food:'西瓜',
        }
        methods:{
            doIt:function(){
                console.log('点击事件');
            },
            changeFood:function(){
              	this.food='苹果';
            },
        },
    });
</script>

• v-on补充：

  • 传递自定义参数，事件修饰符。

  • 事件绑定的方法写成函数调用的方式，可以传参。

  • 方法内要有形参来接收实参。

  • 事件后面跟上 .修饰符 可以对事件进行限制。例如：.enter 限制为回车触发。

  • 事件修饰符有多种。

    <div id="box">
        <button @click="changeFood('苹果','梨')"></button>	<!--吃水果 苹果 梨-->
        <input type="text" @click.enter='say'> <!--按回车键触发 ==> 键盘点击事件-->
    </div>
    <script>
        // 定义VUe对象
        const app = new Vue({
            el:'#box',
            methods:{
                say:function(){
                    console.log('键盘点击事件');
                },
                changeFood:function(v1,v2){
                  	console.log('吃水果');
                    console.log(v1);
                    console.log(v2);
                },
            },
        });
    </script>
    

4 v-show

• 作用：根据表达式的真假，切换元素的显示和隐藏。
• 原理：修改元素的display属性。
• 指令后面的内容都会被解析为布尔值。
• 值为true显示，值为false隐藏。
• 对应元素的显示状态会随数据的改变而同步更新。
• v-show 不支持 <template> 元素，也不支持 v-else。

<div id="box">
    <input type="button" value="事件绑定" v-show:'true'>	//显示
    <input type="button" value="事件绑定" v-show:'false'>	//隐藏	
</div>
<script>
    // 定义VUe对象
    const app = new Vue({
        el:'#box',
    });
</script>

5 v-if

• 作用：根据表达式真假，切换元素的显示和隐藏。
• 原理：本质是操纵DOM元素。
• 值为true，元素存在于DOM树中；值为false，元素从DOM树中删除。
• 特点：v-if切换消耗性能较大。因此：频繁的切换用v-show；反之使用v-if。

v-show VS v-if区别

• 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

6 v-bind

• 作用：用来响应地更新设置 HTML 属性。
• 简写：只保留冒号，如v-bind:src=“name” === :src=“name”。
• 动态地删除类class，一般使用对象的方式。

<div id="box">
    <img v-bind:src="imgName">
</div>
<script>
    // 定义VUe对象
    const app = new Vue({
        el:'#box',
        data:{
            imgName:'./images/text.png'
        }
    });
</script>

• :key的作用

  1. 概念：vue是通过比对组件自身新旧vdom进行更新的。
  2. 作用：key的作用主要是更新组件时判断两个节点是否相同。相同就复用，不相同就删除旧的创建新的，为了高效的更新虚拟DOM。
  3. vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们。
  4. 虚拟DOM的Diff算法：

  • vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。

  • vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设：

    1. 两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。
    2. 同一层级的一组节点，他们可以通过唯一的id进行区分。

  • 基于此两点假设，使得虚拟DOM的Diff算法复杂度从O(n^3)降到了O(n)。

  • 当页面的数据发生变化时，Diff算法只会比较同一层级的节点。

  • 若节点类型不同，直接干掉前面的节点，再创建并插入新节点，不再比较此节点的子节点。

  • 若节点类型相同，则会重新设置该节点的属性，从而实现节点的更新。

  5. 不要用 index 作为 key。因为index永远是连续的。应该用id。
  6. 没有id怎么办？
  • 创建一个 id() 函数，每次调用自增一。
  • 或者使用 guid 库或者 uuid() 库。
  • 最好使用数据库中的 id。
  7. 菜鸟教程解析
     • key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
     • 有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

7 v-for

• 作用：根据数据响应式生成列表结构。
• 语法：(data,index) in 数据组
  • data表示每一项数据。
  • index表示索引（从0开始）。

<div id="box">
 	<ol>
        <li v-for="(data,index) in arr">{{index}}{{data}}</li>
        <!--
		输出：
		0第一项
		1第二项
		2第三项
		-->
    </ol>
</div>
<script>
    // 定义VUe对象
    const app = new Vue({
        el:'#box',
        arr:['第一项','第二项','第三项'],
    });
</script>

8 v-model

• 作用：便捷地获取和设置表单元素的值，实现双向数据绑定。
• 自动更新。
• 绑定的数据和表单数据相关联。

<div id="box">
    <h2>{{msg}}</h2>
 	<input type="text" v-model="msg" @click.enter="getMsg">
    <!--
	文本框输入数据，h2标签的文本内容随机跟随改变为：文本框内的数据
	光标在文本框内，按下回车键，弹出提示框为：文本框内的数据
	-->
</div>
<script>
    // 定义VUe对象
    const app = new Vue({
        el:'#box',
        msg:'双向数据绑定示例',
        methods:{
            getMsg:function(){
                alert(this.msg);
            }
        }
    });
</script>