Vue实例
创建一个Vue实例
//
var vm = new Vue({
// 选项
})
当创建一个 Vue 实例时,你可以传入一个选项对象
一个 Vue 应用由一个通过
new Vue
创建的根 Vue 实例
数据与方法
VUE实现前端页面数据与控件的双向绑定,VUE实例中必须定义数据,以及操作数据的方法。
Vue实现使用new Vue函数创建,当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<script>
//我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
// 获得这个实例上的属性
// 返回源数据中对应的字段
console.log('vm.a == data.a '+(vm.a == data.a));
// 设置属性也会影响到原始数据
vm.a = 2
console.log('data.a='+data.a);
// ……反之亦然
data.a = 3
console.log('vm.a='+vm.a);
</script>
</body>
</html>
使用 Object.freeze(),这会阻止修改现有的属性,也意味着响应系统无法再追踪变化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ foo }}</p>
<!-- 这里的 `foo` 不会更新! -->
<button v-on:click="foo = 'baz'">Change it</button>
</div>
<script>
var obj = {
foo: 'bar'
}
Object.freeze(obj)
new Vue({
el: '#app',
data: obj
})
</script>
</body>
</html>
实例生命周期的钩子
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会
vue 1.0+ | vue 2.0 | Description |
---|---|---|
init | beforeCreate | 组件实例刚被创建,组件属性计算之前,如data属性等 |
created | created | 组件实例创建完成,属性已绑定,但DOM还未生成,$el属性还不存在 |
beforeCompile | beforeMount | 模板编译/挂载之前 |
compiled | mounted | 模板编译/挂载之后 |
ready | mounted | 模板编译/挂载之后(不保证组件已在document中) |
- | beforeUpdate | 组件更新之前 |
- | updated | 组件更新之后 |
- | activated | for keep-alive ,组件被激活时调用 |
- | deactivated | for keep-alive ,组件被移除时调用 |
attached | - | 不用了还说啥哪… |
detached | - | 那就不说了吧… |
beforDestory | beforeDestory | 组件销毁前调用 |
destorted | destoryed | 组件销毁后调用 |
生命周期总结
beforecreate :举个栗子:可以在这加个loading事件
created :在这结束loading,还做一些初始化,实现函数自执行
mounted :在这发起后端请求,拿回数据,配合路由钩子做一些事情
beforeDestroy:你确认删除XX吗? destroyed :当前组件已被删除,清空相关内容