05指令

指令就是 vue 提供给我们的一些快捷操作的代码。

# v-html 渲染标签

//渲染标签
<p v-html="msg"></p>

new Vue({
  el:"##app",
  data:{
    msg:"<a>内容</a>"
  }
})
<div id="app">
  <div v-html="msg"></div>
</div>

new Vue({
  el:"##app",
  data:{
    msg:`
      <div>
        <ul>
          <li>1</li>
          <li>2</li>
        </ul>
      </div>
    `
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

解说

后台管理系统(B端)   商品的增加、减少、更新
    存后端（接口、服务器、数据库、）后端
    后台界面    后端/前端
客户端界面（c端）前端

1
2
3
4

记得引入哦：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

练习 🚀

<div id="app">
    <div V-html="element"></div>
</div>
<script>1
    new Vue({
        el: "#app",
        data: {
            element: "<p></P>",
        },
    })
</script>

1
2
3
4
5
6
7
8
9
10
11

new Vue({
  el: "#app",
  data: {
    element: `
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
                `,
  },
});

1
2
3
4
5
6
7
8
9
10
11

# v-bind 绑定属性

<div v-bind:class="msg"></div>
//简写
<div :class="msg"></div>

new Vue({
  el:"##app",
  data:{
    msg:"a"
  }
})
<div :class="bool ? 'a' : 'b'"></div>

new Vue({
  el:"##app",
  data:{
    bool:true
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

练习 💢

<div id="app">3
	//<div V-bind:class="className"></div>
	//<div V-bind:class="bool ? 'a' : 'b' "></div>
        //简写
    <div :class="bool ? 'a' :  'b'"></div>
</div>

<script>
    new Vue({
        el: " #app",
        data: {
            className: "a",
            bool: false,
        },
    })
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# v-if 是否渲染标签

显示与消失是整个原生显示和销毁。

<div v-if="bool">内容</div>

new Vue({
  el:"##app",
  data:{
    bool:false
  }
})
<div v-if="bool">内容1</div>
<div v-else>内容2</div>

new Vue({
  el:"##app",
  data:{
    bool:false
  }
})
<div v-if="msg===1">内容1</div>
<div v-else-if="msg===2">内容2</div>
<div v-else>内容3</div>

new Vue({
    el:"##app",
    data:{
      msg:3
    }
  })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# v-show 是否显示标签

v-show 的切换开销会更小，而 v-if 会更多

<div v-show="bool">内容1</div>//在标签上添加display:none
<div v-if="bool">内容1</div>//整个标签消失

new Vue({
  el:"##app",
  data:{
    bool:false
  }
})

1
2
3
4
5
6
7
8
9

解说 🚀

重会与回流
样式对元素的设置的计算

计算消耗
v-if更大
v-show更小

反复渲染的情况下，建议用v-show
如果是少量渲染的情况下，建议用v-if

插件：
vetur——vue2
volar——Vue3

1
2
3
4
5
6
7
8
9
10
11
12
13

[success] 必记

v-if:首次渲染开销更小，反复渲染开销大

v-show:首次渲染开销更大，反复渲染开销小

v-if 与 v-show

<div id="app">
    <div v-if="bool">内容</div> //这种直接在元素中消失界面也消失
    <div v-show="bool">内容</div> //这种元素还在但是界面是看不见了 ✨

</div>
<script>
    new Vue({
        el: " #app",
        data: {
            bool: false,
        },
    })

</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

练习 💢

<div id="app">
    <div v-if="num===1">内容1</div>
    <div v-else-if="num===2">内容2</div>
    <div v-else>内容3</div>
</div>
<script>
    new Vue({
        el: " #app",
        data: {
            num: 3, //内容3
        },
    })
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

# v-for 迭代数组和对象

# 1、迭代数组

//item是数组成员，idx是索引值
<div v-for="(item,idx) of arr">{{idx}}{{item}}</div>

new Vue({
  el:"##app",
  data:{
    arr:["小明","小红","小黄"]
  }
})
<div v-for="items of arr">
  <div v-for="item of items.cities">
    {{item.cityName}}
  </div>
</div>

new Vue({
  el: "##app",
  data: {
    arr: [
      {
        countryName: "中国",
        cities: [
          { cityName: "广州" },
          { cityName: "北京" },
          { cityName: "上海" },
        ],
      },
      {
        countryName: "美国",
        cities: [
          { cityName: "纽约" },
          { cityName: "华盛顿" },
          { cityName: "洛杉矶" },
        ],
      },
      {
        countryName: "日本",
        cities: [
          { cityName: "东京" },
          { cityName: "北海道" },
          { cityName: "大阪" },
        ],
      },
    ],
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

# 2、迭代对象

<div v-for="(val,key,idx) of obj">
  {{ idx }}
  {{ key }}
  {{ val }}
</div>;

new Vue({
  el: "##app",
  data: {
    obj: {
      name: "小明",
      age: 18,
      sex: "男",
    },
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 3、v-for 和 v-if 的优先级问题

//vue2 v-for的权重高于v-if
//vue3 反过来
//所以不能把v-for和v-if写在同一个元素上

<div v-for="item of arr">
  <div v-if="item.bool">{{item.name}}</div>
</div>

new Vue({
    el: "##app",
    data: {
      arr: [
        { bool: true, name: "小明" },
        { bool: false, name: "小红" },
        { bool: true, name: "小黄" },
      ],
    },
  });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

v-for

<div id="app">
    <!- idx:索引值放在前面就出现在前 --
    <div v-for="(item,idx) of arr">{{idx}}{{item}}</div>
    <div v-for="(val,key,idx) of obj">{{idx}}{{val}}{{key}}</div>
</div>
<script>
    new Vue({
        el: " #app",
        data: {
            arr: ["张三", "李四", "老王"],
            obj: {
                name: "张三",
                age: "李四",
                sex: "男"
            },
        },
    })
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

练习

<div id="app">
    <div v-for="items in arr">
        <div v-for="item of items.cities">{{ item.cityName }}</div>
        {{ item.countryName }}
    </div>
</div>

<script>
new Vue({
    el: "#app",
    data: {
        arr: [
            {
                countryName: "中国",
                cities: [
                    { cityName: "广州" },
                    { cityName: "深圳" },
                    { cityName: "上海" },
                ],
            },
            {
                countryName: "美国",
                cities: [
                    { cityName: "华盛顿" },
                    { cityName: "纽约" },
                    { cityName: "洛杉矶" },
                ],
            },
            {
                countryName: "日本",
                cities: [
                    { cityName: "东京" },
                    { cityName: "大阪" },
                    { cityName: "北海道" },
                ],
            },
        ]
    }
})
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

# v-on 事件

<div v-on:click="fn">内容</div>

//简写。事件对象是$event
<div @click="fn($event)">内容</div>

new Vue({
  el: "##app",
  data: {

  },
  methods: {//存放方法的地方
    fn(e){
      console.log(e.target)
    }
  },
});
<div v-for="(item,idx) of arr" @click="fn(item,idx)">
  {{item}}
</div>

new Vue({
  el: "##app",
  data: {
    arr:[1,2,3,4,5]
  },
  methods: {
    fn(item,idx){
      console.log(idx)
    }
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

练习@click

<div id="app">
    <button v-on:click="fn">按钮</button>
    <button @click="fn($event)">按钮</button>
</div>
<script>
    new Vue({
        el: "#app",
        data: {},
        methods: {
            //存放方法
            fn(e) {
                console.log(e);
            },
        },
    })
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

运用@click

<div id="app">
    <div v-for="item of arr" @click="fn(item)">{{item}}</div>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            arr: ["张三", "李四", "老王"],
        },
        methods: {
            //存放方法
            fn(item) {
                console.log(item);
            },
        },
    })
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# v-model 双向数据绑定

对表单元素进行双向的数据绑定

<input type="text" v-model="msg">
{{msg}}

new Vue({
  el: "##app",
  data: {
    msg:"123"
  }
});

1
2
3
4
5
6
7
8
9

v-mode 其实是一个语法糖，等价于下面的代码

<input type="text" @input="fn($event)">
{{msg}}

new Vue({
  el: "##app",
  data: {
    msg:""
  },
  methods: {
    fn(e){
      this.msg = e.target.value
    }
  },
});
//单选
<input type="radio" name="sex" value="男" v-model="sex">男
<input type="radio" name="sex" value="女" v-model="sex">女
{{sex}}

new Vue({
  el: "##app",
  data: {
    sex:"男"
  }
});
<input type="checkbox" name="hobby" value="钓鱼" v-model="hobby">钓鱼
<input type="checkbox" name="hobby" value="吃鱼" v-model="hobby">吃鱼
<input type="checkbox" name="hobby" value="杀鱼" v-model="hobby">杀鱼
{{hobby}}

new Vue({
  el: "##app",
  data: {
    hobby:[]
  }
});
<select name="city" v-model="city">
  <option value="广州">广州</option>
  <option value="深圳">深圳</option>
  <option value="东莞">东莞</option>
</select>
{{city}}

new Vue({
  el: "##app",
  data: {
    city:""
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

面试题问

✨ 双向数据绑定原理，指的是 data 在标签上面的渲染

而不是 v-model 他只是个指令而已

<div id="app">
    <form>
        <input type="text" v-model="msg">
        {{msg}}
    </form>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "",
        },

    })
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

语法糖

<div id="app">
    <form>
        <input type="text" @input="fn($event)">
        {{msg}}
    </form>
</div>
<script>
    //语法糖
    new Vue({
        el: "#app",
        data: {
            msg: "",
        },
        methods: {
            fn(e) {
                this.msg = e.target.value
            }
        },
    })
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 指令的参数和修饰符

//:click是参数
//.prevent是修饰符
<button v-on:click.prevent="fn">提交</button>

1
2
3

编辑

上次更新: 2023/08/06, 00:38:41

← 04生命周期 06方法-计算属性-监听器→