模板语法

• 内容

  1. vue文件的构成

     • 模版 template
     • 脚本 script
     • 样式 style

  2. 文本:

     • 数据绑定最常见的形式是使用“Mustache”语法（双大括号）。
     • 你可以在{{}}中填写变量，而不是写一个固定的值。

      <span>{{msg}}</span>
  

  3. 特性:
     • v-bind 指令，也可以简写成 :
     • 它可以将html标签的特性的值绑定为变量，而不是一个固定的值
     • 也就是用于响应式地更新 HTML 特性

      <span v-bind:id='idName'>{{msg}}</span>
  

  4. 表达式:
     • {{number+1}} 加减乘除运算
     • {{ok ? y : n}} 三元运算符
     • {{message.split('').reverse().join('')}}
       1. 可以是链式调用，但是调用的方法必须有返回值
       2. 每个绑定只能包含一个表达式
  5. 指令:
     • 指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
       1. v-html
          1. 这个指令所绑定的值，能够识别html标签
          2. 相对于“Mustache”语法插值多了识别标签的功能
          3. 此种插值方式可以能产生xss攻击
          4. 只能对可信任的内容使用html插值，绝不要对用户提供的内容 使用html插值
       2. v-once
          1. 这个指令能够让你执行一次性插值
          2. 当你使用这个指令的时候，第一次渲染，标签显示你插入的变 量，当变量改变时，内容不会改变
       3. v-bind
          1. 上文特性中有写，不再赘述
       4. v-on
          1. 用于监听DOM事件
          2. 当事件发生的时候，触发绑定的方法
       5. v-show
          1. 绑定一个变量，通过判断这个变量的真假，来确定是否显示使 用这个指令的dom
          2. 这个指令常用与需要频繁显示隐藏的DOM
          3. 这个指令是通过DOM元素的display来控制显示隐藏的，所以 DOM元素是一定存在的
       6. v-if
          1. 同v-show一样，绑定一个变量，通过判断这个变量的真假，来 确定是否渲染使用这个指令的dom
          2. 不同的是，如果变量为false，那么这个DOM元素将不存在。
          3. 再不需要频繁显示隐藏的情况可以使用这个指令
       7. v-else-if
          1. 与v-if，v-else一起使用，相当于增加了一个条件。
       8. v-else
          1. 和v-if指令配合使用，当v-if绑定的变量为false时，显示 v-else所在的DOM
       9. v-modle
          1. 主要是用在表单元素中，它实现了双向绑定。
          2. 在同使用v-bind和v-model中，v-model建立的双向绑定对输入型元素input, textarea, select等具有优先权，会强制实行双向绑定。很多时候v-model使用在表单的input中实现双向绑定
       10. v-for
           1. 用于循环渲染，列表渲染
     • 指令的参数
       1. 有些指令可以接收一个参数，在指令名称之后以冒号表示。
       2. 如下列代码中 id， click 都是指令的参数，告知指令绑定什么特性，绑定什么方法。
     • 指令的动态参数
       1. 上面我们说的指令参数是固定的参数，vue在2.6的版本新增了动态参数。
       2. 可以用方括号括起来的 JavaScript 表达式作为一个指令的动态参数。
       3. 需要注意的是，动态参数表达式的写法存在一些约束。
          1. 动态参数应该是字符串，不能为null，否则触发警告。
          2. 动态参数表达式不能有空格和引号，如果有需要使用计算属性代替复杂的表达式。
          3. 避免使用大写字符来命名

          <span v-html="rawHtml"></span>
          <span v-once>{{msg}}</span>
          <!-- 指令的参数 :id,:click 其中id和click为指令参数-->
          <span v-bind:id='idName'>{{msg}}</span>
          <span v-on:click='clickSpan'>{{msg}}</span>
          <div v-show='isShow'></div>
          <div v-if="type === '1'"></div>
          <div v-else-if="type === '2'"></div>
          <div v-else></div>
          <input v-model="something">
          <ul>
              <li v-for="item in items">{{item}}</li>
          </ul>
  
          <!-- 动态参数列子 -->
          <!--这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data 属性 attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。-->
          <a v-bind:[attributeName]="url"> ... </a>
          <!-- 在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。 -->
          <a v-on:[eventName]="doSomething"> ... </a>