Vue的介绍
1.什么是vue？
vue是一个渐进式js框架，它被设计用于构建用户界面和单页应用程序。Vue.js很容易上手，易于学习，并且是一种非常灵活的开发工具。
1特点：
- 轻量级：Vue.js的文件大小只有20 KB左右，非常适合快速构建小型应用程序。
- 双向数据绑定：Vue.js使用MVVM(Model-View-ViewModel)模式，可以实现双向数据绑定，即数据的变化会自动更新视图。
- 组件化：Vue.js将页面分解为小组件，使代码更加模块化，易于维护。
- 简单易用：Vue.js的API简单易用，即使是初学者也能很快理解。
2 库与框架的区别：
库(Library)：
本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者
代表：jQuery
jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作
框架(Framework);
是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码
代表：vue
框架规定了自己的编程方式，是一套完整的解决方案
使用框架的时候，由框架控制一切，我们只需要按照规则写代码
框架的侵入性很高(从头到尾)
3MVVM模型
MVC模型是：model，view，controller
1.那么MVVM模型又是是什么呢？
MVVM模型：model，view，model-view
MVVM中有一个虚拟dom，根据虚拟dom进行双向绑定，然后渲染我们的dom树‘’
2.vue入门
代码演示：
导入js依赖：
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
完整代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>入门</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <div id="app"> {{msg}} </div> <script type="text/javascript"> new Vue({ el:"#app", data(){ return {msg:'hellow 你好 vue'} } }) </script> </body> </html>
注：
1. 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的。
2. 需要给vue指定一个内容管理区，通常我们也把它叫做边界，这意味着我们接下来的改动全部在指定的div内，div外部无用。
3. 双花括号叫做插值
双向绑定数据：(v-model)
- vue指令：指的是是带有“v-”前缀的特殊属性
- vue实例的methods用来定义交互事件使用的函数,函数名不限制
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>入门</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <div id="app"> <h1>{{msg}}</h1> <p> <input v-model="msg" /> <!-- v-on:（也可以用@替代） --> <button v-on:click="getMsg">获取输入框内容</button> </p> </div> <script type="text/javascript"> new Vue({ el: "#app", data() { return { msg: '你好美女', } }, methods: { getMsg() { alert(this.msg); } } }) </script> </body> </html>
vue的生命周期
Vue.js 的生命周期分为八个不同的阶段，分别为：
- beforeCreate: 实例刚刚创建，属性和方法还未初始化，无法访问 data、computed、methods、watch、props 等属性和方法。
- created: 实例已经创建完成，属性和方法已经初始化完成，可以访问 data、computed、methods、watch、props 等属性和方法。
- beforeMount: 模板已经编译完成，但尚未挂载到页面上。
- mounted: 模板已经挂载到页面上，此时可以访问页面上的 DOM 元素。
- beforeUpdate: 组件需要更新时，会触发 beforeUpdate 钩子函数。
- updated: 组件更新完成后触发，此时 DOM 元素已经重新渲染。
- beforeDestroy: 组件销毁之前触发，此时组件仍然可以访问其属性和方法。
- destroyed: 组件已经销毁，此时组件中的所有属性和方法都已被清除。
除了这些常用的生命周期钩子函数，Vue还提供了一些其他的钩子函数，如activated和deactivated，用于处理keep-alive组件的激活和停用
概念图：
列如：
