前端框架
关注
分享
扫一扫
文章平均质量分 50
a Fang
行我所行，无问西东
展开
-
Vue3组件开发——点击按钮外部触发弹窗事件
Vue3组件开发——点击按钮外部触发弹窗事件1. 环境配置：vscodeTS “bootstrap”: “^5.1.3”, “core-js”: “^3.6.5”, “vue”: “^3.0.0”, “vue-class-component”: “^8.0.0-0”2. 代码：useOutclick.TSimport { ref, onMounted, onUnmounted, Ref } from 'vue'const useClickOutside原创 2022-01-23 21:45:00 · 3238 阅读 · 0 评论 -
Vue3组件开发——DropDown显示点击下拉菜单
Vue3组件开发——DropDown点击下拉1. 环境配置：vscodeTS “bootstrap”: “^5.1.3”, “core-js”: “^3.6.5”, “vue”: “^3.0.0”, “vue-class-component”: “^8.0.0-0”之前让它显示是直接使用的is-disabled判断就是给的一个静态的数据，下面使用TS函数来实现点击逻辑2. 编写点击点击显示下拉菜单函数：逻辑代码： setup () { co原创 2022-01-23 21:42:55 · 3943 阅读 · 0 评论 -
Vue3组件开发——列表展开项(DropDownitem)
Vue3组件开发——列表展开项(DropDownitem)根据万物皆可组件化的开发思维，我们可以继续将组件化应用到列表展开项里面。因为在实际开发过程中，我们需要满客户随时修改列表项的需求，如果一股脑写死，维护还有开发可能都不会方便。1. 环境主要用到的环境是VScode+TS+VUE3+Bootstrap2. 代码2.1 组件：DropDownItem.vue<template> <li class="dropdown_option" :class原创 2022-01-14 14:14:53 · 2174 阅读 · 1 评论 -
快速使用VUE UI
快速使用VUE UI打开VUE UI1. 使用cmd打开VUE 在cmd里面输入vue ui他会启动你的浏览器窗口，我们就可以看到2.使用VUE UI2.1 创建的文件位置创建的文件是默认在你启动vue ui的夹2.2 新建文件新建创建完毕2.3 新建项目创建配置包管理因为我npm用的比较多，还是使用npm。直接点击下一步默认就好稍微等一下下项目运行进入任务界面运行编译完成点击启动。编译完成后会自动打开原创 2021-11-23 13:16:42 · 728 阅读 · 0 评论 -
vue脚手架安装
1.安装npm和node一般安装了node应该就有npm。查看自己有没有安装过node和npm2.使用淘宝镜像下载vue脚手架npm install -g @vue/cli --registry=https://registry.npm.taobao.org回车然后vue -V查看版本是不是安装下来了然后我们cd进入到我们要进入新建我们VUE项目的夹下。、3.新建vue项目然后我们在这个夹下面新建vue项目夹mkdir vueTest然后我们cd vueTest然后我们在原创 2021-11-23 11:36:51 · 1260 阅读 · 0 评论 -
快速使用WebPack打包工具
webpackwebpack是一个JS静态资源打包工具1 前端模块化1.2 模块化模块AMDCMDCommonJSES6…webpack支持模块化开发可以帮助处理模块之间的关系不仅js可以被看做模块，在webpack中图片、json文件、CSS均可被看做模块使用1.3 grunt与glup的对比grunt、glup的核心是Taskgrunt、glup是前端自动化工具过程：首先我们定义一系列task让glup和grunt依次执行task，使流程自动化。原创 2021-08-28 01:06:55 · 363 阅读 · 1 评论 -
Vue模块化
Vue模块化1 模块化思想有很多模块化思想commo jsAMDCMDES6…模块化不仅可以帮助我们解决作用域问题，代码管理，提高代码质量等问题还可以减少我们在开发过程中出现的"冲突"。2 模块间的访问2.1 {}式导入引用2.1.1 导入import {flag,num1} from "./01模块间的访问b";if (flag){ console.log(num1);}2.1.2导出let num1=100;let flag=true;e原创 2021-08-27 00:45:44 · 299 阅读 · 0 评论 -
Vue插槽的快速使用指南
Vue插槽的快速使用指南1 插槽的思想1.1 插槽的用处我们使用插槽可以使组件高级化，使我们的当前封装的组件具有可扩展性1.2 解决问题比如：导航栏里面大体结构相似，布局相似，但是内部内容不同1.3 使用方法思想抽取共性，保留不同2 上手代码2.1 编写一个简单地案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>VUE原创 2021-08-26 18:35:04 · 135 阅读 · 0 评论 -
父子组件之间的访问
父子组件之间的访问父访问子父组件访问子组件有两种方法$children注意需要用下标表明是第几个子组件，例如访问第一个子组件就是$children[0],也是由于使用下标，使之每次使用不利于代码管理维护，耦合所以使用并不广泛。示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>childen访问方式</title>&原创 2021-08-24 21:17:32 · 285 阅读 · 0 评论 -
Vue使用props请注意
父传子props驼峰标识props中的变量如果有驼峰命名的情况：在组件使用的时候就需要使用 -加上该大写字母的小写，即大写字母替换为-其小写字母例如：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件的构建</title></head><!--组件是单独封装的模块，拥有自己的data html模块-原创 2021-08-22 19:41:15 · 459 阅读 · 0 评论 -
父组件与子组件间的传值
组件的使用组件传值组件是单独封装的模块，拥有自己的data html模块组件中不可以访问vue实例中的data数据，不建议在里面访问vue实例对象组件中data中的数据必须以方法函数的方式返回数据，好处是函数可以直接返回一个对象，每一次返回数据对象都不一样，这样可以让数据不受影响父组件与子组件间的传值props传值props传值方法一props:[`title`,'st'],props传值方法二 props:{title:Array, st:Strin原创 2021-08-22 19:30:31 · 73 阅读 · 0 评论 -
Vue学习表单v-model
细讲v-model，学了一段时间，笔记没写感觉忘了好多，写一下下给你们分享，如果有问题评论或者私聊哟，aFang敲代码太无聊啦！！moudle的基本使用使用v-model实现表单的双向绑定v-moudle也可以使用在textare原理：v-bind綁定一個value屬性v-on绑定一个input事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l原创 2021-08-21 23:43:48 · 178 阅读 · 0 评论 -
Vue学习高阶函数妙用
编程范式：1、声明式编程2、命令式编程编程范式：面向对象式编程（主要角色：对象）；函数式编程（主要角色：函数）例子：1、需求取出所有小于100的数字let newnums=[]for(let i of nums){if(n<100){newNums.push(n)}}1.1高阶函数filter 中的回调函数：必须返回一个布尔值，返回false不加入新的数组，反之加入（filter 、map 、reduce）const nums =[2,4,700,45]let newNu原创 2021-08-16 22:20:05 · 159 阅读 · 0 评论