Vue3.0学习 （1）- Hello World

一、下载开发工具

直接官网下载VSCode

二、牛刀小试

1、 创建项目

VSCode不能直接创建项目文件夹，需要先创建一个文件夹，然后通过VSCode打开。

2、 Say Hello World

如果只是简单的输出 hello world ，直接在body里写上要输出的内容就行了。但是，如果输出的内容是从服务器获取的，显然上述操作就无法满足要求。这就要用到文章的主角 Vue 了。

2.1 安装 Vue.js

由于安装vue有多种方式，初学先采用独立版本安装、学习。

1、通过网址：https://unpkg.com/vue@3.0.0-beta.17/dist/vue.global.js 保存js文件。
2、可以通过搜索version 查看版本。
3、采用vue+html 模式，需要在html文件head节点中 通过标签script 引入vue.js。

2.2 输出文字

实现body中的数据从script标签获取：

1）Vue 跟 微信小程序 对比

Vue：只有一个html文件，所有内容：样式、逻辑都在 html中
小程序：多个文件， wxml、js、wxss、json 共同表示一个页面

2）获取数据 - 服务器返回数据较少

1、通过mount函数 从 div 节点中 给vue 找到一个根节点

mount('#app2')
mount为挂载的意思。mount 后面可以通过# 来选择body中div的id；也可以通过. 来
选择div的class。 

2、把从服务器获取的数据 通过setup函数返回到一个对象中，如 app 对象

   const app={
      setup(){
          return {
              message
          }
      }
  }

3、从vue的库中获取 createApp 函数

 const {createApp} = Vue
 从对象中提取出来部分属性

4、把app对象作为参数传入 createApp中，并调用挂载函数建立起 动态数据与 html dom 之间的联系

 createApp(app).mount('#app2')

3）获取数据 - 服务器返回数据较多
可以通过创建多个对象，把数据保存在不同的对象中，通过挂载的方式把 对象 与 html div 节点 绑定到一起。