vue
关注
分享
扫一扫
Claroja
这个作者很懒，什么都没留下…
展开
-
vue element Form-Item prop
在使用验证和重置方法时必须指定prop原创 2021-02-17 23:35:22 · 667 阅读 · 0 评论 -
vue element form ref 重置表单
<template> <!--model绑定整个form对象的的数据--> <!--通过ref属性获得表单对象,调用resetFieleds方法重置表单的字段--> <el-card> <el-form :model="form" ref="formRef" label-width="80px"> <el-form-item label="活动名称" prop="name"> <!-原创 2021-02-16 18:21:22 · 2032 阅读 · 0 评论 -
vue element form 自定义校验1(表单校验)
通过ref属性获得表单对象,调用表单对象的validate函数进行表单的整体校验<template> <!--model绑定整个form对象的的数据--> <!--rules绑定校验规则--> <el-card> <el-form :model="form" :rules="rules" ref="formRef" label-width="80px"> <el-form-item label="活动名称"原创 2021-02-16 18:20:58 · 472 阅读 · 0 评论 -
vue element form 自定义校验1(字段校验)
<template> <!--model绑定整个form对象的的数据--> <!--rules绑定校验规则--> <el-form :model="form" :rules="rules" label-width="80px"> <el-form-item label="活动名称" prop="name"> <!--通过form对象访问key--> <el-input v-model="原创 2021-02-16 18:20:35 · 512 阅读 · 0 评论 -
vue element form 默认校验
<template> <!--model绑定整个form对象的的数据--> <!--rules绑定校验规则--> <el-form :model="form" :rules="rules" label-width="80px"> <el-form-item label="活动名称" prop="name"> <!--通过form对象访问key--> <el-input v-model="原创 2021-02-16 18:20:10 · 521 阅读 · 0 评论 -
vue element form 表单
<template> <!--ref绑定整个form对象的的数据--> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <!--通过form对象访问key--> <el-input v-model="form.name"></el-input> </el-f原创 2021-02-16 18:19:41 · 188 阅读 · 0 评论 -
vue element dialog 对话框
通过绑定:visible.sync属性来控制对话框<template> <el-card> <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%"> <span>这是一段信息<原创 2021-02-16 18:19:11 · 376 阅读 · 0 评论 -
vue element pagination
<template> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[1, 2, 3, 4]" :page-size="pagination.pageSize" layout="tota原创 2021-02-16 18:18:49 · 143 阅读 · 0 评论 -
vue element table 修饰
<template> <!--data绑定整个列表--> <!--boder是添加边框,stripe是隔行变色--> <el-table border stripe :data="tableData" style="width: 100%"> <!--type=index表明该列是序号列--> <el-table-column type="index" label="序号" width="80"&g原创 2021-02-16 18:18:19 · 152 阅读 · 0 评论 -
vue element table switch开关组件
<template> <!--data绑定整个列表--> <el-table :data="tableData" style="width: 100%"> <!--prop用来绑定列明,对应对象的key--> <el-table-column prop="name" label="姓名" width="180"> </el-table-column>原创 2021-02-16 18:17:54 · 811 阅读 · 0 评论 -
vue element table
el-table绑定数据框数据el-table-column绑定keytemplate slot-socpe用来接收该行的数据,用来定制化一些操作<template> <!--data绑定整个列表--> <el-table :data="tableData" style="width: 100%"> <!--prop用来绑定列明,对应对象的key--> <el-table-column prop=原创 2021-02-16 18:17:10 · 224 阅读 · 0 评论 -
vue element container 子路由
在maincontainer中添加子模块1.index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '../components/Home'import Users from '../components/main/Users'Vue.use(VueRouter)const routes = [ { path: '/', // '/'跳转到Home组件 name: '原创 2021-02-15 21:32:31 · 600 阅读 · 0 评论 -
vue cli element 项目结构
原创 2021-02-15 21:32:02 · 144 阅读 · 0 评论 -
vue element menu侧边导航栏 数据渲染
<template> <!--el-menu里的颜色是通过element定义的属性来设置的,css样式中没有相关样式--> <!--unique-opened 只摊开一个el-submenu,默认是弹开所有.这个属性依赖于submenu的index值,如果index值相同的会同时展开--> <!--router用来开启el-menu-item的路由模型,默认连接是index的值--> <el-menu background-color="原创 2021-02-15 21:31:36 · 900 阅读 · 0 评论 -
vue element menu侧边导航栏
<template> <!--el-menu里的颜色是通过element定义的属性来设置的,css样式中没有相关样式--> <!--unique-opened 只摊开一个el-submenu,默认是弹开所有.这个属性依赖于submenu的index值,如果index值相同的会同时展开--> <!--router用来开启el-menu-item的路由模型,默认连接是index的值--> <el-menu background-color="原创 2021-02-15 21:31:12 · 1031 阅读 · 0 评论 -
vue element container布局
mian.js要导入全局css样式global.cssimport Vue from 'vue'import App from './App.vue'import router from './router'import './plugins/element.js'import './assets/css/global.css'/* 导入全局样式 */Vue.config.productionTip = falsenew Vue({ router, render: h =>原创 2021-02-15 21:30:45 · 965 阅读 · 0 评论 -
vue 项目文件介绍
1.main.js是项目的主入口文件,不需要处理import Vue from 'vue'import App from './App.vue' /* 导入根组件 */import router from './router'/* 导入路由 */import './plugins/element.js'/* 导入elementui */Vue.config.productionTip = falsenew Vue({ router, /* 挂载路由 */ render: h =&g.原创 2021-02-15 14:22:21 · 173 阅读 · 0 评论 -
vue 后台管理系统-创建项目
命令行输入:C:\Users\Xinyu>vue ui???? Starting GUI...???? Ready on http://localhost:80002.选择项目存放的目录3.配置element-ui 插件4.添加axios依赖原创 2021-02-15 14:21:44 · 293 阅读 · 0 评论 -
vue
vue 数据渲染vue 指令 v-cloakvue 指令 v-text v-html v-prevue 指令 v-oncevue 指令 v-onvue 指令 v-on 函数传参vue 指令 v-on 事件修饰符-鼠标事件-什么是事件冒泡vue 指令 v-modelvue 指令 v-on 事件修饰符-键盘事件-键盘事件梳理vue 指令 v-on 事件修饰符-自定义键盘事件vue 指令 v-bindvue 指令 v-bind class绑定 对象方法{}vue 指令 v-bind cla原创 2021-02-15 14:18:45 · 114 阅读 · 2 评论 -
vue 插槽 有名插槽
<body> <div id="app"> <base-layout> <p slot='header'>标题信息</p> <p slot='footer'>底部信息信息</p> </base-layout> </div> <script type="text/javascript" src="js/vue.js"></scrip原创 2021-01-21 21:14:06 · 150 阅读 · 0 评论 -
vue 组件 插槽
<body> <div id="app"> <alert-box>有一个警告</alert-box><!--有内容则覆盖子组件的slot标签内容--> <alert-box></alert-box><!--无内容则显示子组件slot标签内容--> </div> <script type="text/javascript" src="js/vue.js"><原创 2021-01-21 21:13:42 · 83 阅读 · 0 评论 -
vue 组件 子向父传值
<body> <div id="app"> <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div> <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item> </div> <script type="text/javascript" src="js/vue.原创 2021-01-21 21:12:47 · 126 阅读 · 0 评论 -
vue 组件 父向子传值
<body> <div id="app"> <div>{{pmsg}}</div> <menu-item title='来自父组件的值'></menu-item><!--直接传值--> <menu-item :title='ptitle' content='hello'></menu-item><!--通过data中的变量传值--> </div>原创 2021-01-21 21:12:22 · 124 阅读 · 0 评论 -
vue 过滤器 filter
<body> <div id="app"> <input type="text" v-model='msg'> <div>{{msg | upper}}</div><!--差值表达式--> <div>{{msg | upper | lower}}</div> <!--后面的过滤器会覆盖前面的--> <div :abc='msg | upper'>测试数据原创 2021-01-21 21:11:54 · 108 阅读 · 0 评论 -
vue watch
<body> <div id="app"> <div> <span>名：</span> <span> <input type="text" v-model='firstName'> </span> </div> <div> <span>姓：</span> <原创 2021-01-20 23:11:54 · 102 阅读 · 0 评论 -
vue 后台管理系统-登录组件-退出登录
1.router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Login from '../components/Login.vue'import Home from '../components/Home'Vue.use(VueRouter)const routes = [ { path: '/', redirect: '/login' }, { path: '/login', compo原创 2021-01-20 23:11:25 · 777 阅读 · 1 评论 -
vue 组件-局部
<body> <div id="app"> <hello-world></hello-world> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var HelloWorld = { data: function(){转载 2021-01-20 23:10:58 · 103 阅读 · 0 评论 -
vue 组件
<body> <div id="app"> <button-counter></button-counter> <button-counter></button-counter><!--组件可以复用--> </div> <script type="text/javascript" src="js/vue.js"></script> <script ty原创 2021-01-20 23:10:34 · 102 阅读 · 0 评论 -
vue 实例的生命周期
<body> <div id="app"> <div>{{msg}}</div> <button @click='update'>更新</button> <button @click='destroy'>销毁</button> </div> <script type="text/javascript" src="js/vue.js"></scrip原创 2021-01-20 23:10:12 · 85 阅读 · 0 评论 -
vue vue实例中的data与vue组件中的data()
vue组件就是vue实例,可以被复用.而在复用时,希望组件中的data应该是相互隔离的.如果使用data : { count: 0 }的形式,则复制的该组件会共享data中的数据,所以要使用:data () { return { count: 0 }}的形式参考:https://www.cnblogs.com/wangjiachen666/p/9876266.htmlhttps://blog.csdn.net/admin123404/article/detai原创 2021-01-20 23:09:03 · 905 阅读 · 0 评论 -
vue 指令 自定义-带参数
<body> <div id="app"> <input type="text" v-color='msg'> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> Vue.directive('color', { bind: function(原创 2021-01-20 23:08:32 · 416 阅读 · 0 评论 -
vue 表单修饰
<body> <div id="app"> <input type="text" v-model.number='age'><!--自动转换为number类型--> <input type="text" v-model.trim='info'><!--去掉两边的空白--> <input type="text" v-model.lazy='msg'> <div>{{msg}}&l原创 2021-01-20 23:08:09 · 96 阅读 · 0 评论 -
vue 表单 textarea
<body><div id="app"> <div> <span>个人简介：</span> <textarea v-model='desc'></textarea> </div> <input type="submit" value="提交" @click.prevent='handle'></div><script原创 2021-01-20 23:07:35 · 394 阅读 · 0 评论 -
vue 表单 select option
<body><div id="app"> <div> <span>职业：</span> <select v-model='occupation' multiple> <option value="0">请选择职业...</option> <option value="1">教师</option>原创 2021-01-20 23:07:04 · 230 阅读 · 0 评论 -
vue 表单 input checkbox
<body><div id="app"> <div> <span>爱好：</span> <input type="checkbox" id="ball" value="1" v-model='hobby'> <label for="ball">篮球</label> <input type="checkbox" id="sing" v原创 2021-01-19 22:07:26 · 1233 阅读 · 0 评论 -
vue 表单 input text
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> 姓名： <input type="text" v-model='uname'> <input type="submi原创 2021-01-19 22:06:58 · 552 阅读 · 0 评论 -
vue 表单 input radio
<body><div id="app"> <div> <span>性别：</span> <span> <input type="radio" id="male" value="1" v-model='gender'> <label for="male">男</label> <input typ原创 2021-01-19 22:06:33 · 1520 阅读 · 0 评论 -
vue 指令 v-if 结合使用 v-for
<body> <div id="app"> <div v-if='v==12' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript">原创 2021-01-19 22:05:36 · 201 阅读 · 0 评论 -
vue 指令 v-for 遍历对象
<body> <div id="app"> <div v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = n原创 2021-01-19 22:05:12 · 330 阅读 · 0 评论 -
vue 指令 v-for 遍历数组
<body> <div id="app"> <ul> <li v-for='item in arrNames'>{{item}}</li><!--遍历数组--> <li v-for='(item, index) in arrNames'>{{item + '---' + index}}</li><!--遍历数组,index是下标--> <li :k原创 2021-01-19 22:02:55 · 754 阅读 · 0 评论