【Vue3入门1】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里的内容，可以直接修改 不用 .value
web.url = 'www.baidu.com';
return {
msg:'success',
web,
// 3.返回number
number
}
}
}).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里的内容，可以直接修改 不用 .value
web.url = 'www.baidu.com';
return {
msg:'success',
web,
// 3.返回number
number,
num1
}
}
}).mount("#app")
</script>
</body>
本文介绍 vue 的基础使用以及 两种响应数据的方式。