vue
文章平均质量分 80
专注于vue开发的笔记
godlike-icy
努力学习,不断超越!
展开
-
Vue2.0教程(九)路由,守卫导航
前端路由概念与原理1.路由概念路由(英文:router)就是对应关系。2. SPA(单页面应用程序)与前端路由SPA 指的是一个 web 网站只有唯一的一个 HTML 页面,所有组件的展示与切换都在这唯一的一个页面内完成。此时,不同组件之间的切换需要通过前端路由来实现。结论:在 SPA 项目中,不同功能之间的切换,要依赖于前端路由来完成!3.什么是前端路由通俗易懂的概念:Hash 地址与组件之间的对应关系。4.前端路由的工作方式① 用户点击了页面上的路由链接② 导致了 URL 地址栏中的原创 2022-05-03 07:17:00 · 1000 阅读 · 0 评论 -
Vue2.0教程(八)动态组件,插槽,自定义指令
动态组件1.动态组件概念动态组件指的是动态切换组件的显示和隐藏。2.如何实现动态组件3.使用keep-alive保持状态默认情况下,切换动态组件无法保持组件的状态。此时可以使用vue内置的keep-alive组件保持动态组件的状态。示例代码如下:4. keep-alive对应的生命周期函数5. keep-alive的include属性注意:还有exclude属性,与incluede属性作用相反。插槽1.插槽概念2.插槽的基本用法2.1没有预留插槽的内容会被丢弃如果原创 2022-05-03 06:57:17 · 253 阅读 · 0 评论 -
Vue2.0教程(七) 生命周期,组件数据共享,ref引用,nextTick方法
组件的生命周期 (面试必问)1.生命周期&生命周期函数生命周期(Life Cycle)是指一个组件从创建->运行->销毁的整个阶段,强调的是一个时间段。生命周期函数:是由vue框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行注意:生命质周期强调的是时间段,生命周期函数强调的是时间点。2.组件生命周期函数分类1)组件创建阶段组件创建的生命周期函数new Vue() -> beforeCreate -> created ->beforeMoun原创 2022-05-03 06:05:51 · 345 阅读 · 0 评论 -
Vue2.0教程(六)vue组件(父子组件、样式冲突问题)
vue组件1.什么是组件化开发组件化开发指的是:根据封装的思想,把页面上可重用的UI结构封装为组件,从而方便项目的开发和维护。2.vue中的组件化开发vue是一个支持组件化开发的前端框架。vue中规定:组件的后缀名是.vue。之前解除到的App.vue文件本质上就是一个Vue的组件。3.vue组件的三个组成部分每个.vue组件都由3部分构成,分别是:template -->>组件的模板结构script -->>组件的javascript行为style --&原创 2022-04-12 15:43:44 · 2997 阅读 · 0 评论 -
Vue2.0教程(五) vue-cli 学习
1.单页面应用程序1.1 什么是单页面应用程序单页面应用程序(英文名:Single Page Application) 简称SPA,顾名思义,指的是一个web网站中只有唯一的一个HTML页面,所有的功能与交互都在这个唯一的页面内完成。2. 什么是vue-clivue-cli 是vue.js 开发的标准工具。它简化了程序员基于webpack创建工程化的Vue项目的过程。程序员可以专注于撰写应用上,而不必花好几天去纠结webpack配置问题。中文官网:https://cli.vuejs.org/zh原创 2022-04-12 03:52:23 · 290 阅读 · 0 评论 -
Vue2.0教程(四) axios学习
axios1.1 axios概念axios是一个专注于网络请求的库!axios(发音:艾克笑死) 是前端圈最火的、专注于数据请求的库。1.2 axios基本用法先导入axios<script src="https://cdn.staticfile.org/axios/0.1.0/axios.js"></script>axios({ method:'请求的类型', url:'请求的URL地址', //URL中的查询参数,get请求用这个 parmas:{原创 2022-04-12 03:51:37 · 482 阅读 · 0 评论 -
Vue2.0教程(三)过滤器与侦听器
1.过滤器只有vue2.x支持,在vue3.x版本中已经被删除无法使用1.1 过滤器概念和基本用法过滤器(Filtes)是vue为开发者提供的功能,常用于文本的格式化。过滤器可以用在两个地方:插值表达式和v-bind属性绑定。过滤器应该被添加在javaScript表达式的尾部,由‘管道符’进行调用,示例代码如下:<!--在双花括号中通过‘管道符’调用capitaliaze过滤器,对message的值进行格式化--><p>{{messgae | capitalize}}&l原创 2022-04-10 23:14:40 · 2489 阅读 · 0 评论 -
Vue2.0教程(二) vue指令学习
vue的基本使用1)导入vue.js的script脚本文件可以前往 https://staticfile.org/ 下载vue.js或者引入在线cdn也可以前往 https://www.bootcdn.cn/ 下载vue.js或者引入在线cdn2)在页面中声明一个将要被vue所控制的DOM区域3)创建vm实例对象(vue实例对象)<body> <!--2.在页面中声明一个将要被vue所控制的DOM区域--> <div id="test">hel原创 2022-04-09 07:01:34 · 2362 阅读 · 0 评论 -
Vue2.0教程(一) 一些基础概念
vue简介1. 什么是vue?官方概念: Vue 读音(/vju/,类似view) 是一套用于构建用户界面的前端框架。1)构建用户界面用vue往 html页面中填充数据,非常的方便2)框架框架是一套现成的解决方案,程序员只能遵守框架的规范,去编写自己的业务功能!要学习vue,就是在学习vue框架中规定的用法vue的指令、组件(是对UI结构的复用)、路由、vuex只有掌握以上内容才能有开发vue项目的能力!2.vue的特性vue框架的特性,主要体现在如下两个方面:数据驱动视图2原创 2022-04-09 07:00:16 · 405 阅读 · 0 评论