Vue学习（一）～基础指令

在讲解基础指令之前先说一下这个基础语法，叫做“Mustache”语法。其实很简单，用来插值的一个语法，有很多类似的例子，比如art-template模版引擎，es6字符串模板，或者说各大后端框架基本上都有一个这样的插值语法，只是用的符号不一样而已。
“Mustache”语法不能够绑定html标签属性。

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>{{ Message }}</p>
		</div>
	</body>
	<script src="vue.js"></script>
	<script type="text/javascript">
		const vm = new Vue({
			el:'#app',
			data:{
				Message : "Hello world"
			}
		})
	</script>
</html>

不常用指令（只作用于一些特定的地方）

v-once

只响应一次数据的更改，以后的响应式数据不再接收和更改

v-html

将字符串解析为html格式，类似于jquery中的html方法

v-text

绑定文本信息，类型为字符串，类似于jquery中的text方法

v-pre

将字符串格式原样输出，等同于html标签pre

v-cloak

当数据渲染后这个属性消失，未渲染之前v-cloak存在，常用来文档未渲染前的操作

常用指令

v-bind

v-bind用于动态绑定属性
语法糖为：

示例绑定class属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.red{
			color: red;
		}
	</style>
	<body>
		<div id="app">
			<p :class="cl">{{ Message }}</p>
		</div>
	</body>
	<script src="vue.js"></script>
	<script type="text/javascript">
		const vm = new Vue({
			el:'#app',
			data:{
				Message : "Hello world",
				cl:'red'
			}
		})
	</script>
</html>

效果图

Vue学习（一）～基础指令

v-show

这个指令很简单，不多做解释，等同于display:none元素隐藏和显示
元素隐藏 v-show：false
元素显示v-show：true

v-for

v-for 简单来说就是循环迭代数据，常常会绑定key属性循环使用。
绑定key属性用于跟踪对应的元素，进行优化。当列表渲染被重新执行（数组内容发生改变的时候），如果不使用key，Vue会为数组成员就近复用已存在的DOM节点，DOM元素顺序将被打乱，若元素顺序被打乱，那么对于我们后台操控数据是很不友好的。
有些时候不绑定key属性会发出一个警告，但是不影响v-for循环渲染.

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(item,index) in date" :key="index">{{ index }} {{ item }}</li>
			</ul>
		</div>
	</body>
	<script src="vue.js"></script>
	<script type="text/javascript">
		const vm = new Vue({
			el:'#app',
			data:{
				date:["张三","李四","王五","赵六"]
			}
		})
	</script>
</html>

效果图

Vue学习（一）～基础指令

v-if和v-else-if

这个怎么说呢，参照v-show用法吧，很简单了，高级编程语言里面基本都有这样的条件判断，我这里就不多做解释了，你们懒得看，我也懒得写。

v-model

v-model可以说是我们非常常用的一个指令，叫做数据的双向绑定，MVVM框架来源大部分原因是因为这个数据的双向绑定，因此很重要。
但是理解起来并不难，我们直接上代码。

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="msg" />
			<p>Message is {{ msg }}</p>
		</div>
	</body>
	<script src="vue.js"></script>
	<script type="text/javascript">
		const vm = new Vue({
			el:'#app',
			data:{
				msg:"message"
			}
		})
	</script>
</html>

具体效果请自行复制代码测试

v-on

这个指令用于绑定事件，
语法糖格式 @
详情请看示例

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button type="button" @click="btn">点击</button>
		</div>
	</body>
	<script src="vue.js"></script>
	<script type="text/javascript">
		const vm = new Vue({
			el:'#app',
			methods:{
			//ES6高效写法
				btn(){
					console.log("我已被点击");
				}
			}
		})
	</script>
</html>

具体效果请自行测试

Vue学习（一）～基础指令