9 b342216980

尚未进行身份认证

我要认证

暂无相关简介

等级
TA的排名 17w+

3. Vue native

Vue native修饰符概述在我们需要监听一个组件的原生事件时,必须给对应的事件加上.native修饰符,才能进行监听。使用<template> <div id="app"> <h1>基本程序已运行</h1> <MyButton @click.native="buttonClicked">自定义组件按钮</MyButton> </div></template>&lt

2020-07-09 15:31:07

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

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

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

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

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

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

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

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

1. 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

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

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

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

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

5. Vue 计算属性使用经验总结

Vue 计算属性使用经验总结一、计算属性不能改变给外部变量进行赋值操作二、计算属性与函数主要区别与应用计算属性与函数主要区别计算属性有缓存,返回值不变的情况下不用进行重新计算,函数每次都重新进行计算;计算属性在数据改变时对返回值进行重新计算,函数则在函数调用时进行计算,数据改变时不自动计算;计算属性主要应用用于动态设置样式<!DOCTYPE html><html lang="en"><head> <meta charset="

2020-06-21 21:19:00

4. Vue CSS文件的导入

Vue CSS文件的导入js 导入外置css文件import '路径'css 带入外置css文件(推荐使用)@import "路径";

2020-06-21 19:39:41

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

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

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

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

查看更多

勋章 我的勋章
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv4
    勤写标兵Lv4
    授予每个自然周发布9篇以上(包括9篇)原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。
  • 分享学徒
    分享学徒
    成功上传1个资源即可获取