vue入门——2正式进入开发
一、初始了解
初始项目生产的App.vue文件,即一个vue的单文件组件,由三部分组成:
template写html代码;
script写js代码;
style写样式。
也可写成独立的js或者css文件引入。
开发时只需要保存文件便能在浏览器中实时看到修改变化。该vue文件通过VueLoader插件加载执行。之后再结合webpack打包会将Vue转换成浏览器识别的Html文件。
可在浏览器安装vue开发者工具,便于调试vue应用。
二、进入开发
在src下创建自己的目录,并自定义创建vue单文件,在App.vue中进行嵌套。
嵌套步骤:1、用import引入自定义的单文件组件,2、并在data()后注册引入的单文件组件,3、再在template中插入自定义的组件的伪标签。
这样对于多处使用到的页面模块可实现组件化开发。
三、Vue-router路由搭建单页应用。
再创建一个名为welcome.vue的单文件组件,配置一个路由<router-link to="/"></router-link>。router-link在浏览器中会被解析为a标签。
路由配置,index.js中:先引入welcome组件,再在路由对象中增加路由记录。
其中path属性是地址栏中的展示路径,component是组件名。实际开发中一个页面认为是一个大的组件。路由可实现基本的跳转及页面间传参等。
四、异步请求axios插件
异步请求既可以用jQuery的ajax,也可以用axios插件。
安装别的插件的时候可以直接在main.js中引用,并用vue.use方法注册。但axios并不是vue插件,所以不能使用vue.use注册,只能在每一个发送请求的组件中引用。为了解决这个问题,我们在引用axios之后,通过修改原型链来方便使用,具体实现如下图,在main.js中添加两行代码,便可以在组件的methods方法中直接使用$http命令,如下下下图。
vue还有很多内置指令:
其中我们使用axios插件的异步请求自定义的方法getData中,请求正常回调会执行.then,报错会执行.catch。
五、打包编译vue工程
命令行到项目根路径下,运行npm run build命令。
打包编译后的文件在dist目录下。
- spring boot + vue + element-ui全栈开发入门——开篇
- Vue入门之组件化开发
- 2018最全Vue2.5开发去哪儿网App 从零基础入门到实战项目
- 2018年最全Vue2.5开发去哪儿网App 从零基础入门到实战项目
- vue入门 | 使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
- Vue入门之组件化开发
- vue2.0开发入门笔记之.vue文件的生成和使用
- Vue 项目判断开发、测试、正式环境
- Vue+Node+MongoDB从开发到正式部署
- vue+cordova 开发混合app入门指南
- 正式进入freeman Office Automain System 开发了
- 让 Python 带你进入开源的世界——Git 从入门到与他人协作开发
- Vue.js小白入门,搭建开发环境
- Vue.js插件开发入门
- Vue2.5开发去哪儿网App 从零基础入门到实战项目百度网盘免费下载
- SpringBoot + Thymeleaf + vue + element-ui 全栈开发入门——项目部署
- 【Vue 入门】使用 Vue2 开发一个展示项目列表的应用
- JavaScript 进阶之 Vue.js + Node.js 入门实战开发
- 2018最新 Vue2.5开发去哪儿网App+从零基础入门到实战
- vue2.0 开发实践总结之入门篇