如果阅读有疑问的话，欢迎评论或私信！！
本人会很热心的阐述自己的想法！谢谢！！！

模板语法

前言

Vue 使用一种基于 HTML 的模板语法，Vue的所有语法都是合法的HTML代码，都可以被浏览器正常解析。并且在使用Vue提供的模板时，Vue底层还会提供编译优化，使用最少的渲染速度。

文本插值

Vue语法中通过双大括号对页面中指定位置渲染数据，并且数据是响应式数据。例如前面代码中：

<div id="app">{{ message }}</div>

原始HTML

上面通过双大括号插入的值是纯文本形式，若想添加HTML代码，可以通过v-html指令。例如：

<template><h1>练习</h1><p>这是html代码：{{ htmlDisplay }}</p><p><span v-html="htmlDisplay"></span></p>
</template><script>export default{data(){var htmlDisplay = "<h2>这里是使用v-html渲染的结果</h2>";var imgSrc = "/src/components/icons/newImg.gif"return {htmlDisplay,imgSrc}}}
</script>

注意：v-html属性所在标签中不可有任何内容，否则将会报错：v-html will override element children.例如：

<p><span v-html="htmlDisplay"><a href=""></a></span>
</p>

其中a标签引起的控制台错误！

属性Attribute绑定

Vue中使用v-bind绑定属性值，即标签的src、id、class等属性。该属性由于过于常用，Vue还设置了语法糖:id的形式，根据文档可以看出应该注意两个点：

• 对于v-bind绑定数字或者字符串等数据时，当值为null或者undefined时，该属性将会被忽略。

  <template><img :src="imgSrc" >
  </template><script>export default{data(){var imgSrc = "/src/components/icons/newImg.gif";//正常显示var imgSrcNull = null;//元素标签中不存在src属性var imgSrcUndefined = undefined;//元素标签中不存在src属性var imgSrcEmpty = ""; //src(unknow)return {imgSrc,imgSrcNull,imgSrcUndefined,imgSrcEmpty}}}
  </script>
  

• 对于v-bind绑定布尔值时，只有值为假值时，才会等于false，而真值和空字符串时均为真值。

  <template><button :disabled = disableEmpty>123</button>
  </template><script>export default{data(){var disableEmpty = "";//按钮中存在disabled属性，并且按钮无法选中return {disableEmpty}}}
  </script>
  

动态绑定多个值

绑定多个值时，也需要使用v-bind属性，和绑定单个值有一点不同：

不再需要设置引号右边的属性名以及:，直接在对象中设置

<template><h1 v-bind=objAttr>练习</h1>
</template><script>export default{data(){var objAttr = {id:123,class:"a"}               //h1标签中id为123，class属性为areturn {objAttr}}}
</script>