Vue
文章平均质量分 56
源小新
冲鸭!!!!!
展开
-
v-for和v-if与v-show能否一起使用
v-if和v-for的使用注意事项v-show和v-if能否共同使用原创 2021-10-27 11:08:44 · 8020 阅读 · 0 评论 -
Vue3-入门 拿来吧你!
Vue3-初学入门Vue3 简介1. 了解相关信息2. 性能提升3.新增特性创建Vue3项目有两种方式1.可以使用vue-cli2.可以使用vitevue3 部分源码解析Vue3 简介1. 了解相关信息vue.js 3.0 它支持vue 2.0 的大多数特性更好的支持 TypeScript2. 性能提升减小打包的数据占用空间渲染更快速内存减少使用 Proxy 代替 defineProperty 实现数据响应式重写虚拟 DOM 的实现和 Tree-Shaking3.新增特性原创 2021-07-02 20:49:02 · 309 阅读 · 6 评论 -
created和mounted不执行的解决方法情况之一
created和mounted不执行的解决方法路由配错在路由的配置中!!!路由配错会导致页面无报错,且代码不执行…吃两次亏了在路由的配置中!!!千万不要讲routes 写成routers这种小问题,有时真的让人想切腹自尽…配置路径懒加载时component: () => import(’@/views/home/Home’)千万 !!! 不要在import和’()'之间加空格...原创 2021-05-31 09:15:06 · 1048 阅读 · 0 评论 -
router路由传参 - props
使用props路由传参路由传参 - props什么是代码的耦合?路由代码传参模板代码传参布尔模式对象模式函数模式路由传参 - props使用props可以降低耦合度,取代$route什么是代码的耦合?模块之间的联系紧密成度联系越紧密就是耦合度越高,这样是不好的。因为模块和模块要低耦合才对。。 高内聚、低耦合的模块是设计时追求的目标。衡量模块独立性的定性标准是内聚(一个模块内各个元素彼此结合的紧密程度)和耦合(一个软件结构内不同模块之间互连程度的度量)。路由代码传参import Abou原创 2021-05-28 14:16:55 · 1070 阅读 · 0 评论 -
路由跳转编程式导航
编程式导航 --- 跳转路由两种基本跳转方式路由实例路由控制页面跳转路由跳转指定页两种基本跳转方式路径跳转this.$router.push('./about/'+id);名字跳转this.$router.push({name:'about');路由实例可获取到路由信息console.log(this.$router);路由控制页面跳转路由回退this.$router.go(-1)this.$router.back()路由前进this.$router.go原创 2021-05-27 11:00:48 · 373 阅读 · 0 评论 -
Vue 实例简单的一生 生命周期(易理解)
VUE 生命周期1.生命周期是什么?2.生命周期怎么用?3.生命周期在哪些地方使用?总结1.生命周期是什么?生命周期用于监听每个相应阶段vue实例的创建==>挂载==>更新==>结束销毁的每个阶段生命周期常用的共有8个阶段当Dom渲染到某一周期的时候,会进行自动调用当前周期内部的方法用我们的话来说,生命周期就是在vue的相应阶段内自动执行其内部的方法和代码严格区分大小写,注意其驼峰命名法2.生命周期怎么用?八个常用周期:beforeCreate 创建之前crea原创 2021-05-24 20:00:15 · 93 阅读 · 0 评论 -
VueX状态管理模式-vuex属性讲解
VueX的各个属性个人剖析它是实现组件全局状态(state数据)管理的一种机制,可以方便的实现组件之间数据的共享state 状态//接收方法:this.$store.seate.namemutation 突变;变化用于修改state内的属性值,不过要封装方法再用commit来调用//接收方法:this.$store.commit('aa','lisi')action 行动;活动用于调用异步操作//接收方法:this.$store.dispatch('addAsync');原创 2021-05-21 20:46:52 · 97 阅读 · 0 评论 -
vue中watch属性监听项目细节
watch监听属性案例---------<div id = "computed_props"> 千米 : <input type = "text" v-model = "kilometers"> 米 : <input type = "text" v-model = "meters"></div><p id="info"></p><script type = "text/javascript">原创 2021-05-21 00:09:40 · 177 阅读 · 0 评论 -
Vue项目的数据获取到渲染操作
5-18 D-bug今天美食杰项目的菜谱布局路由传参页面get到的知识在一个组件内已经有了大概的样式轮廓,我们在vue组件页面内所要做的有三步,(因为vue是由数据操作视图),所以我们首先要获取到我们的数据,其一 获取数据先要从后端写的的api文档,获取到我们所需数据的方法,引入 :: improt {getdata} from '/api文件路径'使用 ::可以在声明周期内的挂载后阶段使用,也可以在点击事件内使用,具体使用方法因情景而定(注意:某些数据在挂载后的时候还未能获取到,所以我们在使用原创 2021-05-19 00:02:51 · 5621 阅读 · 1 评论 -
控制台报错以及解决方法
今日D-BUG<el-form label-position="top" label-width="100px" class="demo-ruleForm" :rules="rules" :model='ruleForm' ref="ruleForm" > 这是正确写法<el-form label-position="top" label-width="100px" class="demo-ruleFor原创 2021-05-17 20:49:12 · 3215 阅读 · 0 评论 -
Vue小练习-制作简易购物车效果
Vue小练习-制作简易购物车效果上代码!!!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="st原创 2020-11-30 15:16:35 · 298 阅读 · 0 评论 -
Vue的类名点击切换练习-深刻理解v-for中index的应用
Vue的类名点击切换-深刻理解v-for中index的应用以及v-bind的动态绑定属性不跟它做过多的憋憋!!!上代码!!!不跟它做过多的憋憋!!!上代码!!!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2020-11-25 20:23:18 · 942 阅读 · 1 评论