1、库和框架
-
Vue是一个渐进式(逐步集成更多的功能)的javascript框架
-
库:封装属性或方法
-
框架:拥有自己的规则和元素,比库强大的多
-
Vue开发模式:传统&工程化开发方式(基于webpack,推荐)
2、@vue-cli
// 安装@vue-cli
yarn global add @vue/cli
// 查看@vue-cli是否安装成功
vue -V
// 创建脚手架
vue create 项目名称
// 启动服务器
yarn serve
3、文件说明
main.js:项目的打包入口文件——Vue初始化
App.vue:Vue页面入口
index.html:浏览器运行的文件
main.js => App.vue => index.html
4、webpack配置文件vue.config.js
module.exports = {
devServer: {
port: 3000, // 修改端口号为3000
open: true, // 打包后自动打开
}
}
5、关闭eslint
// 在vue.config.js中进行配置
lintOnSave: false
6、单Vue文件
- template里只能有一个根标签
- js是独立作用域,变量之间互不影响
- style可以使用scoped设置局部样式
7、插值表达式
目标:在dom标签中,直接插入vue数据变量
语法:
{{表达式}}
vue数据变量:data函数返回的对象上的键值对
8、设计模式
设计模式:
对代码分层,引入一种架构的概念
MVVM:
模型(Model),视图(View),视图模型(View-Model)双向关联
好处:
减少DOM操作,提高开发效率
9、指令
(1)v-bind
语法:
v-bind:属性名="vue变量"
简写:
:属性名="vue变量"
(2)v-on:绑定事件
v-on:事件名=“简单代码”
v-on:事件名=“处理函数名”
v-on:事件名=“处理函数(参数)”
v-on简写:
v-on
<=>@
处理函数:在默认导出的methods对象中定义
(3)Vue中事件处理函数中的事件对象
语法:
如果没有参数,可以直接使用e获取到事件对象
如果传了参数,想要获得事件对象,需要传入$event,处理函数接收
(4)事件修饰符
.stop -阻止事件冒泡
.prevent -组织默认行为
.once -程序运行期间,函数只执行一次
用法:@事件+事件修饰符——eg:@click.prevent
(5)按键修饰符
@keydown.enter 按下回车键
@keydown.esc 按下取消键
(6)v-model(用于表单标签)
双向数据绑定:变量变化,视图自动同步;视图变化,变量自动同步
用法:
v-model="表单变量"
重点:
**下拉菜单的v-model写在select上,值为option的value
**遇到表单复选框,v-model的变量值
非数组——关联的是checked
数组——关联的是value属性
**Vue变量初始值会影响表单的默认状态
v-model修饰符:
.number:转成数值类型赋给Vue数据变量
.trim:去掉首尾的空格
.lazy:当文本框失去焦点(onchange事件发生)的时候再更新Vue数据
(7)v-text
&v-html
(有安全风险,XSS注入)
作用:
将Vue变量设置为标签的内容
区别:
v-text不会解析标签,v-html会解析标签
注意:
v-html&v-text会将标签中的插值表达式覆盖
(8)v-show
&v-if
(赋值为true/false控制标签的显示隐藏)
v-show隐藏:采用display: none(频繁切换)
v-if隐藏:采用从DOM树上直接移除(移除)
v-if可以配合v-else或者v-else-if使用
(9)v-for
用法:
v-for="(只变量, 索引变量) in 目标结构"
v-for=“值变量 in 目标结构”
目标结构可以是数组/对象/数字
目标结构变化,触发v-for的更新:
(1)数组变更方法,就会导致v-for的更新,页面更新
(2)数组非变更方法,返回一个新的数组,不会导致v-for更新,可采用覆盖数组
(3)非变更方法想让v-for更新
- 将非变更方法返回的新数组赋值给原来的数组
- 使用$set(更新的目标结构, 更新位置, 要更新的值)
10、虚拟DOM
虚拟DOM:
在内存中的一个JS对象,保存DOM关键信息
好处:
提高DOM更新的性能, 不频繁操作真实DOM, 在内存中找到变化部分, 再更新真实DOM(打补丁)
11、(比较新旧虚拟DOM)diff算法
(1)同级比较:根元素改变——删除重建整个DOM树
(2)同级比较:根元素不变,属性改变——DOM复用,只更新属性
(3)同级比较:子元素或内容改变
- 无key,就地更新
- 有key,按照key比较
- key值要求:唯一不重复的字符串或数值(优先使用id)
- key的好处:配合虚拟DOM提高更新的性能
12、动态设置class/style
// 控制是否有这个类名
:class="{类名:布尔值}"
// 控制是否有这个样式
:style="{属性名:属性值变量}"
13、过滤器(应用:日期格式化)
- 转换格式过滤器就是一个函数,传入值返回处理后的值,只能在插值表达式和v-bind动态属性里使用
使用场景:
字符串翻转、字母转大写
// main.js中定义全局过滤器
Vue.filter('过滤器名', (值) => {return '返回处理后的值'})
// vue文件中定义局部过滤器,可以定义多个
filters: {
过滤器名字: (值) => {return '返回处理后的值'},
……
}
// 使用语法
Vue变量 | 过滤器名称
- 可同时使用多个过滤器,或者给过滤器传参
// 多个过滤器使用
Vue变量 | 过滤器1 |过滤器2
14、计算属性computed(购物车)
(1)一个变量的值,依赖另外一些数据计算而来的结果
computed: {
"计算属性名"() {
return "值"
}
}
(2)计算属性也是变量,所以不可以和data中的数重名
(3)计算属性的优势:
- 带缓存
- 计算属性对应的函数执行后,会把return值缓存起来
- 依赖项不变,多次调用都是从缓存中取之
- 依赖项的值发生变化时,函数会“自动”执行,并缓存新的值
(4)计算属性完整写法(给计算属性复制的时候才需要写完整写法)
computed: {
"计算属性名": {
set(值) {
},
get() {
return "值"
}
}
}
案例:
- 小选影响全选(every)
- 全选影响小选
- 最后进行反选
15、侦听器watch(可以侦听data/computed属性值的改变)
watch: {
变量名 (newVal, lodVal) {
// 变量名对应值改变这里自动触发
}
}
// 侦听复杂类型,或者立即执行侦听函数
watch: {
"要侦听的属性名": {
immediate: true, // 立即执行
deep: true, // 深度侦听复杂类型内变化
handler (newVal, oldVal) {
}
}
}
16、组件(可复用的页面结构、js代码)
组件优点:独立作用域、代码复用
(1)注册全局组件
// main.js中
// 1、导入组件文件
import 组件变量 from './components/组件文件'
// 2、注册组件
Vue.component('组件名称', 组件变量)
(2)注册局部组件
// .vue文件中
// 1、导入组件文件
import 组件变量 from './components/组件文件'
// 2、注册组件
components: {
组件名: 组件变量
}
(3)使用组件
<!-- 以导入注册组件MyProduct为例 -->
<!-- 格式1 -->
<MyProduct></MyProduct>
<!-- 格式2 -->
<MyProduct />
<!-- 小写,驼峰式短杠连接 -->
<my-product></my-product>
(4)组件样式不冲突scoped
(5)父给子传值(自定义属性)
-
在父组件中给子组件绑定自定义属性,在子组件中使用props接收自定义属性传过来的值
-
循环使用组件:变量和组件都是独立的
(6)单项数据流
从父到子的数据流向
子组件修改数据不通知父亲,父组件的值不会改变
props属性为只读的
(7)子向父传值(自定义函数)
-
在父组件内,给子组件绑定自定义事件和事件处理函数
-
语法:@自定义事件名=“父methods里函数名”
-
子组件内,恰当的时机,触发父绑定的自定义事件,导致父methods里事件处理函数执行
(8)组件间的传值(EventBus)
17、Vue的生命周期(从在页面上创建到销毁的过程——Vue实例的生命周期)
(1)生命周期:创建-挂载-更新-销毁
(2)钩子函数
- 初始化:beforeCreate created
created生命周期中,可以向服务器发送请求并且操作data中的数据
- 挂载:beforeMount mounted
mounted生命周期中,真实DOM已经挂载,可以操作页面上的DOM元素
- 更新:beforeUpdate updated
updated生命周期中,可以获取到修改之后的真实DOM
- 销毁:beforeDestroy destroyed
在这两个钩子函数中,可以停掉已经弃用但是仍然在执行的定时器
18、使用axios发送网络请求
(1)导入axios
import axios from 'axios'
(2)设置请求的基地址
axios.defaults.baseUrl = '请求地址'
(3)将axios挂载到Vue实例对象上
Vue.prototype.$axios = axios
(4)使用axios正式发送请求
this.$axios({
url: ''
//默认使用get方式提交数据
method: 'get/post'
// get发送数据
params: {},
// post发送数据
data: {}
}).then(res => { // 因为使用axios请求回来的数据格式是Promise对象,因此需要使用.then获取请求到的数据
// 业务逻辑
})
19、ref获取原生DOM元素
template
<template>
<div>
<!-- 1. 获取原生DOM元素 -->
<h1 id="h" ref="myH">我是一个h1</h1>
<!-- 2. 获取组件对象 - 可调用组件内一切 -->
<Demo ref="de"></Demo>
<!-- 3. vue更新DOM是异步的 -->
<p ref="myP">{{ count }}</p>
<button @click="btn">点击count+1, 马上提取p标签内容</button>
</div>
</template>
demo
<template>
<div>
<p>我是Demo组件</p>
</div>
</template>
<script>
export default {
methods: {
fn(){
console.log("demo组件内的方法被调用了");
}
}
}
</script>
script
<script>
import Demo from './Demo'
export default {
mounted(){
// 通过id获取DOM元素
console.log(document.getElementById("h")); // h1
// 给DOM元素添加ref属性,通过this.$refs获取DOM元素
console.log(this.$refs.myH); // h1
// 使用子组件的时候,为其设置ref属性,可以通过this.$refs获取到子组件的属性和方法
let demoObj = this.$refs.de;
demoObj.fn()
},
components: {
Demo
},
data(){
return {
count: 0
}
},
methods: {
btn(){
// vue监测数据更新, 开启一个DOM更新队列(异步任务),因此直接获取不到修改后的DOM内容
this.count++;
// console.log(this.$refs.myP.innerHTML); // 0
// 原因: Vue更新DOM异步
// 解决: this.$nextTick()
// 过程: DOM更新完会挨个触发$nextTick里的函数体,$nextTick是一个异步微任务
this.$nextTick(() => {
console.log(this.$refs.myP.innerHTML); // 1
})
}
}
}
</script>
20、动态组件
<component :is="保存组件名称的变量"></component>
// 组件缓存
<keep-alive>
<component :is="保存组件名称的变量"></component>
</keep-alive>
// 组件缓存触发激活钩子函数
activated () {}
deactivated () {}
21、组件插槽
(1)匿名插槽
<!-- Child.vue -->
<div>
<slot>默认内容</slot>
</div>
<!-- Parent.vue -->
<Child>代替内容</Child>
(2)具名插槽
<!-- Child.vue -->
<div>
<slot name="title">默认内容</slot>
<slot name="content">默认内容</slot>
</div>
<!-- Parent.vue -->
<Child>
<template v-slot:title>title内容</template>
<template #content>content内容</template>
</Child>
(3)作用域插槽
<!-- Child.vue -->
<template>
<div>
<p>{{obj.title}}</p>
<slot :data="obj">默认内容</slot>
</div>
</template>
<script>
export default {
data() {
return {
obj: {
title: 'title',
content: 'content'
}
}
}
}
</script>
<!-- Parent.vue -->
<Child>
<template v-slot="scope">
<p>{{scope.data.content}}</p>
</template>
</Child>
22、自定义指令
inserted函数触发:指令所在标签,被插入到网页上触发
(1)全局注册
Vue.directive('自定义指令名', {
inserted(el) {
// 可以对el标签扩展额外功能
}
})
(2)局部注册
directives: {
自定义指令名: {
inserted(el) {
// 可以对el标签扩展额外功能
}
}
}
(3)自定义指令传值
directives: {
自定义指令名: {
inserted(el, binding) {
// binding可以接收到指令传的值
},
update(el, binding) {
// 指令对应数据/标签更新时,此方法执行
}
}
}
23、路由
(1)路由的基本使用(声明式导航)
-
<router-link>相当于a链接,to属性相当于href,点击的会自动激活,添加css类名
-
css类名:
router-link-exact-active(准确匹配)和router-link-active(模糊匹配)
- URL中的hash值和to的值完全相同,就是准确匹配,会添加2个类名
- URL中的hash值包含to的值时,就是模糊匹配,值天价router-link-active
// 使用路由跳转页面
<router-link to="路由"></router-link>
// 设置挂载点-路径切换时,显示对应的组件
<router-view></router-view>
// 导入路由模块
import VueRouter from 'vue-router'
// 注册路由模块
Vue.use(VueRouter)
// 设置路由的路径以及对应组件
const routes = [{
path: 路由的路径,
component: 路由对应的组件
}, {
……
}]
// 生成路由对象
const router = new VueRouter({
routes
})
new Vue({
// 将路由对象注入到vue实例中,this可以访问$route和$router
router,
render: h => h(App),
}).$mount('#app')
(2)声明式导航跳转传值
-
查询字符串传值
传值:
to="/path?参数名=值"
接收:
$route.query.属性名
-
动态路由传值
传值:
to="/path/:属性名"
接收:
$route.params.属性名
(3)路由重定向(redirect: 强制要切换到的路由)
// 将/重定向到/path
{
path: '/',
redirect: '/path'
}, {
path: '/path',
component: 组件名
}
(4)路由404设置
{
path: '*',
component: 组件名
}
(4)路由模式
-
hash路由:http://localhost:8080/#/home
-
history路由:http://localhost:8080/home(以后上线需要服务器支持,否则找的是文件夹)
-
修改路由模式:在实例化路由对象时,传入mode选项和值修改
const router = new VueRouter({
routes,
mode: 'history'
})
(5)编程式导航
使用name进行跳转的时候,URL的hash值还是切换path路径值
-
$router.push({ path: '路由路径' }) $router.push({ name: '路由名称' })
-
跳转传参
使用path进行传参会忽略params
传参推荐使用:name+query
如果当前url上"hash值和?参数"与将要跳转到的"hash值和参数"一致,会爆出冗余导航问题,不会跳转路由
(6)路由嵌套
- 一级路由从/开始定义
- 二级路由往后path直接写名字
- 嵌套路由在上级路由的children数组里编写路由信息对象
const routes = [{
path: '/',
redirect: '/index'
}, {
path: '/index',
component: Index,
children: [{
path: 'content', // 等同于/index/contents
component: Content
}]
}]
(7)路由导航守卫
语法:router.beforeEach((to, from, next) => {})