vue2

发布于:2023-01-04 ⋅ 阅读:(435) ⋅ 点赞:(0)

##项目创建的方式

1.vue  create  name   命令行的方式

2.vue  ui  图形化方式创建

## 项目中的命令

1.首先在cmd命令行窗口中确认是在项目的根目录中,才能正确的启动命令
2.开发环境命令:`npm run serve`
3.打包编译命令:`npm run build`

## vue2里的核心特点 -- 数据的双向绑定【响应】

 - v-model 是双向数据绑定指令
 - 原理:基于Object.defineProperty()封装的

## 指令

1.v-model 默认只用于表单元素,数据双向绑定指令,基于:Object.defineProperty()封装

2.v-text 渲染文本指令,和{{}}插值语法等同,唯一的区别就是过滤器只能用于插值不能用于指令,基于innerText

3.v-html 渲染dom指令,包含v-text指令的功能,同时可以把字符串dom变成真的dom元素,基于innerHTML

4.v-show 控制元素的css样式的display属性,对于元素的性能开销最小,如果频繁切换优先使用

5. v-if 控制元素的加载与销毁,会频繁的触发元素的生命周期,性能开销大,一般不推荐使用
6. v-for 循环渲染指令,可以渲染的值类型有:数组、数字、字符串还有对象
7. v-bind: 属性绑定指令,原生属性绑定[样式,类名],自定义属性,缩写是:`:`
8. v-on: 事件绑定指令,原生事件绑定[click],自定义事件,缩写是:`@`
9. v-pre:原格式输出值 
10. v-once:永远只渲染第一次的值
11. v-cloak:防止闪烁

##修饰符

###指令修饰符

- v-model有:trim去掉所有空格
 - number:把输入的值转成number
 - lazy: 实时触发变成失去焦点后触发

###事件修饰符

- stop:阻止事件冒泡
 - prevent:阻止默认行为
 - native:把vue事件转成原生事件,多用于自定义组件上

###绑定事件

 - capture:事件捕获

###混入mixins

- 特点:组件瘦身,功能复用。
 - 如果组件里的属性和混入里的名字一样,会用组件内的替代混入文件里的,但是生命周期会保留

###监听器

-- watch

###计算属性

-computed

###俩者的相同点

-都可以对数据监听

###不同点

1.computed有缓存,watch没有

2.watch是对值的监听,值发生改变watch就会触发,computed是对值监听并返回一个新值,被监听的值改变以后重新计算N,

3.watch里可以写异步操作,computed因为需要立即return所有不能有异步操作

4.watch每次只能监听一个数据,computed可以监听多个数据,只要期中一个数据改变就会重新计算

5.语法不同:watch对于数组对象需要开启深度监听,如果只想监听对象的某个数据使用点语法,计算属性没有数据类型的限制,但是如果要对计算属性的值重新赋值,需要写出对象的写法,使用get和set

##自定义指令

 - 全局使用:vue.directive
 - 组件内使用:directive
 - 指令,都是给标签身上附加的高级功能
 - bind 第一次绑定,执行一次
 - inserted 元素挂载到页面,执行一次
 - componentUpdated 元素更新

## 过滤器 filter

 - 接收一个值返回一个新值,不对原始数据修改,使用管道符和数据隔开,多个过滤器使用过管道符隔开

##组件通信

  1. 父传子:父组件给子组件绑定一个属性,子组件使用props接收
  2. 子传父:父组件给子组件绑定一个事件,子组件使用$emit去调用事件函数
  3. 兄弟:所有的子组件通过同一个父组件进行数据的交换
  4. .sync 伪数据双向绑定 属性修饰符,子组件使用固定语法调用this.$emit('update:xx',val)
  5. v-model 数据双向绑定 会向子组件注入一个value属性和input事件
  6. $root 获取根实例对象 $parent获取直接父组件实例对象 $children直接子组件实例集合 $refs获取子组件实例对象
  7. eventBus 中央事件池,基于new了一个vue实例对象
  8. 高级用法
  • $attrs 向后代传递除了样式之外的所有属性
  • $listeners 向后代传递函数
  1. 大型的数据共享:vuex

##内置组件

component 动态加载组件-动态组件

  1. 这个组件必须要有一个is属性,用来加载对应的组件名称
  2. 为了满足需要大量手写自定义组件的场景,实现tab选项卡。

keep-alive 缓存组件-缓存组件的状态

  1. 把组件的所有被改变的状态都会存储起来。
  2. 组件属性:exclude 把不想被缓存的组件名字写入,该组件就不会被缓存了
  3. 组件属性:include 只缓存被包含的组件,其他不写入的组件名字的组件则不会被缓存

slot 插槽

  1. 匿名插槽,无论组件的内部被插入任何内容,都会被slot标签接收,常用于纯静态的可复用的dom结构中
  2. 具名插槽,父组件使用template标签使用v-slot:name 加名字,插槽组件使用slot标签的name属性接收
  3. 作用域插槽,父组件在template标签使用v-slot:name='接收值' 子组件在slot标签上绑定属性传参

vue-router

  1. 路由【组件】的懒加载:使用函数返回一个import方法,在import方法里加载组件路径,import方法会返回一个promise对象。只有当 用户手动切换到当前的路由中,才会去加载这个组件。

  2. $router$route的区别? 答:router是new VueRouter的实例对象,表示当前项目中整个的路由实例,拥有全部的路由功能。而route仅仅表示当前路由的信息。

  3. 路由传参

  • query 在地址中使用get方式显示:?key=value&key=value
  • params 多个地址加载同一个组件,使用/:动态参数接收不同的值,其原理就是动态路由
  • 元信息
  • router-view 通过组件传参,凡是被router-view加载出来的视图组件,都会被传入自定义属性
  1. 路由守卫|路由的拦截器|路由的生命周期
  • 全局的守卫
    • beforeEach 前置守卫【路由的鉴权】
    • afterEach 后置守卫【作用很小】
  • 路由独享守卫【路由配置里】
    • beforeEnter 进入前确认【打酱油的】
  • 组件内的路由守卫【组件用的】
    • beforeRouteEnter 组件加载前再次确认
    • beforeRouteUpdate 【最重要】当前页面不销毁,但是地址再变化,用于获取最新路由信息的函数
    • beforeRouteLeave 离开当前路由组件前
  1. 动态路由和嵌套路由
  • 动态路由:/path/:xx一个路由匹配多个地址,加载的是同一个组件
  • 嵌套:一个父路由里有children子路由
  1. 路由元信息
  • meta对象来传递数据
  1. 动态添加路由
  • addRoute 只能添加一条路由匹配对象
  • addRoutes 可以添加一组路由匹配对象
  1. 路由模式 都是基于导航对象封装的,分别是history和hash对象
  • history 历史记录对象封装的,普通的url地址
  • hash 锚地方式,用#表示路径 区别是:hash不回发起真正的url请求,而history会发起真正的请求。

vuex 全局状态管理器

state 核心的状态管理对象,数据存在内存中,刷新页面会丢失

getters 相等于计算属性,对state进行计算并且返回新值

mutations 同步方法,修改state的

actions 动作:处理异步

module 模块

plugins 插件,一般使用持久化存储

vuexpresist

strict 严格模式