
(持续更新)vue实战篇
vue实际项目的一些运用
2b勿扰
专注技术的研究
展开
-
(精华2020年5月21日更新) vue实战篇 实时通信websocket的封装结合vue的使用
import webSocket from '../webSocket.js';export default { isIosAndroid() { var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端 isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)原创 2020-05-21 23:00:37 · 15763 阅读 · 0 评论 -
(精华2020年5月21日更新) vue实战篇 缓存页面的强制更新
页面缓存后,页面是不会变化的。要使缓存页面变化可以利用路由的钩子函数beforeRouteLeave。<template> <div </div></template><script>export default { methods: { }, beforeRouteLeave(to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` console原创 2020-05-21 22:21:56 · 15935 阅读 · 1 评论 -
(精华2020年5月17日更新) vue实战篇 手写vue底层源码
MYvue.js 主要作用监听属性变化class MYvue { constructor(options) { this.$options = options; this.$data = options.data; //数据劫持 this.observe(this.$data); this.$el = options.el; //包含Watcher创建 new Complie(optio原创 2020-05-17 10:32:17 · 15179 阅读 · 0 评论 -
(精华2020年5月16日更新) vue实战篇 mixin插件开发
插件开发以vue-router为例import Vue from 'vue'// import VueRouter from 'vue-router'import VueRouter from '../MYRouter/index.js'Vue.use(VueRouter)// 执行install方法const routes = [ { path:'/', redirect:'/goods' }, { path: '/goods', name: 'g原创 2020-05-16 22:12:47 · 15622 阅读 · 0 评论 -
(精华2020年5月16日更新) vue实战篇 vuex的多store仓库的使用
const state = { country: '中国'}const getters = { getCountry(state) { return state.country }}const mutations = { updateCountry(state, payload) { state.country = payload.country; }}//用来管理mutationsconst actions = { updateCountry({原创 2020-05-14 23:15:02 · 17765 阅读 · 0 评论 -
(精华2020年5月14日更新) vue实战篇 vuex的使用和vuex辅助函数的使用
vuex的基本使用store.jsimport Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);//定义属性var state = { count:6, country:'中国'};//定义gettersvar getters = { count(state){ return state.count }, isEvenOrOdd(state){ return原创 2020-05-14 22:56:36 · 15082 阅读 · 0 评论 -
(精华2020年5月14日更新) vue实战篇 element-ui日历实现日程安排和区间查询
首先在template加如下代码<el-calendar v-model="日期"> <template slot="dateCell" slot-scope="{date, data}"> <div class="date-cell" :class="data.isSelected ? 'is-selected' : ''"> <div class="calendar-day">原创 2020-05-14 08:50:57 · 18319 阅读 · 0 评论 -
(精华2020年5月14日更新) vue实战篇 vue-router动态路由的实现权限控制
router.jsimport Vue from "vue";import VueRouter from "vue-router";Vue.use(VueRouter);import home from '../pages/home.vue';import news from '../pages/news.vue';var allRoutes = [{ path:'/login', name:'login', meta:{ title:'登陆'原创 2020-05-12 23:55:58 · 15265 阅读 · 0 评论 -
(精华2020年5月12日更新) vue实战篇 axio.js封装和环境配置
首先安装npm i cross-env package.jsom"scripts": { "test":"cross-env scene=test webpack --config webpack.config.js", "dev": "cross-env scene=dev webpack-dev-server --config webpack.config.js", "build": "cross-env scene=prod webpack --config webpa原创 2020-05-12 23:04:48 · 14833 阅读 · 0 评论 -
(精华2020年5月17日更新) vue实战篇 vue.config.js配置详解
新版vue脚手架中webpack已经封装好看不见,需要vue.config.js代替配置module.exports = { publicPath:'/wuhan', //部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致 outputDir:'dist3', //打包路径地址,Default: 'dist' ,代替 output.path assetsDir:'assets1', //放置生成的静态资源 (js、css、img、原创 2020-05-10 18:06:29 · 15352 阅读 · 0 评论