「这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战」
Vue 学习大纲
指令
样式处理 class 和 style
条件渲染
参考：条件渲染
列表渲染
参考：列表渲染
事件处理
参考：事件处理
表单输入绑定
参考：表单输入绑定
计算属性和侦听器
计算属性
侦听器
生命周期介绍
- vue 生命周期钩子函数
- 简单说：一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期
生命周期钩子函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，这些事件，统称为组件的生命周期函数！
- 注意：Vue 在执行过程中会自动调用
生命周期钩子函数，我们只需要提供这些钩子函数即可 - 注意：钩子函数的名称都是 Vue 中规定好的！
beforeCreate()
- 说明：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
- 注意：此时，无法获取 data 中的数据、methods 中的方法
created()
- 注意：这是一个常用的生命周期，可以调用 methods 中的方法、改变 data 中的数据
- vue 实例生命周期 参考 1
- vue 实例生命周期 参考 2
- 使用场景：发送请求获取数据
beforeMounted()
- 说明：在挂载开始之前被调用
mounted()
- 说明：此时，vue 实例已经挂载到页面中，可以获取到 el 中的 DOM 元素，进行 DOM 操作
beforeUpdated()
- 说明：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
- 注意：此处获取的数据是更新后的数据，但是获取页面中的 DOM 元素是更新之前的
updated()
- 说明：组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
beforeDestroy()
- 说明：实例销毁之前调用。在这一步，实例仍然完全可用。
- 使用场景：实例销毁之前，执行清理任务，比如：清除定时器等
destroyed()
- 说明：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
组件
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树
- 创建组件的两种方式：1 全局组件 2 局部组件
全局组件
- 说明：全局组件在所有的 vue 实例中都可以使用
- 注意：先注册组件，再初始化根实例
// 1 注册全局组件
Vue.component('my-component', {
// template 只能有一个根元素
template: '<p>A custom component!</p>',
// 组件中的 `data` 必须是函数 并且函数的返回值必须是对象
data() {
return {
msg: '注意：组件的data必须是一个函数！！！'
}
}
})
// 2 使用：以自定义元素的方式
<div id="example">
<my-component></my-component>
</div>
// =====> 渲染结果
<div id="example">
<p>A custom component!</p>
</div>
// 3 template属性的值可以是：
- 1 模板字符串
- 2 模板id template: '#tpl'
<script type="text/x-template" id="tpl">
<p>A custom component!</p>
</script>
extend：使用基础 Vue 构造器，创建一个 “子类”。参数是一个包含组件选项的对象。
// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })
var Home = Vue.extend({
template: '',
data() {}
})
Vue.component('home', Home)
局部组件
- 说明：局部组件，是在某一个具体的 vue 实例中定义的，只能在这个 vue 实例中使用
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
// 注意：此处为 components
components: {
// <my-component> 将只在当前vue实例中使用
// my-component 为组件名 值为配置对象
'my-component': {
template: ``,
data () { return { } },
props : []
}
}
})
is 特性
在某些特定的标签中只能存在指定表恰 如 ul > li 如果要浏览器正常解析则需要使用 is
<!-- 案例 -->
<ul id="app">
<!-- 不能识别 -->
<my-li></my-li>
正常识别
<li is="my-li"></li>
</ul>
<script>
var vm = new Vue({
el: "#app",
components : {
myLi : {
template : `<li>内容</li>`
}
}
})
</script>
组件通讯
父组件到子组件
- 方式：通过子组件
props属性来传递数据 props 是一个数组 - 注意：属性的值必须在组件中通过
props属性显示指定，否则，不会生效 - 说明：传递过来的
props属性的用法与data属性的用法相同
<div id="app">
<!-- 如果需要往子组件总传递父组件data中的数据 需要加v-bind="数据名称" -->
<hello v-bind:msg="info"></hello>
<!-- 如果传递的是字面量 那么直接写-->
<hello my-msg="abc"></hello>
</div>
<!-- js -->
<script>
new Vue({
el: "#app",
data : {
info : 15
},
components: {
hello: {
// 创建props及其传递过来的属性
props: ['msg', 'myMsg'],
template: '<h1>这是 hello 组件，这是消息：{{msg}} --- {{myMsg}}</h1>'
}
}
})
</script>
子组件到父组件
方式：父组件给子组件传递一个函数，由子组件调用这个函数
- 说明：借助 vue 中的自定义事件（v-on:cunstomFn="fn"）
步骤:
- 1、在父组件中定义方法 parentFn
- 2、在子组件 组件引入标签 中绑定自定义事件 v-on: 自定义事件名 ="父组件中的方法" ==> @pfn="parentFn"
- 3、子组件中通过
$emit()触发自定义事件事件 this.$emit(pfn, 参数列表。。。)
<hello @pfn="parentFn"></hello>
<script>
Vue.component('hello', {
template: '<button @click="fn">按钮</button>',
methods: {
// 子组件：通过$emit调用
fn() {
this.$emit('pfn', '这是子组件传递给父组件的数据')
}
}
})
new Vue({
methods: {
// 父组件：提供方法
parentFn(data) {
console.log('父组件：', data)
}
}
})
</script>
非父子组件通讯
在简单的场景下，可以使用一个空的 Vue 实例作为事件总线
$on()：绑定自定义事件
var bus = new Vue()
// 在组件 B 绑定自定义事件
bus.$on('id-selected', function (id) {
// ...
})
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
- 示例：组件 A ---> 组件 B
<!-- 组件A： -->
<com-a></com-a>
<!-- 组件B： -->
<com-b></com-b>
<script>
// 中间组件
var bus = new Vue()
// 通信组件
var vm = new Vue({
el: '#app',
components: {
comB: {
template: '<p>组件A告诉我：{{msg}}</p>',
data() {
return {
msg: ''
}
},
created() {
// 给中间组件绑定自定义事件 注意:如果用到this 需要用箭头函数
bus.$on('tellComB', (msg) => {
this.msg = msg
})
}
},
comA: {
template: '<button @click="emitFn">告诉B</button>',
methods: {
emitFn() {
// 触发中间组件中的自定义事件
bus.$emit('tellComB', '土豆土豆我是南瓜')
}
}
}
}
})
</script>
内容分发
- 通过 标签指定内容展示区域
案例：
<!-- html代码 -->
<div id="app">
<hello>
<!-- 如果只有一个slot插槽 那么不需要指定名称 -->
<p slot="插槽名称">我是额外的内容</p>
</hello>
</div>
// js代码
new vue({
el : "#app",
components : {
hello : {
template : `
<div>
<p>我是子组件中的内容</p>
<slot ></slot>
</div>
`
}
}
})
获取组件（或元素） - refs
- 说明：
vm.$refs一个对象，持有已注册过 ref 的所有子组件（或 HTML 元素） - 使用：在 HTML 元素 中，添加
ref属性，然后在 JS 中通过vm.$refs.属性来获取 - 注意：如果获取的是一个子组件，那么通过 ref 就能获取到子组件中的 data 和 methods
<div id="app">
<div ref="dv"></div>
<my res="my"></my>
</div>
<!-- js -->
<script>
new Vue({
el : "#app",
mounted() {
this.$refs.dv //获取到元素
this.$refs.my //获取到组件
},
components : {
my : {
template: `<a>sss</a>`
}
}
})
</script>
SPA - 单页应用程序
SPA： Single Page Application
单页Web应用（single page application，SPA），就是只有一个Web页面的应用，
是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。
-
单页面应用程序：
- 只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据. 然后, 由页面中 js 解析获取的数据, 展示在页面中
-
传统多页面应用程序：
- 对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面
优势
- 1 减少了请求体积，加快页面响应速度，降低了对服务器的压力
- 2 更好的用户体验，让用户在 web app 感受 native app 的流畅
实现思路和技术点
- 1 ajax
- 2 锚点的使用（window.location.hash #）
- 3 hashchange 事件 window.addEventListener("hashchange",function () {})
- 4 监听锚点值变化的事件，根据不同的锚点值，请求相应的数据
- 5 原本用作页面内部进行跳转，定位并展示相应的内容
路由
-
路由即：浏览器中的哈希值（# hash）与展示视图内容（template）之间的对应规则
-
vue 中的路由是：hash 和 component 的对应关系
在 Web app 中，通过一个页面来展示和管理整个应用的功能。
SPA 往往是功能复杂的应用，为了有效管理所有视图内容，前端路由 应运而生！ 简单来说，路由就是一套映射规则（一对一的对应规则），由开发人员制定规则。 当 URL 中的哈希值（# hash）发生改变后，路由会根据制定好的规则，展示对应的视图内容
基本使用
- 安装：npm i -S vue-router
<div id="app">
<!-- 5 路由入口 指定跳转到只定入口 -->
<router-link to="/home">首页</router-link>
<router-link to="/login">登录</router-link>
<!-- 7 路由出口：用来展示匹配路由视图内容 -->
<router-view></router-view>
</div>
<!-- 1 导入 vue.js -->
<script src="./vue.js"></script>
<!-- 2 导入 路由文件 -->
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
// 3 创建两个组件
const Home = Vue.component('home', {
template: '<h1>这是 Home 组件</h1>'
})
const Login = Vue.component('login', {
template: '<h1>这是 Login 组件</h1>'
})
// 4 创建路由对象
const router = new VueRouter({
routes: [
// 路径和组件一一对应
{ path: '/home', component: Home },
{ path: '/login', component: Login }
]
})
var vm = new Vue({
el: '#app',
// 6 将路由实例挂载到vue实例
router
})
</script>
重定向
// 将path 重定向到 redirect
{ path: '/', redirect: '/home' }
路由其他配置
-
路由导航高亮
- 说明：当前匹配的导航链接，会自动添加 router-link-exact-active router-link-active 类
- 配置：linkActiveClass
-
匹配路由模式
- 配置：mode
new Router({
routers:[],
mode: "hash", //默认hash | history 可以达到隐藏地址栏hash值 | abstract，如果发现没有浏览器的 API 则强制进入
linkActiveClass : "now" //当前匹配的导航链接将被自动添加now类
})
路由参数
- 说明：我们经常需要把某种模式匹配到的所有路由，全都映射到同一个组件，此时，可以通过路由参数来处理
- 语法：/user/:id
- 使用：当匹配到一个路由时，参数值会被设置到 this.$route.params
- 其他：可以通过 $route.query 获取到 URL 中的查询参数 等
// 方式一
<router-link to="/user/1001">如果你需要在模版中使用路由参数 可以这样 {{$router.params.id}}</router-link>
// 方式二
<router-link :to="{path:'/user',query:{name:'jack',age:18}}">用户 Rose</router-link>
<script>
// 路由
var router = new Router({
routers : [
// 方式一 注意 只有/user/1001这种形式能被匹配 /user | /user/ | /user/1001/ 都不能被匹配
// 将来通过$router.params获取参数返回 {id:1001}
{ path: '/user/:id', component: User },
// 方式二
{ path: "user" , component: User}
]
})
// User组件：
const User = {
template: `<div>User {{ $route.params.id }}</div>`
}
</script>
<!-- 如果要子啊vue实例中获取路由参数 则使用this.$router.params 获取路由参数对象 -->
<!-- {{$router.query}} 获取路由中的查询字符串 返回对象 -->
嵌套路由 - 子路由
- 路由是可以嵌套的，即：路由中又包含子路由
- 规则：父组件中包含 router-view，在路由规则中使用 children 配置
// 父组件：
const User = Vue.component('user', {
template: `
<div class="user">
<h2>User Center</h2>
<router-link to="/user/profile">个人资料</router-link>
<router-link to="/user/posts">岗位</router-link>
<!-- 子路由展示在此处 -->
<router-view></router-view>
</div>
`
})
// 子组件[简写]
const UserProfile = {
template: '<h3>个人资料：张三</h3>'
}
const UserPosts = {
template: '<h3>岗位：FE</h3>'
}
// 路由
var router =new Router({
routers : [
{ path: '/user', component: User,
// 子路由配置：
children: [
{
// 当 /user/profile 匹配成功，
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})
状态管理（vuex）
vuex 是什么
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
怎么使用 vuex
第一步安装
npm install vuex -S
第二步创建 store
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
//不是在生产环境debug为true
const debug = process.env.NODE_ENV !== 'production';
//创建Vuex实例对象
const store = new Vuex.Store({
strict:debug,//在不是生产环境下都开启严格模式
state:{
},
getters:{
},
mutations:{
},
actions:{
}
})
export default store;
第三步注入 vuex
import Vue from 'vue';
import App from './App.vue';
import store from './store';
const vm = new Vue({
store:store,
render: h => h(App)
}).$mount('#app')
vuex 中有几个核心属性，分别是什么？
一共有 5 个核心属性，分别是:
- state 唯一数据源, Vue 实例中的 data 遵循相同的规则
- getters 可以认为是 store 的计算属性, 就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值.
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
- mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation, 非常类似于事件, 通过 store.commit 方法触发
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变更状态
state.count++
}
}
})
store.commit('increment')
- action Action 类似于 mutation，不同在于 Action 提交的是 mutation，而不是直接变更状态，Action 可以包含任意异步操作
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
- module 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。
const moduleA = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
ajax 请求代码应该写在组件的 methods 中还是 vuex 的 actions 中
如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里。
如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入 action 里，方便复用。
从 vuex 中获取的数据能直接更改吗？
从 vuex 中取的数据，不能直接更改，需要浅拷贝对象之后更改，否则报错；
Vuex 的严格模式是什么, 有什么作用, 怎么开启？
在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。
在 Vuex.Store 构造器选项中开启, 如下
const store = new Vuex.Store({
strict:true,
})
怎么在组件中批量使用 Vuex 的 getter 属性
使用 mapGetters 辅助函数, 利用对象展开运算符将 getter 混入 computed 对象中
import {mapGetters} from 'vuex'
export default{
computed:{
...mapGetters(['total','discountTotal'])
}
}
组件中重复使用 mutation
使用 mapMutations 辅助函数, 在组件中这么使用
import { mapMutations } from 'vuex'
methods:{
...mapMutations({
setNumber:'SET_NUMBER',
})
}
然后调用 this.setNumber(10) 相当调用 this.$store.commit('SET_NUMBER',10)
mutation 和 action 有什么区别
- action 提交的是 mutation，而不是直接变更状态。mutation 可以直接变更状态
- action 可以包含任意异步操作。mutation 只能是同步操作
- 提交方式不同
action 是用 this.store.dispatch('ACTION_NAME',data)来提交。
mutation 是用 this.$store.commit('SET_NUMBER',10)来提交
- 接收参数不同，mutation 第一个参数是 state，而 action 第一个参数是 context，其包含了
{
state, // 等同于 `store.state`，若在模块中则为局部状态
rootState, // 等同于 `store.state`，只存在于模块中
commit, // 等同于 `store.commit`
dispatch, // 等同于 `store.dispatch`
getters, // 等同于 `store.getters`
rootGetters // 等同于 `store.getters`，只存在于模块中
}
在 v-model 上怎么用 Vuex 中 state 的值？
需要通过 computed 计算属性来转换。
<input v-model="message">
// ...
computed: {
message: {
get () {
return this.$store.state.message
},
set (value) {
this.$store.commit('updateMessage', value)
}
}
}
vue 单文件组件
- vue-loader
- single-file components(单文件组件)
- 后缀名：
.vue，该文件需要被预编译后才能在浏览器中使用 - 注意：单文件组件依赖于两个包 vue-loader / vue-template-compiler
- 安装：
npm i -D vue-loader vue-template-compiler
<!-- App.vue 示例代码： -->
<template>
<div>
<h1>VUE 单文件组件示例 -- App.vue</h1> <p>这是 模板内容</p>
</div> </template>
<script>
// 组件中的逻辑代码 export default {}
</script>
<style>
/* 组件样式 */ h1 { color: red; }
</style>
// webpack.config.js 配置：
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
使用单文件组件
/* main.js */
import Vue from 'vue'
// 导入 App 组件
import App from './App.vue'
const vm = new Vue({
el: '#app',
// 通过 render 方法，渲染App组件
render: c => c(App)
})
单文件组件使用步骤
-
1 安装：
npm i -D vue-loader vue-template-compiler -
2 在
webpack.config.js中配置.vue文件的 loader{ test: /\.vue$/, use: 'vue-loader' }
-
3 创建
App.vue单文件组件，注意：App 可以是任意名称 -
4 在
main.js入口文件中，导入vue和App.vue组件，通过 render 将组件与实例挂到一起
单文件组件 + 路由
import Vue from 'vue'
import App from './App.vue'
// ------------- vue路由配置 开始 --------------
import Home from './components/home/Home.vue'
import Login from './components/login/Login.vue'
// 1 导入 路由模块
import VueRouter from 'vue-router'
// 2 ** 调用use方法使用插件 **
Vue.use(VueRouter)
// 3 创建路由对象
const router = new VueRouter({
routes: [
{ path: '/home', component: Home },
{ path: '/login', component: Login }
]
})
// ------------- vue路由配置 结束 --------------
const vm = new Vue({
el: '#app',
render: c => c(App),
// 4 挂载到 vue 实例中
router
})
