本文已参与「新人创作礼」活动，一起开启掘金创作之路。
什么是VUE?
渐进式(学一点就能用一点)javascript框架,有一套自己的语法规则
VUE指令
插值表达式
不操作DOM了,需要什么直接把标签填进去
定义:
export default {
data() {
// 格式固定, 定义vue数据之处
return { // key相当于变量名
msg: "hello, vue",
obj: {
name: "小vue",
age: 5
},
}
}
}
使用 : {{表达式}}
MVVM设计模式
概念 : MVVM 通过数据双向绑定让数据自动同步 不需要操作DOM
M : modle数据模型(data里定义)
V : view视图(html页面)
VM : ViewModle视图模型(vue.js源码)
v-bind
作用 : 这只标签行内属性(标准属性 自定义属性)的值
语法 : v-bind:属性名 = "vue变量名"
简写 : :属性名 = "vue变量名"
v-on
- 基本
作用 : 给标签绑定事件
语法 : v-on:事件类型="执行函数名"
简写 : @事件类型="执行函数名"
- 参数及事件对象
语法 : 无传参, 通过形参直接接收
传参, 通过$event指代事件对象传给事件处理函数
既要传参又要事件对象, fn(实参,$event)
- this
this:当前组件对象 万物皆对象 组件也看成是对象
- 事件修饰符
.stop - 阻止事件冒泡
.prevent - 阻止默认行为
.once - 程序运行期间,只触发一次事件处理函数
- 按键修饰符
vue封装的方法,背后是 : 事件对象.keyCode 进行判断
v-model
- 基本
作用 : 能体现VUE双向数据绑定
语法 : v-model="vue数据变量名" 表单元素
- 修饰符
v-text和v-html
语法 : v-text / html="vue数据变量名"
v-show和v-if
原理 : v-show -> 隐藏 / 显示 v-if -> 移除 / 创建
语法 : v-show / if = "vue数据变量名"
v-for
语法 : v-for="(值,索引) in 目标结构" v-for="值 in 目标结构"
目标对象 : 可遍历数组 / 对象 / 数字 / 字符串(可遍历结构)
注意 : v-for的临时变量名不能用到v-for范围外
vue操作样式
操作类名
- 基本用法
语法：:class="{属性值就是定义好的类名:boolean类型的变量值,属性值就是定义好的类名:boolean类型的变量值,......}"
- 其他用法
语法：:class="变量名"
变量是值：字符串直接作为类名
变量是数组：数组内所有成员字符串直接作为类名
操作style
语法：:style="{css属性名:变量,css属性名:变量......}"
变量是css属性值
过滤器
语法：filters:{过滤器名字:function(形参){return "返回处理后的值"}}
过滤器传参：vue变量 | 过滤器(实参)
多个过滤器：vue变量 | 过滤器1 | 过滤器2
场景：只能用在插值表达式和v-bind表达式
计算属性
语法：computed：{
“计算属性名”：{
set（形参）{}，
get（）{
return “值”
}
}
优势：基于他们依赖项的值结果进行缓存的，只要依赖的先变量不变，都直接从缓存取结果
侦听器
语法：
watch：{
被监听数据名：{
handler（newVal，oldVal）{
代码
}，
deep：true， //深度监听
immediate：true //马上让handler执行一次
}
}
作用：检测数据是否发生变化
优点：减少代码量
组件
语法：创建 : 组件文件夹 components/XXX.vue
导入 : import 变量名 from "路径"
注册 : components:{自定义名:导入变量名}
使用 : <自定义名></自定义名> / <自定义名/>
作用：减少重复代码,利于维护
scoped
目的：解决多个组件样式名相同冲突问题
语法：子组件style标签上加上scoped
组件通信
父：使用其他组件的VUE文件
子：被引入的组件（嵌入）
原因：简单数据类型更改数据，会导致子和父的数据会不一致
1.父传子 -> props
2.子传父 -> $emit
Event Bus
目的：解决任何组件之间的通信（不局限在父子关系）
理解：构建高速公路 事件总线
语法：Event Bus
let bus = new Vue（）
Vue.prototype
生命周期
概念：特定时间点创建特定函数
阶段：
1.初始化阶段：组件打开时，对初始化数据做个处理
- beforeCreate(){}
节点：数据初始化数据是否挂载到vue实例化对象上
- created(){}
2.挂载阶段：读取template模板（内部html结构）
- beforeMount(){}
节点：看内存中虚拟dom是否真实渲染到页面上
- mounted(){}
业务场景：获取后台数据后，渲染在页面中的时候
3.更新阶段：data中的值被改变
- beforeUpdate(){}
节点：数据更新时，新旧虚拟dom对比前后结果，打补丁到真实dom节点上
- updated(){}
4.销毁阶段：
- beforeDestroy(){}
节点：卸载vue组件对象
-
destroyed(){}
axios
使用：1.下载 2.导入 3.写在mounted/created里面（获取、查询、发布）
$refs
作用：获取dom元素
基本使用：1.给标签写个标识：ref=“自定义id值”
2.获取 this.$refs.自定义id值
3.写在mounted中
获取组件对象：
场景：父组件内使用子组件的对象（数据）
使用：1.给标签写个标识：ref=“自定义id值”
2.获取 this.$refs.自定义id值
3.写在mounted中且父组件可修改子组件数据
$nextTick
作用：子组件的数据this.a的方法父组件不能使用 是两个作用域
动态组件
概念:多个组件使用同一个挂载点，并动态切换
- 基本使用:
1.创建要被切换的组件 - 标签+样式
2.引入到要展示的vue文件内, 注册
3.变量-承载要显示的组件名
4.设置挂载点
5.点击按钮-切换comName的值为要显示的组件名
场景:同一个挂载点要切换 不同组件 显示
- 组件缓存
目的:组件切换会导致组件被频繁销毁和重新创建, 性能不高;keep-alive组件, 可以让包裹的组件保存在内存中不被销毁
用法:
<keep-alive>
<component :is="组件名"></component>
</keep-alive>
- 补充生命周期
activated - 激活
deactivated - 失去激活状态
插槽
概念:一个组件有两处以上需要传入标签的地方
1.基本使用: 子组件-->
父组件-->标签里面直接改内容
2.具名插槽:
子组件:在slot标签上绑定属性name="自定义变量名"和默认值
父组件:在template标签中绑定v-slot="自定义变量名"
3.作用域插槽:
子组件:<slot :自定义名="要抛出的数据">
父组件:v-slot="父组件随便起个变量名" 里面存放的是子组件对象
自定义指令
概念:除了核心功能默认内置的指令 (v-model 和 v-show...)，Vue 也允许注册自定义指令。 v-xxx
局部注册:1.标签上v-自定义名
2.directives:{自定义名:{inserted(el){功能}}}
全局注册:1.写在main.js中
2.Vue.directives('自定义名',{inserted(el){功能}})
路由
1.概念：设备和ip一一对应的关系
2.优点:
整体不刷新页面，用户体验更好
数据传递容易, 开发效率高
地址栏 输入#哈希值 后面无论输入什么数据，页面都不会刷新
3.基本使用:
1.下载:yarn add vue-router
2.配置:
import VueRouter from 'vue-router'
Vue.use(VueRouter);
import 自定义名 from '文件路径'
let router = new VueRouter({
routes:[
{path:'/路由地址',
component: 自定义名}
]
})
3.app.vue中
<router-link to="path中的路由地址"></router-link>
4.传参:
4.1.修改路由:
{path:'/路由地址/:id',
component: 自定义名}
id为自定义的名
4.2.手动在地址栏添加要传递的参数 /my?id=111
4.3.获取数据 当前组件接受这些数据 $route.query.id(或者其他)
5.重定向
场景1:网页默认打开, 匹配路由"/", 强制切换到"/find"上
语法:
{
path: "/", // 默认hash值路径
redirect: "/find" // 重定向到/find
// 浏览器url中#后的路径被改变成/find-重新匹配数组规则
}
场景2:输入的是错误的值
语法:
{
path: "*",
component: NotFound
}
先定义一个子组件表示找不到页面的显示,并且导入,名为NotFound
6.模式:
场景:地址不想显示#
语法:
const router = new VueRouter({
routes:[],
mode: "history" // 打包上线后需要后台支持, 模式是hash
})
7.编程式导航
7.1定义
{path:'/路由地址',
name:'路由名'
component: 自定义名}
7.2使用
this.$router.push({
path: "路由路径", // 都去 router/index.js定义
name: "路由名"})
7.3点击跳转 @click="goto"
goto(){
this.$router.push({
name: "My"
});
}
7.4跳转传参
query官方：
this.$router.push({
path: "/one",
query:{ id:id, // 参数名：形参},
});
params官方(必须用name):
this.$router.push({
name:"one",
params:{id:id}
});
8.嵌套
场景:二级路由
语法:
{
path: "/find",
name: "Find",
component: Find,
children: [
{ path: "recommend",
component: Recommend},
]
}
<router-link to="/find/recommend">推荐</router-link>
9.自带类名:
router-link自带的2个类名:
1.router-link-exact-active (精确匹配) url中hash值路径, 与href属性值完全相同, 设置此类名
2.router-link-active (模糊匹配) url中hash值, 包含href属性值这个路径
10.守卫
场景:在跳转路由前, 判断用户登陆了才能去<我的音乐>页面, 未登录弹窗提示回到发现音乐页面
语法: router.beforeEach((to, from, next)=>{//路由跳转"之前"先执行这里, 决定是否跳转})
参数1: 要跳转到的路由 (路由对象信息) 目标
参数2: 从哪里跳转的路由 (路由对象信息) 来源
参数3: 函数体 - next()才会让路由正常的跳转切换, next(false)在原地停留, next("强制修改到另一个路由路径上")
注意: 如果不调用next, 页面留在原地
vant
简介: vant是一个轻量、可靠的移动端 Vue 组件库, 开箱即用
使用:
1.下载:yarn add vant -D
2.导入:
2.1全部导入
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
2.2手动按需引入
import Button from 'vant/lib/button'; // button组件
import 'vant/lib/button/style'; // button样式
components: { // 手动注册组件名
}
2.3自动按需引入
下载:yarn add babel-plugin-import
babel.config.js:
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
