1、v-html html 插入，可以插入文本，也可以插入元素，如
message:"<h1>xxx</h1>"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="app"><div v-html="message">zhaocuixia is a beautiful girl!</div>
</div><script>
new Vue({el: '#app',data: {message: "Hello Vue.js!"}
})
</script>
</body>
</html>2、v-bind 是属性绑定
<div v-bind:class="{'class1': use}"> v-bind: 可以简写为：即 <div :class="{'class1': use}">
Input 的id和label的for标签实现了点击范围的扩大
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<style>
.class1{background: #444;color: #eee;
}
</style>
<body>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script><div id="app"><label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1" ><br><br><div v-bind:class="{'class1': use}">v-bind:class 指令</div>
</div><script>
new Vue({el: '#app',data:{use: true}
});
</script>
</body><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">{{5+5}}<br>{{ ok ? 'YES' : 'NO' }}<br>{{ message.split('').reverse().join('') }}<div v-bind:id="'list-' + id">菜鸟教程</div>
</div> <script>
new Vue({el: '#app',data: {ok: true,message: 'RUNOOB',id : 1}
})
</script>
</body>
</html>3、v-model双向绑定 比如input是即输入又输出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app"><p>{{ message }}</p><input v-model="message">
</div><script>
new Vue({el: '#app',data: {message: 'Runoob!'}
})
</script>
</body>
</html>
)
