模板语法 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
   

3. v-bind 单项数据绑定

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

4. v-text

     非转义输出
   

5. class VS style

   1. class
      • object

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

      2. arr

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

      3. 推荐使用arr形式 如果没有加中括号，自动为最后一个类

      4. 三目运算符的高级用法

         null&&'true'||'flase'  三目运算符的升级写法，
         
         前面的条件如果满足就输出true，如若不然就输出后面的内容
         

   2 style

   • object

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