Vue-指令

最新推荐文章于 2022-08-30 16:23:19 发布

饺子泡牛奶

最新推荐文章于 2022-08-30 16:23:19 发布

阅读量365

点赞数

分类专栏：前端基础文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_48776531/article/details/124207638

版权

前端基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

章节目录：

一、指令概述

指令 (Directives) ：是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式。

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

二、插值表达式

格式：{{表达式}}

说明：

该表达式支持 JS 语法，可以调用 js 内置函数（必须有返回值）
表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：let a = 1 + 1;
可以直接获取 Vue 实例中定义的数据或函数

使用{{ }}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{ }}，
加载完毕后才显示正确数据，我们称为插值闪烁。

2.1 v-text 和 v-html

v-text：将数据输出到元素内部，如果输出的数据有 HTML 代码，会作为普通文本输出。

v-html：将数据输出到元素内部，如果输出的数据有 HTML 。

代码示例：

<body>

    <div id="app">

        v-text:<span v-text="hello"></span>
        v-html:<span v-html="hello"></span>

    </div>

    <script>

        /* 
        1. 使用 v-text 和 v-html 指令来替代{{}}。
        */

        var app = new Vue({
            el: "#app",
            data: {
                hello: "say hello"
            }
        });

    </script>

</body>

效果演示：

三、v-bind

html 属性不能使用双大括号形式绑定，我们使用 v-bind 指令给 HTML 标签属性绑定值；
而且在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。

代码示例1 -（绑定class）：

<body>

    <div class="static" v-bind:class="{ active: isActive, 'text-danger' : hasError }">

    </div>

    <script>

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

                isActive: true,
                hasError: false
            }
        });

    </script>

</body>

代码示例2 -（绑定style）：

<body>

    <div id="app" v-bind:style="{ color:activeColor }" v-bind:user="userName">
        {{userName}}
    </div>


    <script>

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

                activeColor: "green",
                userName: "jan"

            }
        });

    </script>

</body>

四、v-model

v-model 是双向绑定，视图（View）和模型（Model）之间会互相影响。

代码示例：

<body>

    <div id="app">

        <input type="checkbox" v-model="language" value="java">java<br />
        <input type="checkbox" v-model="language" value="js">js<br />
        <input type="checkbox" v-model="language" value="python">python<br />

        <h2>你选择的语言是{{language}}</h2>

    </div>

    <script>
          
        /* 
        1. 通过v-model指令完成数据的双向绑定。 
        */

        var app = new Vue({
            el: "#app",
            data: {
                language: []
            }
        });

    </script>

</body>

效果演示：

五、v-on

5.1 事件绑定

v-on 指令用于给页面元素绑定事件。
语法： v-on:事件名="js 片段或函数名"

代码示例：

<body>

    <div id="app">
      
        <button v-on:click="num++">点赞</button><br />
        <button v-on:click="remove">取消点赞</button><br />

        {{num}}次点赞
        
    </div>

    <script>
          
        /*
        1. 通过v-on指令完成页面元素的绑定事件。 
         */
          
        var app = new Vue({
            el: "#app",
            data: {
                num: 0
            },
            methods: {
                remove() {
                    this.num--;
                },
            },
        });

    </script>

</body>

效果演示：

5.2 事件修饰符

代码示例：

<body>

    <div id="app">

        <!-- 通过鼠标右击触发时间，`.once`表明只执行一次。 -->
        <button v-on:contextmenu.once="num++">点赞</button><br />
        <button v-on:contextmenu="remove($event)">取消点赞</button><br />

        <h2>{{num}}次点赞</h2>

    </div>

    <script>

        /*
        1. 通过v-on指令的事件修饰符，完成页面元素的绑定事件。 
        2. `.stop` ：阻止事件冒泡到父元素。
        3. `.prevent`：阻止默认事件发生。 
        4. `.capture`：使用事件捕获模式 。
        5. `.self`：只有元素自身触发事件才执行（冒泡或捕获的都不执行）。 
        6. `.once`：只执行一次。
         */

        var app = new Vue({
            el: "#app",
            data: {
                num: 10
            },
            methods: {
                remove(ev) {
                    this.num--;
                },
            },
        });

    </script>

