这次我们就开始向实战进军. 把之前的知识综合运用, 也会更接近写真实项目的感觉.
我们准备用vue写一个动态加载数据的页面. 什么是vue呢, 简单的说就是一个js文件, jquery也是一个js文件, 我们自己写的也是js文件. 那为什么要用他呢, 简单说就是因为流行, 工作中用的多. jQuery是曾经的王者, 现在是vue和react的时代, react在国外用的多, vue在国内用的多, 选择困难的时候就看看企业发布的招聘需求, 跟着大多数走就可以了.
当然随着时间我们会有自己的理解和选择. 能更清楚的说出自己用或者不用的理由. 比如我总结的,用vue最主要的是两点, 一个是数据绑定, 一个是组件化. 什么意思呢, 总的说起来, 还是他能帮我们隐藏很多内部的繁琐细节, 让我们专心于自己要作的事情. 当然还有一些其他考虑, 简洁的声明式写法啊, 丰富成熟的生态系统啊. 以后随着时间和经验的积累, 就会形成自己对技术的感觉. 这种感觉对于在技术问题上做决定是很重要的. 大家慢慢培养吧.
现在vue也已经升级到版本3了, 本文介绍的主要还是vue2的写法, 目前大部分项目处于两者都有的阶段, 好在实际使用的区别没那么大.
好了, 让我们先从新建文件开始吧. 新建html文件, 然后从cdn引入vue, 就可以用了.
然后就是写我们自己的内容和代码. 写什么呢, 不知道的话, 可以先从网上搜一些现成的demo. 一般优秀的软件文档都会有一些demo, 可以直接下载或者粘贴过来运行的, 让人在最短的时间内看到软件运行的效果. 如果运行之后, 感觉还有点意思, 就会去了解更详细的用法.
vue官网的文档和demo都是很不错的, 大家可以花时间看看, 不光是vue, 对于整个前端入门都有帮助. 我的前端知识基本就是看着vue的文档学的.
但是我们最开始还是想找一些更简单的, 最好是三五行代码就能实现的基本功能. 简单的容易理解, 并且一般来说, 越简单的越是重要的东西.
这里好像有一些新写法没有见过的. 其实也只是换了个形式而已. new Vue() 也是创建了一个对象, 只是这个对象创建好了就不只是空的, 而是已经帮我们放进去了好多可以用的东西了. 同样, 小括号里, 用一对大括号包起来的那一堆东西, 也是在创建对象. 只不过把创建和放东西进去的过程合在一起了. 也就是说, 我们分开写是
const a = {}
a. b = 1
合起来就是
const a = {b: 1}
效果是一样的. 这种写法就是鼎鼎大名的json格式. json还有一些其他的格式规定, 但是总的来说, 就是类似这样的样子, 比较简单. 我们可以看到js很灵活, 写法很多, 现在版本更新快, 新写法更是层出不穷, 这也是前端技术的特点.
比如, 上面的那个用function的函数声明, 就可以用es6引进的简化写法, 去掉function和冒号.
而html中间那双重大括号, 就相当于一个小窗口, 通过这个窗口, 我们可以在html里看到js里的内容. 而vue就相当于提供了类似望远镜或者潜望镜的功能. 让我们可以不用离开html, 就可以观察到js里的内容和变化.
el 这里是绑定的元素, 写法和css的id选择器一样. 当然, 那个元素上要有同样的id属性才行.
嗯, 听起来是不是很有意思, 其实用起来也是挺有意思, 也挺方便的.
我们直接从接近真实项目的需求开始吧.
前面说过, 我们想让网页不只是我们写上去的固定的内容, 而是有一些变化的数据. 数据呢一般是存在服务器上的数据库里. 所以我们可以想到, 我们一定要通过什么方式获取到这些数据. 网页这方面的方式我们之前讲了, 就是XHR, 通过HTTP请求获取数据, 而服务器那边呢, 一般数据库是没有直接提供HTTP的请求支持的, 所以就需要有一个转换. 这就是所谓后端程序员工作的一部分. 我们暂时还没有自己的数据库和后端, 所以我们使用一些公开的接口来测试. 比如, 我们通过调用github的公开API, 获取头像数据.
<template>
<div>
<input v-model="username" placeholder="输入GitHub用户名" />
<button @click="fetchAvatar">获取头像</button>
<div v-if="avatarUrl">
<img :src="avatarUrl" alt="用户头像" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
username: "",
avatarUrl: null,
};
},
methods: {
async fetchAvatar() {
try {
const response = await fetch(
`https://api.github.com/users/${this.username}`
)
const res = await response.json()
this.avatarUrl = res.avatar_url;
} catch (error) {
console.error("获取头像失败:", error.message);
}
},
},
};
</script>
这里的写法比上面简洁一些, 但是无法直接在浏览器中运行, 测试的话可以在Vue SFC Playground 里面运行. 平时开发的话会先创建项目, 处理好依赖关系, 之后就用这种方式往里填充代码.
data 这是核心, data就是数据的意思. 我们想看哪些数据, 就要列在这里. 有人说, 我什么都想看, 能不能把窗户开大一些. 呵呵 建议还是只关注自己改看的. 看的太多并非好事. 也就是说, data最好是细心的整理和选择一下, 只声明我们需要在html中显示的数据. 虽然感觉我们只管声明就行了, 数据就自动跑到界面上去了, 但是其实后面的工作都是vue帮我们在做. 数据太多太乱的话, vue也会吃不消的.
methods 定义一些函数. data里只是放一些数据, 如果有一些代码之类的, 就写成函数, 放在methods里.
之后的重点就是vue提供的一些事件. 就像页面有加载事件, unload事件一样, vue也有created和mounted事件. 其实看文档还有其他一些, 不过我们还是只关注最常用的. 我大部分时候都是用mounted, 大概就是准备好了的意思(以前是有一个ready的, 现在的版本改成mounted了). 而created比mounted发生的要更早一些. 在这些事件里我们做什么呢, 当然是请求我们的数据了. 数据请求回来之后, 装到data里, 剩下的事我们就不用管了, vue自动会帮我们显示在页面上. 当然, 前提是我们之前正确的声明了.
fetch我们之前提到过, 用起来也不复杂, 按照流程调用就可以, await是比较新的语法, 简化异步函数的书写, 注意函数名前面加了async, 否则会报错,
哈哈 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的. 更常见的用法是写单文件组件, 需要提前搭建一些运行环境. 其实用这种简单的方式, 我们已经能干很多活了. 大多数时候, 所谓前端的工作, 就是用html, css, 和js写网页. 说起来都不是很难, 主要就是多多练习, 以及找一个合适的工作环境, 让自己能够在工作中得到进步和提升了. 毕竟任何知识都要通过实践才能出真知.
放一下vue3的代码以便对比, 从写法上来看, 主要是vue3多用模块和函数, 显得更现代化了, 代价是需要现代的浏览器才能运行.
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const message = ref('Hello vue!')
return {
message
}
}
}).mount('#app')
</script>
