Vue
上头upup
这个作者很懒,什么都没留下…
展开
-
小程序 处理富文本内图片大小
meetDetail.Companies = meetDetail.Companies.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')原创 2020-07-11 12:34:32 · 713 阅读 · 0 评论 -
api 文件夹index.js 集合写法
const requireApi = require.context( '.', false, /.js$/)let module = {}// console.log(requireApi)requireApi.keys().forEach((key,index)=>{ if(key==='./index.js') return Object.assign(module,requireApi(key))})export default module原创 2020-07-04 15:40:22 · 647 阅读 · 0 评论 -
原生JS实现vue中双向数据绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl...原创 2020-03-15 11:31:46 · 208 阅读 · 0 评论 -
vue中使用高德地图 amap--基础使用方法
vue-amap 官网:https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install高德地图开放平台: https://lbs.amap.com/dev/key/app安装npm install vue-amap --savemain.js中 引入插件并使用// 高德地图import VueAMap from 'vue...原创 2020-03-22 16:18:27 · 4044 阅读 · 0 评论 -
vue的双向数据绑定的原理
VUE实现双向数据绑定的原理就是利用了 Object.defineProperty()这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。代码演示:defineProperty的用法var obj = { };var name;//第一个参数:定义属性的对象。//第二个参数:要定义或修改的属性的名称。//第三个参数:将被定义或修改的属性描述符。Object.de...原创 2020-03-09 09:06:53 · 61 阅读 · 0 评论 -
vue中this.$set()方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-02-18 15:27:36 · 1180 阅读 · 0 评论 -
vue中this.$nextTick()方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-02-18 15:26:24 · 443 阅读 · 0 评论 -
vuex使用模块的时候 获取state里的数据语法
普通语法this.$store.state.【哪个数据】模块化语法:this.$store.state.【哪个模块】.【哪个数据】<template><div class="panel panel-info"> <div class="panel-heading"> <h4 class="panel-title...原创 2020-02-17 11:08:22 · 3513 阅读 · 0 评论 -
axios使用
第一步 先在项目中安装axiosnpm i axios 然后在项目中引用axiosimport axios from 'axios'axios 的get方法 post方法 以及传入参数import axios from 'axios'export default { state: { updateCartList: [] }, actions: { ...原创 2020-02-17 11:00:06 · 82 阅读 · 0 评论 -
axios在派遣方法时候的异步
在actions中 把axios返回出来在vue模板中的methods中.then()进行异步模板中派遣方法<template> <div class="login"> <div class="container"> <div class="row"> <div class="col-xs-6 co...原创 2020-02-17 10:50:29 · 93 阅读 · 0 评论 -
vue中router-link绑定click失效
直接放代码!<div class="rank"> <span>职位类别:</span> <router-link to="/society/0" @click.native="demo">所有类别</router-link> <router-link to="...原创 2020-02-15 08:32:27 · 162 阅读 · 0 评论 -
vue中用watch监听路由信息
$route为当前跳转路由可以通过$router来拿到 $router.path $router.query $router.pathwatch: { '$route.params.keyWords': { handler (newVal) { console.log(newVal) }, immediate: true, ...原创 2020-02-14 23:48:18 · 728 阅读 · 0 评论 -
vue中 vue-router的路由的2种模式 (原生js模拟演示)
hash模式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...原创 2020-02-14 11:53:50 · 227 阅读 · 0 评论 -
通过this.$refs.[refName]来进行给父组件传递信息
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl...原创 2020-02-13 15:15:19 · 703 阅读 · 0 评论 -
vue中在data中写入img地址 引入问题
第一种情况如果将img放在 src在下的assets中时候;img地址在data中{ id: 1153135, title: '精选1', price: 168, count: 40, imgAddress: require('../assets/images/daniel.jpg') }vue模...原创 2020-02-13 11:05:17 · 2102 阅读 · 2 评论 -
谷歌浏览器的 vue插件工具
Vue.js devtools 5.3.3下载地址:链接: https://pan.baidu.com/s/1Q2N_UN3a1d35h3kAKCtS3Q 提取码: reew原创 2020-02-08 15:31:46 · 631 阅读 · 0 评论 -
解决Vue开发过程中与后台服务器跨域问题
可以通过vue.config.js文件来配置使用逆向服务器// Vue.config.js文件module.exports = { devServer: { proxy: 'http://localhost:3000' }}原创 2020-01-11 10:59:55 · 497 阅读 · 0 评论 -
-过滤器-自定义全局过滤器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-01-04 17:33:28 · 145 阅读 · 0 评论 -
自定义指令-定义全局指令
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-01-04 17:32:56 · 577 阅读 · 0 评论 -
内置指令-cloak // 内置指令-once // 内置指令-pre
内置指令-cloak<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...原创 2020-01-04 08:27:04 · 89 阅读 · 0 评论 -
动态组件-保持组件的状态// 动态组件-动态组件的钩子函数
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-01-04 08:25:35 · 457 阅读 · 0 评论 -
内容分发-作用域插槽传参解构
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-01-04 08:24:11 · 395 阅读 · 0 评论 -
-组件通信-子组件为父组件传递数据-使用自定义事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-01-03 12:22:45 · 193 阅读 · 0 评论 -
组件通信-父组件为子组件传递数据-静态数据//动态数据 // 数据校验
组件通信-父组件为子组件传递数据-静态数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...原创 2020-01-03 12:19:12 · 142 阅读 · 0 评论 -
组件基础-使用ref属性标识元素或组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-01-03 12:17:17 · 466 阅读 · 0 评论 -
组件基础-通过组件的关系进行访问 this.$children this.$parent
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-01-03 12:15:24 · 139 阅读 · 0 评论 -
组件基础-组件的作用域
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-01-03 12:13:46 · 365 阅读 · 0 评论 -
-组件基础-局部组件 // 局部组件的简写
-组件基础-局部组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...原创 2020-01-03 12:13:13 · 214 阅读 · 0 评论 -
组件基础-全局组件//全局组件的简写
组件基础-全局组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...原创 2020-01-03 12:12:13 · 453 阅读 · 0 评论 -
数据绑定-修饰符
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-01-03 12:10:49 · 153 阅读 · 1 评论 -
数据绑定-自定义控件的值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-01-03 11:30:29 · 143 阅读 · 0 评论 -
数据绑定-绑定表单控件的值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2020-01-03 11:18:10 · 162 阅读 · 0 评论 -
事件处理-注册时间 // 事件处理-修饰符 // 事件处理-键盘事件的修饰符 // 事件处理-系统修饰符 // 事件处理-鼠标修饰符
事件处理-注册事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...原创 2020-01-03 11:11:47 · 69 阅读 · 0 评论 -
条件渲染-v-if // v-else // v-else if // v-show
条件渲染-v-if<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...原创 2020-01-03 11:07:23 · 117 阅读 · 0 评论 -
列表渲染 v-for 便利(数组,对象,数字,字符串)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-01-03 10:58:18 · 1100 阅读 · 0 评论 -
操作行内样式-对象语法//操作行内样式-数组语法
操作行内样式-对象语法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...原创 2020-01-03 10:53:46 · 328 阅读 · 0 评论 -
侦听器---watch
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-01-03 10:52:38 · 183 阅读 · 0 评论 -
计算属性 computed
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-01-03 10:50:31 · 79 阅读 · 0 评论 -
列表渲染 v-for
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-01-03 10:48:24 · 121 阅读 · 0 评论 -
操作类名-对象语法//操作类名-数组语法
操作类名-对象语法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...原创 2020-01-03 10:47:33 · 113 阅读 · 0 评论