Vue学习笔记-03：指令

银河系小白

已于 2023-03-03 15:11:38 修改

阅读量130

点赞数

分类专栏： Vue学习笔记文章标签： vue.js 学习 javascript

于 2023-02-22 17:58:08 首次发布

本文链接：https://blog.csdn.net/fukun125/article/details/129167607

版权

Vue学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue 的指令

指令（Directives）是Vue提供的模板语法，用于辅助开发者渲染页面的基本结构。Vue中的指令可分为6大类：

内容渲染指令；
属性绑定指令；
事件绑定指令；
双向绑定指令；
条件渲染指令；
列表渲然指令；

内容渲染指令

常用的内容渲染指令有以下3个：

v-text:

<p v-text="username"></p>将username的值渲染到<p>标签内，并覆盖其原有内容

<body>
<div id="app">
    <p v-text="value1"></p>
    <p v-text="value2">与谁同坐</p>
</div>
<script src="./lib/vue.global.js"></script>
<script>
    Vue.createApp({
        data() {
            return {
                value1: '明月',
                value2: '清风',
            }
        }
    }).mount('#app')
</script>
</body>

{{ }}:

插值表达式（Mustache），可以解决v-text覆盖默认文本内容的问题:
<div id="app">姓名：{{username}}</div>

v-html:

v-text指令和{{ }}指令只能渲染纯文本，v-html可以将包含HTML标签的字符串渲染为页面的HTML元素：

<body>
<div id="app">
    <p v-text="desc"></p>
    <p >{{desc}}</p>
    <p v-html="desc"></p>
</div>
<script src="./lib/vue.global.js"></script>
<script>
    Vue.createApp({
            data(){
                return{
                    name:'明月',
                    desc:'<i>清风</i>'
                }
            }
        }
    ).mount('#app')
</script>
</body>

属性绑定指令`v-bind`

使用v-bind属性为袁术动态绑定属性值：

<body>
    <div id="app">
        <input type="text" v-bind:placeholder='inputVlue'>
        <img v-bind:src="imgSrc" alt="22">
    </div>
    <script src="./lib/vue.global.js"></script>
    <script>
        Vue.createApp({
                data(){
                    return{
                        inputVlue:'请输入',
                        imgSrc:'./image/img.jpeg'
                    }
                }
            }
        ).mount('#app')
    </script>
</body>

简写形式：（只写“：”即可）

<body>
    <div id="app">
        <input type="text" :placeholder='inputVlue'>
        <img :src="imgSrc" alt="22">
    </div>
    <script src="./lib/vue.global.js"></script>
    <script>
        Vue.createApp({
                data(){
                    return{
                        inputVlue:'请输入',
                        imgSrc:'./image/img.jpeg'
                    }
                }
            }
        ).mount('#app')
    </script>
</body>

事件绑定指令`v-on`

vue提供了v-on来辅助程序员为DOM元素帮否定事件指令：<button v-on:click="addCount">+1</button>

简写模式:<button @click="addCount">+1</button>使用“@”符号

原生DOM对象的onclick、oninput、onkeyup等事件，替换为vue后分别为v-on:click、v-on:input、v-on:keyup

通过v-on绑定的事件处理函数，需要在methods节点中进行声明：

<body>
    <div id="app">
        <h3>count 的值为：{{count}}</h3>
        <button v-on:click="addCount">+1</button>
    </div>
    <script src="./lib/vue.global.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    count: 123
                }
            },
            methods: {
                addCount() {
                    this.count += 1
                }
            }
        }
        ).mount('#app')
    </script>
</body>

简写：<button @click="count-=1">+1</button>

this 表示当前的 vm 对象，通过 this 可以访问到 data 中的数据

事件对象event

可以在v-on指令中接收事件对象event：

methods: {
    addCondt(event) {
        const nowBgColor = event.target.style.backgroundColor;
    }
}

绑定事件并传参

在使用v-on指令绑定事件时，可以使用()进行传参

<button @click="addCondt(2)">+2</button>

methods: {
    addCondt(step) {
        this.count +=step;
    }
}

注：此时由于对事件进行了传参，会产生事件对象event被参数覆盖的问题，无法正常获取事件对象

`$event`

$event是vue提供的特殊变量，用来表示原生事件参数event，解决事件参数对像event被覆盖的问题:

<button @click="addCondt(2,$event)">+2</button>

