vue知识点汇总

Undefined279
130 阅读4分钟

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 的原理

    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/numberkey 建议不要使用 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: 用于频繁的点击操作

vue-day02

vue的生命周期

  • 创建
    • beforeCreate
    • create
  • 挂载
    • beforeMounte
    • mounted
  • 更新
    • beforeUpdate
    • update
  • 销毁
    • beforeDistory
    • distory

mock数据


线上模拟数据  

fastmock 

本地模拟数据 

json-server 


1. 安装json-server 到全局环境   

npm i json-server -g  

2. 创建data.json 文件  

3. 通过命名元素 data.json 文件生成后端的接口 

json-server ./data.json   

--watch 实时监听文件变化  

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

--host 设置ip，默认为localhost 

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


4. 常用的接口   

请求所有的资源 

get http://localhost:8888/users\
根据id请求资源  

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

添加资源  

post http://localhost:8888/users\
根据id更新资源

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

put 会覆盖资源

patch 只更新指定的资源

根据id删除资源

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

分页查询数据   

get http://localhost:8888/users?_page=1&_limit=2\
模糊查询   

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

网络请求

  • xhr(原生js)
  • $.ajax()(jq)
  • vue-resource 2.0之后就不更新了,而且只能在vue中使用
  • axios 可以在任意框架中使用

动画

动画的元素

  • 进入
    • v-enter 起点
    • v-enter-to 目的点
    • v-enter-active 上半场动画
  • 离开
    • v-leave 目的点
    • v-leave-to 终点
    • v-leave-active 下半场动画

1.需要可切换的元素 2.需要使用transition包裹动画元素 3.设置起点和终点的状态

使用第三方库

  animate.css

image.png

组件

- 组件化:组件化就是让我们能够开发出一个独立且可复用的小组件来构造我们的应用
- 模块化:一个js文件就是一个模块,在一个js文件中引入另一个js文件

### 组件中的通信 
#### 父传子

  • 在渲染的子组件上使用 v-bind 的方式传递父组件的数据

  • 在子组件中使用 props 接受传递的数据

  • ps:

    • props 的对象写法可以约束传递的数据的类型
    • props 的对象写法可以设置属性的默认值
    • props 是只读的不能被修改

子传父

  • 在渲染的子组件上使用 v-on 的方式监听父组件的函数
  • 在子组件中使用$emit 的方式调用函数，调用的同时传递子组件的数据

兄弟组件传值（事件总线）

b --> a

  • 创建一个空的 vue 实例 （eventBus）
  • 在组件 a 中使用 $on 的方式监听函数
  • 在组件 b 中使用 $emit 调用函数，调用的同时传递数据

爷孙传值 、​listeners

跨多组件传值 provide、inject

refs、​parent、$root

组件插槽

可以在父组件中直接修改子组件的 ui

匿名插槽

具名插槽

作用域插槽

插槽的优点

  • 可以在父组件中定制子组件的 ui
  • 可以解决多层组件传参问题
  • 可以对组件进行抽离方便管理

路由

路由是一种对应关系

什么是后端路由

客户端请求的 url 地址和服务端对该地址的处理函数的对应关系

什么是前端路由

路由是根据不同的 url 地址展示不同的内容或页面

前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据 url 的不同返回不同的页面实现的

hash

history

什么时候使用前端路由

在单页面应用，大部分页面结构不变，只改变部分内容的时候使用

前端路由有什么优缺点

  • 优点：

    用户体验好，不需要每次都从服务器全部获取，快速展现给用户

  • 缺点：

    • 不利于 SEO
    • 使用浏览器的前进，后退键的时候会重新发送请求，没有合理利用缓存
    • 单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置

vue 中路由基本使用

  1. 通过 script 标签引入 vue-router

  2. 定义组件

  3. 实例化路由对象 new VueRouter

  4. 配置路由的规则

    /home ---> 组件

  5. 挂载路由

    设置路由和 vue 的关系

  6. 渲染路由

    router-view

    router-link

路由高亮

  • router-link-active
  • linkActiveClass: 'active'

路由重定向、404

  • redirect

 {
    path: '/',
    redirect: '/home'
  }'
  • 404

  {
    path: '*',
    component: NotFoundPage
  }'

路由传参

  • query

    /home?name=fly&age=18

  • params

    /home/fly/18

    
 {
    path: '/home/:name/:age',
    component: Home
  }'

路由编程式导航

this.$router.push()

嵌套路由


  {
    path: '/home',
    component: Home,
    children: [
      {
        path: '/home/recomment',
        component: Recomment
      }
    ]
  }
​

命名视图路由

{path: '/',components: {default: Header,main: Main,footer: Footer}}


<router-view></router-view>
<router-view name="main"></router-view>
<router-view name="footer"></router-view>

路由进阶

  • beforeEach

    全局路由前置守卫

    
router.beforeEach((to, from, next) => {});

  • afterEach()

    全局路由后置守卫

  • 路由独享守卫

    beforeEnter()

  • 组件内置守卫

    beforeRouteEnter(to,from,next) {

    }

methods、watch、computed 有什么区别

  • methods：适合用于业务逻辑处理

    多次调用的时候不会缓存

  • watch：比较适合侦听单个数据，或者是路由

    可以侦听实例上的任意属性

  • computed：适合计算多个属性的结果

    可以缓存数据方便下次使用

watch 的两种用法

  • 浅层侦听

  • 深度侦听

avatar
文章
阅读
粉丝