vue
文章平均质量分 74
vue
fuzuxian
仰望星空,脚踏实地
展开
-
Vue源码—挂载阶段
文章目录编译器只包含运行时版本的vm.$mount的实现原理使用 vm.$mount( [elementOrSelector] ),返回vm实例本身,var MyComponent = Vue.extend({ template:'<div>Hello!</div>',})<!-- 创建并挂载到#app(会替换#app) -->new MyComponent().$mount('#app');new MyComponent().$mount({el:'#原创 2021-07-13 11:40:57 · 661 阅读 · 1 评论 -
Vue项目HTML代码格式化
.eslintrc文件配置 eslint-plugin-vue 插件解析器使用vue-eslint-parser,注意babel-eslint必须写在parserOptions里面,配置如下:parser: “vue-eslint-parser”,parserOptions: {parser: ‘babel-eslint’,sourceType: ‘module’},插件使用vue,配置如下:plugins: [ “vue” ],eslint-plugin-vue插件有三种原创 2021-07-05 15:42:14 · 1579 阅读 · 0 评论 -
Vue 中 mixins / extends / component / extend使用
这里写目录标题3,mixins混入参考mixins混入官方文档和例子mixins混入原理2,extends3,component4,extend3,mixins混入参考mixins混入官方文档和例子混入 (mixin) :分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。方法和参数在各组件中不共享值为对象的选项,如methods,components等,选项会被合并,键冲突的组件会覆盖混入对象的值为函数原创 2021-02-22 12:42:18 · 1276 阅读 · 0 评论 -
vue2.0 自定义指令 + 案例:v-lazy-loading、v-drag、v-resize、v-copy
文章目录 1. 自定义指令 --- 文档说明 ==1-1, 全局注册、局部注册====1-2, 钩子函数== 2. 案例一: property 的自定义钩子样例 3. 案例二:动态指令参数 4. 案例三:element-ui 自定义el-select的下拉懒加载指令v-lazy-loading ==4-1, 注册====4-2, v-lazy-loading 源码====4-3, 在el-select使用v-lazy-loading== 5. 案例四原创 2020-10-30 21:22:53 · 2762 阅读 · 0 评论 -
vue.config.js详细配置总结
基于vue-CLI3下的vue.config.js详细配置const UglifyJsPlugin = require('uglifyjs-webpack-plugin');const cdn = { css: [], js: [ 'https://xxx-cdn-path/vue.runtime.min.js', 'https://xxx-cdn-path/vue-router.min.js', 'https://xxx-cdn-path原创 2020-07-04 00:07:17 · 746 阅读 · 0 评论 -
vue学习—单元测试
参考1111karma 单元测试# 1, 初始化时,需要选择打开test功能,然后选择karma测试vue init webpack testtodo # 2, 运行测试,test目录会出现coverage--icov-report--index.html # 浏览器打开这个index.html,可以查看所有的测试地方npm run unit# 3, 安装vue.js 官方的单元测试实用工具库npm install --save-dev @vue/test-utils@1.原创 2020-07-01 19:05:59 · 647 阅读 · 0 评论 -
Vue项目中实现用户登录及token验证
在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下:1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token3、前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面4、前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页...转载 2020-04-29 18:28:50 · 645 阅读 · 1 评论 -
vue—微信授权登录
单页应用应该如何解决微信授权登录的尴尬跳转?后退无法返回?主要遇到的问题就是 先进入单页应用,一边渲染页面一边判断用户有没有登录,当判断到没有登录时异步数据请求已经发送出去了,然后要跳转到微信授权页面,这样就浪费了一次网络请求且用户可能要去点击这个数据了结果...跳走了!在授权成功后用户点击后退再次进行授权有没有???本文主要讲述对于单页应用应该在哪个阶段获取微信授权? 只考虑网站完全依...转载 2020-04-15 23:43:33 · 627 阅读 · 0 评论 -
vue插件汇总
一、UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2...转载 2020-04-09 13:00:05 · 743 阅读 · 0 评论 -
vue的api---mixins(混入)----backtop回到顶部封装
vue的api—mixins(混入)vue文档解决代码重复问题参考思否文章111home.vue 中Detail.vue中解决方法新建mixins.js文件在detail.vue 删除重复代码,然后导入mixins.js文件并使用,...原创 2020-04-08 22:43:56 · 177 阅读 · 0 评论 -
完全搞懂vue组件通信---props/emit自定义事件/EventBus/$ref/provide_inject/$attrs_$listeners
父 ==> 子(props)子 ==> 父(emit自定义事件)非父子组件通信(EventBus) —$emit、 $on 、$off组件APP.vue (同时引入Hello.vue组件和World.vue组件)methods: { sendParam () { bus.$emit('getParam', this.number) } }created ()...原创 2020-04-05 12:03:47 · 852 阅读 · 1 评论 -
购物APP项目_首页开发_整理
1.1. 目录结构networkcomponents -> common/contentpages -> 路由分层commonassetsrouterstore设置CSS初始化和全局样式initialize.cssbase.cssaxios的封装创建axios实例拦截响应,返回.data数据根据传入的options发送请求,并且调用对应resolv...原创 2020-03-02 16:00:11 · 376 阅读 · 0 评论 -
vue使用swiper轮播图
简单轮播图的实现及原理讲解 swiper.vue<template> <div id="hy-swiper"> <div class="swiper" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"> <slot&...原创 2020-02-05 20:47:07 · 934 阅读 · 4 评论 -
vue使用better-scroll
安装: npm install better-scroll1、使用better-scroll的基本条件必须包含两个大的div,外层和内层div外层div设置可视的大小(宽或者高)-有限制宽或高内层div,包裹整个可以滚动的部分内层div高度一定大于外层div的宽或高,才能滚动 // 默认情况下BScroll是不可以实时的监听滚动位置 // probeType ...原创 2020-02-05 17:28:04 · 159 阅读 · 0 评论 -
vue入门——Vuex
Vuex 认识Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用 集中式存储管理 应用的所有组件的状态,Vuex就是为了提供这样一个在多个组件间共享状态的插件单界面的状态管理State:状态。data中的属性View:视图层,可以针对State的变化,显示不同的信息。Actions:主要是用户的各种操作:点击、输入等等,会导致状态的改变。State —...原创 2020-02-01 21:13:50 · 251 阅读 · 0 评论 -
vue入门—— vue CLI脚手架
1, vue CLI脚手架安装使用Vue.js开发大型应用时,需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置安装Vue脚手架: npm install -g @vue/cliVue CLI2初始化项目 ...原创 2020-02-01 19:27:03 · 420 阅读 · 0 评论 -
vue入门——vue-router
1,认识路由改变路径的方式有两种: URL的hash 和 HTML5的historyURL的hashURL的hash也就是锚点(#), 本质上是改变window.location的href属性.我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新HTML5的history模式:五种模式改变URL而不刷新页面: history.pushSt...原创 2020-02-01 16:51:22 · 267 阅读 · 0 评论 -
vue入门—webpack
1,认识webpack 2, webpack的安装3,webpack的起步4, webpack的配置5,loader的使用 6,webpack中配置Vue 7,plugin的使用8,搭建本地服务器原创 2020-02-01 14:49:21 · 559 阅读 · 0 评论 -
vue入门—组件化
1,原创 2020-01-31 09:25:34 · 84 阅读 · 0 评论 -
vue—小案例— # 登录账号切换 # 点击列表变颜色 # 购物车表格
1,登录账号切换<div id="app"> <!-- v-if="isUsername" 写等号 # 加引号 !!!--> <span v-if="isUsername"> <label for="username">用户账号</label> <input id="textName"...原创 2020-01-03 17:38:35 · 421 阅读 · 0 评论 -
vue——# 指令 v-bind 动态绑定 # 指令v-model 双向数据绑定
1, v-bind基础使用v-bind用来动态的绑定一个或者多个特性。没有参数时,可以绑定到一个包含键值对的对象。常用于动态绑定class和style,以及href等。简写为一个冒号 :<div id="app"> <img v-bind:src="imgUrl" alt="" /> // 从服务器中获取图片地址 <a :href=...原创 2020-01-02 22:00:56 · 752 阅读 · 0 评论 -
vue入门—常用指令大全
参考博客Vue指令大全1, v-textv-text主要用来更新textContent,可以等同于JS的text属性<span v-text="msg"></span>// 等价于<span>{{msg}}</span>2, v-html双大括号的方式会将数据解释为纯文本,而非HTML。为了输出真正的HTML,可以用v-html指...原创 2020-01-02 18:52:01 · 193 阅读 · 1 评论 -
vue—# 选项 # vue的生命周期
1, 创建vue实例传入的options el 类型 : string | HTMLElement 作用: 决定之后vue实例会管理哪一个DOM data 类型 : Object | function (组件当中data必须是一个函数) 作用: vue实例对应的数据对象 methods 类型 : {[key: string]: functi...原创 2020-01-02 16:43:39 · 99 阅读 · 0 评论 -
Vue—vue初体验——# vue列表 # 计数器 # mvvm
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <ul> ...原创 2020-01-02 14:54:03 · 173 阅读 · 0 评论