提示:以下是本篇文章正文内容,下面案例可供参考
一、Vue是什么?
- 是一套用于构建用户界面的渐进式框架,采用自底向上逐层应用。核心理念是数据驱动视图,组件化开发
二、框架和库的区别
- 框架:是一套完整的解决方案,对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目
- 库:提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其他库实现需求
三、MVC和MVVM的区别
- MVC是后端分层开发的概念,MVVM是前段视图层的概念
- 在MVC中,V代表view视图层,作用发送数据、展示数据。C代表controller调度层,作用响应数据,返回数据。M代表model模型层,作用处理数据,与数据库打交道。
- 在MVVM中,V代表view视图层,作用展示数据。VM代表view-model视图模型层,作用连接视图层和模型层,承上启下的作用。M代表medel模型层作用逻辑处理
四、vue的代码结构
- 引入vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
- 书写视图层
插值表达式:将数据渲染到页面上,做简单运算
v-text、v-html
相同点:都会替换标签内原有的内容
不同点:v-html会解析富文本,v-text不会 - 创建vue实例
let vm = new Vue ({ // 控制区域 el:"#app", data:{ // 存放数据 }, methods:{ // 存放方法 } })
五、元素绑定和事件
属性绑定 v-bind 简写 :
事件绑定 v-on 简写 @
六、事件修饰符
- .stop 阻止冒泡:阻止时间继续向外传播
- .capture 添加事件捕获
- .self 事件在该元素本身触发时触发回调
- .once 事件只会触发一次
- .prevent 阻止默认事件
七、数据双向绑定
- 双向绑定 v-model 绑定的是表单控件
- 原理:数据劫持结合发布者-订阅者模式的方式来实现的,通过
object.defineProperty()
来劫持各个属性的setter
,getter
,在数据发生变动时,告诉订阅者是否需要更新,执行对应的更新函数从而更新视图