国庆Vue基础补全（一）

以下vue实例简称为vm

动态参数

v-bind:[attributeName] 等价于v-bind:href
v-bind:[eventName] 等价于v-bind:focus
[]括号里面可以放没有空格或引号的表达式，复杂表达式请使用计算属性
[]括号里面的变量都用小写 因为浏览器会把里面的大写全部转化为小写

<a v-bind:[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>
var data = { 
                    attributeName: 'href',
                    url:'',
                     eventName: 'focus'}
var vm = new Vue({
  el: '#example',
  data: data
})

计算属性

getter方法

这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数
vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新
计算属性是基于它们的响应式依赖进行缓存的，只要message的值不改变，就会返回之前计算的结果，不会再次执行函数，如果不希望有缓存 请用方法来代替

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

计算属性vs侦听属性

当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch，当需要在数据变化时执行异步或开销较大的操作时 可以使用watch,像是几个属性变化组合结果的情景可以使用计算属性。

计算属性的setter

计算属性默认只有getter方法，如果想要改变计算属性的值，可以添加setter方法
//setter 设置新值
vm.fullName = 'xxx'
//getter 也会更新
console.loh(vm.fullName)

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

绑定Class

对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class：
v-bind:class 指令与普通的 class 属性共存
active和text-danger这两个class的存在与否取决于他们各自数据属性的真假

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

data: {
  isActive: true,
  hasError: false
}

也可以写成不内联在模板中的方式

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

还可以绑定计算属性 这是一种强大而常用的方式

<div v-bind:class="classObject"></div>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

或者根据数据属性变化

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

用在组件上

假如你声明了一个子组件，在子组件模板上添加了class，当父组件在使用子组件时，给子组件传入了新的class，子组件原来的class并不会被覆盖，对于带数据绑定 class 也同样适用（v-bind:class）

绑定内联样式

对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

也可定义直接绑定到对象中

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>
data: {
  baseStyles: {
    color: 'red',
  },
overridingStyles:{
    fontSize: '13px'
}
}

自动添加浏览器前缀

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。