</body>

效果演示：

5.3 按键修饰符

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

代码示例：

<body>

    <div id="app">

        <!-- 按键盘上键执行num+2事件，按下键执行num-2事件。 -->
        <input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2">

    </div>

    <script>
          
        /*
        1. 通过v-on指令的按键修饰符，完成页面元素的绑定事件。
        2. 常用按键别名：`.enter`  `.tab`  `.delete` (捕获“删除”和“退格”键)
                        `.esc`  `.space`  `.up`  `.down`  `.left`  `.right`
         */
          
        var app = new Vue({
            el: "#app",
            data: {
                num: 0
            }
        });

    </script>

</body>

效果演示：

六、v-for

遍历数据渲染页面是非常常用的需求，Vue 中通过 v-for 指令来实现。

代码示例：

<body>

    <div id="app">

        <li v-for="(user,index) in users">
            {{index + 1}} {{user.name}} {{user.age}}
        </li>

    </div>

    <script>

        /*
        1. 通过v-for完成data中的数组遍历。
        2. 语法： v-for="(item,index) in items"。 注：index是获取数组下标，为可填参数。
         */
          
        var app = new Vue({
            el: "#app",
            data: {
                users: [
                    { name: "jan", age: 18 },
                    { name: "nicky", age: 20 },
                    { name: "lucy", age: 23 }
                ]
            }
        });

    </script>

</body>

效果演示：

七、v-if和v-show

v-if，顾名思义，条件判断。当得到结果为 true 时，所在的元素才会被渲染。

v-show，当得到结果为 true 时，所在的元素才会被显示。

语法：v-if=“布尔表达式”, v-show=“布尔表达式”。

代码示例：

<body>

    <div id="app">

        <!-- info = !info表示每次点击后取相反的布尔值。 -->
        <button v-on:click="info = !info">点击按钮</button>

        <h2 v-if="info">v-if被展示</h2>

        <h2 v-show="info">v-show被展示</h2>



    </div>

    <script>

        /*
        1. v-if，顾名思义，条件判断。当得到结果为 true 时，所在的元素才会被渲染。 
        2. v-show，当得到结果为 true 时，所在的元素才会被显示。 
        3. 语法：v-if="布尔表达式", v-show="布尔表达式"。
        */

        var app = new Vue({
            el: "#app",
            data: {
                info: true
            }
        });

    </script>

</body>

效果演示：

八、v-else 和 v-else-if

代码示例：

<body>
    
    <div id="app">

        <button v-on:click="random=Math.random()">点击获取随机值</button>

        {{random}}

        <h2 v-if="random>=0.75">
            随机值大于0.75
        </h2>

        <h2 v-else-if="random>0.5">
            随机值大于0.5
        </h2>

        <h2 v-else-if="random>0.25">
            随机值大于0.25
        </h2>

        <h2 v-else>
            其他情况
        </h2>

    </div>

    <script>

        /*
        1. v-else 元素必须紧跟在带 `v-if` 或者 `v-else-if` 的元素的后面，否则它将不会被识别。
        */

        var app = new Vue({
            el: "#app",
            data: {
                random: 0
            }
        });

    </script>

</body>

效果演示：

九、结束语

“-------怕什么真理无穷,进一寸有一寸的欢喜。”

微信公众号搜索：饺子泡牛奶。

饺子泡牛奶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-指令

章节目录：一、指令概述二、插值表达式2.1 v-text 和 v-html三、v-bind四、v-model五、v-on5.1 事件绑定5.2 事件修饰符5.3 按键修饰符六、v-for七、v-if和v-show八、v-else 和 v-else-if九、结束语一、指令概述指令 (Directives) ：是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
复制链接

扫一扫