- 博客(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
1865
原创 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
260
原创 1. Axios 封装与使用
Axios 封装与使用概述Axios 是一个基于 promise 的 HTTP 库，用于发送网络请求，可以用在浏览器和 node.js 中使用。安装npm install axios --saveAxios 封装与使用为便于项目的后期维护和 Axios 库的替换，在项目中需将 Axios 进行二次封装。request.js 内容import axios from 'axios'export function request(config) { // 创建Axios
2020-07-01 17:28:55
210
原创 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
331
原创 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
205
原创 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
182
原创 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
265
原创 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
275
原创 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
166
原创 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
345
原创 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
1194
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
563
原创 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
540
原创 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
265
原创 5. Vue 计算属性使用经验总结
Vue 计算属性使用经验总结一、计算属性不能改变给外部变量进行赋值操作二、计算属性与函数主要区别与应用计算属性与函数主要区别计算属性有缓存，返回值不变的情况下不用进行重新计算，函数每次都重新进行计算；计算属性在数据改变时对返回值进行重新计算，函数则在函数调用时进行计算，数据改变时不自动计算；计算属性主要应用用于动态设置样式<!DOCTYPE html><html lang="en"><head> <meta charset="
2020-06-21 21:19:00
423
原创 4. Vue CSS文件的导入
Vue CSS文件的导入js 导入外置css文件import '路径'css 带入外置css文件（推荐使用）@import "路径";
2020-06-21 19:39:41
190
原创 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
996
原创 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
918
原创 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
252
原创 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
476
原创 13. Vue keep-alive用法
Vue keep-alive用法官方说明Props：include - 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max - 数字。最多可以缓存多少组件实例。用法：<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现
2020-06-16 13:37:37
205
原创 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
221
原创 11. Vue 全局前置守卫
全局前置守卫官网解释你可以使用 router.beforeEach 注册一个全局前置守卫：const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ...})当一个导航触发时，全局前置守卫按照创建顺序调用（可以创建多个前置守卫类似于后端中的中间件）。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。to: Route: 即将要进入的目标 路由对象
2020-06-16 08:48:10
664
原创 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
319
原创 10. Vue 路由懒加载
Vue 路由懒加载一. 概述路由懒加载实现不同路由界面js文件在需要时再进行加载。解决不同路由代码在一个js文件中，js文件过大导致首次加载等待时间较长的问题。二. 使用const Home = ()=> import("../views/Home")三. 示例...
2020-06-13 13:19:30
177
原创 9. Vue 路由的命名视图
Vue 路由的命名视图有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。<div id="app"> <button @click="pageFirst">Page First</button> <bu
2020-06-13 13:18:23
218
原创 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
430
原创 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
337
原创 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
209
原创 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
232
原创 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
382
原创 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
149
原创 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
184
原创 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
189
原创 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
579
原创 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
419
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
143
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人