【猿说VUE】初试模板语法，开启VUE编码之旅

模板语法

官网描述：

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

4.1 插值

主要是将数据插入到html文件中，可以包含文本、html元素、元素属性、表达式等。类似使用jQuery操作DOM。

官方提醒：网站上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

4.1.1 插入文本

数据绑定最常见的形式就是使用 { {…}}（双大括号）的文本插值。大括号内标签将会被替代为对应数据对象上 msgbindtext 属性的值。无论何时，绑定的数据对象上 msgbindtext 属性发生了改变，插值处的内容都会更新。

    <div id="app">
      <h2>VUE插值之文本</h2> 
      <p>数据绑定最常见的形式就是使用双大括号的文本插值：{
  {msgbindtext}}</p>
    </div>


    <script type="text/javascript">
        const vm = new Vue({
    
            el: '#app',
            data: {
    
                msgbindtext: "插值文本"
            }
        })    
    </script>

4.1.2 插入html

通常我们使用双大括号（参考4.1.1）会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，可以使用 v-html 指令。如下示例中 span 的内容将会被替换成为属性值 msgbindhtml，直接作为HTML显示，此时将会忽略解析属性值中的数据绑定。

    <div id="app">
      <h2>VUE插值之HTML</h2>
      <p>你需要使用v-html指令：<span v-html="msgbindhtml"></span></p>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
    
            el: '#app',
            data: {
    
                msgbindtext: "插值文本",
                msgbindhtml: "<span style='color:red'>红色的v-html指令。</span>"
            }
        })    
    </script>

4.1.3 插入属性

如果需要设定HTML元素的属性时应该使用v-bind指令。但是对于布尔attribute (因为布尔类型只要存在就意味着值为 true)，v-bind工作起来略有不同，如下：

<button v-bind:disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 属性甚至不会被包含在渲染出来的button控件中。

下面是一段示例代码：

<div id="app">
  <h2>VUE插值之属性</h2>
  <p><label>点击变换颜色：</label> <input id="ipAttribute" type="checkbox" v-model="useFlag"> 
  <div id="divAttribute" v-bind:class="{
    'clsChange': useFlag}">使用v-bind指令改变颜色属性</div>
  </p>
</div>

<script type="text/javascript">
    const vm = new Vue({
    
        el: