简单了解Vue及其指令

Vue.js

• 优点：体积小、运行效率高、双向数据绑定、 生态丰富、学习成本低。

运行效率高是因为基于虚拟DOM，即预先通过JavaScript进行各种计算并优化完毕后才提交DOM操作，将DOM操作变化反映到DOM树上。（对DOM树进行预处理操作，并没有真实的操作DOM）

双向绑定即通过 MVVM 思想实现数据的双向绑定。

v-model

便捷的设置和获取表单元素的值，用于双向数据绑定。

• lazy：失去焦点再收集数据
• number：输入字符串转为有效的数字
• trim：输入首尾空格过滤

<div id="app">
	<span>{{message}}span>
	<input v-model="message"/>
div>
<script type="text/javascript">
	// 创建VUE对象 viewModel
	var app = new Vue({
		el:"#app",// 挂载的DOM对象
		data:{ // model数据
			message:"Hello vue!"
		}
	});
script>
1
2
3
4
5
6
7
8
9
10
11
12
13

注：将以上代码写入body标签中并导入vue.js文件（初学者建议直接在vue官网下载vue.js文件放在指定的文件夹下即可）。

v-bind

为元素绑定属性。

<div id="app">
	<font v-bind:color="col">字标签font>
	<a :href="hr">百度a>
div>
<script type="text/javascript">
	// 创建VUE对象 viewModel
	var app = new Vue({
		el:"#app",// 挂载的DOM对象
		data:{ // model数据
			col:"blue",
			hr:"https://www.baidu.com/"
		}
	});
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

v-text与v-html

• v-text设置标签的文本内容。
• v-html设置元素的innerHTML。（会解析html中的标签）

<div id="app">
	<span>{{message}} vue!span><br />
	
	<span v-text="message"> vue! vue!span><br />
	<span v-html="message"> vue!span>
div>
<script type="text/javascript">
	// 创建VUE对象 viewModel
	var app = new Vue({
		el:"#app",// 挂载的DOM对象
		data:{ // model数据
			message:"hello"
		}
	});
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

v-on

用于元素绑定事件。（可以简写为@）

<div id="app">
	<button v-on:click="test('v-on')">v-onbutton>
	<button @click="test('@')">@button>
div>
<script type="text/javascript">
	// 创建VUE对象 viewModel
	var app = new Vue({
		el:"#app",// 挂载的DOM对象
		methods:{// 方法
			test(a){
				alert(a);// 弹框提示
			}
		}
	});
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

v-show

根据真假切换元素的显示状态。（实质是修改元素的display）

<div id="app">
	<span v-show="age>18">成年span><br />
	<span v-show="bol">真span>
div>
<script type="text/javascript">
	// 创建VUE对象 viewModel
	var app = new Vue({
		el:"#app",// 挂载的DOM对象
		data:{ // model数据
			age:12,
			bol:true
		}
	});
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

F12打开Elemets进行查看。

v-if

根据表达式的真假切换元素的显示状态。（实质是操作DOM元素）

<div id="app">
	<span v-if="age>18">成年span><br />
	<span v-if="bol">真span>
div>
<script type="text/javascript">
	// 创建VUE对象 viewModel
	var app = new Vue({
		el:"#app",// 挂载的DOM对象
		data:{ // model数据
			age:12,
			bol:true
		}
	});
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

F12打开Elemets进行查看。

v-for

循环遍历数据。（常与数组结合使用）

<div id="app">
	<span v-for="(item,index) in users">
		{{index}}，姓名：{{item.name}}，年龄：{{item.age}}<br />
	span>
div>
<script type="text/javascript">
	// 创建VUE对象 viewModel
	var app = new Vue({
		el:"#app",// 挂载的DOM对象
		data:{ // model数据
			users:[
					{name:"Wen",age:23},
					{name:"Hua",age:20},
					{name:"Jim",age:18},
					{name:"Jack",age:25}
				  ]
		}
	});
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19