vue
概念：vue是一个用于构建用户界面的渐进式js框架，侧重于试图成，设计自底向上逐层应用。
特点：虚拟dom 双向数据绑定 单向数据流
创建vue项目
- 方式一 外部引入链接 cdn
- 方式二 脚手架创建 @vue/cli
组件
概念：组件是可复用的 Vue 实例。
组件封装流程：定义组件-引入组件-注册组件-调用组件
组件注册
- 局部注册 某个组件内注册的组件 components:{组件A,组件B…}
- 全局注册 Vue实例上注册的组件 Vue.component(组件名，组件模板)
组件关系
嵌套组件
- 嵌套一层 父子组件 通信 父组件向子组件传参 props 子组件向父组件传参 $emit(自定义事件，可选参数)
- 嵌套多层/无关系 eventbus 媒介=>vue实例
组件的生命周期
概念：组件从创建到销毁的一系列过程（设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等）被称为组件的生命周期
组件的生命周期大致分为三个阶段
创建期
- beforeCreate 组件实例创建前触发 不能访问组件内的状态（数据）和挂载的dom节点
- created 组件实例创建完成时触发 能访问到组件内的状态 不能访问组件挂载的dom节点
- beforeMount 组件实例挂载前触发 能访问到组件内的状态 不能访问组件挂载的dom节点
- mounted 组件实例挂载完成时触发 能访问组件内的状态（数据）和挂载的dom节点
更新期
- beforeUpdate
- updated
销毁期
- beforeDestroy
- destroyed
组件中的插槽 slot 组件双标签之间的内容
组件refs属性
- 用户获取注册过ref属性得dom节点获取组件 组件实例.$refs
vue中的路由
路由概念：随着浏览器地址栏的变化展示给用户不同的页面。
路由的适用场景：多页面的切换
路由模式
- history模式 HTML5新增的history对象 地址栏 没有 #
- hash模式 windows对象的location对象的hash属性 地址栏中有 #
路由中的相关标签
- router-link 用于导航区 使浏览器地址栏发生改变
- router-view 用于展示路由页面
路由跳转
- 标签跳转 router-link to=路由路径
- js跳转 this.$router.push(路由路径)
路由重定向
- redirect
js路由跳转方式
动态路由
-
- 配置动态路由标识 （router/index.js 路由配置表中 /:id）
-
- 点击跳转时传 标识的真实参数
-
- 跳转到的页面获取动态路由传参 this.$route
query传参 path 数据格式需要处理 JSON.stringify() JSON.parse() 适用于参数较少，参数会显示到地址栏后面
params传参 name 页面刷新数据不存在
路由守卫
路由前置守卫函数beforEach 守卫源meta
-
- 配置路由守卫的标识 （router/index.js meta:{islogin:true}）
-
- 实例化的路由对象添加路由全局前置守卫函数 (router/index.js router.beforeEach((to,from,next)=>{}))
-
- 判断即将要进入的路由是否需要守卫 (router/index.js to.meta.islogin等于true 需要守卫)
-
- 判断用户的登陆状态 token 本地存储 token存在 用户登陆中 token不存在 用户未登录 拦截到登陆页面
vuex
概念：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
核心概念
- state 状态 数据 store管理的数据*
- mutations 同步修改store中的数据/状态
- actions 异步提交 mutations
- modules 模块化管理数据
store的使用
从store中获取数据
- html中获取 $store.state.变量
- js中获取 this.$store.state.变量
修改store中的数据
- 组件中同步提交修改 this.$store.commit(mutations中的方法名，可选参数);
- 组件中异步派发 this.$store.dispatch(actions中的方法名，可选参数) actions中可以异步代码
辅助函数
- 借助辅助函数获取store数据 mapState 组件计算属性中获取
export default {
computed:{
...mapState(['address','sex','age'])
},
// 获取address
mounted(){
console.log(this.address); // =》 等同于 this.$store.state.address
console.log(this.sex);
// console.log(this.$store.state.address)
}
}
- 借助辅助函数获取store中mutations中的方法 组件methods中获取
export default {
mounted(){
// this.$store.commit(方法名，可选参数); =》 等同于 this.changeA()
this.changeA('云南省');
},
// 方法的集合
methods:{
// 使用辅助函数
...mapMutations(['changeA'])
}
}
vant UI组件库
适用于移动端的vue UI组件库;
使用流程
-
- 下载vant
npm install vant -S
-
- vue项目中引入 src/main.js
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant);
-
- 根据功能需求在官网找对应组件 cv
Vue（渐进式 JavaScript 框架）
指令（指令 (Directives) 是带有 v- 前缀的特殊特性。）
-
一种是 内置指令， 一种是 自定义指令
- v-text 用来展示文本
- v-html 渲染dom结构， 也可以渲染文本（但是他是不安全的，因为他不会校验文本）
- {{ }} 小胡子语法，插值语法， v-text 的用发差不多， 只是形式不一样
- v-show 都是用来展示或隐藏元素，但是v-show 通过 display css 的属性进行隐藏元素。
- v-if 都是用来展示或隐藏元素，但是是通过直接不渲染的方式进行显示或隐藏元素。
- v-bind 简写 : 在vue中用于绑定一个或多个特性
- v-for 用于渲染一组数据 他可以遍历数组或对象
- v-bind:key（唯一性， 而且我们推荐在遍历时使用 id 做 key， 而不是 index） key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。
- v-model 在 vue 中进行双向数据绑定，他是使用 :input 和 @change 事件进行底层的实现（是不是一般都用于表单，它还可以被运用在 自定义组件上）；
- v-on 简写 @, 在 vue 中进行绑定事件
- v-if v-else-if v-else 用于判断一组数据的显示
-
自定义指令
-
语法
- Vue.Directive(‘绑定的名称’, 处理函数)
- derectives(‘绑定的名称’, 处理函数)
-
使用
- v-绑定的名称
侦听属性(watch) & 计算属性（computed）
-
侦听属性
-
- Vue 提供了一种更通用的方式来
观察和响应 Vue 实例上的数据变动：侦听属性。
- Vue 提供了一种更通用的方式来
-
- 虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
-
-
计算属性
-
- 计算属性是基于当前数据进行简单的加工返回的新数据，
-
- 当计算属性的数据变化时它会自动计算，计算属性返回的值也会跟着变化。
-
- 不同的是计算属性是基于它们的
响应式依赖进行缓存的。
- 不同的是计算属性是基于它们的
-
变更方法（能够触发试图更新的我们称之为变更方法）
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
// 让字符串进行反转后输出
const str = 'hello';
str.split('').reverse().join('');
非变更方法（不能触发试图更新的）
filter()
concat()
slice()
**它们不会改变原始数组，而总是返回一个新数组。**
区别 watch & computed & methods
-
- computed: 用于简单的数据监测，而且具有缓存功能，每次数据变更只需要计算一次就可以，而且可以监听多个值，只要任意被监听的值发生改变都会重新触发计算。
-
- watch：当需要数据变化时执行异步或者开销较大的操作时执行 watch， 而且只能简单一（单）个数据。
-
- methods: 只有调用才会触发，没有缓存功能，并且每次调用都会被执行。
-
注：
watch 一 对 多，computed 多 对 一。
命令行工具 (CLI) 1.0（vue的上一个版本）, 2.0（目前用的最多的）, 3.0（vite）
-
- 在全局下载 @vue/cli 推荐使用 cnpm & yarn
示例：
cnpm i -g @vue/cli
-
- 使用 vue create xxx(项目名称) 来生成一个项目
示例：
vue create my_app
-
- 进入到下载项目
示例：
cd my_app
-
- 启动项目
示例： npm run serve # or yarn serve
** 如果用npm那就一直用npm。 如果用yarn 那就一直用yarn 不要混合使用，也不要一个下载一个去启动项目 **
如果下载 node-sass 的时候下载不下来，就执行下面那两句话就可以。
-
- yarn config set registry https://registry.npm.taobao.org -g
-
- yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
如果执行报错 说 yarn 不是内部或外部命令, 先去全局下载 yarn 再去执行 上面这两句话-
- npm i -g yarn
cnpm i -g yarn
父子传参
子父传参
兄弟传参
修饰符
-
- 按键修饰符
-
- 事件修饰符
-
- 鼠标修饰符
-
- .exact 修饰符
-
- .once 修饰符
- v-model
-
- .lazy 修饰符
-
- .number 修饰符
-
- .trim 修饰符
-
-
- .passive 修饰符
ref
-
- ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：
-
- 使用 this.$refs 获取真实dom 或 组件实例
-
- 放在 dom 上获取的是dom， 放在组件上， 获取的是 组件实例
注册组件
注册全局组件
- Vue.component(‘创建的组件名称’, { template: ‘’, data() { return {} } });
局部注册组件
- components(‘创建的组件名称’, { template: ‘’, data() { return {} } });
生命周期
- 一共 5 个单词， 11个生命周期
- 5个 单词 之前 before 之后 ed 10个生命周期
- create
- mount -> 可以获取到真实 dom 节点
- update
- destroy
- activated -> 被 keepAlive 内置组件包裹之后才会触发的生命周期
- errorCaptured(当捕获一个来自子孙组件的错误时被调用。)
keep-alive 缓存组件和缓存组件内部的状态
动态组件( :is )不是固定的，组件 元素上挂在一个 :is 的属性 通过 is 属性来确定展示那个组件
props 校验
-
props: [‘arr’, ‘index’]
-
props: { arr: { type: Array }, index: { type: Number } };
-
- 到这里，我们只看到了以字符串数组形式列出的 prop：
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
-
- 但是，通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型：
props: {
title: {
type: String,
// 必传
required: true
},
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
扫一扫
1591
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