methods: {
    addCondt(step,event) {
        this.count +=step
        const nowBgColor = event.target.style.backgroundColor;
    }
}

事件修饰符

vue提供了事件修饰符的概念，来辅助进行事件控制，包含：

.prevent阻止默认行为，如<a>标签的跳转，表单的提交等；
.stop阻止事件冒泡；
.capture以捕获模式触发当前的事件处理函数；
.once绑定的事件只触发一次；
.self只有在event.target是当前元素自身时触发事件处理函数。

eg:<button @click.stop="addCondt(2)">+2</button>

按键修饰符

在监听键盘事件时，我们经常需要检查特定的按键。Vue 允许在 v-on 或 @ 监听按键事件时添加按键修饰符。

<!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
<input @keyup.enter="submit" />

双向绑定指令`v-model`

Vue提供双向绑定指令（表单输入绑定），可以不操作DOM的前提下，快速获取表单的数据。

在前端处理表单时，我们常常需要将表单输入框的内容同步给JavaScript中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦:

<input
  :value="text"
  @input="event => text = event.target.value">

v-model指令帮我们简化了这一步骤：

<input v-model="text">

`v-model`指令的修饰符

.number自动将用户的输入值转为数值类型 <input v-model.number="age"/>;
.trim自动过滤用户输入的首尾空白字符 <input v-model.trim="msg"/>;
.lazy在“change”而非“input”时更新（输入结束后更新） <input v-model.lazy="msg"/>;

条件渲染指令

条件渲染指令用来辅助控制DOM的显示与隐藏。

v-if
指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。

你也可以使用 v-else为 v-if添加一个“else 区块”。

一个 v-else元素必须跟在一个 v-if或者 v-else-if元素后面，否则它将不会被识别。
v-show也可以按条件显示

不同之处在于 v-show会在 DOM 渲染中保留该元素；v-show仅切换了该元素上名为 display的 CSS 属性。

v-if有更高的切换开销，适合条件很少改变的情况；
v-show有更高的初始渲染开销,适合频繁切换

<body>
    <div id="app">
        <button @click="show= !show">show</button>
        <p v-if="show">Vue is awesome!</p>
        <p v-else>Oh no 😢</p>
        <p v-show="show">show</p>
    </div>
    <script src="./lib/vue.global.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    show: true
                }
            },
            methods: {
                addCondt() {
                    this.show = !this.show;
                }
            }
        }
        ).mount('#app')
    </script>
</body>

列表渲然指令

我们可以使用 v-for指令基于一个数组来渲染一个列表。v-for指令的值需要使用 item in items形式的特殊语法，其中 items是源数据的数组，而 item是迭代项的别名,v-for也支持使用可选的第二个参数表示当前项的位置索引:

<body>
    <div id="app">
        <ul>
            <li v-for="(user,index) in array">id:{{user.id}} name:{{user.name}} 索引：{{index}}</li>
        </ul>
    </div>
    <script src="./lib/vue.global.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    array:[
                        {id:1,name:'清风'},
                        {id:2,name:'明月'}
                    ]
                }
            },
        }
        ).mount('#app')
    </script>
</body>

推荐在任何可行的时候为 v-for 提供一个 key attribute，除非所迭代的 DOM 内容非常简单 (例如：不包含组件或有状态的 DOM 元素)，或者你想有意采用默认行为来提高性能。

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

注意:" : " 表示属性绑定

key的值只能是字符串或数字；
key要具有唯一性的；
使用index的值作为key值没有任何意义；

总结

指令名	指令	简写	例子
内容渲染指令	`v-text` `v-html` `{{}}`		`<p v-text="value1"></p>` `<p v-html="desc"></p>` `<p >{{desc}}</p>`
属性指令	`v-bind`	`:`	`<img v-bind:src="imgSrc" alt="22">` `<img :src="imgSrc" alt="22">`
事件指令	`v-on`	`@`	`<button v-on:click="addCount">+1</button>` `<button @click="addCount">+1</button>`
双向绑定指令	`v-model`		`<input v-model="text">`
条件指令	`v-if` `v-else` `v-else-if` `v-show`		`<p v-if=""show"">Vue is awesome!</p>` `<p v-else>Oh no 😢</p>` `<p v-show="show">show</p>`
列表指令	`v-for`		`<li v-for="(user,index) in array">id:{{user.id}} name:{{user.name}} 索引：{{index}}</li>`