vue的常用指令之 其他常用指令

Vue的其他常用指令

---

2. v-text和v-html。

使用：写在头标签中（插值表达式{{ }} 和其功能相似，但写在双标签中）。

作用：相当于原生的 innerText 和 innerHTML 。

little-demo：

<div id="app">
    <h1 v-text="msg"></h1>
	<p v-html="htmlstr"></p>
</div>

<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            msg: "我是一个h1",
            htmlstr: "<h1>我也是一个h1</h1>"
        }
    });
</script>

3. v-bind动态绑定数据(单向绑定M=>V)

   使用：

   ​ 1）写在头标签中 v-bind: 属性=‘值’。

   ​ 2）使用缩写 ：属性名

   作用：（单向）动态绑定数据，可用于任意元素，主要用于设置属性和操作样式。

little-demo：

 <style>
     .red {
         color: red;
     }
</style>

<div id="app">
    //给标签设置title属性
    <h1 v-bind:title="name">我是一个h1</h1>
	//给标签添加样式
	<h1 v-bind:class="{red:isRed}">我是一个h1</h1>
	//简写:
	<h1 :class="{red:isRed}">我也是一个h1</h1>
</div>

<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            isRed: true,
            name: "哈哈"
        }
    });
</script>

v-bind和v-model的区别

• v-bind 是单向绑定数据，而v-model是双向绑定数据；
• v-bind 可以作用于任何元素，而v-model 一般用于表单元素。

4. v-on注册事件

使用：

​ 1）注册： v-on：事件名=‘函数名（参数）’；

​ 2）函数写在methods里面，methods里面存放的是方法，而data中存放的是属性和数据。

​ 3）使用缩写：@事件名=‘函数名（参数）’。

事件传参注意点：

​ 1）如果调用时，不想写参数，又想拿到事件对象，在形参中写一个e 就可以拿到事件对象。

​ 2）如果在调用时，传了参数，但是还想拿到事件对象，Vue保留了一个关键字$event，需要在调用时传参@click=‘fn（$event，num）’，

声明时fn（e，num）即可。

little-demo

<div id="app">
      <!-- 实现点击按钮,数字++ -->
      <!-- <button v-on:click="fn">{{ num }}</button> -->
      <button @click="fn">{{ num }}</button>
      <button @click="fn1($event,num2)">{{ num }}</button>
</div>

<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            num: 100,
            num2: 4
        },
        methods: {
            fn(e) {
                this.num++;
                console.log(e);
            },
            fn1(e, num2) {
                // console.log(res);
                // console.log(res + this.num);
                this.num = num2 + this.num;
                console.log(e);
            }
        }
    });
</script>

5. v-for 遍历数据（数组），根据数据里的每一项动态创建对应（指令所在的）标签

使用：写在头标签中，v-for=‘遍历的对象’ / v-for=’[ 数组]’ / v-for=‘i in 100’

little-demo：

<div id="app">
      <p v-for="(item,index) in list">{{ item.name }}: <input /></p>
</div>

<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            list: [
                { id: 1, name: "zs", age: 18 },
                { id: 2, name: "ls", age: 28 },
                { id: 3, name: "ww", age: 38 }
            ]
        }
    });
</script>

现象：在上面的案例中，在id=2的文本框中输入数据，然后在数组的最前面添加一项，发现在id=2 中写的数据跑到id=1 中去了。

原因：就地复用策略。默认是根据索引去追踪数据的。

解决：绑定一个key属性，告诉vue，使用key指定的数据去追踪数据,推荐使用id

<p v-for="(item,index) in list" :key="item.id"></p>

6. v-if 和 v-show 切换元素的显示和隐藏

   语法： v-if='布尔值' v-show='布尔值'

   相同点： 都可以切换元素的显示与隐藏；

   不同点：实现的方式不同

   ​ v-if是通过不断的创建节点和删除节点来完成元素的显示与隐藏的;

   ​ v-show是通过切换元素的 display:block/none 值来完成元素的显示与隐藏的;

   使用场景：

   ​ 如果切换元素显示和隐藏 频繁使用v-show，如果不频繁使用 v-if 。

   ​ 大多数情况下，v-if都是配合 v-else(两种情况) 和v-else-if(三种及三种以上)来使用的 =>条件渲染

   <div id="app">
         <h1 v-if="isTrue">我是h1</h1>
         <h1 v-show="isTrue">我也是h1</h1>
   
         <p v-if="num>18 && num < 20">我是一个p</p>
         <p v-else-if="num<=18">我也是一个p</p>
         <p v-else>我是一个大p</p>
   </div>
   
   <script src="./vue.js"></script>
   <script>
       const vm = new Vue({
           el: "#app",
           data: {
               isTrue: true,
               //通过改变num的值来判断哪个p元素该被创建
               num: 38
           }
       });
   </script>
   

7. v-once 该标签的内容只会解析一次,以后无论怎么变化,都不会再变化

8. v-pre 告诉vue 该标签不需要解析

9. v-cloak遮盖

   ​ 现象:每次刷新页面的时候, 会发现页面闪了一下,可以看到{{ }},

   ​ 这是因为Vue解析指令需要一定的时间,所以会出现这种现象.

   ​ 使用遮盖: 当出现{{}}时,使用遮盖; 当解析完毕,去掉遮盖.

   ​ 使用:

   ​ 1）给需要添加遮盖的元素 添加一个指令 v-cloak；

   ​ 2）通过属性选择器，给其设置样式 [v-cloak]{display：none}

   ​ 3）当添加指令的标签解析完后，vue会自动删除该指令。

   ​ 4）如果需要遮盖的东西太多的话，可以给其父元素添加该指令

<style>
      [v-cloak] {
        display: none;
      }
</style>

<div id="app" v-cloak>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
      <p>{{ name }}</p>
     
</div>

<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            name: "我是一个p"
        }
    });
</script>