简单了解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"/><!-- v-model指令的作用是便捷的设置和获取表单元素的值 -->
</div>
<script type="text/javascript">
	// 创建VUE对象 viewModel
	var app = new Vue({
		el:"#app",// 挂载的DOM对象
		data:{ // model数据
			message:"Hello vue!"
		}
	});
</script>

注：将以上代码写入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>

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:"<b>hello</b>"
		}
	});
</script>

v-on

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

<div id="app">
	<button v-on:click="test('v-on')">v-on</button>
	<button @click="test('@')">@</button>
</div>
<script type="text/javascript">
	// 创建VUE对象 viewModel
	var app = new Vue({
		el:"#app",// 挂载的DOM对象
		methods:{// 方法
			test(a){
				alert(a);// 弹框提示
			}
		}
	});
</script>

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>

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>

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>