Vue
文章平均质量分 51
vue
fighting Ably!
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue3.0-如此简单的setup
setup语法糖原创 2022-10-18 17:22:10 · 1026 阅读 · 0 评论 -
Vue_element-ui 表单校验问题
elment-ui表单校验问题,ts使用方式el-form表单上面绑定ref=‘表单名称’ rules=‘表单规则’ <el-form ref="cateForm" :model="cateForm" :rul原创 2022-03-31 11:10:35 · 3097 阅读 · 0 评论 -
Vue_vue-property-decorator在Vue中使用指南
描述比较清晰的文章转载 2021-10-28 16:42:19 · 314 阅读 · 0 评论 -
Vue3——学习
学习来源:Vue组合式APIAPI手册一、响应式状态与副作用1.1 响应式状态创建响应式的状态,需要引入reactive API : import {reactive} from ‘vue’;<template> <div class="container"> <div class="reactive"> 响应式data:{{state.msg}} // 使用state下面的msg变量 </div> &转载 2020-12-28 14:06:15 · 254 阅读 · 0 评论 -
Vue3-组合式API学习之响应式系统工具集
1223转载 2020-10-09 17:23:25 · 267 阅读 · 0 评论 -
Vue3-组合式API学习之依赖注入(待补充)
学习来源依赖注入provide和inject提供依赖注入,类似于2.x版本中的provide/inject。两者都只能在当前活动组件实例的setup()中调用。转载 2020-09-29 08:31:32 · 485 阅读 · 0 评论 -
Vue3-组合式API学习之生命周期钩子函数
学习来源生命周期钩子函数我们在使用生命周期钩子函数时,可以直接导入onXX的函数来注册生命周期钩子:<template> <div class="home"> <button @click="addCount">{{count}}</button> </div></template><script lang='ts'> import { ref,onMounted,onUpdated,onUnm转载 2020-09-25 17:31:43 · 923 阅读 · 0 评论 -
Vue3-组合式API学习之响应式系统API
学习来源响应系统API1.reactive接收一个普通对象然后返回该普通对象的响应式代理。等同于2.x的Vue.observable();实例:import {reactive} from 'vue';setup(){ const state = reactive({ count : 0 }) return state}reactive响应式转换是’深层的’,会影响对象内部所有嵌套的属性。基于ES2015的Proxy实现,返回的代理对象不等于原始对象。建议仅使用代理对象而避免依转载 2020-09-22 09:07:22 · 1158 阅读 · 0 评论 -
Vue3-组合式API学习之setup
学习来源1.简介setup函数是一个新的组件选项。作为在组件内使用Composition API的入口点。2.调用时机创建组件实例,然后初始化props,紧接着就调用setup函数,从生命周期钩子的视角来看,它会在beforeCreate钩子之前被调用。3.模板中使用如果setup返回一个对象,则对象的属性将会被合并到组件模板的渲染上下文。<template> <button> {{count}}---{{object.foo}} </button转载 2020-09-21 22:01:23 · 10502 阅读 · 2 评论 -
Vue 之 vue-cli中render函数的使用
vue官网中有这样一个生动形象的例子,即如果我们想在传入不同的值时,渲染h1~h6不同的标签,如果我们在封装好的组件中根据传入的level值,进行v-if/v-else/v-else-if这种方式的话,代码十分冗长,如果里面还要传入内容,在插入锚点元素时会多次重复,因为有了render函数这种使用的方式。Vue官网中给出的方式,是使用Vue.component形式来注册这个组件,在此处我就不过与赘述啦,主要想分享render函数方法给大家。eg:组件FlexiableSlot.jsexport def原创 2020-08-11 17:56:09 · 1713 阅读 · 0 评论 -
Vue之作用域插槽
今天在查缺补漏的过程中,发现了我之前没有使用和具体了解的作用域插槽,那么作用域插槽究竟是做什么的呢?官网讲解实例在父组件中,有一个子组件,我们在渲染子组件的时候想要控制子组件内部的变量可以动态的展示。eg:父组件 slotFather.vue中<template> <div class="parentSlot"> <SlotSon1> <template v-slot:default="slotProps">原创 2020-08-06 10:26:15 · 284 阅读 · 0 评论 -
Vue之判断页面二级路由
判断二级路由当我们在项目进行时,如果项目底部有tabbar,tabbar主要是四个大模块之间的相互跳转,若我们在二级路由之后页面不想看到,我们可以有以下两种方式:方式一:在App.vue中定义tabbar,v-show="某个判断条件",我们可以在router.js中设置meta属性,来控制该路由是否要显示代码 App.vue <van-tabbar v-show="!$route.meta.notShowTab" route v-model="active" @change="原创 2020-08-05 09:00:14 · 2469 阅读 · 0 评论 -
Vue自定义指令的介绍和使用
1.例在前面在项目的实战过程中,有三个模块都需要传背景图片过去,我用了两种方法: 第一种方式:第一种在组件中传递背景图片地址给子组件, 子组件中在标签中定义内联样式 第二种方式:封装v-bgImg指令, 在使用这个指令的时候将地址传入,在指令中设置背景图片地址并生效。接下来我会详细介绍第二种方式代码示例第一步:自定义指令import Vue from 'vue';Vue.directive('bgImg',{ inserted:function (el,val) { e原创 2020-08-04 16:20:49 · 747 阅读 · 0 评论 -
Vue.js官网文档阅读——对于本人的查缺补漏(组件篇)
1.组件命名当我们在使用Vue.component(‘compname’,{})来定义一个组件时,第一个参数即是我们组件的名称,组件的命名有两种方式:第一种:kebab-case (短横线分隔命名)eg: t-upload当我们使用这种命名方式时,在引用该组件时使用也要用这种形式<t-upload>...</t-upload>第二种:PascalCase(首字母大写命名)eg:TUpload当我们在使用这种命名方式时,在引用该组件时可以选用两种形式一种:&l原创 2020-08-11 22:14:29 · 215 阅读 · 0 评论 -
Vue——动态参数的应用
Vue动态参数1.用法官网说,从2.6.0开始,可以用方括号括起来的JavaScript表达式作为一个指令的参数。eg:<a v-bind:[attributeName]="url"> ... </a> 可以简写为<a :[attributeName]="url"> ... </a> <a v-on:[eventName]="doSomething"> ... </a>可以简写为<a @[eventName原创 2020-07-20 22:06:22 · 4390 阅读 · 0 评论 -
Vue——你可能会遇到的修饰符
Vue中的修饰符以及代码演示修饰符是以.指明的特殊后缀,若在事件中指明,例如.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault()方法阻止事件的默认行为。修饰符的类型修饰符有:一、事件修饰符 1. .stop阻止单击事件冒泡 2. .prevent阻止事件默认行为 3. .capture在事件点击时默认以捕获的形式触发 4. .self只有在元素本身触发时触发回调 5. .once只触发一次 6. .key触发事件的按键二、v-原创 2020-07-19 18:42:21 · 268 阅读 · 0 评论 -
Vue.js官网文档阅读——对于本人的查缺补漏(基础篇)
Vue官网学习(查缺补漏)Vue官网地址1.基础1.vue是一套用于构建用户界面的渐进式框架。2.可以自底向上逐层应用(从基层做起,把基础的东西写好,再逐层网上添加效果和功能)。原创 2020-07-22 08:59:39 · 215 阅读 · 0 评论 -
Vue配合Vant使用时area省市区选择器的使用
一、使用原因:在开发的过程中,所遇到的一个功能,我想用vant组件中的area地址选择器在使用的过程中配合popup,默认popup不显示,当我点击触发时,从下方弹出popup组件在popup组件中可以将一开始配置的省市区进行选择将选择的数据传递给后端,这样的一个过程二、最终得到的效果图三、实现过程3.1 HTML代码片<div class="school-addre...原创 2020-01-07 10:54:42 · 6106 阅读 · 4 评论
分享