Vue.js

Vue是一款前端渐进式框架，可以提高前端开发效率。

Vue通过MVVM模式,能够实现视图与模型的双向绑定。

数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化。

1.Vue导入

概述：Vue是一个类似于Jquery的一个JS框架，所以，如果想使用Vue，则在当前页面导入Vue.js文件即可

语法：

<!-- 开发环境版本，包含了用帮助的命令行警告 -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 本地导入 -->

<script src="node_modules/vue/dist/vue.js"></script>

案例：

<div id="app">

    <h1>用户名:<input type="text" v-model="name"/></h1> <br/>

    <h1>您输入的用户名是: {{name}}</h1>

</div>

<script type="text/javascript">

    //创建一个Vue对象

    var app = new Vue({

        //指定,该对象代表<div id="app">,也就是说,这个div中的所有内容,都被当前的app对象管理

        el: "#app",

        //定义vue中的数据

        data: {

            name: ""

        }

    });

</script>

Vue声明周期和钩子函数

如图：

（1）什么是vue生命周期?

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

（2）vue生命周期的作用是什么?

Vue生命周期中有多个事件钩子，让我们在控制整个Vue实例过程时更容易形成好的逻辑。

（3）vue生命周期总共有几个阶段?

可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/后。

（4）第一次页面加载会触发哪几个钩子?

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

（5）DOM 渲染在 哪个周期中就已经完成?

DOM 渲染在 mounted 中就已经完成了。

（6）简单描述每个周期具体适合哪些场景?

生命周期钩子的一些使用方法：

beforecreate : 可以在此阶段加loading事件，在加载实例时触发；

created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用；

mounted : 挂载元素，获取到DOM节点；

updated : 如果对数据统一处理，在这里写上相应函数；

beforeDestroy : 可以做一个确认停止事件的确认框；

nextTick : 更新数据后立即操作dom；