文章目录
- 前言
- 一、 @vue/cli脚手架 搭建项目
- 二 Vue指令
- 三 vue 属性内容
- 四 组件
- 五 组件进阶
- 六 路由系统
- 7 补充知识 vant组件库 （移动端 组件库）
前言
? 渐进式javacript框架, 一套拥有自己规则的语法
? 官网地址: https://cn.vuejs.org/ (作者: 尤雨溪)
一、 @vue/cli脚手架 搭建项目
1 全局安装@vue/cli 模块包 yarn global add @vue/cli
2 创建项目 vue create 项目名
yarn serve 启动项目
3 @vue/cli 目录和代码分析
目标：文件夹和文件含义, 关键文件里代码意
4 _项目架构了解
5_@vue/cli 自定义配置 vue.config.js
6_eslint检查代码
eslint是一种代码检查的工具
7_单vue文件讲解
二 Vue指令
1 插值表达式 {{ 表达式 }}
MVVM设计模式 （减少DOM操作, 提高开发效率）
2 v-bind （操作属性 简写 ：）
_动态class
1 :class="{类名: 布尔值}"
2 :style="{css属性名: 值}"
3 v-on （绑定事件 简写：@）
-v-on事件对象 （@click=“fn(a,$event)”）
v-on修饰符 @事件名.修饰符(.stop .prevent .once )
修饰符列表
? .stop - 阻止事件冒泡
? .prevent - 阻止默认行为
? .once - 程序运行期间, 只触发一次事件处理函数
键盘事件, 添加修饰符
更多修饰符: https://cn.vuejs.org/v2/guide/events.html
4 -v-model 双向数据绑定(主要用在表单上)
v-model修饰符 （ v-model.修饰符）.number .trim .lazy
5 v-text和v-html
6 v-show和v-if （显示隐藏）
7 v-for ： v-for="(值变量, 索引变量) in 目标结构"
三 vue 属性内容
1 _更新监测, key作用
数组变更方法, 就会导致v-for更新, 页面更新
_diff算法
- diff算法如何比较新旧虚拟DOM?同级比较
- 根元素变化?删除重新建立整个DOM树
- 根元素未变, 属性改变?DOM复用, 只更新属性
key 作用
- 子元素或者内容改变会分diff哪2种情况比较?
无key, 就地更新
有key, 按照key比较 - key值要求是?
唯一不重复的字符串或者数值 - key应该怎么用?
有id用id, 无id用索引 - key的好处?
可以配合虚拟DOM提高更新的性能
2 _过滤器 用在插值表达式和v-bind动态属性里 （moment时间过滤模块）
? 语法:
? Vue.filter(“过滤器名”, (值) => {return “返回处理后的值”}) //main.js中定义
? filters: {过滤器名字: (值) => {return “返回处理后的值”}
3 _计算属性 （一个变量的值, 依赖另外一些数据计算而来的结果）
注意: 计算属性也是vue数据变量, 所以不要和data里重名, 用法和data相同
_计算属性_缓存
_计算属性_完整写法 set(){},get(){}
4 _侦听器_watch 可以侦听data/computed属性值的改变
深度侦听和立即执行
四 组件
1 _组件_基础使用（全局，局部）
组件-scoped作用（会自动给标签添加data-v-hash值属性）
CSS样式不影响其他组件
2 Vue组件通信
_父传子_props （props里的变量, 本身是只读的）
2 父组件内
_子向父_自定义事件 @自定义事件名=“父methods里函数名”
- 子组件内, 恰当的时机, 触发父给我绑的自定义事件, 导致父methods里事件处理函数执行
子组件内
_跨组件通信-EventBus
? 语法
? src/EventBus/index.js – 创建空白Vue对象并导出
? 在要接收值的组件(List.vue) eventBus.
o
n
(
′
事
件
名
′
,
函
数
体
)
?
在
要
传
递
值
的
组
件
(
M
y
P
r
o
d
u
c
t
.
v
u
e
)
e
v
e
n
t
B
u
s
.
on('事件名', 函数体) ? 在要传递值的组件(MyProduct.vue) eventBus.
on(′事件名′,函数体)?在要传递值的组件(MyProduct.vue)eventBus.emit(‘事件名’, 值)
五 组件进阶
1 vue生命周期
从创建 到 销毁 的整个过程就是 – Vue实例的 - 生命周期
1.1_钩子函数（4大阶段8个方法）
1.2_初始化 create（创建实例）
1.3_挂载 mounted（真实Dom）
1.4_更新 updated(data数据变更后)
1.5_销毁 destroy (销毁事件）
)
2 axios使用（ajax+Promise）
axios 是一个专门用于发送ajax请求的库
官网: http://www.axios-js.com
ajax原理?
浏览器window接口的XMLHttpRequest
axios是什么?
基于原生ajax+Promise技术封装通用于前后端的请求库
2.1_axios使用_获取数据（get）
2.2_axios使用_get传参params{}
axios哪个配置项会把参数自动写到url?后面
params
2.3_axios使用-post //data{}
axios默认发给后台请求体数据格式是?
json字符串格式
2.4_axios全局配置 axios.defaults.baseURL =""
3 $refs和 $nextTick使用
1 _获取DOM id 或$refs
3.1_获取组件对象 ref属性获取
3.1_Vue-异步更新DOM $nextTick
Vue更新DOM是异步的
优化: $nextTick()返回Promise 配合await使用
$nextTick函数原地返回Promise对象
3.4_组件name属性使用
4 _动态组件< component is=“组件名”>
1_组件缓存
_组件激活和非激活 activated –deactivated
5_组件插槽 slot> 默认内容</slot
1 具名插槽 slot name="" 使用时 #:‘插槽名’
2 作用域插槽 (使用子组件内变量)
可以让组件更加灵活的适用于不同的场景和项目
6 自定义指令（获取标签, 扩展额外的功能）
1_自定义指令_注册 全局和局部 directive(xx,inserted(el){})
传值 触发update（）方法
六 路由系统
.vue文件分2类, 一个是页面组件, 一个是复用组件
1 Vue路由简介和基础使用
路径和组件的映射关系
vue-router
? 官网: https://router.vuejs.org/zh/
组件分类
vue-router模块使用步骤 （7步）
? 步骤
-
下载vue-router模块到当前工程
yarn add vue-router -
在main.js中引入VueRouter函数
import VueRouter from 'vue-router' -
添加到Vue.use()身上 – 注册全局RouterLink和RouterView组件
Vue.use(VueRouter) -
创建路由规则数组 – 路径和组件名对应关系
const routes = [
{
path: "/find",
component: Find
},
{
path: "/my",
component: My
},
{
path: "/part",
component: Part
}
]
- 用规则生成路由对象
const router = new VueRouter({
routes
})
- 把路由对象注入到new Vue实例中
new Vue({
router
})
- 用router-view作为挂载点, 切换不同的路由页面
注意: 一切都要以url上hash值为准
components换成router-view
<router-view to="xxx"></router-view>
2 声明式导航 - 跳转传参
{
path: "/part",
component: Part
},
{
path: "/part/:username", // 有:的路径代表要接收具体的值
component: Part
},
3. vue路由 - 重定向和模式
目标: 匹配path后, 强制切换到目标path上
const routes = [
{
path: "/", // 默认hash值路径
redirect: "/find" // 重定向到/find
// 浏览器url中#后的路径被改变成/find-重新匹配数组规则
}
]
3.1 路由 - 404页面
找不到路径给个提示页面
1 创建NotFound页面
2 在main.js - 修改路由配置
//导入包
import NotFound from '@/views/NotFound'
const routes = [
// ...省略了其他配置
// 404在最后(规则是从前往后逐个比较path)
{
path: "*",
component: NotFound
}
]
3.2 路由 - 模式设置hash histoty
? hash路由例如: http://localhost:8080/#/home
? history路由例如: http://localhost:8080/home (以后上线需要服务器端支持, 否则找的是文件夹)
const router = new VueRouter({
4. vue路由 - 编程式导航 用JS跳转
语法:
二选一
this.$router.push({
path: "路由路径", // 都去 router/index.js定义
name: "路由名"
})
1 main.js - 路由数组里, 给路由起名字
{
path: "/find",
name: "Find",
component: Find
},
4.1 编程式导航-跳转传参 query:{}；params:{}
// 目标: 编程式导航 - 跳转路由传参
// 方式1:
// params => $route.params.参数名
// 方式2:
// query => $route.query.参数名
// 重要: path会自动忽略params
// 推荐: name+query方式传参
// 注意: 如果当前url上"hash值和?参数"与你要跳转到的"hash值和?参数"一致, 爆出冗余导航的问题, 不会跳转路由
5 vue路由 - 嵌套和守卫 children:[]
const routes = [
// ...省略其他
{
path: "/find",
name: "Find",
component: Find,
children: [
{
path: "recommend",
component: Recommend
},
{
path: "ranking",
component: Ranking
},
{
path: "songlist",
component: SongList
}
]
}
// ...省略其他
]
5.1 声明导航 - 类名区别 router-link自带的2个类名
1- router-link-exact-active (精确匹配) url中hash值路径, 与href属性值完全相同, 设置此类名
2- router-link-active (模糊匹配) url中hash值, 包含href属性值这个路径
5.2 全局前置守卫 跳转之前判断
目标: 路由跳转之前, 先执行一次前置守卫函数, 判断是否可以正常跳转
在路由对象上使用固定方法beforeEach
语法 router.beforeEach((to, from, next)=》{}）
// 目标: 路由守卫
// 场景: 当你要对路由权限判断时
// 语法: router.beforeEach((to, from, next)=>{//路由跳转"之前"先执行这里, 决定是否跳转})
// 参数1: 要跳转到的路由 (路由对象信息) 目标
// 参数2: 从哪里跳转的路由 (路由对象信息) 来源
// 参数3: 函数体 - next()才会让路由正常的跳转切换, next(false)在原地停留, next("强制修改到另一个路由路径上")
// 注意: 如果不调用next, 页面留在原地
// 例子: 判断用户是否登录, 是否决定去"我的音乐"/my
const isLogin = true; // 登录状态(未登录)
router.beforeEach((to, from, next) => {
if (to.path === "/my" && isLogin === false) {
alert("请登录")
next(false) // 阻止路由跳转
} else {
next() // 正常放行
}
})
7 补充知识 vant组件库 （移动端 组件库）
官网：
https://vant-contrib.gitee.io/vant/#/zh-CN/
