<span id="sp"> {{ msg }} </span>
<input type="button" value="改变data的值" @click="changeData">

 el: "#app",
data: {
msg: "hello Vue.js!",
},
methods: {
changeData() {
// this.msg = "Vue.js niubility!";
this.msg = Math.random();
}
},
// ====================初始化阶段====================
// 1.生命周期中第一个函数,该函数在执行时Vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作,Vue实例中还没有 Data el methods相关属性
beforeCreate() {
console.log("beforeCreate: " + this.msg);
},
// 2.生命周期中第二个函数,该函数在执行时Vue实例已经初始化了data属性和methods中相关方法
created() {
console.log("created:" + this.msg);
},
// 3.生命周期中第三个函数,该函数在执行时Vue将El中指定作用范围作为模板编译
beforeMount() {
console.log("beforeMount: " + document.getElementById("sp").innerText);
},
// 4.生命周期中第四个函数,该函数在执行过程中,已经将数据渲染到界面中并且已经更新页面
mounted() {
console.log("Mounted: " + document.getElementById("sp").innerText);
},
// ====================运行阶段====================
// 5.生命周期中第五个函数,该函数是data中数据发生变化时执行 这个事件执行时仅仅是Vue实例中data数据变化页面显示的依然是原始数据
beforeUpdate() {
console.log("beforeUpdate-vue: " + this.msg);
console.log("beforeUpdate-dom: " + document.getElementById("sp").innerText);
},
// 6.生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化 页面中数据已经和data中数据一致
updated() {
console.log("updated-vue: " + this.msg);
console.log("updated-dom: " + document.getElementById("sp").innerText);
},
// ====================销毁阶段====================
// 7.生命周期第七个函数,该函数执行时,Vue中所有数据 methods componet 都没销毁
beforeDestory() { },
// 8.生命周期的第八个函数,该函数执行时,Vue实例彻底销毁
destoryed() { }
}); </script>

![在这里插入图片描述](https://s2.51cto.com/images/20210808/1628416908531743.jpg)
[](
)Vue 中组件（Component）
=====================================================================================
**组件作用**：用来减少 Vue 实例对象中代码量，日后在使用 Vue 开发过程中，可以根据不同业务功能将页面中划分不同的多个组件，然后由多个组件去完成整个页面的布局，便于日后使用 Vue 进行开发时页面管理，方便开发人员维护。
[](
)全局组件的开发
--------------------------------------------------------------------------
全局组件注册给 Vue 实例，可以在任意 Vue 实例的范围内使用该组件。
全局组件的开发：


1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

<!-- 使用全局组件 -->
<login></login>
<!-- 使用局部组件 -->
<user-login></user-login>

// 参数1: 组件名称
// 参数2: 组件配置对象 template:用来书写组件的html代码(注意:在template中必须存在一个容器)
Vue.component('login', {
template : '<div>用户登录</div>'
});
// 驼峰命名法的组件会被特殊处理, userLogin 使用时必须写成 user-login
Vue.component('userLogin', {
template : '<div><input type="button" value="登录"></div>'
});
const app = new Vue({
el: "#app",
data: {},
methods: {},
}); </script>

![在这里插入图片描述](https://s2.51cto.com/images/20210808/1628416908113583.jpg)
[](
)局部组件的开发
--------------------------------------------------------------------------
通过将组件注册给对应 Vue 实例中一个 `components` 属性来完成组件注册，这种方式不会对 Vue 实例造成累加。
第一种开发方式：


1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

<login></login>
<login></login>
<login></login>

const login = {
template: '<div><h2>用户登录</h2></div>'
};
const app = new Vue({
el: "#app",
data: {},
methods: {},
components: { // 局部组件
login: login // 注册局部组件
}
}); </script>

第二种开发方式：


1.
2.
3.
4.
5.
6.
7.

<login></login>
<login></login>
<login></login>

<h2>用户登录</h2>

const login = { // 具体局部组件名称
template: '#loginTemplate' // 定义template标签选择器即可
};
const app = new Vue({
el: "#app",
data: {},
methods: {},
components: { // 局部组件
login: login // 注册局部组件
}
}); </script>

![在这里插入图片描述](https://s2.51cto.com/images/20210808/1628416908430469.jpg)
[](
)组件中 props 的使用
================================================================================
`props` 用来给组件传递相应静态数据或者是动态数据；
[](
)在组件上声明静态数据传递给组件内部
------------------------------------------------------------------------------------


1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

<!--使用组件, 通过组件进行静态数据传递-->
<login user-name="zhenyu" age="20"></login>

let login = {
template: '<div><h2>欢迎: {{ userName }} 年龄: {{ age }}</h2></div>',
props: ['userName', 'age'] // props: 用来接收使用组件时通过组件标签传递的数据
}
const app = new Vue({
el: "#app",
data: {},
methods: {},
components: {
login // 组件注册
}
}); </script>

![在这里插入图片描述](https://s2.51cto.com/images/20210808/1628416909341667.jpg)
[](
)在组件上声明动态数据传递给组件内部
------------------------------------------------------------------------------------


1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

<!--使用组件接收 Vue 实例中的动态数据-->
<!--使用 v-bind 形式将数据绑定到 Vue 实例中 data 属性, data 属性发生变化, 组件内部数据跟着变化-->
<login v-bind:name="username" :age="userage"></login>

 template: '<div><h2>欢迎: {{ name }} 年龄: {{ age }}</h2></div>',
props: ['name', 'age']
}
const app = new Vue({
el: "#app",
data: {
username: "zhenyu",
userage: 25
},
methods: {},
components: {
login // 注册组件
}
}); </script>

![在这里插入图片描述](https://s2.51cto.com/images/20210808/1628416909930747.jpg)
[](
)props 的单向数据流
-------------------------------------------------------------------------------
所有的 props 都使得其父子 props 之间形成了一个**单向下行绑定**：父级 props 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
# **读者福利**
**由于篇幅过长，就不展示所有面试题了，感兴趣的小伙伴**
**关注+点赞后，点击这里获取完整面试题（含答案）！**
![35K成功入职：蚂蚁金服面试Java后端经历！「含面试题+答案」](https://s2.51cto.com/images/20210808/1628416909345884.jpg)
![35K成功入职：蚂蚁金服面试Java后端经历！「含面试题+答案」](https://s2.51cto.com/images/20210808/1628416910985723.jpg)
![35K成功入职：蚂蚁金服面试Java后端经历！「含面试题+答案」](https://s2.51cto.com/images/20210808/1628416910409141.jpg)
**更多笔记分享**
![35K成功入职：蚂蚁金服面试Java后端经历！「含面试题+答案」](https://s2.51cto.com/images/20210808/1628416910569440.jpg)![](https://s2.51cto.com/images/20210808/1628416910678066.jpg)

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.