JavaScript进阶 【1】JavaScript模块化module的概念
JavaScript进阶 【2】浏览器缓存对象sessionStorage和localStorage
CSS进阶 【1】常用样式控制
Vue.js进阶【1】Vue产生的背景与未来
Vue.js进阶【1.0】 恶补JavaScript的对象继承模型与this绑定
Vue.js进阶【2-0】Vue 构造函数的参数
Vue.js进阶【2-1】Vue Loader管理单文件组件file.vue
Vue.js进阶【2-2】vuex 状态管理入门
Vue.js进阶【2-3】vue-router 路由管理入门
Vue.js进阶【2-实例】vue + vuex + vue-router 超简单实现:电商商品列表和详情页面
Vue.js进阶【3】纯Vue实现单页面-列表增删改查
Vue.js进阶【4-0】用vue-cli 命令
Vue.js进阶【4-1】分析vue-cli 项目结构
Vue.js进阶【5-1】element-ui入门
Vue.js进阶【5-2】bootstrap-vue入门
Vue.js进阶【5-4】axios入门
Vue.js进阶【6】Vue官方示例vue-hackernews学习
Vue.js进阶【7】vue项目打包步骤
Vue.js进阶【8】vue使用echarts
1 官方中文帮助文档:https://vue.docschina.org/v2/guide/ 非常简要的一个介绍,里面如果想了解更多细节会有到 2 的连接
1.1 官方入门视频(建议你多看几遍):https://vue.docschina.org/v2/guide/index.html#
1.2 官方教程:模板语法 https://vue.docschina.org/v2/guide/syntax.html 最常用的一些功能用法
2 中文Guide和API:https://cn.vuejs.org/v2/guide/ 非常详细系统的介绍了Vue的全部概念和标准接口API
Vue开源地址:https://github.com/vuejs/vue
相关链接:
最强PostMan使用教程(1)
最强PostMan使用教程(2) - 在test suite中运行test case
最强PostMan使用教程(4)- 使用Postman的模拟服务模拟(mock)后端
Vue.js进阶【4-0】用vue-cli快速构建vue项目
实现一个单页面的增删改查功能
先通过代码来感受一下Vue的机制:
将下面的代码拷贝到一个空的文本文件,另存为Hello.html文件。用谷歌浏览器打开即可。
Vue Hello World
{{ message }}
运行效果:直接用浏览器双击打开即可看到效果
介绍
从上面的例子可以看出Vue使用自己带格式的标签来绑定页面中的JavaScript对象,从而实现JavaScript对象的成员数据和界面元素的显示同步。
其实,大家可以简单理解为 ,vue是一个简单、易用、功能强大的前端框架,在架构上先进于jQuery,但是实现的还是jQuery实现的功能(其实我们就是做个网页,用什么框架都是干这些事情,只是用法不同而已)。
Vue列表
Vue Hello World
- 姓名:{{value.Name}},年龄:{{value.Age}}
Vue的构造函数:
Vue的构造函数接受一个对象,这个对象的成员都将成为Vue对象的成员(详细参考官方API介绍)。这一点比较关键,是后面this操作的基础。
开发工具
经过调查和朋友推荐,确定使用Sublime Text 百度云
调试
任何开发环境都必须要有非常强大的调试环境,才可以保证开发的效率。当我们用Vue开发的时候,由于主要的环境都在浏览器里面(前端),所以这里要借助谷歌浏览器强大的调试能力(按F12键进入调试环境)。主要是看谷歌浏览器调试环境下Console(控制台,出错信息和内存JavaScript对象的值)和Elements(DOM的结构),另外,当我们使用Vue的开发版的时候,会有详细的提示信息显示在谷歌浏览器的控制台页面中。基本上这三点应该就足够了。
我们把vue.min.js替换成vue.js(开发板)之后,故意在html里面写错信息,将绑定的{{value.Name}}中间多写一个点号,写成{{value..Name}},可以看到谷歌浏览器的报错信息:
下一节我们将讨论稍微全面和复杂的例子,看看一个完整的SPA,实现一个单页面的增删改查功能