- 博客(52)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 8. Vuex 文件结构
Vuex 组织文件结构概述由于 state 、getters 、mutations 、actions 和 modules 都放在 store 文件夹的 index.js 文件内，不便于后期维护。故将 index 文件内容进行抽离。文件结构 文件内容store/index.jsimport Vue from 'vue'import Vuex from 'vuex'import module_a from "@/store/modules/module_a";import
2020-06-30 20:59:47
343
原创 6. Vuex Action
Vuex Action概述Action 类似于 Mutation，但是是用来代替Mutatiion进行异步操作的，他们之间不同在于：Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。Action 的使用Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters
2020-06-30 17:25:18
256
原创 5. Vuex Mutation
Vuex Mutation概述更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。注意 mutation 必须是同步函数。Mutation 的使用Mutation 可接受 state 作为第一个参数const store = new Vuex.Store({ state: { count: 1 }
2020-06-29 21:26:35
193
原创 4. Vuex Getter
Vuex Getter概述State 用于存储全局的变量，类似于组件中的 data 属性，不过 State 是可以全局进行访问的。Getter 属性的使用现 Vuex 中有如下数据，在子组件调用时需对数据进行过滤；const store = new Vuex.Store({ state: { todos: [ { id: 1, text: '...', done: true }, { id: 2, text: '...', done: false }
2020-06-29 10:49:35
279
原创 3. Vuex State
Vuex State概述State 用于存储全局的变量，类似于组件中的 data 属性，不过 State 是可以全局进行访问的。使用基础使用// 创建一个 Counter 组件const Counter = { template: `<div>{{ count }}</div>`, computed: { count () { return this.$store.state.count } }}mapStat
2020-06-29 10:48:47
291
原创 2. Vuex 简单使用
Vuex 简单使用概述实现不同组件对同一个变量的调用与修改；项目结构 文件代码main.jsimport App from './App.vue'import store from "@/store";Vue.config.productionTip = falsenew Vue({ render: h => h(App), store}).$mount('#app')App.vue<template> <div
2020-06-28 21:30:14
174
原创 0. Vuex 概述与安装
Vuex 概述与安装Vuex 概述Vuex 可以简单的理解为用于存放全局变量的地方。虽然可以在Vue的 prototype 原型对象中定义一个用于存储全局变量的类，实现类似的操作，但无法做到数据的响应式。Vuex 安装与配置Vuex 安装npm install vuex --saveVuex 配置src 文件夹内创建 store 文件夹store 文件夹内创建 index.js 文件store/index.js 做如下配置import Vue from
2020-06-28 21:16:46
367
原创 8. Vue methods和computed中不能使用箭头函数
Vue methods和computed中不能使用箭头函数概述在 Vue 的 methods 和 computed 中不能使用箭头函数，箭头函数中的 this 会指向 windows 而非 Vue 的实例。示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue methods和computed中不能使用箭头函数</title&g
2020-06-25 11:06:57
1249
2
原创 7. Vue iconfont 编码转换
Vue iconfont 编码转换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue iconfont 编码转换</title> <link rel="stylesheet" href="./iconfont/iconfont.css"> <style> body { margin: 0; p
2020-06-24 13:55:00
583
原创 6. Vue Hover实现
Vue Hover 实现使用Vue代码动态实现CSS中的 hover 属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue Hover实现</title> <style> #box { width: 100px; height: 100px; } </style></hea
2020-06-24 10:56:17
565
原创 1. Vue 通用TabBar组件实战
Vue 通用TabBar组件实战一、概述实现通用化的bBar组件tab-bar 组件用于创建TabBar1.可通过 color 属性设置TabBar颜色；tab-bar-item 组件用户创建TabBar内的项目1.通过 to 属性设置跳转路径；2.通过 iconfont-name 属性设置图标；3.通过 color 属性设置颜色；4.通过 hover-color 属性设置鼠标悬停颜色；5.通过 active-color 属性设置激活颜色二、使用概述<tab-bar col
2020-06-21 22:16:48
289
原创 5. Vue 计算属性使用经验总结
Vue 计算属性使用经验总结一、计算属性不能改变给外部变量进行赋值操作二、计算属性与函数主要区别与应用计算属性与函数主要区别计算属性有缓存，返回值不变的情况下不用进行重新计算，函数每次都重新进行计算；计算属性在数据改变时对返回值进行重新计算，函数则在函数调用时进行计算，数据改变时不自动计算；计算属性主要应用用于动态设置样式<!DOCTYPE html><html lang="en"><head> <meta charset="
2020-06-21 21:19:00
473
原创 4. Vue CSS文件的导入
Vue CSS文件的导入js 导入外置css文件import '路径'css 带入外置css文件（推荐使用）@import "路径";
2020-06-21 19:39:41
202
原创 3. Vue 编程式路由跳转多次点击报错问题
Vue 编程式路由跳转多次点击报错问题概述使用编程式路由进行跳转时，控制台报错，如下所示。问题分析该问题存在于Vue-router v3.0之后的版本，由于新加入的同一路径跳转错误异常功能导致。解决方法重写 $router.push 和 $router.replace 方法，添加异常处理。//pushconst VueRouterPush = VueRouter.prototype.pushVueRouter.prototype.push = function push (t
2020-06-21 17:30:52
1035
原创 2. Vue 修改数组内容不响应问题
Vue 修改数组内容不响应问题问题现象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue 修改数组内容不响应问题</title></head><body><div id="app"> <ul> <li v-for="item in list">{{ item
2020-06-21 17:28:36
965
原创 2. Vue input控件复用问题
Vue input控件复用问题问题现象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue input控件复用问题</title></head><body><div id="app"> <ul> <li v-for="item in list">{{ item
2020-06-21 17:20:49
263
原创 1. Vue input 控件复用问题
input控件复用问题问题现象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue input控件复用</title></head><body><div id="app"> <h2>input控件复用</h2> <div v-if="isUsername"
2020-06-21 17:19:01
498
原创 13. Vue keep-alive用法
Vue keep-alive用法官方说明Props：include - 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max - 数字。最多可以缓存多少组件实例。用法：<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现
2020-06-16 13:37:37
226
原创 12. Vue 路由元信息
路由元信息官网解释定义路由的时候可以配置 meta 字段：const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, // a meta field meta: { requiresAu
2020-06-16 08:49:03
238
原创 11. Vue 全局前置守卫
全局前置守卫官网解释你可以使用 router.beforeEach 注册一个全局前置守卫：const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ...})当一个导航触发时，全局前置守卫按照创建顺序调用（可以创建多个前置守卫类似于后端中的中间件）。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。to: Route: 即将要进入的目标 路由对象
2020-06-16 08:48:10
691
原创 8. Vue 路由的重定向与别名
Vue 路由的重定向与别名重定向当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b别名/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样示例<div id="app"> <router-link :to="'first'">Go First</router-link> <br/> <router-link :to="'secon
2020-06-15 08:51:14
335
原创 10. Vue 路由懒加载
Vue 路由懒加载一. 概述路由懒加载实现不同路由界面js文件在需要时再进行加载。解决不同路由代码在一个js文件中，js文件过大导致首次加载等待时间较长的问题。二. 使用const Home = ()=> import("../views/Home")三. 示例...
2020-06-13 13:19:30
192
原创 9. Vue 路由的命名视图
Vue 路由的命名视图有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。<div id="app"> <button @click="pageFirst">Page First</button> <bu
2020-06-13 13:18:23
232
原创 7. Vue 路由参数传递
Vue 路由参数传递url路径传递方式（Vue动态路由匹配）：www.xxx.com/user-url/123url参数传递方式: www.xxx.com/user-query?id=123vue params参数传递方式: 不改变url路径，采用vue内部参数传递方式<div id="app"> <h3>URL路径方式传递参数</h3> <router-link to="/user-url/111">字符串—URL路径方式传递参数<
2020-06-13 13:17:07
464
原创 6. Vue 编程式导航与历史记录
Vue 编程式导航与历史记录<div id="app"> <button @click="pageFirst">Page First</button> <button @click="pageSecond">Page Second</button> </br><button @click="goBack">Go Back</button><button @click="goForward"
2020-06-13 13:16:22
358
原创 5. Vue 路由嵌套
Vue 路由嵌套<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><div id="app"> <h1>Hello App!</h1> <p> <router-link to="/p
2020-06-13 13:15:47
222
原创 4. Vue 路由命名
Vue 路由命名路由name属性对路由进行命名，实现路由跳转的反向解析<div id="app"> <router-link to="/first">Go to First</router-link> <router-link :to="'second'">Go to Second</router-link> <router-view></router-view></div> <s
2020-06-13 13:15:12
261
原创 3. Vue 动态路由匹配
Vue 动态路由匹配动态路由匹配可通过URL进行参数的解析<div id="app"> <p> <router-link :to="/user/+user_id">get user id</router-link> </p> <router-view></router-view></div> <script src="https://unpkg.com/vue/dist/vu
2020-06-13 13:14:36
418
原创 2. Vue 简单路由
Vue 简单路由<router-link> 标签用于路由的跳转<router-view> 标签用于渲染路由界面<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><div id="app"> <
2020-06-13 13:13:55
164
原创 1. Vue 路由的安装
Vue 路由的安装输入如下命令进行安装npm install vue-router路由配置src文件夹内创建router文件夹router文件夹内创建index.js文件router/index.js做如下配置import Vue from "vue"import VueRouter from "vue-router"import Home from "../views/Home"import Info from "../views/Info"Vue.use(
2020-06-13 13:12:47
198
原创 4. Vue 作用域插槽
Vue 作用域插槽作用域插槽可在数据渲染时，父组件调用子组件数据进行重新排版渲染。<div id="app"> <current-user v-slot:default="slotProps"> {{ slotProps.user.firstName }} </current-user><current-user></current-user></div><script src="https://c
2020-06-13 13:09:45
204
原创 3. Vue 具名插槽
Vue 具名插槽具名插槽实现一个组件的多个插槽的功能。一个不带 name 的 <slot> 出口会带有隐含的名字“default”。v-slot 可缩写成 #。<div id="app"> <base-layout> <template v-slot:header> <h1>Here might be a page title</h1> </te
2020-06-13 13:08:53
595
原创 2. Vue 插槽后备
Vue 插槽后备插槽后备是在插槽中没有提供内容时，显示默认内容<div id="app"> <submit-button></submit-button> <br> <submit-button>保存</submit-button> </div>Vue.component('submit-button', { template:` <button type="sub
2020-06-13 13:08:11
431
1
原创 1. Vue 简单插槽
Vue 简单插槽将组件中间的内容添加至组件中的位置，可以插入html代码<div id="app"> <navigation-link url="http://wwww.baidu.com"> 百度 </navigation-link> </div> Vue.component('navigation-link', { props: { url: '' }, template:`
2020-06-13 13:07:08
153
原创 3. Vue 监听子组件(事件抛出值)
Vue 监听子组件(事件抛出值)<div id="app"> <div :style="{ fontSize: font_size+'px'}"> <blog-post v-for="(post, index) in posts" :key='index' :post="post" @set-font-size="setFontSize" ></blog-post> </div&g
2020-06-13 12:58:23
1253
原创 7. Vue 单文件组件
Vue 单文件组件概述在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：全局定义 (Global definitions) 强制要求每个 component 中的命
2020-06-13 11:32:05
224
原创 6. Vue 动态组件
Vue 动态组件<div id="app"> <button @click="component='com_1'">组件1</button> <button @click="component='com_2'">组件2</button> <button @click="component='com_3'">组件3</button> <component :is="component"></
2020-06-13 11:28:22
162
原创 5. Vue 父子件数据传递
Vue父子件数据传递概述假设需要父组件传递数据至子组件，且子组件数据修改时需将父组件的数据同步修改，有如下两种修改方式。通过自定义v-model方式实现将父组件数据通过props传入至子组件；子组件内创建变量复制props数据；通过v-bind将子组件的变量绑定至子组件的value上；绑定@input时间函数a. 将输入框的数据幅值至子组件数据上；b. 通过$emit()函数给父组件发送事件；父组件监听子组件触发的事件，并获取数据幅值至父组件数据。通过v-model方法配
2020-06-13 11:27:39
182
原创 4. Vue 监听子组件(v-model方式)
Vue 监听子组件(v-model方式)1 缺点：只能实现1个数据的绑定<div id="app"> <input-mod v-model="inputVal"></input-mod> <div>{{ inputVal }}</div></div>Vue.component('input-mod', { props: ['value'], template: ` <div>
2020-06-13 11:25:32
822
原创 1. Vue 组件的使用
Vue 组件的使用组件的两种命名方式使用 kebab-caseVue.component('my-component-name', { /* ... */ })当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 。使用 PascalCaseVue.component('MyComponentName', { /* ... */ })当使用 PascalCase (首字母大写命名) 定义一个组件时，
2020-06-13 11:24:16
210
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人