vue-day01
MVC 和 MVVM 的区别
-
MVC: 针对后端的分层方式
-
model 数据连接层
-
view 视图层 .html .jsp ...
-
controller 控制层
-
router 路由分发
-
service 业务逻辑处理
-
-
ps: mvc 的数据流式单向
-
-
MVVM: 针对前端的分层方式，可以理解为在 MVC，V 层的基础上进一步划分 3 层
-
model 数据模型（后端网络请求得到的数据或者是自己写的死数据）
-
view 视图层 指定 model 的渲染区域
-
view model 管理 model 和 view 对数据的 存、取操作
-
-
MVP
vue 的模板语法
- 渲染数据
{{msg}}
- 数字计算
{{1+1}}
- 解析函数
{{getData()}}
- 三元运算
{{flag?'显示'：'隐藏''}}
指令
渲染数据
-
插值表达式
{{}}
-
v-html
-
v-text
-
v-pre
v-html、v-text、插值表达式有什么区别
-
插值表达式 和 v-text 都是原样输出数据
-
v-html 先解析 html 元素再进行渲染
如何解决插值表达式的页面闪烁问题
- 方式 1： 使用 v-text 代替 插值表达式
- 方式 2： 使用 v-cloak 配置显示隐藏的样式
属性绑定
基本使用
-
string
v-bind:属性名称 = "属性值" 简写 :属性名称 = "属性值"
-
object
v-bind:属性名称 = "obj.属性值"
v-bind="obj"
class 样式绑定
-
普通数组
:class="['class1','class2','class3']"
-
数组三元
:class="['class1','class2',flag?'class3':'']"
-
数组对象
:class="['class1','class2',{class3:flag}]"
-
普通对象
:class="{class1:true,class2:true,class3:true}" :class="objStyle"
style 样式绑定
-
object
:style="obj"
-
array
:style="[obj1,obj2]"
v-model 双向数据绑定
-
数据流
-
单向数据绑定： model 改变，view 跟着改变，不能反过来
-
双向数据绑定： model 改变，view 跟着改变，反之亦然
-
-
小结
v-model 是 vue 中唯一一个可以使用双向数据绑定的指令，可以使用在表单和组件
v-model 的原理
-
使用 v-bind 绑定数据
-
使用 v-on 绑定监听的函数如果数据发生改变重新赋值最新的数据
-
使用 js 模拟 vue 的双向数据绑定
事件绑定
v-on:事件类型="事件处理函数" 简写 @事件类型="事件处理函数"
修饰符
-
事件修饰符
stop 阻止冒泡 prevent 阻止默认行为 once 只阻止一次,跟随其他修饰符一起使用
-
按键修饰符
enter
列表渲染
基本使用
v-for="(item,index) in 数据"
-
arr
-
arrObj
-
obj
<div v-for="(value,key,index) in obj"></div> -
数字
<div v-for="(count,index) in obj"></div> <!-- count 的数值从 1 开始到指定的数据 -->
v-for 为什么跟随 key 一起使用
key 可以是唯一的 string/number key 建议不要使用 index 配置，因为 index 在使用 unshift 的时候不断的修改
-
给指定的标签添加唯一的标识，防止页面在重新绘制的时候发生错乱
-
确保 model 的值和 view 的值保持一致
... Diff 算法
条件渲染
v-if/v-else-if/v-else/v-show
v-if 和 v-show 的区别
-
v-if: 通过 js 操作 DOM 元素的添加和删除
-
v-show: 通过 css 控制元素的显示和隐藏
使用场景
-
v-if: 逻辑判断或者是少量的 DOM 操作
-
v-show: 用于频繁的点击操作
