![](https://img-blog.csdnimg.cn/20190619211620705.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
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 · 435 阅读 · 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 · 563 阅读 · 0 评论 -
vue从入门到精通之基础篇(二)组件
(1).局部组件的使用 渲染组件-父使用子组件1: 创建子组件(对象)var Header = { template:'模板' , data是一个函数,methods:功能,components:子组件们 }2: 在父组件中声明,根属性components:{ 组件名:组件对象 }3: 在父组件要用的地方使用 <组件名></组件名>在不同框架中,有的...原创 2019-06-13 09:19:07 · 185 阅读 · 0 评论 -
vue从入门到精通之基础篇(三)生命周期
生命周期定义:每个 Vue 实例在被创建时都要经过从创建倒挂载再到更新、卸载的一系列过程,同时在这个过程中也会运行一些叫做生命周期钩子的函数,可以让我们用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的是vue的实例。钩子函数的执行时间beforeCreate在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被...原创 2019-06-13 09:21:28 · 245 阅读 · 0 评论 -
vue从入门到精通之进阶篇(一)vue-router基础
路由原理传统开发方式 url改变后 立刻发起请求,响应整个页面,渲染整个页面SPA 锚点值改变后 不会发起请求,发起ajax请求,局部改变页面数据页面不跳转 用户体验更好SPAsingle page application(单页应用程序)前端路由锚点值监视ajax获取动态数据核心点是锚点值前端框架 Vue/angular/react都很适合开发单页应用基本...原创 2019-06-18 16:46:42 · 312 阅读 · 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 · 259 阅读 · 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 · 147 阅读 · 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 · 248 阅读 · 0 评论 -
vue从入门到精通之进阶篇(四)模块化工具 webpack
模块化webpack命令npm init -ynpm install webpack@3.6.0 --save-dev --registry https://registry.npm.taobao.orgpackage.json文件"scripts": { "test": "webpack ./main.js ./build.js" },命令行运行 npm run testES6...原创 2019-06-18 17:00:26 · 193 阅读 · 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 · 559 阅读 · 0 评论