Vue.js常用指令的学习详解-js教程-PHP中文网

首页

web前端

js教程

Vue.js常用指令的学习详解

黄舟

Sep 25, 2017 am 09:54 AM

javascriptvue.js详解

Vue.js的指令是以v-开头，它们用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性。

Vue.js提供了一些内置指令，现在来介绍一下常用的内置指令。

v-if指令

v-if是条件渲染指令，它根据表达式的真假来添加或删除元素，它的基本语法：v-if = "expression"，expression是一个bool值的表达式，该表达式既可以是bool属性，也可以是一个返回bool的运算符，如以下代码：

渲染后的页面如下图：

通过控制台可以看到渲染的HTML代码中只包含这三个4a249f0d628e2318394fd9b75b4636b1元素，如下图：

也可以在控制台上修改data属性的值，比如将yes的值改为false，即 vm.yes = false，那么页面中的Yes就会被删除，vm作为vue的实例，之所以可以直接访问data里的属性是因为每个vue实例都会代理其选项对象里的data属性。

记住：使用v-if指令时，只有表达式为真的元素才会被渲染，这是和下一个将要介绍的v-show指令的区别。

v-show指令

v-show指令也是条件渲染指令，刚刚也提到了v-if指令和v-show指令有一个区别，这个区别就是v-show指令的元素都会被渲染，只是表达式为假的元素会被设置css属性display:none，将其隐藏。如下图：

v-else指令

v-else指令必须跟在v-if指令或v-show指令后面，否则它无法被识别。

v-else指令的元素是否被渲染到HTML中主要看基于vue.js版本，如果是2.x版本，那么不管前面是v-if指令还是v-show指令，当前面指令为真时，v-else指令的元素都不会被渲染到HTML中，如果是1.x版本，取决于前面是v-if指令还是v-show指令；

当前面是v-if指令时，且该指令为真，则v-else指令就不会被渲染到HTML中；

当前面是v-show指令时，且该指令为真，v-else指令依然会被渲染到HTML中，只是会为其设置css属性display:none，将其隐藏；

v-for指令

v-for指令与javascript的遍历语法相似，即基于一个数组渲染一个列表，语法为：v-for = "item in items"，items为数组，item为被遍历的数组元素。如以

下代码：

<!DOCTYPE html><html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="styles/demo.css" />
    </head>

    <body>
        <p id="app">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Sex</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="person in people">
                        <td>{{ person.name  }}</td>
                        <td>{{ person.age  }}</td>
                        <td>{{ person.sex  }}</td>
                    </tr>
                </tbody>
            </table>
        </p>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: &#39;#app&#39;,
            data: {
                people: [{
                    name: &#39;Jack&#39;,
                    age: 30,
                    sex: &#39;Male&#39;
                }, {
                    name: &#39;Bill&#39;,
                    age: 26,
                    sex: &#39;Male&#39;
                }, {
                    name: &#39;Tracy&#39;,
                    age: 22,
                    sex: &#39;Female&#39;
                }, {
                    name: &#39;Chris&#39;,
                    age: 36,
                    sex: &#39;Male&#39;
                }]
            }
        })    </script></html>

View Code

v-bind指令

v-bind指令可以在后面带一个参数，用冒号隔开，这个参数一般是HTML元素的特性（attribute）,，例如：v-bind:class

如以下代码：

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="styles/demo.css" />
    </head>
    <body>
        <p id="app">
            <ul class="pagination">
                <li v-for="n in pageCount">
                    <a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? &#39;active&#39; : &#39;&#39;">{{ n + 1 }}</a>
                </li>
            </ul>
        </p>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: &#39;#app&#39;,
            data: {
                activeNumber: 1,
                pageCount: 10
            }
        })    </script></html>

View Code

使用v-bind指令作用于元素的class上，为当前页设置css样式。

这里要注意的是遍历pageCount时，vue,js版本的不同会导致遍历的开始不同；

当版本为1.x时，遍历是从0开始的，一直到pageCount-1结束；

当版本为2.x时，遍历是从1开始的，一直到pageCount结束。

v-on指令

v-on指令用于监听DOM事件，它的用法与v-bind类似，例如监听点击事件：v-on:click="doSomething"

有两种形式调用方法：f35d6e602fd7d0f0edfa6f7d103c1b57绑定一个方法，即将事件指向方法的引用

2cc198a1d5eb0d3eb508d858c9f5cbdb使用内联语句

如下代码：Greet按钮就是使用第一种方法，即将事件绑定到greet()方法，而Hi按钮直接调用say()方法

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p id="app">
            <p><input type="text" v-model="message"></p>
            <p>
                <!--click事件直接绑定一个方法-->
                <button v-on:click="greet">Greet</button>
            </p>
            <p>
                <!--click事件使用内联语句-->
                <button v-on:click="say(&#39;Hi&#39;)">Hi</button>
            </p>
        </p>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: &#39;#app&#39;,
            data: {
                message: &#39;Hello, Vue.js!&#39;
            },            // 在 `methods` 对象中定义方法            methods: {
                greet: function() {                    // // 方法内 `this` 指向 vm                    alert(this.message)
                },
                say: function(msg) {
                    alert(msg)
                }
            }
        })    </script></html>

View Code

v-bind与v-on的缩写方式

v-bind可以缩写为一个冒号，v-on可以缩写为一个@符号，如下：

以上是Vue.js常用指令的学习详解的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。