Vue 学习

vue 学习记录。

参考网址

• Vue：https://cn.vuejs.org/v2/guide/

• Vue-router : https://router.vuejs.org/zh/

• Vuex： https://vuex.vuejs.org/zh/

• 地址：http://www.cocoachina.com/programmer/20170527/19378.html

建议

• 建议还是用 npm 安装，开始用 cnpm 安装的时候失败

理解 Vue

数据相关的属性

• 所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。

  var vm = new Vue({
    // 选项
  })
  

• 当数据更改的时候，vue视图才会渲染。只有当实例被创建时 data 中存在的属性才是响应式的 ，也就是说如果在创建 vue 实例的时候没有绑定 data 属性，那么后期添加的属性是不会动态追踪，视图也不会对应更改。

  • 定义为空的初始值
  • Object.freeze() : 会阻止现有现有的属性更改，响应系统不会追踪变化

---

Vue 实例还暴露了一些有用的实例属性与方法。 它们都有前缀 $，以便与用户定义的属性区分开来。 这属性是 Vue自己已经定义好了的。

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

生命钩子介绍

不要在选项属性或回调上使用箭头函数， 这样会抛出 this 引用作用域的一些错误。这

created  mounted、updated 和 destroyed

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

模板语法

• v-once： 一次性插入数据，并且是不会更新。

• v-html：会将 字符串 HTML 转换成真正的HTML。

• 插值语法{{}} 支持全部的 js 表达式，比 angular 支持的好很多。

  • 每个绑定只能包含单个的表达式。
  • 不应该在模板表达式中试图访问用户定义的全局变量。

  
  
  
  {{ var a = 1 }}
  
  
  {{ if (ok) { return message } }}
  

指令

有 v- 前缀的特殊特性，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

• 参数：一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

  ...
   
  
  // 做事件监听
  ...
  
  // v-bind 可以把值绑定到动态属性上，并且属性的值可以不是字符串。
  

• 修饰符：修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

  
  // 在点击提交之前执行
  ...
  

缩写

对 v-bind / v-on 常用的 2 个指令做了缩写

...


...

v-bind 更改元素本身属性的值。



...


...

class & style 绑定

• 对象语法

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

• 数组语法

• 对于 css 属性 Vue 会自动的添加一些属性 如 transform

• 多重值： 会根据浏览器不同自动选择

Vue 实力对象属性

• computed：计算属性返回一个计算好的值。

1. getter 属性
2. setter 属性



  
Original message: "{{ message }}"
  
Computed reversed message: "{{ reversedMessage }}"


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

1. 计算属性的值，是依赖 message 的值。
2. 如果 message 的值不更改那么计算属性的值也不会变化。

• methods： 方法

  1.methods & computed 都可以实现相同的功能
  2.相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。而 computed 计算的值是有依赖关系
  

• 侦听属性： 也是对 data 属性的值做一部分更改

   1.watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该。但是计算属性是没有办法做到这一步的。   
   2.vm.$watch API。 可以参考
  

条件渲染

• v-if 、v-else、v-else-if ， 这些指令可以配合 template 元素

  • 如果元素不是经常切换

  1.在