疾风式全栈教程(8)-开始vue(草稿预览)
讲了这么多, 感觉还是比较虚, 什么时候我们才能开始写一些实际的代码呢. 那这次我们就开始向实战进军吧. 说是实战, 其实也还是属于demo(示例)级别, 不过会把之前的知识综合运用, 也会更接近写真实项目的感觉.
我们准备用vue写一个动态加载数据的页面. 什么是vue呢, 简单的说就是一个js文件, jquery也是一个js文件, 我们自己写的也是js文件. 那为什么要用他呢, 因为流行, 就这么简单. 很多时候相信群众就好, 多数人用啥, 我们跟着用就好了. 当然随着时间我们会有自己的眼光, 自己的理解和选择. 不光是随大流, 而是能清楚的说出自己用, 或者不用的理由. 比如, 前一段时间, 我总结, 之所以选择用vue, 最主要的是两点, 一个是数据绑定, 一个是组件化. 什么意思呢, 总的说起来, 还是他能帮我们隐藏很多内部的繁琐细节, 让我们专心于自己要作的事情. 当然还有一些其他考虑, 简洁的声明式写法啊, 丰富成熟的生态系统啊. 以后随着时间和经验的积累, 就会形成自己对技术的感觉. 这种感觉对于在技术问题上做决定是很重要的. 大家慢慢培养吧.
好了, 让我们先从引入vue开始, 不对, 还是先从新建html文件开始吧. 新建, 然后从cdn引入vue, 就可以用了.
然后就是写我们自己的内容和代码. 写什么呢, 不知道的话, 可以先从网上搜一些现成的demo. 一般优秀的软件文档都会有一些demo, 可以直接下载或者粘贴过来运行的, 让人在最短的时间内看到软件运行的效果. 如果运行之后, 感觉还有点意思, 就会去了解更详细的用法.
vue官网的文档和demo都是很不错的, 大家可以花时间看看, 不光是vue, 对于整个前端入门都有帮助. 我的前端知识基本就是看着vue的文档学的.
但是我们最开始还是想找一些更简单的, 最好是三五行代码就能实现的基本功能. 简单的容易理解, 并且越简单的越重要.
这里好像有一些新写法没有见过的. 其实也只是换了个形式而已. new Vue() 也是创建了一个对象, 只是这个对象创建好了就不只是空的, 而是已经帮我们放进去了好多可以用的东西了. 同样, 小括号里, 用一对大括号包起来的那一堆东西, 也是在创建对象. 只不过把创建和放东西进去的过程合在一起了. 也就是说, 我们分开写是
const a = {}
a. b = 1
合起来就是
const a = {b: 1}
效果是一样的. 这种写法就是鼎鼎大名的json格式. json还有一些其他的格式规定, 但是总的来说, 就是类似这样的样子, 比较简单. 我们可以看到js很灵活, 写法很多, 现在版本更新快, 新写法更是层数不穷, 我们只好忍受并享受吧.
比如, 上面的那个函数的声明, 就可以用es6引进的简化写法, 去掉function和冒号.
而html中间那双重大括号, 就相当于一个小窗口, 通过这个窗口, 我们可以在html里看到js里的内容. 而vue就相当于提供了类似望远镜或者潜望镜的功能. 让我们可以不用离开html, 就可以观察到js里的内容和变化.
嗯, 听起来是不是很有意思, 其实用起来也是挺有意思, 也挺方便的.
我们直接从接近真实项目的需求开始吧.
前面说过, 我们想让网页不只是我们写上去的固定的内容, 而是有一些变化的数据. 数据呢一般是存在服务器上的数据库里. 所以我们可以想到, 我们一定要通过什么方式获取到这些数据. 网页这方面的方式我们之前讲了, 就是XHR, 通过HTTP请求获取数据, 而服务器那边呢, 一般数据库是没有直接提供HTTP的请求支持的, 所以就需要有一个转换. 这就是所谓后端程序员工作的一部分. 我们暂时还没有自己的数据库和后端, 所以我们使用一些公开的接口来测试. 比如, 我们通过调用github的公开API, 获取头像数据.
(代码待补充)
然后我们看一下具体怎么写. 既然用vue, 当然就要按照vue的要求来写. 我们一个一个看
(代码待补充)
el 这里是绑定的元素, 写法和css的id选择器一样. 当然, 那个元素上要有同样的id属性才行.
data 这是核心, data就是数据的意思. 我们想看哪些数据, 就要列在这里. 有人说, 我什么都想看, 能不能把窗户开大一些. 呵呵 建议还是只关注自己改看的. 看的太多并非好事. 也就是说, data最好是细心的整理和选择一下, 只声明我们需要在html中显示的数据. 虽然感觉我们只管声明就行了, 数据就自动跑到界面上去了, 但是其实后面的工作都是vue帮我们在做. 数据太多太乱的话, vue也会吃不消的.
methods 定义一些函数. data里只是放一些数据, 如果有一些代码之类的, 就写成函数, 放在methods里.
之后的重点就是vue提供的一些事件. 就像页面有加载事件, unload事件一样, vue也有created和mounted事件. 其实看文档还有其他一些, 不过我们还是只关注最常用的. 我大部分时候都是用mounted, 大概就是准备好了的意思(以前是有一个ready的, 现在的版本改成mounted了). 而created比mounted发生的要更早一些. 在这些事件里我们做什么呢, 当然是请求我们的数据了. 数据请求回来之后, 装到data里, 剩下的事我们就不用管了, vue自动会帮我们显示在页面上. 当然, 前提是我们之前正确的声明了.
哈哈 vue就是这么简单, 感觉很爽有木有. 不过, 有一些功能, 和语法细节还是要学习的.
属性的绑定用v-bind, 简写是冒号.
根据条件切换显示和隐藏用v-if或v-show.
循环一个数组用v-for.
input标签可以用v-model实现双向绑定. 也就是说, 我们输入的时候, 数据就自动变成我们输入的内容了.
绑定事件用v-on, 简写为@, 可以调用methods里定义的函数.
基本的内容就这些吧, 至于其他像计算属性, class和style的特殊语法等, 可以参考官方文档.
我们借这个机会讲一下js里著名的坑, this的问题. 在vue里, vue会自动帮我们绑定this, 所以我们调用data和mothods里的内容, 都可以直接用this.
但是, this是什么呢, 从哪里来的呢. this是js函数的一个隐含参数, 也就是说, 每个函数都会有, 不定义也可以用的. 本来这也没有什么, this坑的地方在于他的默认值, 根据不同的环境和用法是不一样的. 具体规则大家可以在网上自己搜索, 不过我觉得可以不必花时间研究这些. 只要掌握几条
用function的方式写的函数, 用this的时候考虑一下, 需不需要转换一下this, 具体转法大家可以看看网上的代码, 总之就是另外找个名字赋上this的值. 可以叫self, that, _this, 总之别叫this就行, 但是值还是那个值.
所以函数尽量写成箭头函数, 箭头函数好一些, 没有这种奇怪的问题.
如果程序运行结果跟自己预想的不一样, 特别是出现什么undefined之类的提示, 可以考虑看看调试器, 或者输出一下this的值, 看看到底指对了没有.
其实我们很多时候就是加上this和去掉this分别试一下, 哪个能用就用哪个. 记得太多实在烧脑.
具体在vue里使用的话, 一般按照, html里不用this, js里用this, 的原则就可以了. 大部分情况是可以通过的, 小部分出问题的, 就自己试两下好了.
这里我们是以比较简单的方式, 在网页上使用vue的. 还有一种比较高级的用法, 用vue文件写单页, 我们以后再介绍. 其实用这种简单的方式, 我们已经能干很多活了. 大多数时候, 所谓前端的工作, 就是用html, css, 和js写网页. 说起来都不是很难, 主要就是多多练习, 以及找一个合适的工作环境, 让自己能够在工作中得到进步和提升了.
