Vue基础使用

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Vue是什么？

• 是一套用于构建用户界面的渐进式框架，采用自底向上逐层应用。核心理念是数据驱动视图，组件化开发

二、框架和库的区别

• 框架：是一套完整的解决方案，对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目
• 库：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求

三、MVC和MVVM的区别

• MVC是后端分层开发的概念，MVVM是前段视图层的概念
• 在MVC中，V代表view视图层，作用发送数据、展示数据。C代表controller调度层，作用响应数据，返回数据。M代表model模型层，作用处理数据，与数据库打交道。
• 在MVVM中，V代表view视图层，作用展示数据。VM代表view-model视图模型层，作用连接视图层和模型层，承上启下的作用。M代表medel模型层作用逻辑处理

四、vue的代码结构

1. 引入vue.js
   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
2. 书写视图层
   插值表达式：将数据渲染到页面上，做简单运算
   v-text、v-html
   相同点：都会替换标签内原有的内容
   不同点：v-html会解析富文本，v-text不会
3. 创建vue实例

   let vm = new Vue ({
   	// 控制区域
   	el:"#app",
   	data:{
   	// 存放数据
   	},
   	methods:{
   	// 存放方法
   	}
   })
   

五、元素绑定和事件

属性绑定 v-bind 简写 ：
事件绑定 v-on 简写 @

六、事件修饰符

1. .stop 阻止冒泡：阻止时间继续向外传播
2. .capture 添加事件捕获
3. .self 事件在该元素本身触发时触发回调
4. .once 事件只会触发一次
5. .prevent 阻止默认事件

七、数据双向绑定

• 双向绑定 v-model 绑定的是表单控件
• 原理：数据劫持结合发布者-订阅者模式的方式来实现的，通过object.defineProperty()来劫持各个属性的setter，getter，在数据发生变动时，告诉订阅者是否需要更新，执行对应的更新函数从而更新视图