最近在闲暇时间想学习一下前端框架vue，主要参考以下两个学习资料。

官网 快速上手 | Vue.js

b站学习视频 2.创建一个Vue3应用_哔哩哔哩_bilibili

一、创建一个vue3应用 

            Document                        {{ msg }}        
{{web.title}}
        
{{web.url}}
                const {createApp, reactive} = Vue        createApp({            // setup选项，用于设置响应式数据和方法等            setup(){                const web = reactive({                    title:"开始学习vue啦",                    url:"vue.com"                })                return{                    msg:"sucess",                    web                }            }        }).mount("#app")        // mount为挂载    

模块化开发

注：首先要安装Live Server插件。

导入js文件：

import {createApp, reactive} from './vue.esm-browser.js'

script添加类型：

二、ref与reactive区别

1、存储类型不同

ref：用于存储单个基本类型的数据，如：数字、字符串等；

reactive：用于存储复杂数据类型，如：对象或数组等。

2、修改方式不同

ref修改方式：

# 导入import {ref} from './vue.esm-browser.js'# 定义常量const number = ref(10)# 修改number.value = 20

reactive修改方式：

const web = reactive({    title:"开始学习vue啦",    url:"vue.com"})web.url = "hhahaha"

三、渲染数据v-text和v-html

插值方式：

{{web.title}}

v-text方式：

v-html方式：

完整示例代码：

            Document                    
{{web.title}}
        
        
                import {createApp, reactive} from './vue.esm-browser.js'        // const {createApp, reactive} = Vue        createApp({            // setup选项，用于设置响应式数据和方法等            setup(){                 const web = reactive({                    url:" www.vue.com",                    title:"学习vue"                })                                return{                    web                     }            }        }).mount("#app")        // mount为挂载    

另：文本内容呈现斜体文本。

举例：

He named his car The lightning, because it was very fast.运行结果：He named his car The lightning, because it was very fast.