vue进阶（一）

v-bind

• 基本使用

  • 作用：动态绑定属性

  • 缩写：冒号

• 高级使用

  • 动态添加类

    • 对象语法

      :class="{ 类名1: boolean, 类名2: boolean }"

      解释：类名1或类名2的boolean值为true，该类将被加载到目标结点；为false，则不会被加载到目标结点。

      注释：最终结点上的class和:class会进行合并

      使用方法：

      ①直接通过{}绑定一个类；
②通过判断传入多个值；
③和普通类共同存在不冲突；
④过于复杂时可放进methods中或者computed中

    • 数组语法

      :class="['类名1', '类名2']"

      解释：将类名1和类名与class的类名合并

      注释：如果加的是变量则将引号去掉

  • 动态添加style（多用于组件化开发）

    • 对象语法

      :style={fontSize: '24px'}

      解释：直接将对象中的键值对当做属性解释

      注释：如果去掉24px的引号，则表示变量

    • 数组语法

      :style="[baseStyle]"

      解释：其中baseStyle是一个对象，其中为style的属性值，如（baseStyle:{backgroundColor: "red";}）

计算属性

• 基础使用

  computed:{
    fullName: function () {
      return this.firstName + " " + this.lastName
    }
  }

  /* es6语法 */

  /* 其中i取到的是books数组的遍历下标 */
  for (let i in books)

  /* 其中book取到的是books数组每一项的内容 */
  for (let book of books)

• 计算属性的setter和getter

  computed:{
    fullName: {
      /* 一般情况下不对计算属性的set方法做设置 */
      set: function(newValue){
        let names = newValue.split(" ")
        this.firstName = names[0]
        this.lastName = names[1]
      }
      get: function(){
        return this.firstName + " " + this.lastName
      }
    }
  }

  // 以上代码等价于
  computed:{
    fullName: function(){
      return this.firstName + " " + this.lastName
    }
  }

• 计算属性与methods对比

  • 计算属性多处使用，但是仅仅调用了一次（被vue内部缓存起来，只有改变时才改变缓存）

  • methods是使用了几处就调用几次

let、var与const

• let：存在块级作用域（let声明的变量只能在块内使用）

• var：没有块级作用域（var声明的变量为全局变量），可使用闭包解决作用域的问题（原因：函数拥有自身的作用域）

• const：将标识符修饰为常量（建议编程尽可能使用）

  • 一旦给const修饰的标识符被赋值后，不能修改

  • 在使用const定义标识符时必须进行赋值操作

  • 常量的额含义是指向的对象不能修改，但是可以修改对象内部的属性

对象的增强写法

• 属性的增强写法

  const name = "小明"
  const age = 18
  const sex = "男"

  const obj = {
    name,
    age,
    sex,
  }

• 函数的增强写法

const obj = {
  run(){
    ......  //函数内容
  }，

  eat(){
    ......  //函数内容
  }
}