Vue修炼系列教程 - 筑基篇1

前言

准备有空花点时间写一个对小白友好的Vue常用系列文章，同时也希望让看到的有缘人可以更快速的掌握和使用Vue，同时也为我可怜的公众号增加一些关注量(文章末尾会贴出来)。文章会尽量结合平时开发经验给到尽量详细的解答，有问题欢迎评论区留言或私聊哈，现在让我们开始愉快的玩耍吧。

---

开始修炼

文中用到的运行环境都基于Vue-cli

根据官网，我们用npm下载安装Vue-cli，npm依赖nodejs的安装，npm其实就是一个依赖包管理器，npm install就是根据package.json中依赖包清单，把相应的依赖包下载下来。创建项目使用Vue3(这里我们选择使用Vue3，要拥抱新变化嘛)，之后我们运行npm run serve命令(npm run xxx命令的配置在package.json中的scripts字段)，访问网站可以看到如下界面，说明跑成功啦！

我们把一些文件删一删，只留一个App.vue在那，写点东西，像这样

 我们回到界面，可以看到Hello World

 在开始码字前要强调的规范很重要，很重要，很重要！重要的事情说三倍，良好的规范可以让你的代码更加清爽，特别是工作的时候，维护性和可读性会大大提高，eslint一定要开着(eslint是规范检查工具，Vue-cli框架已经有一套比较流行的规范规则，不建议关闭)。

我们继续讲代码，我们根据Vue3的基本语法，把内容都写到setup里面，在setup中定义一个message变量，然后return到外面，此时dom上才能接受到message变量，并渲染成变量上对应的数据，这个时候我们增加一个按钮，希望点击按钮时把hello world变成hello，我们改下代码

 我们增加一个button，绑定一个click事件(Vue中对dom绑定事件使用@前缀，@click相当于button被点击时会触发被绑定的方法，这里的click属于浏览器原生事件，当然我们也能抛出自定义事件，这个后面章节会讲到)，这里绑定handleClick方法(一般对事件的命名我也喜欢取名叫handleXXX比较通俗易懂)，聪明的伙伴会发现handleClick我们同样要在setup定义完后return出去，而此时的message变量被ref绑定，因为我们需要点击的时候改变message的值，同时要告诉vue，dom上绑定的message也要更新，所有需要包裹一层ref(针对非对象变量，如果是对象建议用reative包裹，后面章节会提及)，让message变量具有响应式，使用ref后如果要改变他需要对他的value做变更，只有这样，当数据被改变Vue才能感知到(Vue3中使用Proxy将数据做一层代理，每次数据更新都能被拦截到)，然后更新视图上对应绑定的变量，可以看到点击后的效果

 这个时候我们多一个功能，点击按钮后，把Hello world变成Hello，同时把按钮隐藏，我们可以这样写

 我们增加一个新变量showButton(对应控制展示隐藏的变量我喜欢以show或者visible开头方便识别)来控制按钮，可以看到引入一个v-if来控制(在Vue中v-开头统一称为指令，v-if属于Vue自带的指令，当然我们也可以定义自己的指令，后面的章节会讲到)，当一个元素绑定v-if时，值为false则这个元素会直接从dom树中移除，和v-if相似的指令还有一个v-show，两者从视觉上都是将元素隐藏，不同的是当v-show为false时，只是把元素的css属性display变成none，但还是会存在dom树中，所以在视图需要频繁切换时建议使用v-show来提升页面渲染的性能。我们看下点击后的效果，button被隐藏，只剩一个Hello

 这章节简单的讲了一下vue基本的响应式特征，以及@ + 事件的绑定和vue自带指令v-if、v-show的使用，文章还在持续更新中~，然后就是关注一下我的公众号呀，就是底下这玩意，每天能领外卖红包、打车红包，还有各种优惠卡券会员啥的，帮你省钱，这么好的博主能有啥坏心思呢~