2.2指令

2.2 指令

指令的目的是做什么： 操作DOM

​ 解释 : MVVM vm -> v 数据驱动

​ 所以： 今天开始，我们不想二阶段一样操作dom，改成操作数据，数据要想操控DOM,那么我们需要依赖指令，因为指令是直接绑定在dom身上的

1. v-html 转义输出，也就是可以解析 xml 数据

2. v-text： 非转义输出，也就是无法解析 xml 类型数据

3. v-bind

   • 将数据和属性进行单向数据绑定： 将vue中数据赋值给属性值

     <img v-bind:src = "src" />
     <div v-bind:class = "">
         
     </div>
     <div v-bind:style = "">
         
     </div>
     

   • 简写形式

     <img v-bind:src="src" alt="">
     <img :src="src" alt="">
     

   • 类名绑定

     • 用法

       • 对象形式用法

             <p :class = "{ bg: true,size: true }"></p>
             <p :class = "{ bg: true,size: false }"></p>
             <p :class = "{ [classA]: true,[classB]: true }"></p>
         

       • 数组形式用法

             <p :class = "[ 'size','bg' ]"></p>
             <p :class = "[ classA,classB ]"></p>
             <p :class = "[ classA,classB,5>3?'a':'b']">  </p>
         

   • 样式绑定

     • 用法

       • 对象形式用法

         <p :style = "{width: '100px',height: '100px',background: 'yellow'}"></p>
         <p :style = "styleObj"></p>
         

       • 数组形式用法

         <p :style = "[{width:'100px',height: '100px'},{ background: 'green'}]"></p>
         <p :style = "[size,bg]"></p>