vue学习笔记1

vue实例

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

数据改变时，视图会进行重渲染.只有当实例被创建时就已经存在于 data 中的属性才是响应式的。

//方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。
Object.freeze()

Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $

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

vm.$data === data
vm.$el === document.getElementById('example')  //Vue 实例使用的根 DOM 元素。
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变
  
vm.$parent
vm.$root

v-once
v-html

//v2.6.0  动态参数表达式  约束：1.字符串或null ，null用于解除绑定  2.使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。
//可以用方括号括起来的 JavaScript 表达式作为一个指令的参数,：
//在 DOM 中使用模板时这段代码会被转换为 `v-bind:[attributename]`,避免使用大写字符来命名键名。

v-bind:[attributeName]="url"  //这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。

生命周期

beforeCreated new Vue() -> 初始化 事件，生命周期
created 初始化 注入，校验
        指定 el
        指定 template  模板编译
beforeMount
        创建$el
        替换el
mounted 挂载完毕
beforeDestroy 
destroyed

计算属性会有缓存，基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值，否则计算属性会立即返回之前的计算结果，而不必再次执行函数