Vue框架的总结
文章平均质量分 71
一晌贪欢i
仅仅用来记录学习~~
展开
-
antd select palceholder不显示
当select的value绑定一个state默认值时,如果默认值是’'或null时,placeholder不生效解决方案:默认值设为undefined例如: <a-select v-model="imageId" placeholder="请选择私有镜像" @change="handleImageChange" > data() {imageId原创 2022-03-24 13:48:41 · 502 阅读 · 1 评论 -
Vue路由详解
目标1.能够说出什么是路由2.能够说出前端路由的实现原理3.能够使用Vue-Router实现前端路由4.能够实现嵌套路由,动态路由5.能够实现命名路由以及编程式导航6.理解并实现后台管理案例1.路由的概念路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系,就是路由。路由分为前端路由和后端路由1).后端路由是由服务器端进行实现,并完成资源的分发2).前端路由是依靠h原创 2021-01-08 10:07:08 · 6314 阅读 · 0 评论 -
Vue父子组件执行的生命周期顺序
1. 加载渲染过程同步引入时生命周期顺序为:父组件的beforeCreate、created、beforeMount–> 所有子组件的beforeCreate、created、beforeMount–> 所有子组件的mounted–> 父组件的mounted总结:父组件先创建,然后子组件创建;子组件先挂载,然后父组件挂载若有孙组件呢?父组件先beforeCreate=> created=> beforeMount, 然后子组件开始beforeCreate=>c原创 2020-11-05 20:15:35 · 735 阅读 · 0 评论 -
vue路由案例详解
1.能够说出什么是路由2.能够说出前端路由的实现原理3.能够使用Vue-Router实现前端路由4.能够实现嵌套路由,动态路由5.能够实现命名路由以及编程式导航6.理解并实现后台管理案例1.路由的概念路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系,就是路由。路由分为前端路由和后端路由1).后端路由是由服务器端进行实现,并完成资源的分发2).前端路由是依靠hash原创 2020-09-27 17:44:25 · 3566 阅读 · 1 评论 -
Vuex详解
本文内容1.Vuex概述2.Vuex基本使用3.使用Vuex完成todo案例1.Vuex概述Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享使用Vuex管理数据的好处:A.能够在vuex中集中管理共享的数据,便于开发和后期进行维护B.能够高效的实现组件之间的数据共享,提高开发效率C.存储在vuex中的数据是响应式的,当数据发生改变时,页面中的数据也会同步更新2.Vuex的基本使用创建带有vuex的vue项目,打开终端,输入命令:vue ui当项目仪表原创 2020-09-24 16:59:18 · 893 阅读 · 0 评论 -
Vue组件详解
Vue组件详解组件组件 (Component) 是 Vue.js 最强大的功能之一组件可以扩展 HTML 元素,封装可重用的代组件注册全局注册Vue.component(‘组件名称’, { }) 第1个参数是标签名称,第2个参数是一个选项对象全局组件注册后,任何vue实例都可以用组件基础用<div id="example"> <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用 --> <my-component>原创 2020-09-18 17:01:24 · 538 阅读 · 1 评论 -
Vue中computed和watch的用法和区别
computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择comp..原创 2020-09-18 15:36:36 · 1739 阅读 · 0 评论 -
ERROR Invalid options in vue.config.js: “baseUrl“ is not allowed
今天复制了别人的vue.config.js文件,修改了baseURL老是报错,找了半天,无果,同事看了错误说,肯定是这个baseURL被废除了,你搜一下就知道了,果然,唉,前端真的要看经验啊.下面把睬的坑记录下来vue项目我的这个版本是 3.10.0module.exports = { baseUrl: process.env.NODE_ENV === 'production' ? './' : '/'}这里面是一个坑在vue-cli.3.3版本后 baseUrl被废除了,原创 2020-09-03 16:27:42 · 454 阅读 · 0 评论 -
scoped 和/deep/的作用
今天在写代码时,要更改element ui 的组件样式,调试了半天发现更改都没作用,后来请教了同事,他说你需要用到深度选择器 ,我用了一下,瞬间生效.下面总结一下何为深度选择器吧./deep/ 深度选择器/deep/的意思大概为深入的,深远的。在vue中,我们为了避免父组件的样式影响到子组件的样式,会在style中加<style scoped>,这样父组件中如果有跟子组件相同的class名称或者使用选择器的时候,就不会影响到子组件的样式。父组件:<template>原创 2020-08-31 11:21:56 · 714 阅读 · 0 评论 -
vue里的export default
相信大家看Vue项目肯定会看到各种导入导出,下面来介绍一下.Vue 的模块机制Vue 是通过 webpack 实现的模块化,因此可以使用 import 来引入模块,例如: 此外,你还可以在 bulid/webpack.base.conf.js 文件中修改相关配置: 意思是,你的模块可以省略 “.js”,".vue",“.json” 后缀,weebpack 会在之后自动添加上;可以用 “@” 符号代替 “src” 字符串等。 export 用来导出模块,Vue 的单文件组件通常需要导出原创 2020-08-19 10:49:30 · 52114 阅读 · 7 评论 -
Vue父子组件的传值和传方法实例
自定义的私有组件,不能访问vm实例中的数据1、父组件向子组件传值在使用私有组件的时候,通过属性绑定的形式,把需要传递给子组件的数据,以属性绑定的形式传递到私有组件中<div id="app"> <!-- 1、在使用组件的时候,使用绑定命令,将所需要的VM实例数据绑定到私有组件中 --> <com1 v-bind:parentmsg="msg"></com1> </div> <script&原创 2020-08-07 17:43:48 · 702 阅读 · 0 评论 -
v-bind详解
v-bind就是用于绑定数据和元素属性的var app = new Vue({ el:'.app', data:{ url:"https://www.baidu.com", }});<div class="app"> <a v-bind:href="url">click me</a></div> 注意:v-bind后面是:属性名=,我的理解是表示绑定这个属性,绑定之后,对应的值要去vue的数据里面原创 2020-07-23 16:01:06 · 30945 阅读 · 2 评论 -
Vue.js中Vuex学习总结
在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理,个人的理解是全局状态管理更合适;简单的理解就是你在state中定义了一个数据之后,你可以在所在项目中的任何一个组件里进行获取、进行修改,并且你的修改可以得到全局的响应变更。下面咱们一步一步地剖析下vuex的使用:首先要安装、使用 vuex首先在 vue 2.0+ 你的vue-cli项目中安装 vuex ...原创 2019-09-15 23:54:49 · 323 阅读 · 0 评论 -
搞懂Vue插槽
Vue插槽,是学习vue中必不可少的一节,当初刚接触vue的时候,对这些掌握的一知半解,特别是作用域插槽一直没明白。后面越来越发现插槽的好用。下面来总结一下插槽的一些知识吧。分一下几点:1、插槽内可以放置什么内容?2、默认插槽3、具名插槽4、作用域插槽一、插槽内容一句话:插槽内可以是任意内容。先看一下下面的代码:声明一个child-component组件,如果现在我想...原创 2019-08-15 14:25:27 · 176 阅读 · 0 评论 -
Vue常见问题总结
1、active-class是哪个组件的属性?嵌套路由怎么定义?答:vue-router模块的router-link组件。2、怎么定义vue-router的动态路由?怎么获取传过来的动态参数?答:在router目录下的index.js文件中,对path属性加上/:id。 使用router对象的params.id3、vue-router有哪几种导航钩子?答:三种,一种是全局导航钩子:ro...原创 2019-08-13 16:58:06 · 10108 阅读 · 0 评论