一 基础认知
vue.js的核心是一个允许采用简洁的模板语法来声明地将数据渲染进dom系统
var app = new Vue({
el: ‘#app’,
data: {
message: ‘Hello Vue!’
}
})
绑定元素特性
var app2 = new Vue({
el: ‘#app-2’,
data: {
message: '页面加载于 ’ + new Date().toLocaleString()
}
})
v-bind特性被称为指令,在渲染的dom上应用特殊的响应式行为,该指令的意思:将这个元素节点的title特性和vue实例message属性保持一致。
条件与循环
现在你看到我了
例子说明不仅把数据绑定到DOM文本或特性,还可以绑定到DOM结构。
- {{ todo.text }}
v-on 指令添加一个事件监听器,通过它调用在 Vue 实例中定义的方法:
{{ message }}
反转消息v-model 指令,它能轻松实现表单输入和应用状态之间的双向绑定
{{ message }}
组件化应用构建
组件系统是以一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。
二 vue例子
创建一个vue实例
var vm=new Vue({
//选项
})
vue设计收到mvvm模型的启发,一个Vue应用由一个new Vue创建的根Vue实例,以及可选的嵌套的、可复用的组件树组成。
根实例
└─ TodoList
├─ TodoItem
│ ├─ DeleteTodoButton
│ └─ EditTodoButton
└─ TodoListFooter
├─ ClearTodosButton
└─ TodoListStatistics
数据与方法
当一个vue实例被创建时,它将data对象中的所有属性加入到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中存在的属性才是响应式的,添加一个新的属性不会触发任何视图的更新,如果打算添加新的属性为未来使用做打算,可以设置一些初始值。
data:{
a : ’ ',
b: 0,
c:false,
d: [ ],
e: null
}
存在唯一的例外,Object.freeze(),阻止现有的属性,也意味着响应系统无法追踪变化。
var obj = {
foo: ‘bar’
}
Object.freeze(obj)
new Vue({
el: ‘#app’,
data: obj
})
{{ foo }}
Change itvm. d a t a = = = d a t a / / = > t r u e v m . data === data // => true vm. data===data//=>truevm.el === document.getElementById(‘example’) // => true
//
w
a
t
c
h
是
一
个
实
例
方
法
v
m
.
watch 是一个实例方法 vm.
watch是一个实例方法vm.watch(‘a’, function (newValue, oldValue) {
// 这个回调将在 vm.a
改变后调用
})
实例生命周期钩子
类型:Function
beforeCreate
详细:在实例初始化之后,数据观测(data observer)和event/watcher事件配置之前的调用
created
详细:在实例创建完成后被立即调用,在这一步,实例已经完成以下的配置:数据观测(data observer),属性和方法的运算,watch/event事件回调,$el属性目前不可见。
beforeMount
详细:在挂载开始之前被调用:相关的render函数首次被调用 该钩子在服务器端渲染期间不被调用。
mounted
详细: el被新创建的vm.
e
l
替
换
,
并
挂
载
到
实
例
上
去
之
后
调
用
该
钩
子
。
如
果
r
o
o
t
实
例
挂
载
了
一
个
文
档
内
元
素
,
当
m
o
u
n
t
e
d
被
调
用
时
v
m
.
el替换,并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素,当mounted被调用时vm.
el替换,并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素,当mounted被调用时vm.el也在文档内。
注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted:
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
该钩子在服务器端渲染期间不被调用。
beforeUpdate
详细:数据更新时调,发生在虚拟DOM打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行。
updated
详细
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。
注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以用 vm.$nextTick 替换掉 updated:
updated: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
})
}
该钩子在服务器端渲染期间不被调用。
activated
详细:
keep-alive 组件激活时调用。
该钩子在服务器端渲染期间不被调用.
beforeDestroy
详细:实例销毁之前调用。在这一步,实例仍然完全可用。
该钩子在服务器端渲染期间不被调用。
destroy
详细:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
该钩子在服务器端渲染期间不被调用。
errorCaptured
类型:(err: Error, vm: Component, info: string) => ?boolean
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
你可以在此钩子中修改组件的状态。因此在模板或渲染函数中设置其它内容的短路条件非常重要,它可以防止当一个错误被捕获时该组件进入一个无限的渲染循环。
错误传播规则
默认情况下,如果全局的 config.errorHandler 被定义,所有的错误仍会发送它,因此这些错误仍然会向单一的分析服务的地方进行汇报。
如果一个组件的继承或父级从属链路中存在多个 errorCaptured 钩子,则它们将会被相同的错误逐个唤起。
如果此 errorCaptured 钩子自身抛出了一个错误,则这个新错误和原本被捕获的错误都会发送给全局的 config.errorHandler。
一个 errorCaptured 钩子能够返回 false 以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 errorCaptured 钩子和全局的 config.errorHandler。