vue
NI_computer
这个作者很懒,什么都没留下…
展开
-
vue3 element-ui 树选择单选
1.取消父子结点关联<el-tree check-strictly :data="data" show-checkbox node-key="id" :props="defaultProps" ref="trees" @check="handleNodeClick" ></el-tree>2.修改选中结点在ts代码中写: const trees = ref(); //树形结构 //选择节点时触发的函数 const handleNodeClick =..原创 2021-09-09 15:02:51 · 838 阅读 · 0 评论 -
vue,使用v-for循环加载子组件
在项目开发中,通常我们需要在一个父页面中载入非常多的子页面,如果每个子页面都一一定义的话,会显得代码非常的冗余。这里我们可以通过v-for循环来实现一个加载子组件的方法。1.在父组件中引入所有的子组件,并注册2.在data中将子页面封装成一个数组pages: [ { name: "allOrder", label: "所有订单", }, { name: "unpaid",原创 2020-10-24 15:17:22 · 11045 阅读 · 2 评论 -
Vue,简单的子组件向父组件传值。
子组件通过发射事件$.emit给父组件,通知父组件数据改变,父组件通过@xxx监听例子:注册一个全局组件,和一个局部组件,将全局组件作为局部组件的子组件,并将全局组件中的值传给局部组件。全局子组件代码:父组件:测试代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev原创 2020-10-22 19:39:07 · 713 阅读 · 0 评论 -
VUE,element-ui,优化tabs组件每次点击,所有子页面都重新渲染问题。
在element-ui的tabs组件中,我们发现每次切换页面,所有的子组件都会重新渲染一次。当子页面需要发送数据请求并且子页面过多时,这样会过多的占用网络资源。这里我们可以使用v-if来进行判断是否渲染该子页面。1.定义一个数组,用来判断该页面是否需要渲染data() { return { activeName: "allOrder", pages: { allOrder: true,//第一个需要渲染的页面 unpaid: false,原创 2020-10-20 20:12:49 · 13140 阅读 · 6 评论 -
VUE,父页面向子页面传值。
在父页面中,我们使用了自定义的子页面,这时候我们需要将父页面的id传输给子页面。可以自定义一个绑定事件在子组件上,例如:父页面: <basicMsg :id="id" ></basicMsg>basicMsg为我的自定义子组件名称,引号内为需要传输的值。这里我传输的id为data内定义的id。子页面:使用props来接收父组件传输的数据,props定义在与data同级。这里也可以给接收的数据进行一个简单的数据类型判断。例如:str为string类型,str1为obje原创 2020-10-20 20:00:33 · 4100 阅读 · 0 评论 -
Vue,element-ui中使用tabs,载入子页面并优化。
在element-ui组件中有一个tabs标签页,可以在单页面中注入多页面。但是例子中的页面只是一行文字,在实际应用开发中我们需要写入的代码很多,如果都写在该页面就会非常不美观,所以这里我使用了子页面,并自定义组件载入到单页面中。1.在页面中写入element-ui组件中的代码。直接把官网上的东西复制下来就行,根据自己需要增加和删除页面。2.定义子页面创建一个文件夹存放子页面,将子页面文件创建出来。3.主页面引入子页面4.注册子组件,在data同级下写components5.在tabs原创 2020-10-20 19:45:11 · 6581 阅读 · 2 评论 -
VUE,element-ui自带表单验证失败,解决v-model和prop无法绑定问题
在使用element-ui时,使用了里面自带的表单验证功能。当数据回显在输入框时,仍然无法通过验证。原代码:模态框内代码:data内验证代码:查询过后,发现是v-model绑定的数据需要于prop的内的名字相同。修改后:这样就能通过表单验证了。...原创 2020-10-19 09:53:08 · 3591 阅读 · 5 评论 -
VUE,webpack打包(自动配置)
生成一个基于vue+webpack的项目1.在终端中进入需要创建项目的文件夹,安装vue/cli-initcnpm install @vue/cli-init -g2.创建项目模板-webpackvue init webpack app01(你的项目名字)vue init webpack app01选择需要的配置然后“y”生成的过程比较漫长可以慢慢等,大概需要十分钟。完成后可以看到多了一个文件夹。3.安装依赖cnpm install4.运行项目npm run dev5.编原创 2020-10-15 19:48:04 · 292 阅读 · 0 评论 -
VUE,webpack简单使用脚本打包(手动配置)
Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过loader的转换,任何形式的资源都可以视作模块,比如CommonJs模块、AMD模块、ES6模块、CSS、图片、JSON、Coffeescript、LESS等。webpack官网地址webpack的简单使用:使用前提:已经安装了node.js最近版本1.初始化项目进入项目中npm init 一直原创 2020-10-14 20:13:15 · 864 阅读 · 0 评论 -
Vue,在vue-cli上进行组件页面切换
进行组件切换的两种方法:一.动态组件1.在components内自定义两个子组件并载入到根组件上student.vue:<template> <div id="student"> <h3>student list</h3> <ul> <li v-for="(item, index) in students" :key="index"> {{ item }} </l原创 2020-10-13 16:09:38 · 855 阅读 · 0 评论 -
VUE,vue-cli项目结构,以及在vue-cli脚手架原始项目框架引入模块
一、项目结构:初始化一个vue-cli之后,我们可以在目录中看到以下结构。app.vuesrc下的app.vue是项目的根组件,可以包含其他的子组件。在项目运行时进入的首页即为app.vue。子组件写在src文件夹下的components内。根组件和子组件组成组件树。main.jsmian.js是vue应用的入口文件,可以创建一个新的vue实例并挂载再根节点下。Vue插件也从这里引入。二、添加引入新模块1.在components文件夹下新建一个vue文件模块内基本组件:templ原创 2020-10-12 20:07:58 · 266 阅读 · 0 评论