【Vue3】01-vue3的基础 + ref reactive

首先确保已经有了ES6的基础

本文介绍 vue 的基础使用以及两种响应数据的方式。

1. 创建一个vue应用程序

2. Vue模块化开发

3. ref 和 reactive 的区别

1. 创建一个vue应用程序

所需的两个文件：

https://unpkg.com/vue@3/dist/vue.global.js

https://unpkg.com/vue@3/dist/vue.esm-browser.js

打开对应网页后右键另存为保存到桌面上

创建一个vue文件夹，文件夹内再创建一个demo文件夹

将 “vue.global.js” 文件复制进demo文件夹，并将此文件夹在vscode中打开

打开后，在demo文件夹中再创建一个demo.html

在head标签内创建一个script标签 src="vue.global.js"

效果如图：

现在开始创建一个vue应用程序

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.global.js"></script>
</head>
<body><!-- 创建一个id为app的div元素 --><div id="app">{{ msg }}     <!-- 7.{{ }} 插值表达式：可以将vue中定义的数据进行渲染 --><!-- 8.获取到return的msg --><!-- 10.获取新的复杂数据 --><h2>{{ web.title }}</h2><h2>{{ web.url }}</h2></div><script>// 11.如果想要去掉 createApp和reactive前的Vue 可以利用解构,效果不变// const {createApp,reactive} = Vue// 1.开始创建一个vue应用程序// 2.Vue.createApp({ })Vue.createApp({// 3.setup选项 设置响应的数据和响应方法setup(){// 9.msg是简单的数据，复杂的可以使用reactive({})const web = Vue.reactive({// 自己定义属性和属性值title:'zzz',url:'baidu.com'})// 4.设置一个return语句返回数据return {msg:'success',// 返回定义的复杂的数据web}}}).mount("#app")    // 5.将vue应用程序挂载到app上// 6.#app如何获取到return的msg值 回到div内</script>
</body>
</html>

2. Vue模块化开发

首先将在第一步保存在桌面的 vue.esm-browser.js 复制到 demo 文件夹中

回到刚刚的代码中删除第一个创建的script标签

并在 body 里的 script 标签添加 type = "module" 属性

并进行解构方式的修改

将传统开发方式修改为模块化开发方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">{{ msg }}     <h2>{{ web.title }}</h2><h2>{{ web.url }}</h2></div><script type="module">// 修改为模块化开发方式import {createApp,reactive} from './vue.esm-browser.js'createApp({setup(){const web = reactive({title:'zzz',url:'baidu.com'})return {msg:'success',web}}}).mount("#app")</script>
</body>
</html>

注意这里要使用 live server 打开后才能看到信息

和前面介绍的传统方式的效果一样

3. ref 和 reactive 的区别

前面介绍的 reactive 创建了响应式对象 web

它是用于存储复杂数据类型的数据如对象和数据

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">{{ msg }}     <h2>{{ web.title }}</h2><h2>{{ web.url }}</h2><!-- 4.显示number --><h3>{{ number }}</h3></div><script type="module">// 1.导入 ref import {createApp,reactive,ref} from './vue.esm-browser.js'createApp({setup(){// 2.定义常量number 用ref 引用类型const number = ref(10);// 5.如果想要修改number值number.value = 20;const web = reactive({title:'zzz',url:'baidu.com'})// 6.但如果想要修改reactive里的内容，可以直接修改 不用 .valueweb.url = 'www.baidu.com';return {msg:'success',web,// 3.返回numbernumber}}}).mount("#app")</script>
</body>
</html>

前面说 ref 只能存储单个的数字字符串，但实际上也能存储数组

<body><div id="app">{{ msg }}     <h2>{{ web.title }}</h2><h2>{{ web.url }}</h2><!-- 4.显示number --><h3>{{ number }}</h3><!-- 8.num1 --><h3>{{ num1 }}</h3></div><script type="module">// 1.导入 ref import {createApp,reactive,ref} from './vue.esm-browser.js'createApp({setup(){// 2.定义常量number 用ref 引用类型const number = ref(10);// 7.ref定义数组const num1 = ref([1,2,3]);// 5.如果想要修改number值number.value = 20;const web = reactive({title:'zzz',url:'baidu.com'})// 6.但如果想要修改reactive里的内容，可以直接修改 不用 .valueweb.url = 'www.baidu.com';return {msg:'success',web,// 3.返回numbernumber,num1}}}).mount("#app")</script>
</body>