本文详细介绍了Vue.js框架的核心特性，包括渐进式构建、MVVM模式、指令系统、组件化、虚拟DOM、路由、状态管理等方面。深入探讨了计算属性、侦听器、生命周期钩子函数、axios的使用以及Vue Router的配置。同时，提到了 vant 组件库的引入和使用，以及动态组件和路由嵌套。文章旨在帮助读者全面掌握Vue.js开发技能。
vue是一个渐进式的javascript框架
渐进式代表的含义是：主张最少, 自底向上, 增量开发, 组件集合, 便于复用
@vue/cli安装:
yarn global add @vue/cli 或者
npm install -g @vue/cli
创建脚手架项目: vue create 项目名字 (不能有中文和空格)
lintOnSave: false // 关闭eslint检查
vue指令:
插值表达式: {{ }}
MVVM设计模式:
设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。
-
MVVM，一种软件架构模式，决定了写代码的思想和层次
-
M： model数据模型 (data里定义)
-
V： view视图 （html页面）
-
VM： ViewModel视图模型 (vue.js源码)
-
-
MVVM通过
数据双向绑定让数据自动地双向同步 不再需要操作DOM-
V（修改视图） -> M（数据自动同步）
-
M（修改数据） -> V（视图自动同步）
-
动态属性:
语法: v-bind:原生属性名="vue变量" 或者简写 :原生属性名="vue变量"
事件绑定:
语法: v-on:事件名="少量代码"
语法: v-on:事件名="methods里函数名"
语法: v-on:事件名="ethods里函数名(值)"
简写语法: @事件名=""
事件修饰符:
语法:
- @事件名.修饰符="methods里函数"
- .stop - 阻止事件冒泡
- .prevent - 阻止默认行为
- .once - 程序运行期间, 只触发一次事件处理函数
键盘修饰符:
语法:
- @keyup.enter - 监测回车按键
- @keyup.esc - 监测返回按键
v-model:
- 语法: v-model="vue数据变量"
- 双向数据绑定 value属性 - vue变量
- 数据变化 -> 视图自动同步
- 视图变化 -> 数据自动同步
下拉菜单要绑定在select上
复选框: v-model的变量值
非数组: 关联的是复选框的checked属性
数组: 关联的是复选框的value属性
v-model修饰符:
语法:
- v-model.修饰符="vue数据变量"
- .number 以parseFloat转成数字类型
- .trim 去除首尾空白字符
- .lazy 在change时触发而非input时
vue指令v-text和v-html:
- v-text="vue数据变量"
- v-html="vue数据变量"
会覆盖插值表达式
vue指令 v-show和v-if:
语法:
- v-show="vue变量" 采用的是display:none隐藏(频繁切换使用)
- v-if="vue变量" 直接从DOM树上移除
vue指令-v-for: 口诀: 想要谁循环就放在谁身上
语法
- v-for="(值, 索引) in 目标结构"
- v-for="值 in 目标结构"
语法3:(了解)
v-for="(value,key) in 对象"
语法4:(了解)
v-for="变量名 in 固定数字"
从1开始遍历
:key值作用: 防止就地复用
会触发数组改变, v-for会监测到并更新页面:
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
不会触发v-for更新:
- slice()
- filter()
- concat()
虚拟DOM本质是保存节点信息, 属性和内容的一个JS对象
==好处1: 提高了更新DOM的性能(不用把页面全删除重新渲染)==
==好处2: 虚拟DOM只包含必要的属性(没有真实DOM上百个属性)==
diff算法: vue用diff算法, 新虚拟dom, 和旧的虚拟dom比较
动态class:
语法:
- :class="{类名: 布尔值}"
动态style:
语法
- :style="{css属性: 值}"
过滤器:
过滤器使用
语法: {{ 值 | 过滤器名字
方式1: 全局 - 过滤器
// 任意的.vue文件内"直接"使用
// 语法: Vue.filter("过滤器名", 值 => 处理结果)
方式2: 局部 - 过滤器
// 只能在当前vue文件内使用
/*
语法:
filters: {
过滤器名字 (val) {
return 处理后的值
}
}
*/
给过滤器传值
语法: vue变量 | 过滤器名(值)
多个过滤器使用
语法: vue变量 | 过滤器1 | 过滤器2
vue计算属性-computed:
完整语法:
computed: {
"计算属性名" (){},
"计算属性名": {
set(值){
},
get(){
return 值
}
}
}
// 注意: 计算属性和data属性都是变量-不能重名
// 注意2: 函数内变量变化, 会自动重新计算结果返回
vue侦听器-watch:
语法:
watch: {
变量名 (newVal, oldVal){
// 变量名对应值改变这里自动触发
},
变量名: {
handler(newVal, oldVal){
},
deep: true, // 深度侦听(对象里面层的值改变)
immediate: true // 立即侦听(网页打开handler执行一次)
}
}
用侦听器实现本地存储: (侦听数据的变化)
vue组件_概念:
组件是可复用的 Vue 实例, 封装标签, 样式和JS代码
组件化 ：封装的思想，把页面上 可重用的部分 封装为 组件，从而方便项目的 开发 和 维护
全局 - 注册使用
全局入口在main.js, 在new Vue之上注册
语法:
import Vue from 'vue'
import 组件对象 from 'vue文件路径'
Vue.component("组件名", 组件对象)
局部 - 注册使用
语法:
import 组件对象 from 'vue文件路径'
export default {
components: {
"组件名": 组件对象
}
}
vue组件-scoped作用: 解决多个组件样式名相同, 冲突问题
vue组件通信_父向子-props:
1. 创建组件components/MyProduct.vue - 复制下面标签
2. 组件内在props定义变量, 用于接收外部传入的值
3. App.vue中引入注册组件, 使用时, 传入具体数据给组件显示
单向数据流: 从父到子的数据流向, 叫单向数据流
子组件修改不通知父级的话会造成数据不一致性, Vue规定props里的变量, 本身是只读的
vue组件通信_子向父
语法:
- 父: @自定义事件名="父methods函数"
- 子: this.$emit("自定义事件名", 传值) - 执行父methods里函数代码
vue组件通信-EventBus: 用于跨组件通信时使用
核心语法:
EventBus/index.js- 定义事件总线bus对象
计算属性和侦听器watch有什么区别？
1.一个是侦听属性，一个是计算属性 2.一个是为了应对复杂的逻辑计算，一个是对数据的变化作出反应 3.一个是只有当缓存改变时才执行，一个是只要从新渲染就会执行 4.一个有缓存，一个没有缓存
计算属性和methods有什么区别？
1、计算属性是基于它们的依赖进行缓存的，只有在相关依赖发生改变时它们才会重新求值也就是说，只要他的依赖没有发生变化，那么每次访问的时候计算属性都会立即返回之前的计算结果，不在执行函数
2、methods方法，每当触发重新渲染时，调用方法将总是再次执行函数
3、计算属性具有缓存功能，而methods没有
vue生命周期
钩子函数:
// 一. 初始化
// new Vue()以后, vue内部给实例对象添加了一些属性和方法, data和methods初始化"之前"
beforeCreate(){
console.log("beforeCreate----执行");
console.log(this.msg); // undefined
},
// data和methods初始化以后
// 场景: 网络请求, 注册全局事件
created () {
console.log("created----执行");
console.log(this.msg); // Hello, Vue
// 定时器
// this.timer = setInterval(()=>{console.log('哈哈哈');},1000)
},
// 编译模板生成虚拟的DOM
// 二. 挂载
// 真实DOM挂载之前
// 场景: 预处理data, 不会触发updated钩子函数
beforeMount(){
console.log("beforeMount----执行");
console.log(document.getElementById("myP")); // null
},
// 真实DOM挂载以后
// 场景: 挂载后真实DOM
mounted () {
console.log("mounted----执行");
console.log(document.getElementById("myP"));
},
// 三. 更新
// 前提: data数据改变才执行
// 更新之前
beforeUpdate(){
console.log("beforeUpdate----执行");
console.log(document.querySelectorAll("#myUL>li")[4]); // undefined
},
// 更新之后
// 场景: 获取更新后的真实DOM
updated () {
console.log("updated----执行");
console.log(document.querySelectorAll("#myUL>li")[4]);
},
// 更新的数据 ---- 编译生成虚拟DOM ---- beforeUpdate ---- 将更新后的虚拟DOM生成真实的DOM ---- updated ---- 可以拿到更新真实DOM
// 四. 销毁
// 前提: v-if="false" 销毁Vue实例
// 场景: 移除全局事件, 移除当前组件, 计时器, 定时器, eventBus移除事件$off方法
beforeDestroy () {
console.log("beforeDestroy----执行");
clearInterval(this.timer)
},
destroyed(){
console.log("destroyed----执行");
}
axios特点:
- 支持客户端发送Ajax请求
- 支持服务端Node.js发送请求
- 支持Promise相关用法
- 支持请求和响应的拦截器功能
- 自动转换JSON数据
- axios 底层还是原生js实现, 内部通过Promise封装的
基本使用:
axios({
method: '请求方式', // get post
url: '请求地址',
data: { // 拼接到请求体的参数, post请求的参数
xxx: xxx,
},
params: { // 拼接到请求行的参数, get请求的参数
xxx: xxx
}
}).then(res => {
console.log(res.data) // 后台返回的结果
}).catch(err => {
console.log(err) // 后台报错返回
})
全局配置前缀基地址:
axios.defaults.baseURL = "http://123.57.109.30:3006"
利用 ref=" " 和 this.$refs 可以用于获取 dom 元素
$nextTick使用:
// 原因: Vue更新DOM是异步的, 还没有挂载到真实DOM上
// 解决: this.$nextTick()
// 过程: DOM更新完会挨个触发$nextTick里的函数体
组件的name属性值, 可以用来注册组件名字
扩大复选框的点击范围:
将input里的id属性和label里的for属性都用数据的id设置, 就可以实现label里面包含的点击图片也能选中的效果
全局设置axios方法:
自定义props:
动态组件: 多个组件使用同一个挂载点，并动态切换，这就是动态组件
<component :is="comName"></component>
组件缓存: <keep-alive>
keep-alive可以提高组件的性能, 内部包裹的标签不会被销毁和重新创建, 触发激活和非激活的生命周期方法
组件插槽: vue提供组件插槽能力, 允许开发者在封装组件时，把不确定的部分定义为插槽
具名插槽: <slot name="title"></slot>
<template v-slot:title / #title>
作用域插槽:
<slot name="body" :row="obj"></slot>
<!-- scope的值:{row:obj} -->
<template #body="scope">
自定义指令:
// 全局指令 - 到处"直接"使用
Vue.directive("gfocus", {
inserted(el) {
el.focus() // 触发标签的事件方法
}
})
局部: directives: {
focus: {
inserted(el){
el.focus()
}
}
// 注意:
// inserted方法 - 指令所在标签, 被插入到网页上触发(一次)
// update方法 - 指令对应数据/标签更新时, 此方法执行
props: // 自定义校验规则
validator(value) { // value就是接到的数组 }
路由: 设备和ip的映射关系
作用: 在一个页面里, 切换业务场景
优点：
- 整体不刷新页面，用户体验更好
- 数据传递容易, 开发效率高
缺点：
- 开发成本高(需要学习专门知识)
- 首次加载会比较慢一点, 不利于seo
在Vue项目中集成路由: vue-router
组件分类: .vue文件分2类, 一个是页面组件, 一个是复用组件
// 1. 下载vue-router (yarn add vue-router)
// 2. 引入
import VueRouter from 'vue-router'
// 3. 注册全局组件
Vue.use(VueRouter)
// 4. 规则数组
const routes = [
{
path: "/find",
name: 'Find',
}]
// 5. 生成路由对象
const router = new VueRouter({
routes, // routes是固定key(传入规则数组)
mode: "history" // 默认不写是"hash" 模式设置
})
// 6. 路由对象注入到vue实例中, this可以访问到$route和$router
new Vue({
router,
})
声明式导航:
1. vue-router提供了一个全局组件 router-link
2. router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)
3. router-link提供了声明式导航高亮的功能(自带类名)
例: <router-link to="/find">发现音乐</router-link>
跳转传参:
在router-link上的to属性传值, 语法格式如下
- /path?参数名=值
- /path/值 – 需要路由对象提前配置 path: “/path/参数名”
对应页面组件接收传递过来的值
- $route.query.参数名
- $route.params.参数名
重定向:
const routes = [
{
path: "/", // 默认hash值路径
redirect: '/find' // 重定向到/find
}]
404页面:
// 404 放在最后, 规则是从前往后逐个比较path
{
path: "*",
component: NotFound
}
编程式导航:
this.$router.push({
path: "路由路径"
name: "路由名"
})
// 目标: 编程式导航 - js方式跳转路由
// 语法:
// this.$router.push({path: "路由路径"})
// this.$router.push({name: "路由名"})
// 注意:
// 虽然用name跳转, 但是url的hash值还是切换path路径值
// 场景:
// 方便修改: name路由名(在页面上看不见随便定义)
// path可以在url的hash值看到(尽量符合组内规范)
跳转传参:
// 目标: 编程式导航 - 跳转路由传参
// 方式1:
// params => $route.params.参数名
// 方式2:
// query => $route.query.参数名
// 重要: path会自动忽略params
// 推荐: name+query方式传参
// 注意: 如果当前url上"hash值和?参数"与你要跳转到的"hash值和?参数"一致, 爆出冗余导航的问题, 不会跳转路由
路由嵌套:
一级路由path从/开始定义
二级路由往后path直接写名字, 无需/开头
嵌套路由在上级路由的children数组里编写路由信息对象
全局前置守卫:
// 目标: 路由守卫
// 场景: 当你要对路由权限判断时
// 语法: router.beforeEach((to, from, next)=>{//路由跳转"之前"先执行这里, 决定是否跳转})
// 参数1: 要跳转到的路由 (路由对象信息) 目标
// 参数2: 从哪里跳转的路由 (路由对象信息) 来源
// 参数3: 函数体 - next()才会让路由正常的跳转切换, next(false)在原地停留, next("强制修改到另一个路由路径上")
// 注意: 如果不调用next, 页面留在原地
vant组件库:
vant是一个轻量、可靠的移动端 Vue 组件库, 开箱即用
全部引入:
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
手动按需引入:
// import Button from 'vant/lib/button'; // button组件
// import 'vant/lib/button/style'; // button样式
// components: { // 手动注册组件名
// // VanButton: Button
// // 等价的
// [Button.name]: Button
// }
自动按需引入(常用 推荐):
安装: yarn add babel-plugin-import -D
配置: 在babel配置文件里
全局注册:
import { Button } from 'vant';
Vue.use(Button) // Button组件全局注册
扫一扫
32万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
