创建Vue 实例
- 通过用
Vue函数创建 Vue 实例
var vm = new Vue({
// 选项
})
var vm = new Vue({
// 数据选项
data: { key:value },
/*
1. Vue 实例的数据对象,属性能够响应数据变化
2. vm.$data.a 等价于 vm.a
3. 组件上的data 为返回全新初始副本数据对象的函数
*/
props: [ 'size', 'myMessage' ],
/*
1. 组件实例的作用域是孤立的，子组件的模板内不能直接引用父组件的数据，需要通过 prop下发到子组件中
2. props是子组件访问父组件数据的唯一接口
3.单向数据流： props是单向绑定的 父组件数据改变子组件改变，反之不行
*/
propsData: { msg: 'hello' },
/*
1. 创建实例时传递props,主要用于传值或测试
*/
computed: { key: Function },
/*
1. 定义[计算属性],本质为方法
2. 计算属性将被混入到Vue实例
3. this 上下文自动地绑定为 Vue 实例
4. 计算属性的结果会被缓存
5. 计算属性function内部使用的data数据变化，立即重新计算
*/
methods: { key: Function },
/*
1. methods将被混入到Vue实例中，可通过VM实例直接访问
2. 方法中的 this 自动绑定为 Vue 实例
3. 使用箭头函数来定义 method 函数 ，this.a 将指向undefined
*/
watch:{ [key: string]: string | Function | Object | Array },
/*
1. 用来监测Vue实例上的data数据变动
2. 键是需要观察的表达式，值是对应回调函数
3. Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性
4. 不应该使用箭头函数来定义 watcher 函数
5. 监听路由地址的改变
*/
})
var vm = new Vue({
// DOM选项
el: '#app',
/*
1. 用于指明 Vue 实例的挂载目标
2. 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
3. 挂载之后，元素可以用 vm.$el 访问
4. 若存在 render 函数或 template 属性，则挂载元素会被 Vue 生成的 DOM 替换
5. 若 render 函数和 template 属性都不存在，挂载 DOM 元素的 HTML 会被提取出来用作模板
*/
template： '#myComponent',
/*
1. 字符串模板,将会替换挂载的元素
2. 挂载元素的内容都将被忽略
3. Vue选项中包含渲染函数render，该模板将被忽略
4. 值以#开始，被用作选择符，并使用匹配元素的 innerHTML 作为模板
<script type="x-template" id= "myComponent">
*/
render：(createElement: () => VNode) => VNode ,
/*
1. 字符串模板的代替方案
2. 使用render函数可以用js语言来构建DOM
3. 渲染函数接收一个 createElement 方法作为第一个参数用来创建虚拟节点 VNode
4. 返回值： VNode（虚拟节点）——要渲染的节点
5. 参数：createElement 函数
//返回值： VNode
//参数：...(未完)
*/
renderError:(createElement: () => VNode, error: Error) => VNode
/*
1. 当 render 函数遭遇错误时，提供另外一种渲染输出
2. 其错误将会作为第二个参数传递到 renderError
*/
})
var vm = new Vue({
// 生命周期钩子
// 生命周期钩子自动绑定 this 上下文到实例中
// 不能使用箭头函数来定义一个生命周期方法
beforeCreate() {},
/*
1. 在实例初始化之后，data 和 methods 未初始化完成
2. 数据观测 (data observer) 和 event/watcher 事件配置之前被调用
*/
created() {},
/*
1. 在实例创建完成后被立即调用
2. 实例已完成：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调
3. 未开始编译模板，$el 属性不可见
*/
beforeMount() {},
/*
1. 在挂载开始之前被调用
2. 相关的 render 函数首次被调用
3. 已经完成模板的编译，还未挂载到页面中
*/
mounted() {},
/*
1. el 被新创建的 vm.$el 替换，并挂载到实例上
2. 挂载完成后调用该钩子
*/
beforeUpdate() {},
/*
1. 数据更新时调用，发生在虚拟 DOM 打补丁之前
2. data中状态值更新，页面中数据还未更新
3. 未重新开始渲染DOM节点
*/
updated() {},
/*
1. 由于数据更改导致的虚拟 DOM 重新渲染和打补丁完成后调用
2. 组件 DOM 已更新，可执行依赖于 DOM 的操作
*/
activated() {},
/*
1. keep-alive 组件激活时调用
*/
deactivated() {},
/*
1. keep-alive 组件停用时调用
*/
beforeDestroy() {},
/*
1. 实例销毁之前调用
2. 实例仍然完全可用
*/
destroyed() {},
/*
1. Vue 实例销毁后调用
2. 调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
*/
errorCaptured
})
var vm = new Vue({
//资源选项
directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
},
/*
1. 包含 Vue 实例可用指令的哈希表
2. directives属性：定义该区域的自定义指令，对普通 DOM 元素进行底层操作
*/
filters: {
capitalize: function (message, arguments) {
if (!message) return ''
}
},
/*
1. 包含 Vue 实例可用过滤器的哈希表
2. filters属性：定义该区域的私有过滤器，对常见文本格式化
*/
components:{
login: {
template: '<h1>私有组件html结构</h1>'
}
},
/*
1. 包含 Vue 实例可用组件的哈希表
*/
})
Vue 应用的组成
- 一个通过
new Vue创建的根 Vue 实例 - 可选的嵌套的、可复用的组件树
根实例
└─ TodoList
├─ TodoItem
│ ├─ DeleteTodoButton
│ └─ EditTodoButton
└─ TodoListFooter
├─ ClearTodosButton
└─ TodoListStatistics
数据与方法
数据属性
var vm = new Vue({
data: {
a: 1
}
})
当 Vue 实例被创建时，
data对象中的所有的属性将加入到 Vue 的响应式系统中data对象中的属性发生改变，视图也将改变匹配更新新值-
data对象的数据将直接挂在到VM实例上改变其中一个的值，另一个将被影响改变
vm.a == data.a // => true
-
只有当实例被创建时就已经存在于
data中的属性才是响应式的实例创建后，添加新属性不会将视图重新渲染
vm.b = 'hi' //改动b值，不会触发视图的更新
使用
Object.freeze()，会阻止修改现有的属性，意味着响应系统无法再追踪数据的变化
实例属性与方法
Vue 实例具有实例属性与方法
实例属性与方法带有前缀
$，以便与用户定义的属性区分开来
[图片上传失败...(image-472869-1571714392208)]
实例生命周期钩子
每个 Vue 实例在被创建时都要经过一系列的初始化过程——
- 需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等
- 运行一些叫做生命周期钩子的函数，给用户在不同阶段添加自己的代码
生命周期图示
lifecycle-中文.png
lifecycle1.png
