目录
一、安装Node.js
二、创建Vue3工程
三、用VSCode打开
四、源代码目录src
五、入门案例——手写src
六、测试案例
七、ref和reactive的区别
一、安装Node.js
下载20.10.0 LTS版本
https://nodejs.org/en
使用node命令检验安装是否成功
node
二、创建Vue3工程
在桌面右键打开终端,输入创建命令。
npm create vue@latest
输入项目名称,用小写字母和数字,用 _ 或 - 分隔。
接下来就是一些选项配置,这里只选使用TypeScript语法。
到这里Vue3项目就创建好了,可以在桌面上找到。
三、用VSCode打开
使用VSCode打开刚才建好的项目
这里会推荐两个官方插件,点击安装即可。
打开env.d.ts文件,发现报错,原因是没有下载依赖。
打开终端,使用npm i命令下载依赖。
npm i
新增了一个node_modules目录
下载好后重新打开VSCode
项目中的index.html文件是入口文件,类似于SpringBoot项目中的启动类。
我们先将index.html文件里面的内容全部注释,然后自己简单的写一个html页面。
打开终端,使用npm run dev命令启动项目。
npm run dev
按住Ctrl键然后单击http://localhost:5173/打开
四、源代码目录src
和后端项目一样,src目录用于存放源代码。
在入口文件index.html中,引入了src目录下的main.ts文件。
main.ts文件内容
其中import的作用就是导入,类似于Java中的导包。
import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')
导入样式
import './assets/main.css'
从vue中导入createApp,然后下面就能用createApp了。
import { createApp } from 'vue'
导入App组件,App组件是根组件,我们写的其他组件放到根组件中。
import App from './App.vue'
用根组件App创建应用,挂载到一个id为app的容器中。
createApp(App).mount('#app')
这个id为app的容器就在index.html中
components目录存放我们自己写的组件,这些组件要引入到App.vue根组件中,assets目录里面是一些样式。
在src中main.ts和App.vue是必不可少的
五、入门案例——手写src
创建src目录,新建main.ts和App.vue
main.ts
// 引入createApp用于创建应用
import { createApp } from 'vue'
// 引入App根组件
import App from './App.vue'createApp(App).mount('#app')
在.vue文件中可以写什么呢?
<template><!-- html -->
</template><script lang="ts">// JS或TS
</script><style>/* 样式 */
</style>
Person.vue
我们在src中创建components目录,存放我们自己写的组件Person.vue,然后引入到App.vue根组件中。
<template><div class="app"><h2>姓名:{{ name }}</h2><h2>年龄:{{ age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showNumber">查看联系方式</button></div>
</template><script lang="ts" setup>import { ref } from 'vue'let name = ref('艾伦')let age = ref(20)let number = '12345678910'function changeName() {name.value += '~'}function changeAge() {age.value += 1}function showNumber() {alert(number)}
</script><style>.app {background-color: pink;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
</style>
App.vue
在App.vue中不写内容,而是引入其他组件。
<template><Person/>
</template><script lang="ts">import Person from './components/Person.vue'export default {name: 'App',components: { Person }}
</script><style></style>
在Person.vue中<script>标签里面的写法和Java相似
import导包,name、age、number是属性,changeName()、changeAge()、showNumber()是方法。
这里用到了ref,ref是vue里面的,我们要用的话就要先引入进来。ref()是一个方法,可以将基本类型的数据或者是对象类型的数据变成响应式数据。
响应式数据:简单理解,如果代码里面的数据改变了,那么展示在页面中的相应数据也要做出改变。
<script lang="ts" setup>import { ref } from 'vue'let name = ref('艾伦')let age = ref(20)let number = '12345678910'function changeName() {name.value += '~'}function changeAge() {age.value += 1}function showNumber() {alert(number)}
</script>
六、测试案例
我们将项目运行起来,在浏览器中打开。
点击对应的按钮,页面成功地做出了响应。
七、ref和reactive的区别
先来看用ref定义的数据是什么样的
还是用上面的案例,在浏览器控制台中输出name。
<template><div class="app"><h2>姓名:{{ name }}</h2><h2>年龄:{{ age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showNumber">查看联系方式</button></div>
</template><script lang="ts" setup>import { ref } from 'vue'let name = ref('艾伦')let age = ref(20)let number = '12345678910'console.log(name)function changeName() {name.value += '~'}function changeAge() {age.value += 1}function showNumber() {alert(number)}
</script><style>.app {background-color: pink;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
</style>
可以看到是一个RefImpl对象,name的值变成了这个RefImpl对象中的属性value的值。所以在案例中我们用name的值是用name.value,但是在插值语法中是不用.value的。
插值语法:
下面就是插值语法,就是把值插进去。
<h2>姓名:{{ name }}</h2> <h2>年龄:{{ age }}</h2>
再来看用reactive定义的数据是什么样的
下面代码是报错了的,原因是reactive定义的数据必须是对象类型。
let name = reactive('艾伦')
定义对象类型的数据
let person = reactive({"name":"艾伦", "age":20})
查看控制台输出,可以看到是一个Proxy(Object)对象。
这个时候案例代码可以修改成下面这样,结果依然是一样的。
<template><div class="app"><h2>姓名:{{ person.name }}</h2><h2>年龄:{{ person.age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showNumber">查看联系方式</button></div>
</template><script lang="ts" setup>import { ref, reactive } from 'vue'let person = reactive({"name":"艾伦", "age":20})let number = '12345678910'console.log(person)function changeName() {person.name += '~'}function changeAge() {person.age += 1}function showNumber() {alert(number)}
</script><style>.app {background-color: pink;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
</style>
那么ref是用来定义基本类型的数据的,reactive是用来定义对象类型的数据的?
其实ref也可以定义对象类型的数据
let person = ref({"name":"艾伦", "age":20})
查看控制台输出
依然是一个RefImpl对象,不过里面还有一个Proxy(Object)对象,所以用ref定义对象类型的数据本质上是用reactive。
此时案例中的代码应该修改成下面这样的
使用ref就必须用到.value,在插值表达式中不需要。
<template><div class="app"><h2>姓名:{{ person.name }}</h2><h2>年龄:{{ person.age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showNumber">查看联系方式</button></div>
</template><script lang="ts" setup>import { ref, reactive } from 'vue'let person = ref({"name":"艾伦", "age":20})let number = '12345678910'console.log(person)function changeName() {person.value.name += '~'}function changeAge() {person.value.age += 1}function showNumber() {alert(number)}
</script><style>.app {background-color: pink;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
</style>
总结
ref用来定义:基本类型的数据、对象类型的数据
reactive用来定义:对象类型的数据
使用原则
- 若需要一个基本类型的响应式数据,必须使用ref
- 若需要一个响应式对象,层级不深,ref、reactive都可以
- 若需要一个响应式对象,且层级较深,推荐使用reactive