Vue基础2

知识点

1. 双大括号语法
   • this._data.msg
   • this.$data.msg
   • this.msg
   • msg
   • _ / $ / # 这三种形式都是内部私有属性的一种标识，不希望外用

模板语法

mustache语法是支持写js的

1. 用法：
   • 内容：必须加{ {js语法}}
   • 属性：属性中属性值可以直接写js语法，并且属性值中的数据相当于全局变量
     • 给一个标签加一个自定义属性/已有属性

     img中的src就是已有属性
     <img src = ""/>
     
     //data-index就是自定义属性，web网页中建议我们使用data-形式来定义自定义属性
     <img data-index = "0"/>
     

     • 思考：Vue现在想要在html中使用自己的属性，并且要和它的语法和数据结合？
       • 咋整？
       • 分析：如果我能够标识出哪一个属性是具有vue标志的那就好了，属性前加v
         • Vue给这种带v标识的属性，起了一个名字：指令【借鉴angular】

       <div v-html = "msg">
       
       </div>
       ```
     

2. 研究它js的支持性
   • 数据类型
     • 市场上js的数据类型分类有两种？
       • 第一种
         • 初始数据类型：number、boolean、string、null、undefine
         • 引用数据类型：object[function array…]
       • 第二种
         • 基础数据类型：number string boolean
         • 特殊数据类型：null undefine
         • 复杂数据类型：Object[function array…]
   • 输出语法
     • console
     • alert
   • 表达式/运算符
     • 三元表达式
3. 总结
   • null和undefined是不会显示的，其他数据类型都是支持的的，可以显示的
   • 挂载在window身上的全局属性，我们都不能用的：比如：console、alert
   • { {}}不写流程控制
     • for
     • if
     • while
     • do…while
   • { {}}支持三元表达式，同样也支持运算符
     • 短路原则也是支持的

指令

指令的目的是做什么：操作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"/>
     <img :src = "src"/>
     

   • 类名绑定
     • 用法
       对象形式用法

       <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'}]">