![@F@KN11@{~[I]GHVD39KXDV.png](https://ucc.alicdn.com/pic/developer-ecology/a633a7e7221445c4a3c1eed4e4a8b4c4.png?x-oss-process=image/resize,w_1400/format,webp "@F@KN11@{~[I]GHVD39KXDV.png")
小菜一碟
众所周知：写代码，肯定是要有一个代码环境的。那么写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标签
这个路径是vue的CDN地址，可以直接使用哦~
Hello World
首先，我们在body标签中创建一个div标签，id为root
然后，在body标签之后创建一个script标签，开始编写vue代码
<script> Vue.createApp({ template: '<div>Hello World</div>' }).mount('#root'); </script> 复制代码
保存代码之后，打开浏览器运行html文件，就可以看到渲染的效果了！
![A$(YBFO61QS150V(5GUM]I9.png](https://ucc.alicdn.com/pic/developer-ecology/5882e872589f4ed3b0db9532433af782.png?x-oss-process=image/resize,w_1400/format,webp "A$(YBFO61QS150V(5GUM]I9.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这个元素里面，渲染一个模板Hello World
看了解疑之后，再来看看浏览器的渲染结果就会一目了然了
在浏览器中打开审查元素，将鼠标放到hello world上面就会出现对应的渲染标签了。
总结一下：找到root这个节点，把对应的模板
Hello World
放到root里面去！
小菜一碟
看懂了Hello World代码之后，我们就可以做一个小功能，来看看vue怎么做一些动态化的渲染
计数器
首先，我们来改造一下Vue.createApp()中的代码
Vue.createApp({ data(){ return { content: 1 } }, template: '<div>{{content}}</div>' }).mount('#root'); 复制代码
这时候，我们发现页面上会渲染一个数字 1，为啥不是渲染{{content}}呢？
代码解疑
- {{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'); 复制代码
这时候我们会发现浏览器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
![$8TOD3CV@9]S~UYP]94}H)S.png](https://ucc.alicdn.com/pic/developer-ecology/e11cdc420ccd4feeb499d906989aeb18.png?x-oss-process=image/resize,w_1400/format,webp "$8TOD3CV@9]S~UYP]94}H)S.png")
总结
通过上面的例子，我们对vue的基础语法和面向数据编程有了一点点的理解，也在例子中给大家讲了一点点vue语法的内容，不懂的地方，可以在评论区讨论一下，后面的文章里面会给大家一一讲解！
