Vue
~Phoenix
种一棵树最好的时间是十年前,其次就是现在!
展开
-
Vue-小学生都能看懂并使用的子父组件传值
目录搭建的框架目录结构一、父传子动图效果及源码父传子源码:二、子传父动图效果子传父源码:三、详细解说组件传递过程:组件传值模板1.父--->子①属性props②引用refs传值2.子--->父①属性emit搭建的框架目录结构一、父传子动图效果及源码父传子源码:父组件:<template> <div> <div> <p v-html="theCardTitle原创 2020-06-27 17:40:43 · 5847 阅读 · 54 评论 -
如何搭建一个vue项目(完整步骤)
一、安装node环境 1、下载地址为:https://nodejs.org/en/ 2、检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3、为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/ 输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。 检查是否安装成功:转载 2020-06-27 08:07:25 · 45599 阅读 · 38 评论 -
Vue生命周期详解
目录前言:一、生命周期流程图详解1.beforeCreate、Created2.编辑模板过程3.beforeMount、Mounted4.beforeUpdate、Updated5.beforeDestroy、Destroyed二、生命周期代码1.父子组件加载生命周期2.父子组件更新生命周期3.父子组件销毁生命周期前言:1、什么是vue生命周期?Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新原创 2020-06-25 11:19:34 · 9932 阅读 · 32 评论 -
Vue-查询数据以树状图效果渲染
目录实现过程:一、tree封装1.tree组件代码:2.定义dataList:3.定义初始值4.computed和mthods的区别:二、注册tree权限1.引入树形控件子组件2.试题分类点击事件,调用接口(调用接口忽略)3.清楚渲染的是谁的数据老规矩:先走波流程看实现效果!实现过程:在question-edit界面实现查询数据,将数据以树状图效果渲染出来,question-edit要给tree文件注册权限。首先讲解tree文件代码;再讲quest原创 2020-06-22 11:55:40 · 5204 阅读 · 41 评论 -
Vue-循环遍历选项赋值到对应控件
老规矩:先走流程,上动图看效果!在此推荐个大佬,为我提供解决思路,大家多多访问他的博客,希望带给大家帮助https://blog.csdn.net/yyp0304Devin下面就一步步为大家讲解如何实现将它的试题选项赋值到对应的控件中的,因为题型较多,拿单选题型为大家演示:不同题型它的界面也是不同的,这里也有个技术点,这里就先不讲解了。如动图所示,要完成这样的功能,肯定是要访问后端接口的知道URL后,我们就知道携带的试题ID过去一、传递ID在点击编辑按钮事件中将ID传值过去原创 2020-06-19 19:51:13 · 3303 阅读 · 26 评论 -
Vue-动态获取数据后控件不可编辑
老规矩:先走波流程!看实现效果,更好根据大家的问题相对应的解决自己的问题。功能介绍:由动图可以看到,当我点击添加试题时,因为要添加些数据,跳转过去的界面必须是可以使用的。再当我点击编辑,携带过去的数据是不能更改的,只更改下方题干部分。具体如何实现控件获得数据后不可更改呢?主要是用到判断,可以看到这里我只给input和select组件设置了不可用,但他们都是共用一个方法。实现过程:1.做判断,因为点击是一加载就出现的数据,所以是当获得过来的数组不等于空时执行 //钩子函数,原创 2020-06-15 10:56:55 · 3412 阅读 · 23 评论 -
Vue-动态分页
<!--Table表格--><el-tableclass="table-form":data="tableData.slice((currentPage4-1)*pageSize,currentPage4*pageSize)"</el-table><!--分页--><el-paginationclass="paging"@size-change="handleSizeChange"@cur...原创 2020-06-15 08:27:35 · 1799 阅读 · 9 评论 -
Vue-单行删除与批量删除
一、单行删除<el-table-columnalign="center"fixed="right"label="操作"width="100"><templateslot-scope="scope"><el-buttontype="text"size="small"icon="el-icon-edit"></el-button><el-button...原创 2020-06-15 08:25:16 · 2822 阅读 · 27 评论 -
Vue-跨页面传递与接收数组并赋值
为更好让大家理解拿自己的项目做例子并附上动图效果,可以看到将第一行数据选中的一行赋值到了另一个界面:为了更好让大家理解拿去附用将我每个界面和方法属性的命名都介绍给大家:兄弟界面跳转:question-edit——>add-question1.界面A:question-edit想要将本行的数据赋值过去,因为不是一个所以要用到数组,将它们打包好,首先第一步我们的入口在操作的编辑图标上1.编辑图标代码:<templateslot-scope="scope"> <...原创 2020-06-14 09:40:42 · 3884 阅读 · 16 评论 -
Vue-Table和Select组件接收数字换为对应的汉字
目录一、Table组件数字转换二、Select接收数字转换为汉字一、Table组件数字转换1.首先定义一个转换表-命名为:statusData statusData:{ "1":{ lable:"简单" }, "2":{ lable:"中等" }, "3":{ lable:"困难" }...原创 2020-06-14 09:32:43 · 2656 阅读 · 13 评论 -
Vue-(Show-overflow-tooltip)的作用
在我们画界面时不少使用Table表格,Table有很多的表头。你们有没有遇到这样一个问题,就是在你当屏幕中大小合适,但是当你在别人电脑显示或拉长你的网页时,就会出现空白,显得很突兀,Show-overflow-tooltip就是解决这个问题的。下面根据我做的项目来体验下这个属性使用前后的对比吧!使用前效果及代码:因为这里写死了,所以当我拉长我的界面就会出现上面的效果。使用后的效果及代码:...原创 2020-06-05 19:28:50 · 11003 阅读 · 21 评论 -
Vue-只用一个方法解决隐藏跳转
此动图有两个功能都实现了隐藏跳转,分别是高级搜索->简单搜索; 多选中添加选项此篇博客以多选中添加选项为例为大家讲解:首先在template模块小定义好两个图标其次在script中data里定义默认显示按钮最后在script中methods方法中写逻辑...原创 2020-05-30 20:15:43 · 806 阅读 · 25 评论 -
Vue-安装依赖项vue-quill-deitor使用富文本编辑器
一、在项目终端输入:npm install vue-quill-editor --editor二、注册组件在main.js项目入口文件中添加全局挂载1.导入全局变量importVueQuillEditorfrom'vue-quill-editor'2.导入样式import'quill/dist/quill.core.css'import'quill/dist/quill.snow.css'import'quill/dist/quill.bubble.cs...原创 2020-05-30 20:13:32 · 595 阅读 · 19 评论 -
Vue-实现本项目页面之间跳转
一、在template模板中添加button按钮加入click事件<el-buttontype="primary"@click="func()">添加试题</el-button>二、在methods中写入路径func(){this.$router.push({path:"add-question"});},三、修改路由文件,加入所有跳转的本地界面...原创 2020-05-30 20:09:48 · 1072 阅读 · 19 评论 -
Vue-组件、传值props
目录一、全局组件-关键词component一、局部组件二、子父组件-父向子组件传递数值Props关键字:三-子组件向父组件传值四、组件插槽五、具名插槽必须先注册组件才能够使用一、全局组件-关键词component注册语法规则:Vue.component (组件名称,{data:组件数据,template:组件模板内容})例如:注意:组件名称命名方式有两种,一种是如上图短横线的方式,一种是驼峰HelloWorld。使用驼峰命名方式后,原创 2020-05-26 19:13:56 · 333 阅读 · 2 评论