Vue的mustachae模板语法及双大括号语法指令的简单操作（以及一些操作的作用解释）

模板语法 mustache语法 双大括号语法指令
Vue指令
组件
作用： 是用来操作DOM的，指令就是绑定在DOM身上的一个属性，这个属性具备一定的功能，这个功能用来操作DOM，以后我们不在像以前一样，先获取DOM，在操作了，我们现在可以直接使用指令来操作DOM

这个指令需要模板语法的支持，所以我们采用jsx语法糖

模板语法
模板语法支持性还是很高的，数据类型都是支持的，但是不支持 输出语法 （ console.log alert ）指令

1. 格式：
   v-xxx = “mustache语法”
   v-xxx = “msg”
   v-xxx = “{ {msg}}” ×

2. v-html 将一个数据展示在一个DOM内容中， innerHTML( html属性 )

   • 防止脚本攻击 xss CSRF

<h3> v-html </h3>
<p v-html = "msg" style="" > </p>

new Vue({
   
		el: '#app',
		data: {
   
				msg: 'hello Vue.js',
				val: '你好vue',
				img: 'https://www.baidu.com/img/dong_96c3c31cae66e61ed02644d732fcd5f8.gif',
				a: " <strong> 你好vue </strong> "
			}
})

1. v-bind 单项数据绑定

   • 使用技巧： 凡是 DOM 的属性要和数据进行绑定，那么我们就可以使用 v-bind
   • 格式： v-bind:DOMattr = “data”
   • 简写： :DOMattr = “data”

<h3> v-bind 单项数据绑定 </h3>
<input type="text" v-bind:value = "val"/>
<input type="text" :value = "val"/>
<img :src="img" alt="">


new Vue({
		el: '#app',
		data: {
				msg: 'hello Vue.js',
				val: '你好vue',
				img: 'https://www.baidu.com/img/dong_96c3c31cae66e61ed02644d732fcd5f8.gif',
				a: " <strong> 你好vue </strong> "
			}
})

1. v-text 非转义输出

<h3> v-text </h3>
<p v-text = "msg"></p>

new Vue({
		el: '#app',
		data: {
				msg: 'hello Vue.js',
				val: '你好vue',
				img: 'https://www.baidu.com/img/dong_96c3c31cae66e61ed02644d732fcd5f8.gif',
				a: " <strong> 你好vue </strong> "
			}
})

1. class vs style
2. class

object
<div :class = "{[size]:true,[color]: true,[box]: true}"></div>
<div :class = "{[size]: 5>2?true:false,[color]: true,[box]: true}"></div>

  arr
<div :class = "[size,box,color]"></div>
<div :class = "[class_flag?size:'',box,color]"></div>

3. style

• object

<div :style = "{width:'100px',height: '100px',background: 'blue'}"></div>
<div :style = "style"></div>

• arr

<div :style = "[style,border]"></div>

<div id="app">
<h3> 类名 </h3>
<div class<