目录
必备插件
1、Vue-Offical
- 提供Vue文件的语法高亮
- 支持Vue文件的智能感知和自动完成
- 提供Vue文件的格式化工具
2、Vue 3 Snippets
- 提供Vue3相关的代码片段，方便快速输入常见代码结构
3、Path Intellisense
- 路径自动补全
4、Auto Import
- 自动导入插件，可帮助自动完成和自动导入模块
5、Auto Close Tag
- 自动闭合HTML标签
6、Auto Rename Tag
- 自动重命名HTML标签
Vue的Hello World程序
2、准备容器
3、创建应用并提供数据
4、渲染数据 {{数据名}}
1、引入vue3的源代码，我们可以借助script标签通过CDN来使用vue
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>2、准备容器
<div id="app">
<!-- 4.渲染数据 -->
{{msg}}
</div>
3、创建应用并提供数据
<script>
// 3.创建vue3应用并提供数据
Vue.createApp({
// vue3代码的入口函数
setup(props) {
const msg="Hello World!"
return {
msg:msg
}
}
}).mount('#app')
//指定这个内容渲染到哪个div中
</script>完整代码如下：
<!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>
<!-- 1.引入vue3原代码 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- 2.准备容器 -->
<div id="app">
<!-- 4.渲染数据 -->
{{msg}}
</div>
<script>
// 3.创建vue3应用并提供数据
Vue.createApp({
// vue3代码的入口函数
setup(props) {
const msg="Hello World!"
return {
msg:msg
}
}
}).mount('#app')
//指定这个内容渲染到 id==app 的div中
</script>
</body>
</html>setup函数
- setup函数是vue3API的入口函数
- setup函数是vue3特有的选项，作为编写代码的起点
- 标签中用到的数据或函数，需要在setup中声明并返回
- setup中的this不指向vue实例，setup中也不会用到this的
声明式渲染
声明式渲染又称为胡子语法，也成为插值/表达式
语法：
{{表达式}}
作用：把表达式结果渲染到双标签中
安装Vue开发者工具
1、进入谷歌浏览器插件下载界面
https://chrome.zzzmh.cn/index2、搜索 vue 进行下载
3、下载插件，得到一个zip压缩包，进行解压
4、 进入谷歌扩展程序界面
5、打开“开发者模式”，默认是关闭的
6、 将解压的文件如下，拖拽到扩展程序界面
7、添加成功后如下
8、点击详情，打开“允许访问文件网址”
9、按F12将vue往前调，方便后续使用
数据响应式
数据响应式：数据变了，视图也跟着变了。
vue开发代码的思想：减少DOM操作，采用数据驱动视图的思想，就是如果想修改DOM，那么只需要修改数据即可，因为数据变了，DOM会同步更新。
默认在setup中声明的数据不具备响应式特性，要想让数据具备响应式，需要借助响应式函数“reactive”和“ref”函数
响应式函数reactive
作用：
让一个对象具备响应式特性
注意：
参数只能是对象
使用：
- 从Vue中解构出reactive函数
- 给reactive函数传入对象作为参数（reactive会将这个对象变为响应式对象）
- 在调试工具中进行测试
使用reactive之后， 在调试工具里可以修改数据值同时界面会同步更新，若没有用reactive包裹的数据无法在调试工具进行修改
示例代码：
<div id="app">
我是{{obj.name}}，今年{{obj.age}}岁
</div>
<script>
//从Vue中解构出createApp方法，reactive方法
const { createApp, reactive } = Vue
createApp({
setup() {
const obj = reactive({
name: 'zhangsan',
age: 18
})
return {
obj
}
}
}).mount('#app')
</script>响应式函数ref
作用：
用来定义一个响应式数据，数据可以是基本类型（比如：数字、字符串、布尔等），也可以是引用类型（比如：数组、对象等），这就说明了ref的适用面比reactive更广
使用步骤：
- 从Vue中解构出ref函数
- 给ref函数传入指定的数据类型，ref就可以把传入的数据变成响应式
代码示例：
<script>
//从Vue中解构出createApp方法，ref方法
const { createApp, ref } = Vue
createApp({
setup() {
const msg = ref('hello')
const obj = ref({
name: 'zhangsan',
age: 18
})
return {
msg,
obj
}
}
}).mount('#app')
</script>TIPS
ref在标签中访问不用.value，可以直接使用，但是在js中使用的话要使用.value才能访问到数据对象，对其进行修改
const onClick=()=>{
msg.value='你好'
obj.value.name='kkk'
}reactive与ref的选择
问题：在定义响应式数据的时候，是选择reacitve还是ref？
1、reactive：只能接收对象作为参数，不能接收基本类型
2、ref：既可以接收基本类型，也可以接收引用类型，但在用js操作的时候，需要`.value`
就目前而言，官方没有一个确切的结论，没有最佳实战，根据经验，我们可以得出一个结论：
标签：插件,Vue,响应,setup,reactive,vue,ref From： https://blog.csdn.net/lzb_kkk/article/details/1435806311、如果要将一个对象变为响应式，并且对象的属性是确定的，那么推荐使用reactive
2、除此之外，推荐使用ref，比如：对象的属性不确定、定义响应式数组、定义基本类型的响应式数据