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

本文参考：http://www.cnblogs.com/rik28/p/6024425.html

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

v-if指令

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

渲染后的页面如下图：

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

也可以在控制台上修改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>

        <div 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>

        </div>

    </body>

    <script src="js/vue.js"></script>

    <script>

        var vm = new Vue({

            el: '#app',

            data: {

                people: [{

                    name: 'Jack',

                    age: 30,

                    sex: 'Male'

                }, {

                    name: 'Bill',

                    age: 26,

                    sex: 'Male'

                }, {

                    name: 'Tracy',

                    age: 22,

                    sex: 'Female'

                }, {

                    name: 'Chris',

                    age: 36,

                    sex: 'Male'

                }]

            }

        })

    </script>

</html>

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>

        <div id="app">

            <ul class="pagination">

                <li v-for="n in pageCount">

                    <a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>

                </li>

            </ul>

        </div>

    </body>

    <script src="js/vue.js"></script>

    <script>

        var vm = new Vue({

            el: '#app',

            data: {

                activeNumber: 1,

                pageCount: 10

            }

        })

    </script>

</html>

使用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"

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

<2>使用内联语句

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div 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('Hi')">Hi</button>

            </p>

        </div>

    </body>

    <script src="js/vue.js"></script>

    <script>

        var vm = new Vue({

            el: '#app',

            data: {

                message: 'Hello, Vue.js!'

            },

            // 在 `methods` 对象中定义方法

            methods: {

                greet: function() {

                    // // 方法内 `this` 指向 vm

                    alert(this.message)

                },

                say: function(msg) {

                    alert(msg)

                }

            }

        })

    </script>

</html>

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

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

Vue.js学习（常用指令）的更多相关文章

  1. 1.Vue.js的常用指令

      Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得 ...

  2. Vue.js之常用指令

    vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...

  3. Vue.js学习笔记：在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  4. vue.js学习记录

    vue.js学习记录 文章已同步我的github笔记https://github.com/ymblog/blog,欢迎大家加star~~ vue实例 生命周期 beforeCreate:不能访问thi ...

  5. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  6. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  7. vue.js学习资料

    vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...

  8. vue.js学习之better-scroll封装的轮播图初始化失败

    vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...

  9. vue.js学习之 跨域请求代理与axios传参

    vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...

  10. vue.js学习之 打包为生产环境后，页面为白色

    vue.js学习之 打包为生产环境后,页面为白色 一:配置问题 当我们将项目打包为生产环境后,在dist文件夹下打开index.html,会发现页面为白色. 1:打开config>index.j ...

随机推荐

  1. 前端视频插件Aliplayer播放器简单使用（基于地址播放）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. Centos7 DNS神奇的配置

    文件 [root@iff etc]# cat /etc/named.conf // // named.conf // // Provided by Red Hat bind package to co ...

  3. 配置Nginx支持pathinfo模式

    Nginx服务器默认不支持pathinfo, 在需要pathinfo支持的程序中(如thinkphp),则无法支持”/index.php/Home/Index/index”这种网址.网上流传的解决办法 ...

  4. 基于python的几种排序算法的实现

    #!usr/bin/python3 # -*- coding: utf-8 -*- # @Time : 2019/3/28 10:26 # @Author : Yosef-夜雨声烦 # @Email ...

  5. Spring事务杂谈

    1. 什么是事务 事务就是以一种可控的方式,对资源进行的一组操作,保证了资源在事务前后,始终应处于被期待的正确的状态.比如不会受到宕机等原因的影响.事务本身,具有如下4种属性-ACID.(所以说事务是 ...

  6. 查看Postgresql的连接状况

    今天遇到一个问题,就是pg一直报错,说有太多的客户端连接到数据库上面.但现在不知道是什么程序连接.pg默认的max_connection是100,我并没有修改过,以为平时公司内部用,应该够了,但现在貌 ...

  7. 【数组】Unique Paths

    题目: A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). ...

  8. 《LeetBook》leetcode题解(8): String to Integer (atoi) [E]——正负号处理

    我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...

  9. Cassandra概念学习系列之Windows里下载且安装配置Cassandra（最新的3.11.1版本）（图文详解）

    不多说,直接上干货!  最近我开始在windows环境中使用Cassandra,虽然在Cassandra站点的安装命令非常清楚和精简,我仍然在环境配置上遇到一些问题.所以我想为后来者分享下我的经验. ...

  10. 看过ruby相关书籍

    <ruby编程语言> <crafting rails applications> <agile web developemnt> <build awesome ...