Vue.js学习（常用指令）
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.Vue.js的常用指令
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得 ...
- Vue.js之常用指令
vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...
- Vue.js学习笔记：在元素 和 template 中使用 v-if 指令
f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- vue.js学习记录
vue.js学习记录 文章已同步我的github笔记https://github.com/ymblog/blog,欢迎大家加star~~ vue实例 生命周期 beforeCreate:不能访问thi ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- vue.js学习资料
vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...
- vue.js学习之better-scroll封装的轮播图初始化失败
vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...
- vue.js学习之 跨域请求代理与axios传参
vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...
- vue.js学习之 打包为生产环境后，页面为白色
vue.js学习之 打包为生产环境后,页面为白色 一:配置问题 当我们将项目打包为生产环境后,在dist文件夹下打开index.html,会发现页面为白色. 1:打开config>index.j ...
随机推荐
- leetcode-350-Intersection of Two Arrays II（求两个数组的交集）
题目描述: Given two arrays, write a function to compute their intersection. Example:Given nums1 = [1, 2, ...
- Centos7 DNS神奇的配置
文件 [root@iff etc]# cat /etc/named.conf // // named.conf // // Provided by Red Hat bind package to co ...
- php 根据子分类循环获取其父级分类
/** * 根据子分类循环获取其父级分类 */ function goodsCatPath($catId, $data = []){ if($catId==0)return $data; $data[ ...
- [转] 如何在 CentOS7 中使用阿里云的yum源
[From] https://www.cnblogs.com/lpbottle/p/7875400.html 1. 备份原来的yum源 mv /etc/yum.repos.d/CentOS-Base. ...
- hdu 3709 Balanced Number(平衡数）--数位dp
Balanced Number Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others) ...
- c# 操作excle[转]
//引用Microsoft.Office.Interop.Excel.dll文件 //添加using using Microsoft.Office.Interop.Excel; using Excel ...
- e的理解
1. e是一个重要的常数,但是我一直不知道,它的真正含义是什么. 它不像π.大家都知道,π代表了圆的周长与直径之比3.14159,可是如果我问你,e代表了什么.你能回答吗? 维基百科说: " ...
- springboot项目：Redis缓存使用
保存Redis 第一步:启动类中加入注解 @EnableCaching package com.payease; import org.springframework.boot.SpringAppli ...
- 【Sonarqube】windows下更改Temp文件夹的位置
下载的最新Sonarqube版本(4.5.1),通过StartSonar.bat文件可以启动,但是无法通过StartNTService.bat文件启动,原因为默认的Temp文件不可写入, java.l ...
- [中英对照]How PCI Express Works | PCIe工作原理
How PCI Express Works | PCIe工作原理 PCI Express is a high-speed serial connection that operates more li ...