vue
曾泳锋
有机会多多请教
展开
-
vue本页面页面刷新
App.vue<template><div id="app"><router-view v-if="isRouterAlive" /></div></template><script>export default{ provide(){ return{ reload:this.reload }},data(){ return{ isRouterAlive:true }},methods:{ re原创 2021-06-23 10:30:35 · 83 阅读 · 0 评论 -
vue3配置404页面
vue2中的(*)不适用于vue3import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'import Home from '../views/Home.vue'import noFind from '../views/404.vue'import loginRegiter from '../views/loginRegiter.vue'const routes: Array<RouteReco原创 2021-04-14 20:42:12 · 1178 阅读 · 1 评论 -
vue3基础
http://huaxhe.gitee.io/vue3_study_docs/00_%E8%AF%BE%E7%A8%8B%E4%BB%8B%E7%BB%8D.htmlsetupvue3所有的API组合都在这个函数中执行。原创 2021-04-10 15:19:36 · 232 阅读 · 0 评论 -
nuxt基础
文件结构生命周期服务端钩子即在服务端运行也在客户端钩子除了beforeCreated跟created,其他vue生命周期在客户端运行获取window跟vue的this得在客户端的这些钩子获取nuxtServerInit钩子middleware钩子在nuxt.config.js下的middleware在layouts下的middleware在peges下的middleware三个middleware,执行顺序是nuxt.config.js(全局的)>layouts原创 2021-03-08 00:24:40 · 266 阅读 · 0 评论 -
vue项目页面根据不同路由从而进行不同过渡动画地跳转
在App.vue中<template><div id="app"><transition mode="out-in" :leave-active-class="lac" enter-active-class="animate_animated"></transition></div></template>原创 2021-02-24 08:34:21 · 305 阅读 · 0 评论 -
vue中transition过渡组件
在进入/过渡中,主要有6个钩子被触发,并对应6个class的切换v-enter:进入初始状态v-enter-active:进入过渡阶段,动画‘播放阶段’v-enter-to:进入结束阶段,在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。v-leave:离开初始阶段v-leave-active:离开过渡阶段,动画‘播放阶段’v-leave-to:进入结束阶段,在元素被插入之后下一帧生效 (与此同时 v-leave 被移除),在过渡/动画完成之后移除。原创 2021-02-23 15:05:30 · 499 阅读 · 0 评论 -
vue中install方法
vue提供install可供我们开发新的插件及全局注册组件等install方法第一个参数是vue的构造器,第二个参数是可选的选项对象export default { install(Vue,option){ 组件 指令 混入 挂载vue原型 }}全局注册组件import PageTools from '@/components/PageTools/pageTools.vue'import update from './update/index.vue'import Ima原创 2021-02-20 10:19:26 · 21479 阅读 · 0 评论 -
vue中v-model修饰符
v-model修饰符.lazy可以将原先双向数据绑定的input事件转换为change事件<input v-model.lazy="msg" />.trim 可以将用户输入的值,两边空白进行清空<input v-model.trim="msg" />.number 可以自动将用户输入的值变换为数字类型<input v-model.trim="msg" />...原创 2021-02-20 08:53:35 · 148 阅读 · 0 评论 -
vue-admin-teplate模板环境变量
我们可以在这两个文件中设置全局变量,进行使用例如开发时我们可以在vue.config.js中设置我们开发服务器的端口号在开发环境变量文件中设置port ,在vue.config.js文件就可使用原创 2021-02-19 22:29:05 · 402 阅读 · 0 评论 -
vue中keep-alive组件使用
keep-alive组件是可以用来缓存组件,避免重复渲染需要频繁渲染的组件//顶多支持10个组件的缓存,超过10个,则会销毁之前第一个缓存的组件<keep-alive :max="10"><频繁切换的子组件></keep-alive>include和exclude一般传入的是正则表达式根据表达式是否进行渲染...原创 2021-02-19 08:51:47 · 100 阅读 · 0 评论 -
vue中计算属性computed中get跟set的区别
计算属性computed默认只有getter这个属性,需要用setter再进行设置computed: { fullName: { // getter 只要值变化就会重新触发这个get返回新的值 get: function () { return this.firstName + ' ' + this.lastName }, // setter这个属性是在监听数据变化时进行其他数据计算的属性 set: function (newValue) {原创 2021-02-18 14:48:13 · 628 阅读 · 0 评论 -
watch与computed属性
一般我们用computed来对我们的数据进行加工变成我们所需的数据watch则是拿来监听某些数据变化而让其他数据变化的属性原创 2021-01-24 16:53:05 · 71 阅读 · 0 评论 -
vue编程式路由
this.router.push(路径)this.router.replace(路径)第一个直接跳转第二个是替代上个页面,如果还想返回只能返回上上个页面原创 2021-01-13 00:23:38 · 86 阅读 · 0 评论 -
vue路由种类
vue路由分为声明式路由和编程式路由原创 2021-01-13 00:26:00 · 392 阅读 · 0 评论 -
vue的watch侦听属性
深度监听deep:truehandler watch: { cateList: { deep: true, handler: (val) => { uni.setStorageSync("cateList", val); }, },一般用这个属性来做监听数据变化进而执行一些方法原创 2021-01-12 22:47:16 · 118 阅读 · 0 评论 -
Vue的mixin的全局混入和局部混入
在vue项目中如果全局需要某项逻辑可以使用mixin进行全局混入原创 2021-01-08 14:18:34 · 665 阅读 · 0 评论 -
vue生命周期
vue生命周期原创 2021-01-06 14:34:07 · 59 阅读 · 0 评论 -
vue插槽
具名插槽定义:可以往父组件的子组件传输html解构,并且是精准定位的传输通过slot进行标记往子组件对应的标记点进行传输作用域插槽vue2.6以后父组件中两者写法可以合为一种//obj为子组件对外传输的数据//default为slot标记点<template v-slot:default="obj"> {{ obj.row.timeOfEntry | formatDate }}</原创 2021-01-05 00:27:09 · 52 阅读 · 0 评论 -
vue中组件传值
第一种vuex第二种vue事件总线第三种 传统子传父,父传子原创 2021-01-04 23:34:20 · 78 阅读 · 0 评论 -
vuex
vuex定义:vuex是vue设立的一个共享数据状态机制,简单来说我们可以多个页面需要的同个数据放在vuex这个机制里面,以便我们调用,就不需要利用传统组件传值及事件总线来对数据进行共享以下代码项目代码,不建议初学者看首先对vuex进行模块化封装及引用user模块代码import { setToken, getToken, removeToken, setTimeStamp, removeTimeStamp } from '@/utils/auth'import { login, getInf原创 2021-01-04 23:33:21 · 88 阅读 · 0 评论 -
vue中事件总线
1.新建一个vue实例化js文件js文件代码2.向这个vue实例化文件传值<script>import parent from "../../components/comment/parent";import events from "../../utils/events";export default { components: { parent }, props: ["comment"], methods: { sendparentid() {原创 2021-01-04 23:20:28 · 147 阅读 · 2 评论 -
vue中通过ref调用子组件的方法
vue中通过ref调用子组件的方法在父组件中的子组件定义ref属性<add-dept ref="add" :isadd.sync="isAdd" :data="node" @updataNumber="getInfo" />父组件利用ref调用子组件里面的方法 edit(node) { this.isAdd = true this.node = node this.$nextTick(() => { this.$refs.add原创 2021-01-04 23:07:27 · 4130 阅读 · 1 评论 -
vue传统组件传值
父传子给父组件中的子组件定义一个传值的属性//代码中isadd跟data都是传值属性<add-dept ref="add" :isadd.sync="isAdd" :data="node" @updataNumber="getInfo" />子组件中通过props进行接收 props: { isadd: { type: Boolean, default: false }, data: { type: Object原创 2021-01-04 23:03:24 · 205 阅读 · 0 评论 -
嵌套路由
嵌套路由定义:主路由中嵌套一个子路由,便于我们在主页面中嵌套一些子页面,子页面可供切换使用业务场景tab栏切换原创 2021-01-04 21:51:50 · 168 阅读 · 0 评论 -
vue获取DOM元素
1.通过ref对该元素进行注册2.通过this.$refs.注册名称进行引用<template> <div class="aiqi"> <!-- 对元素进行注册 --> <div ref="text">{{ aiqi }}</div> <button @click="before">before</button> <button @click="after">after&l原创 2021-01-04 10:50:08 · 206 阅读 · 2 评论 -
vue中nexttick
nexttick原创 2021-01-03 23:48:43 · 98 阅读 · 0 评论 -
Vue基础
Vue基础day1Vue的现状最新版本:Vue 3.01、核心代码完全重构(TypeScript)2、速度更快3、体积更小vue的基本使用方法1.引入vue.js<script src="./vue.js"></script>2.定义模板<div id="app"></div>3.vue初始化const app = new Vue({ // 告诉我Vue生效位置,给一个dom id值,或者class //el 挂原创 2020-12-30 23:29:07 · 637 阅读 · 0 评论