Vue必须掌握的十个指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document
</title>
</head>
<body>
<div id="app">
<p v-text='text'></p>
<p v-html='html'></p>
<p v-show='true'>{{ show }}
</p>
<p v-show='false'>{{ show }}
</p>
<p v-if='false'>{{ vif }}
</p>
<p v-else>{{ vif }}
</p>
<div v-for="(item,index) in list">{{index}}.{{ item }}
</div>
<a v-bind:href="link">百度搜索
</a>
<button v-on:click="say('world')">v-on绑定事件
</button> <br>
<input v-model="val1" type="text" placeholder="v-model">
<p>你输入的内容是：{{ val1 }}
</p>
<input v-once="val2" type="text" placeholder="v-once">
<p>你输入的内容是：{{ val2 }}
</p>
</div>
<script src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
text: 'v-text跟双大括号的效果一样',
html: '<b>v-html可以解析html标签</b>',
show: 'v-show用来控制元素的显示/隐藏',
vif: '如果需要频繁切换显示/隐藏的，就用 v-show；如果运行后不太可能切换显示/隐藏的，就用 v-if 。',
list: ['张三','李四','王五'],
link: 'http://www.baidu.com',
val1: '',
val2: '只渲染一次'
},
methods: {
say(name) {
alert('hello,'+name);
}
}
});
</script>
</body>
</html>
注意
v-bind书写时可以省略v-on:click可以简写为@clickv-text不能解析html标签，v-html可以如果需要频繁切换显示/隐藏的，就用 v-show；如果运行后不太可能切换显示/隐藏的，就用 v-if
