Vue官方文档=>>>首页-学习下拉栏-文档-教程 =>>>火速一键进入学习
小知识点：””(￣ー￣) (￣ー￣)//””
① data可以是一个对象
② data也可以是一个函数，由这个函数返回一个对象
小知识点：o_o ....
如何让一个元素在水平方向和垂直方向都居中？
要给宽度、高度，再 position一下给个定位，再上下左右都是0px，再margin奥拓。
=>>> position: fixed; left: 0; top: 0; right: 0; bottom: 0; margin: auto;
一、使用vue实现对数组的增删改查
上来先定一份数据吧
要在页面中展示一下，那画个表格吧，再做个添加
此时页面效果
点击添加按钮，盒子才会显示（盒子如下哦）
定义一下盒子要用到的东东
那这就去写方法咯 ︿(￣︶￣)︿ ︿(￣︶￣)︿ ︿(￣︶￣)︿
二、vue的生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
生命周期钩子的 this 上下文指向调用它的 Vue 实例。
<div id="app">
<h2 id="name">{{name}}</h2>
<h2 id="age">{{age}}</h2>
<div>
<button @click="name='李四'">修改姓名</button>
<button @click="age=30">修改年龄</button>
<button @click="destroy">不过了</button>
</div>
</div>
<script>
Vue.config.productionTip = false
let vm = new Vue({
// 指定挂载的容器
// el:'#app',
// 指定模板（如果有模板，vue会渲染整个模板；如果没有模板，vue会将el里面的所有内容当成模板使用）
// template:'<div><h2>{{name}}</h2><h2>{{age}}</h2></div>',
//数据
data:{
name:'张三',
age:20,
},
methods: {
destroy(){
// 调用销毁当前Vue实例的方法
// 注意：销毁后，当前Vue实例对象还在，只是该对象不能在重新挂载页面了
this.$destroy()
}
},
//创建之前(数据初始化之前)
beforeCreate() {
console.log('-----------------beforeCreate------------------');
// 这个生命周期函数，基本上不用，除非要设置Vue实例的内容
this.__proto__.fn = function(){
alert('哈哈！')
}
//Vue实例，已经创建完成
console.log(this);
//Vue实例身上的数据还没有初始化完成
console.log(this.name+' '+this.age); // undefined undefined
},
//创建完成(数据初始化完成)
created() {
console.log('-----------------created------------------');
// 这个生命周期函数，通常用于初始化Vue管理的数据，比如：发生ajax请求会放在这里。
console.log(this);
console.log(this.name+' '+this.age);
},
//挂载之前(模板已经成功渲染，但是还没有将内容挂载到页面中)
beforeMount() {
console.log('-----------------beforeMount------------------');
// 这个生命周期函数，基本上不用
console.log(this.$el);
// document.querySelector('#name').innerHTML = "哈哈"
},
//挂载完成(模板已经成功渲染，并且已经将模板内容挂载到了页面)
mounted() {
console.log('-----------------mounted------------------');
// 这个生命周期函数，通常用于对DOM的重新改动
console.log(this.$el);
// document.querySelector('#name').innerHTML = "呵呵"
},
//修改之前(数据已经改了，只是还没有重新挂载页面)
beforeUpdate() {
console.log('-----------------beforeUpdate------------------');
console.log(this.name+' '+this.age);
console.log(this.$el);
},
//修改完成(数据已经改了，页面也已经重新挂载)
updated() {
console.log('-----------------updated------------------');
console.log(this.name+' '+this.age);
console.log(this.$el);
},
//销毁之前
beforeDestroy() {
console.log('-----------------beforeDestroy------------------');
// 这个生命周期函数，会用的多一些
console.log(this);
// 对数据做任何的修改，都不会重新渲染到页面
this.name = '王五'
},
//销毁完成
destroyed() {
console.log('-----------------destroyed------------------');
// 这个生命周期函数，几乎不用
console.log(this);
this.name = '王五'
},
})
setTimeout(() => {
// 通过vue实例的$mount方法，手动挂载容器
// 公共el选项指定挂载容器，当模板渲染成功后，会离开挂载页面
// $mount方法的好处是，可以自行选择挂载的时机。
vm.$mount('#app')
}, 1000);
</script>
Vue有8个生命周期函数如下：
1.beforeCreate() 创建之前(数据初始化之前)
在beforeCreate的时候，其实Vue已经创建，只是Vue实例身上的数据还没有初始化完成。
所以在这个函数里面打印 name 和 age 的值为 undefined
这个生命周期函数，基本上不用，除非要设置Vue实例的内容。
代码如下：
//创建之前(数据初始化之前)
beforeCreate() {
// 这个生命周期函数，基本上不用，除非要设置Vue实例的内容
this.__proto__.fn = function(){alert('哈哈~')}
//Vue实例，已经创建完成
console.log(this);
//Vue实例身上的数据还没有初始化完成
console.log(this.name+' '+this.age); // undefined undefined
},
2.created() 创建完成(数据初始化完成)
这个生命周期函数，通常用于初始化Vue管理的数据，用的非常多！比如：发生ajax请求会放在这里。
此时打印data 里面的 name 和 age 的值 为 张三 20
代码如下：
//创建完成(数据初始化完成)
created() {
// 这个生命周期函数，通常用于初始化Vue管理的数据，比如：发生ajax请求会放在这里。
console.log(this);
console.log(this.name+' '+this.age); //张三 20
let data = axios.get('') //请求获取一份数据
this.list = data //这个list是vue管理的一份数据（在上面data里 list:[]嘻嘻
},
created方法执行完毕后，到这里要经历一次判断，是否有 el 选项 ？ 有的话，再看是否有 template 选项？
- el： 指定挂载的容器。
（如果没有el选项，会等待vue实例自己通过$mount方法，手动挂载容器）
setTimeout(() => {
// 通过vue实例的$mount方法，手动挂载容器
// 公共el选项指定挂载容器，当模板渲染成功后，会离开挂载页面
// $mount方法的好处是，可以自行选择挂载的时机。
vm.$mount('#app')
}, 3000);
- template：指定模板。
（如果有模板，vue会渲染整个模板；如果没有，vue会将el里面的所有内容当成模板使用）
el:'#app',
template:'<div><h2>{{name}}</h2><h2>{{age}}</h2></div>',
data:{
name:'张三',
age:20
},
3.beforeMount() 挂载之前
这个周期函数，基本上不用，模板已经渲染成功了(数据已经渲染到模板里)，但是还没有将内容挂载到页面中(还没有重新渲染页面)。(console.log(this.$el); //打印可以看见模板已经渲染完成)
4.mounted() 挂载完成
这个周期函数，通常用于对DOM的重新改动，模板已经完成渲染，并且已经将模板上的内容挂载到了页面。
//挂载完成(模板已经成功渲染，并且已经将模板内容挂载到了页面)
mounted() {
console.log('-----------------mounted------------------');
// 这个生命周期函数，通常用于对DOM的重新改动
console.log(this.$el);
document.querySelector('#name').innerHTML = "呵呵"
},
此时页面中的姓名会被修改成 呵呵 0.0
这个生命周期前半程走完啦~~~~~
到 mounted 就表示挂载完成了哦，接下来要做 对数据进行更新
5.beforeUpdate() 更新之前
这个周期函数，数据已经修改了，但是没有重新挂载到页面，页面还没重新渲染
可以在周期函数 beforeUpdate 最后加入一个断点 debugger 可以更好的观察
6.updated() 更新完成
这个周期函数，数据已经修改了，并且页面已经重新挂载
7.beforeDestroy() 销毁之前
这个周期函数，会用的多一点，
注意：对数据做任何的修改，都不会重新渲染到页面
8.destroyed() 销毁完成
这个生命周期函数，几乎不用，不会销毁Vue 实例
注意：销毁后，当前Vue实例对象还在，只是该对象不能在重新挂载页面了
三个重点掌握嗷，created()，mounted()，beforeDestroy()
vue生命周期.jpg
网友评论