![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE
黑暗中跳舞的月亮
这个作者很懒,什么都没留下…
展开
-
element UI 自定义校验规则写法
例: 校验 number(22,12) 类型 的 必填数据。【ps:好像可以改成接收参数,把整数、小数位数作为入参就可以通用了,回头再看吧,先记录到这儿。如有错误,欢迎指正】<template></template><script>export default { data () { let numSpValid = (rule,value,callback)=>{ if(value){ const inte.原创 2021-01-07 11:01:04 · 688 阅读 · 0 评论 -
vue-cli(vue脚手架)搭建教程
1.安装vue-cli①使用npm(需要安装node环境)全局安装webpack,打开命令行工具输入:npm install webpack -g或者(npm install -g webpack),安装完成之后输入webpack -v,如下图,如果出现相应的版本号,则说明安装成功。注意:webpack 4.X 开始,需要安装 webpack-cli 依赖 ,所以使用这条命令 npm install webpack webpack-cli -g②全局安装vue-cli,在cmd中输入...转载 2020-06-19 13:42:54 · 354 阅读 · 0 评论 -
父子组件单双向传值以及生命周期的例子分析
通过实际的例子来看理解的更透彻:<div id="app"> <br/><br/> 父到子单向绑定: <hr/> {{ message }} <br/> <my-component :title="message"></my-component> <br/>...原创 2020-03-18 00:25:26 · 302 阅读 · 0 评论 -
Vue之工程篇【笔记】
前端工程化与webpack1.代码合并和压缩2.css预处理:less、sass、stylus3.生成雪碧图 CSS Sprite4.RS6转ES55.模块化webpack处理模块的依赖关系并进行打包。应用场景:SPA-Single Page Applicaton无具体名称,可任意自定义名称的模块:Code:安装webpack与w...原创 2020-03-12 17:22:58 · 307 阅读 · 0 评论 -
Vue之组件篇【笔记】
vue组件的常用内容总结。原创 2020-03-10 13:40:43 · 178 阅读 · 0 评论 -
element-ui表格table、抽屉drawer涉及的部分样式修改
//表格//element-ui的table改变选中行背景色/deep/.el-table__bodytr.current-row>td{background-color:#F0F7FF!important;}//表格//element-ui的table改变偶数行背景色/deep/.el-table--striped.el-table__bodyt...原创 2020-03-06 16:34:04 · 18390 阅读 · 2 评论 -
echars各种图表
图表vue文件: <div class="content"> <div class="tit"> <h1>数据统计</h1> <span>Data statistics</span> <...原创 2020-03-06 16:25:30 · 297 阅读 · 0 评论 -
Element-UI动态生成表单【包含字典翻译,旧值对比,但绑定动态表单验证待补充】
控件类型: T:文本输入, TA:TextArea,S:下拉选,D:日期控件,N:数字输入,C:复选,R:单选,SW:开关vue文件: <el-form v-if="formData.length > 0" ref="config" :model="params...原创 2020-03-06 16:16:19 · 994 阅读 · 0 评论 -
element-UI动态生成表格【带分页,以及字典翻译】
动态生成表格vue文件: <!-- 表格 --> <el-table style="width: 100%" border :data="tableData"> <template v-for="(item,index) in tableHead"> ...原创 2020-03-06 15:02:57 · 1497 阅读 · 2 评论 -
vue深入了解组件
1.当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候,推荐遵循 W3C规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。定义组件名的方式有两种:使用 kebab-case(短横线分隔命名)Vue.component('my-component-name', { /* ... */ })当使用...原创 2019-10-23 11:24:05 · 211 阅读 · 0 评论 -
vue基础
1.当一个 Vue 实例被创建时,它将data对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。当这些数据改变时,视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于data中的属性才是响应式的。2.不要在选项属性或回调上使用箭头函数,比如created: () => console.log(this....原创 2019-10-10 14:24:19 · 307 阅读 · 0 评论 -
vue-cli创建的项目的目录结构及说明
一、├── build // 项目构建(webpack)相关代码 记忆:(构建) 9个│ ├── build.js // 生产环境构建代码【build.js ,是我们完成项目之后需要运行的, 可以将我们的项目文件打包成 静态文件,存放在项目根目录的 dist 文件夹中(现在目录里还没有这个文件夹,build的时候会自动...原创 2018-10-18 10:05:05 · 419 阅读 · 0 评论 -
Vue实现动态的选中状态切换效果
HTML中的内容为以下。<ul class="list"> <li v-for="(item,index) in liList" v-on:click="addClass(index)" v-bind:class="{ ischeck:index==current}">{{item.title}}</li>原创 2018-10-26 13:54:03 · 10131 阅读 · 3 评论 -
VUE使用 iframe 嵌入网页,浏览器报错 x-frame-options deny
项目中用到iframe嵌入网页,然后用到springsecurity就被拦截了 浏览器报错Refused to display ‘网址' in a frame because it set 'X-Frame-Options' to 'deny'. 原因是因为springBoot springSecurty使用 X-Frame-Options防止网页被Frame 解决办法把...原创 2018-10-30 15:10:17 · 14867 阅读 · 0 评论 -
elementUI Tree 的用法
Tree 树形控件用清晰的层级结构展示信息,可展开或折叠。---------------------作者:杨杨得懿来源:CSDN原文:https://blog.csdn.net/yh869585771/article/details/79954432版权声明:本文为博主原创文章,转载请附上博文链接!基础用法基础的树形结构展示。<el-tree :data...转载 2019-02-28 16:26:52 · 9649 阅读 · 1 评论 -
Vue之Render函数【笔记】-包含【函数化组件】和【使用Render函数开发可排序的表格组件】的实例
虚拟节点:两者的对比:虚拟dom看起来就像一个标准的javaScript对象,它没有真正的dom结构。它是通过一些特定的方法,比如tag,attributes等来描述清楚一个dom的UI状态。Vue2里面的vnode:主要类型:Render的主要方法组件写法:注意:如果Vnode作为组件,或者含有组件的slot,那么V...原创 2019-06-17 20:07:06 · 626 阅读 · 0 评论 -
在Vue中什么情况用computed,watch,methods理解
根据原本的例子,补充自己的一点想法,整理如下:用一个例子来说明一下吧:<div id="demo"> <p>message: "{{ message }}"</p> <p>reversed message: "{{ reversedMessage }}"</p> <button @click="add">...转载 2019-10-08 15:37:48 · 956 阅读 · 0 评论 -
VUE的事件修饰符总结
.once是将事件设置为只执行一次。如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件不再阻止。<div v-on:click.once="alert(1)"> 只能执行一次,再次点击不会起作用//无once每次点击都可执行</div><a href="https://www.baidu.com"...原创 2019-10-09 16:48:51 · 233 阅读 · 0 评论 -
vue 中使用freeze出现的问题
<template><!-- import { Vue } from 'vue/types/vue'; --><div> <div class="one"> <h1> {{number}} </h1> </div> <span> {{原创 2018-03-07 15:05:23 · 1525 阅读 · 2 评论