vue

MVC 和 MVVM 的区别

MVC: 针对后端的分层方式
1. model 数据连接层
2. view 视图层 .html .jsp ...
3. controller 控制层
- router 路由分发
- service 业务逻辑处理
- ps: mvc 的数据流式单向
MVVM: 针对前端的分层方式，可以理解为在 MVC，V 层的基础上进一步划分 3 层
1. model 数据模型（后端网络请求得到的数据或者是自己写的死数据）
2. view 视图层指定 model 的渲染区域
3. view model 管理 model 和 view 对数据的存、取操作
MVP

vue 的模板语法

渲染数据

数字计算

解析函数

三元运算

{{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':'']"
<!--flag 是data中定义好的布尔值-->
复制代码

数组对象

:class="['class1','class2',{class3:flag}]"
<!--对象中的类名可以省略引号， flag 是data中定义好的布尔值-->
复制代码

普通对象

:class="{class1:true,class2:true,class3:true}"
:class="objStyle"
复制代码

style 样式绑定

object

:style="obj"
array
```
:style="[obj1,obj2]"
复制代码
```

v-model 双向数据绑定

数据流
1. 单向数据绑定： model 改变，view 跟着改变，不能反过来
2. 双向数据绑定： model 改变，view 跟着改变，反之亦然
小结

v-model 是 vue 中唯一一个可以使用双向数据绑定的指令，可以使用在表单和组件

v-model 的原理
1. 使用 v-bind 绑定数据
2. 使用 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: 用于频繁的点击操作

线上模拟数据

fastmock

本地模拟数据

json-server

安装json-server到全局环境 npm i json-server -g
创建data.json 文件
通过命名元素 data.json 文件生成后端的接口

- json-server ./data.json   

- --watch 实时监听文件变化  

- --port 设置端口号， 默认为3000  

- --host 设置ip，默认为localhost 

- json-server --watch --host 10.41.151.1 --port 8888 ./data.json 


  常用的接口   

  1. 请求所有的资源 

   get http://localhost:8888/users

  2. 根据id请求资源  

   get http://localhost:8888/users/:id 

  3. 添加资源  

   post http://localhost:8888/users

  4. 根据id更新资源

   put、patch http://localhost:8888/users/:id 

  5. put 会覆盖资源

   patch 只更新指定的资源

  6. 根据id删除资源

   delete http://localhost:8888/users/:id 

  7. 分页查询数据   

   get http://localhost:8888/users?_page=1&_limit=2

  8. 模糊查询   

   get http://localhost:8888/users?q=关键词

   
复制代码

过滤器

基本语法:Vue.filter("过滤器名称",callback)

{{msg |过滤器名称}}
复制代码

使用场景

<h2>{{msg}}</h2>
<h2>{{msg |msgFmt}}</h2>
<h2>{{price}}</h2>
<h2>{{price |priceFmt}}</h2>
<h2>{{ctime}}</h2>
<h2>{{ctime |dateFmt}}</h2>
<h2>{{ctime |dateFmt("YYYY-MM-DD")}}</h2>
<h2>{{ctime |dateFmt("HH:mm:ss")}}</h2>

Vue.filter("msgFmt",(arg1,arg2="卷",arg3="疯狂")=>{
    return arg1.replace(arg2,arg3)
})

Vue.filter("priceFmt",(arg1,arg2="$")=>{
  return arg2+arg1
})

Vue.filter("dateFmt",(arg)=>{
    return moment(arg).format("YYYY-MM-DD HH:mm:ss")
})

Vue.filter("dateFmt",(arg1,arg2="YYYY-MM-DD HH:mm:ss")=>{
  return moment(arg1).format(arg2)
})

//msg为dataz中的数据
//arg1为默认参数,也就是原始数据


//局部过滤器
filters:{
  msgFmt(arg1,arg2="卷",arg3="快乐"){
    return arg1.replace(arg2,arg3)+"~~~"
  },
  priceFmt(arg1,arg2="%"){
    return arg2+arg1
  }
}
复制代码

自定义指令

基本语法:Vue.directive("指令名称",obj && callback)
使用场景

全局自定义指令

  Vue.directive("color",{
    bind(el,binding){
      el.style.color="#008c8c"
    }
  })
复制代码

局部自定义指令

directives: {
自定义指令名称: {
  bind(el, binding) {
    el.style.color = binding.value;
  }
  inserted(el) {
          el.focus();
        }
 }
}
复制代码

动画

transition vue提供的动画组件

name 设置使用的指定动画，如果不指定默认使用 .v- 的动画
为了防止使用上的错误，建议在定义样式的时候配置 name
leave-active-class 设置进入的动画
leave-active-class 设置离开的动画
animated 动画的基础样式
duration 动画时间

/* 设置起点和终点的状态和位置 */
      .zmy-enter,
      .zmy-leave-to {
        transform: translateX(300px);
        opacity: 0;
      }

      .zmy-enter-active,
      .zmy-leave-active {
        transition: all 0.5s ease;
      }
      .v-enter,
      .v-leave-to {
        transform: translateX(300px);
        opacity: 0;
      }

      .v-leave-active,
      .v-leave-active {
        transition: all 0.5s ease;
      }


<transition>
      <div v-show="isShow2">显示隐藏</div>
 </transition>
复制代码

组件

定义组件

/* 设置起点和终点的状态和位置 */
      .zmy-enter,
      .zmy-leave-to {
        transform: translateX(300px);
        opacity: 0;
      }

      .zmy-enter-active,
      .zmy-leave-active {
        transition: all 0.5s ease;
      }
      .v-enter,
      .v-leave-to {
        transform: translateX(300px);
        opacity: 0;
      }

      .v-leave-active,
      .v-leave-active {
        transition: all 0.5s ease;
      }



    <transition>
          <div v-show="isShow2">显示隐藏</div>
     </transition>
复制代码

vue笔记

vue

MVC 和 MVVM 的区别

vue 的模板语法

指令

渲染数据

v-html、v-text、插值表达式有什么区别

如何解决插值表达式的页面闪烁问题

属性绑定

基本使用

class 样式绑定

style 样式绑定

v-model 双向数据绑定

使用 js 模拟 vue 的双向数据绑定

事件绑定

修饰符

列表渲染

基本使用

v-for 为什么跟随 key 一起使用

条件渲染

v-if 和 v-show 的区别

使用场景

线上模拟数据

本地模拟数据

过滤器

自定义指令

动画

transition vue提供的动画组件

组件