vue介绍
vue是一套用于构建用户界面的渐进式JavaScript框架，一个MVVM视图层框架
构建用户界面：使用某种方式拿到数据，将数据放到合适的位置
渐进式：vue可以自底向上逐层应用（既可以构建简单应用，也可以构建一个复杂应用)
vue =jquery= 原生js对比
jquery简化了原生dom文档的操作
vue完全脱离了dom操作
安装
1.CDN
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
2.npm
模块化安装，这种方式一般需要在node环境下进行开发，然后便宜打包后才能应用到浏览器中
npm install vue
3.vue-cli
Vue脚手架，可用于快速搭建大型单页面应用，用于企业级 开发
hello world实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>{{name}}</h1>
</div>
</body>
<script>
Vue.config.productionTip=false;
const x=new Vue({
el:'#root',
data:{
name:'hello world'
},
});
</script>
</html>
案例注意：
? 1.想让vue工作，就必须创建一个vue实例，并且传入一个配置对象
? 2.root容器里代码依然能符合html规范，只不过混入了一些特殊的vue语法
? 3.root容器里的代码被称为 vue模板
? 4.vue实例和容器是一一对应的
? 5.真是开发中只有一个Vue实例，并且会配合着组建一起使用
? 6.{{xxx}}中的xxx要写js表达式，并且xxx可以自动读取到data中的所有属性
? 7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
编码方式
? 1.获取元素
? 2.给元素添加文字
声明周期，从vue实例创建到虚拟dom产生再到数据绑定数据监听数据渲染以及销毁的整个过程
beforeCreate->created->beforeMount->mounted->beforeUpdate->updated->beforeDestroy->destroyed
1.vue实例初始化阶段
生命周期的第一步是创建vue实例，并且进行初始化
beforeCreate 在初始化的时候调用，完成了vu恶势力的生命周期相关属性的初始化以及事件初始化。这个时候还不能直接访问data中的属性以及method中的方法
created 在初始化完毕以后，完成了vue的数据注入及数据监听操作，该构造的执行意味着vue实例完毕，可以进行数据的访问操作
2.挂载阶段
beforeMount 在created之后，vue会判断实例中是否有el属性，如果没有会调用vm.$mount(el），接着会判断是否含有template属性，如果有将其解析为一个render function，没有将el指向外部html进行解析。完成了模板的解析并没有将数据绑定到模板中。
mounted 创建vm.$el替换成el，实际上完成的是数据绑定操作，在期间执行了render函数，将模板进行了解析，将数据进行了动态绑定。
3.更新阶段
截止到现在，vue已经将页面显示出来了，随着用户的操作会引起数据改变进而导致页面刷新
beforeUpdate 更新虚拟dom节点
updated 完成了页面的重新渲染
4.销毁阶段
beforeDestroy 销毁之前调用，此时还是可以访问vue实例的
destroyed 完成了监听器，子组件，事件监听等移除，销毁vue实例对象
vue特点
- 采用组件化开发，脱离代码的复用率，并且让代码更好的维护
- 声明式编码，让编码人员无需直接操作Dom，提高开发效率
- 使用虚拟Dom+Diff算法,尽量
模板语法
1.模板的理解
动态的html页面，包含一些js语法代码，双大括号表达式，声明式指令
在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，Vue能够智能的算出最少需要重新渲染多少组件，并把DOM操作次数减到最少。
2.插值语法
向页面输出数据
<p>message:{{message}}</p>
<span v-html='rawHtml'></span>
<div v-bind:id='root'>
</div>
<a v-on:click="toDo">...</a>
<div> {{num+1}}</div>
-
条件渲染 v-if v-show -
列表渲染 v-for -
key -
class绑定 -
属性绑定 -
style绑定
|