- 博客(58)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 3. Vue native
Vue native修饰符 概述 在我们需要监听一个组件的原生事件时，必须给对应的事件加上.native修饰符，才能进行监听。 使用 <template> <div id="app"> <h1>基本程序已运行</h1> <MyButton @click.native="buttonClicked">自定义组件按钮</MyButton> </div> </template> <
2020-07-09 15:31:07
2038
原创 9. Vue 通用项目配置
Vue 通用项目配置 按照如下所示创建目录结构 配置通用css文件 npm install normalize.css --save 在 assetc/css 路径下创建 base.css @import "~normalize.css"; // ... 在 App.vue 中加载 base.css 文件 <style> @import "~@/assets/css/base.css"; </style> Axios 封装 npm install axio
2020-07-02 21:03:39
359
原创 1. Axios 封装与使用
Axios 封装与使用 概述 Axios 是一个基于 promise 的 HTTP 库，用于发送网络请求，可以用在浏览器和 node.js 中使用。 安装 npm install axios --save Axios 封装与使用 为便于项目的后期维护和 Axios 库的替换，在项目中需将 Axios 进行二次封装。 request.js 内容 import axios from 'axios' export function request(config) { // 创建Axios
2020-07-01 17:28:55
282
原创 8. Vuex 文件结构
Vuex 组织文件结构 概述 由于 state 、getters 、mutations 、actions 和 modules 都放在 store 文件夹的 index.js 文件内，不便于后期维护。故将 index 文件内容进行抽离。 文件结构 文件内容 store/index.js import Vue from 'vue' import Vuex from 'vuex' import module_a from "@/store/modules/module_a"; import
2020-06-30 20:59:47
427
原创 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
349
原创 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
269
原创 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
365
原创 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
371
原创 2. Vuex 简单使用
Vuex 简单使用 概述 实现不同组件对同一个变量的调用与修改； 项目结构 文件代码 main.js import App from './App.vue' import store from "@/store"; Vue.config.productionTip = false new Vue({ render: h => h(App), store }).$mount('#app') App.vue <template> <div
2020-06-28 21:30:14
242
原创 0. Vuex 概述与安装
Vuex 概述与安装 Vuex 概述 Vuex 可以简单的理解为用于存放全局变量的地方。虽然可以在Vue的 prototype 原型对象中定义一个用于存储全局变量的类，实现类似的操作，但无法做到数据的响应式。 Vuex 安装与配置 Vuex 安装 npm install vuex --save Vuex 配置 src 文件夹内创建 store 文件夹 store 文件夹内创建 index.js 文件 store/index.js 做如下配置 import Vue from
2020-06-28 21:16:46
443
原创 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
1394
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
655
原创 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
681
原创 1. Vue 通用TabBar组件实战
Vue 通用TabBar组件实战 一、概述 实现通用化的bBar组件 tab-bar 组件用于创建TabBar 1.可通过 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
379
原创 5. Vue 计算属性使用经验总结
Vue 计算属性使用经验总结 一、计算属性不能改变给外部变量进行赋值操作 二、计算属性与函数主要区别与应用 计算属性与函数主要区别 计算属性有缓存，返回值不变的情况下不用进行重新计算，函数每次都重新进行计算； 计算属性在数据改变时对返回值进行重新计算，函数则在函数调用时进行计算，数据改变时不自动计算； 计算属性主要应用 用于动态设置样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="
2020-06-21 21:19:00
597
原创 4. Vue CSS文件的导入
Vue CSS文件的导入 js 导入外置css文件 import '路径' css 带入外置css文件（推荐使用） @import "路径";
2020-06-21 19:39:41
268
原创 3. Vue 编程式路由跳转多次点击报错问题
Vue 编程式路由跳转多次点击报错问题 概述 使用编程式路由进行跳转时，控制台报错，如下所示。 问题分析 该问题存在于Vue-router v3.0之后的版本，由于新加入的同一路径跳转错误异常功能导致。 解决方法 重写 $router.push 和 $router.replace 方法，添加异常处理。 //push const VueRouterPush = VueRouter.prototype.push VueRouter.prototype.push = function push (t
2020-06-21 17:30:52
1183
原创 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
1078
原创 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
324
原创 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
585
原创 13. Vue keep-alive用法
Vue keep-alive用法 官方说明 Props： include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max - 数字。最多可以缓存多少组件实例。 用法： <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现
2020-06-16 13:37:37
307
原创 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
349
原创 11. Vue 全局前置守卫
全局前置守卫 官网解释 你可以使用 router.beforeEach 注册一个全局前置守卫： const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 当一个导航触发时，全局前置守卫按照创建顺序调用（可以创建多个前置守卫类似于后端中的中间件）。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。 to: Route: 即将要进入的目标 路由对象
2020-06-16 08:48:10
809
原创 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
428
原创 10. Vue 路由懒加载
Vue 路由懒加载 一. 概述 路由懒加载实现不同路由界面js文件在需要时再进行加载。解决不同路由代码在一个js文件中，js文件过大导致首次加载等待时间较长的问题。 二. 使用 const Home = ()=> import("../views/Home") 三. 示例 ...
2020-06-13 13:19:30
255
原创 9. Vue 路由的命名视图
Vue 路由的命名视图 有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。 <div id="app"> <button @click="pageFirst">Page First</button> <bu
2020-06-13 13:18:23
291
原创 7. Vue 路由参数传递
Vue 路由参数传递 url路径传递方式（Vue动态路由匹配）：www.xxx.com/user-url/123 url参数传递方式: www.xxx.com/user-query?id=123 vue params参数传递方式: 不改变url路径，采用vue内部参数传递方式 <div id="app"> <h3>URL路径方式传递参数</h3> <router-link to="/user-url/111">字符串—URL路径方式传递参数<
2020-06-13 13:17:07
563
原创 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
420
原创 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
277
原创 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
336
原创 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
521
原创 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
211
原创 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
262
原创 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
263
原创 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
666
原创 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
514
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
202
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人