vue
慢慢の成长
摸鱼之余,来点小乐趣,写作不足之处,请大佬指教。
展开
-
vue prop不同数据类型(数组,对象..)设置默认值
常用的数据类型的设置默认值的写法:Number,String,Boolean,Array,Function,ObjectrefAge: { type: Number, default: 0},refName: { type: String, default: ''},hotDataLoading: { type: Boolean, default: false},hotData: { type: Array, default: () => {return原创 2021-10-21 15:18:51 · 2055 阅读 · 0 评论 -
elementUI实现el-select嵌套el-tree
html部分<el-form-item label="树型结构"> <el-select v-model="treeData" placeholder="请选择..." ref="mySelect" > <el-option :value="treeDataValue" style="height: auto" > <el-tree ref="tree"原创 2021-09-28 22:47:03 · 684 阅读 · 0 评论 -
Vue组件间的传值
父子传值:1、父传子:子组件通过props方法接受数据2、子传父:子组件写法:<button @click="toParent('我要去父组件')">向父组件传值</button>toParent(val) { this.$emit('parentFn',val)}父组件接收:定义子组件的方法<child @parentFn="change($event)"></child>change(data) { conso原创 2021-07-26 10:43:54 · 53 阅读 · 0 评论 -
Vue项目中如何监听多个对象
使用computed配合watch监听变量变化1、先在computed中,用需要监听的值(start、end)定义一个对象(dateRange)2、然后在watch中监听这个对象(dateRange)data() { return { start:'', end:'' }},computed: { dateRange() { const { start, end } = this return { start, end } }原创 2021-05-21 14:54:25 · 844 阅读 · 0 评论 -
VUE利用正则表达式给特定文本添加颜色
利用正则表达式给特定文本添加颜色展示如下:<div class="content">审核内容:<span v-html="filterWord(content)"></span></div>注意:方法一定一定要写在v-html里面,不然会将标签显示在页面的哦!!!data() { keyword: ['人们','在'], content:'人们都在吃饭,人们都在睡觉,人们都在打豆豆。'}methods: { filterWord (t原创 2021-04-09 17:12:33 · 1322 阅读 · 0 评论 -
VUE的路由(二):传参
<div @click="goDetail(3)">查看详情</div>一、动态传参,刷新页面数据不会丢失goDetail(id) { this.$router.push({ path: `/detail/${id}`, })}路由表配置{ path: '/detail/:id', name: 'detail', component: detail}子组件获取this.$route.params.id二、通过路由属性原创 2021-04-01 10:35:39 · 93 阅读 · 0 评论 -
VUE的路由(一):模式
abstract模式适用于所有JavaScript环境,例如服务器端和Node.js. 如果没有浏览器API,路由器将自动强制进入此模式。hash模式就是指 url 尾巴后的 # 号以及后面的字符, 请求的时候不会被包含在 http 请求中 只会携带#之前的,所以每次改变hash不会重新请求加载页面hash 改变会触发 hashchange 事件hash变化会被浏览器记录,浏览器的前进和后退都能用。能兼容到ie8history模式...原创 2021-04-01 10:13:14 · 64 阅读 · 0 评论 -
vue项目使用vue-awesome-swiper及填坑
1、下载插件npm install --save vue-awesome-swiper2、引入1.全局引入在 main.js 里引入(全局):import VueAwesomeSwiper from 'vue-awesome-swiper'Vue.use(VueAwesomeSwiper)import 'swiper/dist/css/swiper.css'2.局部引入<script>import 'swiper/css/swiper.css'import {原创 2021-02-24 15:59:34 · 724 阅读 · 0 评论 -
vue移动端使用手势库---alloytinger
操作图片拖拽、缩放、长按下载 npm i alloyfinger --save使用(全局注册) // main.js import AlloyFinger from 'alloyfinger' import AlloyFingerPlugin from 'alloyfinger/vue/alloy_finger_vue' Vue.use(AlloyFingerPlugin,{ AlloyFinger })使用 <div v-finger:pinch="p原创 2021-01-13 15:25:41 · 1283 阅读 · 0 评论 -
mpvue微信小程序开发总结(二)--- vant-weapp组件
使用vant-weapp组件本文以vant-weapp为例步骤见官网快速上手:https://vant-contrib.gitee.io/vant-weapp/#/quickstart注意事项:webpack.base.config.js配置 - 作用: 在编译的时候在小程序中复制node_modules文件加下的vant-app/dist目录new CopyWebpackPlugin([ { from: resolve('node_modules/vant-weapp/dist'原创 2020-12-28 15:51:03 · 308 阅读 · 3 评论 -
mpvue微信小程序开发总结(一)--- 创建及配置项目
一、熟悉结构官网地址:http://mpvue.com/mpvue/二、创建项目# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 mpvue-quickstart 模板的新项目$ vue init mpvue/mpvue-quickstart my-project# 安装依赖$ cd my-project$ npm install# 启动构建$ npm run dev三、下载微信开发者工具下载地址:https://dev原创 2020-11-26 11:31:04 · 322 阅读 · 0 评论 -
vue项目Echarts柱状图动态渲染效果
html写法:<template> <div> <section ref="barChart" style="width: 50%; height: 500px;"></section> <section ref="echartsRef" style="width: 50%; height: 500px;"></section> </div></template>js部分:<原创 2020-07-16 13:31:02 · 1335 阅读 · 0 评论