【Vue3从零开始-第一章】1-1 Hello world和计数器

蜡笔小心_
VIP.5 如鱼得水
1,669 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

前言

为了参加4月更文挑战，那就正式开始编写Vue专栏第一篇【Vue3从零开始】Vue基础。

小菜一碟

众所周知：写代码，肯定是要有一个代码环境的。那么写Vue，就得安装一堆你觉得顺手的开发工具：vscode，node，npm，chrome等等。

安装方式就自行百度、谷歌、掘金等技术网站搜索一下了，如果需求量比较大，也不是不可以单独写一篇安装教程的。但是这类型的太多了，随便一搜就是一大把了。

头盘

又是众所周知：写代码除了需要一个代码环境之外，第一个写的肯定就是Hello World了，那么下面就从Hello World开始了。

在编写代码之前，在电脑上自己觉得顺眼的地方新建一个文件夹，取一个自己觉得顺眼的文件名。然后把文件夹拖到vscode中，在文件夹下面新建一个html文件，那么就可以开始正式编写代码了。

下面所有代码均在html基础上编写，所以可以在html文件中，使用快捷方式快速生成html代码：

! + tab键 如果你不会用快捷键，那你就直接复制下面的代码吧，此章节通用哦~~

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>【Vue3从零开始】Vue基础</title>
</head>
<body>
    
</body>
</html>

在写Hello World之前，我们需要引入vue的包，所以要在head标签中添加script标签 <script src=https://unpkg.com/vue@next""></script>

这个路径是vue的CDN地址，可以直接使用哦~

Hello World

首先，我们在body标签中创建一个div标签，id为root

<div id="root"></div>

然后，在body标签之后创建一个script标签，开始编写vue代码

<script>
    Vue.createApp({
        template: '<div>Hello World</div>'
    }).mount('#root');
</script>

保存代码之后，打开浏览器运行html文件，就可以看到渲染的效果了！

image.png

Hello World完整代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    Vue.createApp({
        template: '<div>Hello World</div>'
    }).mount('#root');
</script>
</html>
代码解疑

写完代码之后，发现script里面的vue代码不太理解吧！下面就详细解释一下这段代码的意思。

  • Vue.createApp()：创建一个vue实例，也就是我要去使用vue了
  • mount('#root')：在id=root的元素上使用vue
  • template：在root这个元素里面，渲染一个模板<div>Hello World</div>

看了解疑之后，再来看看浏览器的渲染结果就会一目了然了

image.png

在浏览器中打开审查元素，将鼠标放到hello world上面就会出现对应的渲染标签了。

总结一下：找到root这个节点，把对应的模板<div>Hello World</div>放到root里面去！

小菜一碟

看懂了Hello World代码之后，我们就可以做一个小功能，来看看vue怎么做一些动态化的渲染

计数器

首先，我们来改造一下Vue.createApp()中的代码

Vue.createApp({
    data(){
        return {
            content: 1
        }
    },
    template: '<div>{{content}}</div>'
}).mount('#root');

这时候，我们发现页面上会渲染一个数字 1，为啥不是渲染{{content}}呢？

image.png

代码解疑
  • {{content}}：js表达式，content是一个变量，值在data方法中定义
  • data(){}：vue中用来定义变量值的方法，return返回页面中所有需要定义的变量

对于初学者来说，可能还是不太理解上面的代码，只能多写写之后去理解，后面的文章里面，我会带着大家一起来详细理解vue里面的知识

看了上面的代码之后发现页面上只是渲染了一个数字1，并没有开始计时呀。

这时候就要用到vue的一个生命周期mounted方法（后面会单独讲解生命周期）

  • mounted()：页面加载完成后就会执行的方法
Vue.createApp({
    data(){
        return {
            content: 1
        }
    },
    mounted(){
        console.log('mounted生命周期')
    },
    template: '<div>{{content}}</div>'
}).mount('#root');

image.png

这时候我们会发现浏览器Console里面打印了mounted生命周期，由此可见，mounted方法是页面加载完成之后自动执行的方法，不需要手动触发。

那么这个时候，我们就可以在mounted方法中写一个定时器，用来对content进行计数

mounted(){
    setInterval(() => {
        this.content += 1
    }, 1000)
},
  • this.content：this.$data.content简写，data方法中的content变量
  • this.content += 1：每隔1秒，data方法中的content变量就+1

chrome-capture (1).gif

总结

通过上面的例子，我们对vue的基础语法和面向数据编程有了一点点的理解，也在例子中给大家讲了一点点vue语法的内容，不懂的地方，可以在评论区讨论一下，后面的文章里面会给大家一一讲解！

avatar
文章
阅读
粉丝