Vue框架
关注
分享
扫一扫
文章平均质量分 94
葡萄籽啊
一小只平平凡凡的前端开发工作者哟~
展开
-
前端系列课程之VUE生命周期
原创作者在这里: https://segmentfault.com/a/1190000011381906.一、钩子函数vue生命周期中会有很多钩子函数提供给我们vue生命周期不同的时刻进行操作，钩子函数具体包含以下八个：beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed代码：<!DOCTYPE html><html la原创 2021-06-24 13:58:42 · 256 阅读 · 0 评论 -
前端系列课程之axios应用（一）
axios应用：目标：掌握axios的安装和引用掌握axios服务器的请求方法掌握axios拦截器的设置掌握axios实战应用Axios概述：axios是一个第三方库，支持前后端发起的http请求官网http://www.axios-js.com/安装npm install axios –Saxios引用方法：全局引用组件引用在组件的script中导入axiosaxios的服务器请求原创 2020-10-15 11:38:11 · 360 阅读 · 1 评论 -
前端系列课程之Vue单页面应用（一）
Vue单页面应用目标：掌握单页面文件组建的语法掌握单页面应用的开发单文件组件概述：单文件组件是指将组件用独立文件的方式进行创建，文件扩展名是.vue单文件组件的构成（1）.Template模板（2）.实例对象（3）.CSS样式单页面应用创建vue单页面应用：Vue-cli是一个Vue脚手架，可以快速构造项目结构vue-cli2.0包含了多个项目模板Vue-cli3简化了webpack配置最新版本Vue-cli4，目录结构有调整，整体与上一版本差别不大创原创 2020-10-14 18:37:38 · 1202 阅读 · 1 评论 -
前端系列课程之Vuex
Vuex为什么使用Vuex例子：(使用Vue方法：)新建（一）：新建（二）：将新建的两个文件导入 About中，做子组件：事件总线：（全局定义）在新建（一）添加：在新建（二）中添加：（上面适用于小项目开发）Vuex原理：一、安装 vuex二、创建仓库文件1.创建文件夹2. 在文件夹中创建文件：3.在新建文件中导入：4.导入到main.jsVuex原理> store中通过state管理数据，实现数据在组件之间共享> V原创 2020-10-14 09:54:48 · 190 阅读 · 1 评论 -
前端系列课程之前端项目构建
前端项目构建目标：了解前端项目构建的用途掌握前端模块导入的语法掌握Webpack构建工具的使用前端项目构建：前端项目的构建可以理解为编译，是要将源代码转化成宿主浏览器可以执行的代码，核心是对资源的管理，输出包括JS,CSS,HTML等资源前端项目构建的作用：解决语言问题（1）ES6（2）Sass（3）HTML模板语言解决性能优化问题（1）打包文件模块（2）压缩资源文件常见前端项目构建工具：GulpGruntwebpackWebp原创 2020-10-13 16:22:09 · 347 阅读 · 1 评论 -
前端系列课程之样式预处理（sass）（一）
样式预处理目标：了解样式预处理的作用掌握Sass的语法应用CSS存在的不足代码重复，维护不便CSS样式预处理CSS预处理器定义了一种“中间语言”，将CSS作为目标生成文件，为CSS增加了“编程“的特性，开发者使用这种语言进行编码，然后在编译成正常的CSS文件供项目使用。sass的概念sass是最早的CSS预处理语言，采用Ruby语言编写，诞生于2007年，刚开始不被大众接受，使用率不高，由于其强大的功能和Ruby on Rails 的大力推动，很多人选择了Sass。Sass原创 2020-10-13 15:02:48 · 631 阅读 · 1 评论 -
前端系列课程之Vue路由和动画制作
Vue路由和动画制作- 目标:了解路由原理掌握路由的安装和使用掌握路由的参数传输方式掌握动画的制作vue路由对路由的理解什么是路由?路由是根据不同的 url 地址展示不同的内容或页面什么是前端路由?a. 页面不刷新,项目使用期间页面不会重新加载.b. 把不同路由对应不同的内容或页面的任务交给前端什么时候使用前端路由？在单页面应用，大部分页面结构不变，只改变部分内容的使用- 前端路由和后端路由的区别- Vue路由的作用单页面应用需要实现不同的显原创 2020-10-13 08:23:28 · 202 阅读 · 0 评论 -
前端系列课程之Vue组件（一）
组件目标：掌握Vue组件的定义掌握动态组件和父子组件的应用掌握组件间的通信方式组件概述：组件是什么？Vue组件是Vue.js最强大的功能之一，用于扩展HTML元素，封装可重用的代码。组件的创建通过构造器创建组件直接创建（常用）组件命名必须全部使用小写例子：组件的类型全局组件（1）在Vue实例外部创建（2）可以在任意Vue实例挂载的DOM元素中使用例子：局部组件（1）在Vue实例内部，通过components选项创建（2）原创 2020-10-11 17:35:11 · 353 阅读 · 0 评论 -
前端系列课程之计算属性&侦听器和自定义指令（一）
计算属性&侦听器和自定义指令目标：掌握计算属性的应用掌握监听器的应用掌握自定义指令的应用计算属性为什么需要计算属性？（1）模板语法可以使用表达式，但是不便于实现复杂的业务逻辑功能，也不利于维护如何对绑定的title倒序？例子：（倒序）或者：（2）计算属性可以解决模板语法的缺点， 完成复杂的逻辑，便于代码维护。计算属性的语法：计算属性通过computed选项进行设置，以函数的方式实现业务功能，需要返回一个结果。计算属性和方法的区别：原创 2020-10-10 23:07:33 · 197 阅读 · 0 评论 -
前端系列课程之Vue事件机制和实例对象(二)
Vue过滤器过滤器是什么过滤器用于一些常见的文本格式化，可以自定义。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div>过滤器的定义原创 2020-10-10 19:24:26 · 129 阅读 · 1 评论 -
前端系列课程之Vue事件机制和实例对象(一)
vue事件机制和实例对象目标:掌握Vue的事件处理机制掌握Vue的样式绑定掌握过滤器的应用掌握Vue实例对象的属性掌握Vue实例对象的方法掌握Vue实例对象的生命周期应用- Vue事件机制事件通过交互指令绑定事件源,事件名和处理函数例子:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"原创 2020-10-09 21:35:44 · 257 阅读 · 1 评论 -
前端系列课程之Vue框架入门（一）
Vue框架入门- 目标：了解Vue框架的技术特性掌握Vue的语法基础应用- Vue概述：Vue 是一个用于构建用户界面的客户端框架官方网址： https://cn.vuejs.org/第一个案例：文本框内容重现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=de原创 2020-10-09 14:43:18 · 382 阅读 · 1 评论