我对vue有初心
慢慢学习,打好基础
开发路上的AZhe
做一个坚定的码农攻克狮
展开
-
基于Vite创建一个Vue2项目
没有导语没有前言,直接上正文。原创 2022-08-12 17:55:04 · 1329 阅读 · 2 评论 -
elementUI合并行和列
案列地址:https://jsrun.net/JX8Kp完整代码 <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>element-ui合并行和列</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css".原创 2021-07-20 18:39:54 · 952 阅读 · 0 评论 -
Props with type Object/Array must use a factory function to return the default value.
译文:类型为Object / Array的道具必须使用工厂函数来返回默认值。# 出现原因echoList: { type: Array, default: [] //props的属性默认值直接赋值的[],报标题错误},# 解决# 在官网中props验证有写到:对象或数组默认值必须从一个工厂函数获取echoList: { type: Array, default: ()=>[] //数组简写 //default:()=>({}) //.原创 2021-04-09 11:57:28 · 1023 阅读 · 0 评论 -
el-cascader组件限制选择
//卸载watch里面,去监听el-cascader绑定数组的长度watch: { 'paint.paintFrom.format'(newValue, oldValue) { let _list = "el-cascader绑定的:options数组"; //得到用户选择的最新options //然后使用set,flat,Array函数去转换 /* el-cascader会帮你返回一个二原创 2021-03-18 16:58:37 · 1007 阅读 · 0 评论 -
element-ui的upload限制图片的格式,大小,以及宽高
<div >不多于5张图片,600*600px,png、jpg或gif格式,大小不超过2M</div> <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" multiple原创 2021-03-10 17:44:52 · 1538 阅读 · 2 评论 -
vue结合echarts实现一个基础的折线图
echarts实例官网:https://echarts.apache.org/examples/zh/index.html//安装淘宝镜像# npm install -g cnpm --registry=https://registry.npm.taobao.org//vue下载echarts# cnpm install echarts -S/* cnpm - 需要下载淘宝镜像 install - 可以简写成i -S 下载到生产环境 -D 下载到开发环境 -S -D 可以在原创 2021-03-02 17:44:49 · 341 阅读 · 0 评论 -
设置el-container高度为百分百
/*把最外面的html,body设置为100%就好*/html,#app,body { height: 100%; min-width: 900px;}原创 2021-01-05 16:22:50 · 2401 阅读 · 0 评论 -
el-menu结合动态渲染实现aside侧边栏
//el-menu定义菜单选项//open :sub-menu 展开的回调//close :sub-menu 收起的回调//router 该模式会在激活导航时以 index 作为 path 进行路由跳转//select 菜单激活回调<el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollap原创 2020-12-31 10:37:11 · 1389 阅读 · 1 评论 -
vue组件监听原生事件@click.native
在组件上使用 v-on 只会监听自定义事件 (组件用 $emit 触发的事件)。如果要监听根元素的原生事件,可以使用 .native 修饰符,比如:<my-component v-on:click.native="doSomething"></my-component>官网:https://cn.vuejs.org/v2/guide/migration.html#%E7%94%A8-v-on-%E7%9B%91%E5%90%AC%E5%8E%9F%E7%94%9F%E4%B.原创 2020-12-30 11:41:07 · 824 阅读 · 0 评论 -
VUE之动态绑定class
<view class="orders-start-view"> //单个对象形式 //有多个以,号隔开 //例如:{'active-order-start':currentIndex==0,'stoy'} <view :class="{'active-order-start':currentIndex==0}" @click="swicthState(0)"> 全部 </view> //单个数组形式 <view原创 2020-12-21 17:28:02 · 157 阅读 · 0 评论 -
Vue结合uniapp实现水平公告栏
参考文档:https://blog.csdn.net/jjw_zyfx/article/details/102225767<view class="announcement"> <view class="ziti"> 鲜果快报: </view> <view class="gonggao"> <view style="color: #FFC944;">每日 | </view> <翻译 2020-12-21 14:42:42 · 1096 阅读 · 0 评论 -
Element之树形控件tree踩坑记录(一):default-checked-keys清空数组之后还是会全部默认选中
..原创 2020-11-11 16:49:42 · 7327 阅读 · 2 评论 -
element的resetFields和resetField
resetFields是用于针对整个表单的 Form Methods(整个表单)resetField 是针对表单项的 Form-Item Methods(表单的某一个项)resetFields是重置整个表单,定义一个ref,然后调用。而resetField是针对表单的某一项,用法:假如我有一个表单当我选择添加日期时,没选择,然后去输入用户地址,这时由于给添加日期加了一个效验规则,就会出现如下图提示:那么我要是不希望在输入用户地址时出现日期不能为空的提示咋整:在用户地址的规则里调用rese.原创 2020-11-09 12:12:02 · 5884 阅读 · 0 评论 -
vue+elementUi实现静态数据分页
分页静态数据tableData: [ { date: "2016-05-02", name: "王小虎1", sex: "男", state: false, address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-04", name: "王小虎2", sex原创 2020-11-07 17:28:03 · 2630 阅读 · 0 评论 -
vue监听回车事件
<el-button type="primary" @click="login">登录</el-button>created() { this.keyupSubmit();},methods(){ keyupSubmit() { document.onkeydown = (e) => { let _key = window.event.keyCode; //!this.clickState是防止用户重复点击回车原创 2020-11-06 11:37:06 · 3090 阅读 · 0 评论 -
vue的组件通信
1,父子组件传值,props和$emit父组件<template> <div class="hi"> <h1>我是父组件</h1> <song :msg="msg" @songzhi="songzhi"></song> </div></template><script>import song from '@/components/song.vue'export原创 2020-06-04 23:05:36 · 105 阅读 · 0 评论 -
vue.js的JSON数据解析
数据格式为arr:[{title:'aaa',titlearr:['aaa','bbb','ccc']},{title:'bbb',titlearr:['bbb','ddd','ccc']},{title:'ccc',titlearr:['ccc','fff','ggg']},{},{}];页面对其进行解析<li v-for="(teaitem,index) in arr">...原创 2019-07-26 16:11:43 · 4895 阅读 · 0 评论 -
vue.js的DOM操作
在methods里面定义方法navigationClick:function(e){ alert("利用索引来控制链接,当前索引为:" + e.currentTarget.firstElementChild.innerHTML);}在需要的标签上绑定事件: v-on:click="navigationClick(KaTeX parse error: Expected 'EOF'...翻译 2019-07-25 16:59:56 · 269 阅读 · 0 评论 -
Vue.js是什么
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。官方api:https://cn.vuejs.org/v2/guide/i...翻译 2019-07-20 15:21:30 · 165 阅读 · 0 评论