vue从入门到精通
关注
分享
扫一扫
vue是前端三大框架之一，这部专栏从基础到进阶，从高级到实战，是vue入门的一部圣经。
IT淘金者
立志成为行业布道师的一名前端程序猿
展开
-
vue从入门到精通之高级篇（一）vue-router的高级用法
今天要介绍的是路由元信息，滚动行为以及路由懒加载这几个的使用方法。 1.路由元信息 什么是路由元信息，看看官网的解释，定义路由的时候可以配置 meta 字段可以匹配meta字段，那么我们该如何使用它，一个简单的例子，改变浏览器title的值。下面上代码。 ? 1 2 3 4 5 6 7 8 9 10 1...转载 2020-03-10 23:07:10 · 480 阅读 · 0 评论 -
vue从入门到精通之进阶篇（二）组件通信：兄弟组件通信
$emit和$on进行组件之间的传值 注意：emit和emit和emit和on的事件必须在一个公共的实例上，才能够触发 需求： 1.有A，B，C三个组件，同时挂载到入口组件中 2.将A组件中的数据传递到C组件，再将B组件中的数据传递到C组件 <!DOCTYPE html> <html lang="en"> <head> <meta char...原创 2019-06-18 17:15:48 · 174 阅读 · 0 评论 -
vue从入门到精通之进阶篇（一）vue-router：导航守卫
vue-router的导航守卫之在导航完成后获取数据 需求：在导航完成之后加载数据。渲染DOM <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div...原创 2019-06-18 17:11:16 · 298 阅读 · 0 评论 -
vue从入门到精通之进阶篇（五）脚手架vue-cli
vue-cli2.x脚手架的使用 参考链接：https://github.com/vuejs/vue-cli/tree/v2#vue-cli-- 安装： npm install -g vue-cli 用法： $ vue init < template-name > < project-name > 例： $ vue init webpack my-project 目...原创 2019-06-18 17:02:29 · 595 阅读 · 0 评论 -
vue从入门到精通之进阶篇（四）模块化工具 webpack
模块化 webpack命令 npm init -y npm install webpack@3.6.0 --save-dev --registry https://registry.npm.taobao.org package.json文件 "scripts": { "test": "webpack ./main.js ./build.js" }, 命令行运行 npm run test ES6...原创 2019-06-18 17:00:26 · 220 阅读 · 0 评论 -
vue从入门到精通之进阶篇（三）axios
基本使用 Axios.method('url',[,..data],options) .then(function(res){ }) .catch(function(err) { } ) 合并请求 this.$axios.all([请求1,请求2]) .then( this.$axios.spread(function(res1,res2){ ...原创 2019-06-18 16:55:01 · 280 阅读 · 0 评论 -
vue从入门到精通之进阶篇（一）vue-router基础
路由原理 传统开发方式 url改变后 立刻发起请求，响应整个页面，渲染整个页面 SPA 锚点值改变后 不会发起请求,发起ajax请求,局部改变页面数据 页面不跳转 用户体验更好 SPA single page application(单页应用程序) 前端路由 锚点值监视 ajax获取动态数据 核心点是锚点值 前端框架 Vue/angular/react都很适合开发单页应用 基本...原创 2019-06-18 16:46:42 · 353 阅读 · 0 评论 -
vue从入门到精通之基础篇（三）生命周期
生命周期 定义： 每个 Vue 实例在被创建时都要经过从创建倒挂载再到更新、卸载的一系列过程，同时在这个过程中也会运行一些叫做生命周期钩子的函数，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。 钩子函数的执行时间 beforeCreate 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被...原创 2019-06-13 09:21:28 · 271 阅读 · 0 评论 -
vue从入门到精通之基础篇（二）组件
(1).局部组件的使用 渲染组件-父使用子组件 1: 创建子组件(对象) var Header = { template:'模板' , data是一个函数,methods:功能,components:子组件们 } 2: 在父组件中声明,根属性components:{ 组件名:组件对象 } 3: 在父组件要用的地方使用 <组件名></组件名> 在不同框架中,有的...原创 2019-06-13 09:19:07 · 211 阅读 · 0 评论 -
vue从入门到精通之基础篇（一）语法概要
(1).vue起步 1:引包 2:启动 new Vue({el:目的地,template:模板内容}); options 目的地 el 内容 template 数据 data 保存数据属性 数据驱动视图 (2).插值表达式 {{ 表达式 }} 对象 (不要连续3个{{ {name:‘jack’} }}) 字符串 {{ ‘xxx’ }} 判断后的布尔值 {{ true }} 三元...原创 2019-06-12 17:00:45 · 594 阅读 · 0 评论