1. Define variables
1.1、ref
Generally used to process simple types of data
important point:
To define variables, use vue’s ref method in the setup function.
The defined variables and methods need to be returned by the setup function before they can be used in html code.
When calling a variable in a method, you need to access the value of the variable to obtain and operate it.
<template>
<div>
<div class="count">
count: {
{ count }}
</div>
<button @click="countaddFn">count++</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup () {
let count=ref(0)
let countaddFn=()=>{
count.value++
}
return {
count,countaddFn
}
}
}
</script>
1.2、reactive
Generally used to define complex data
<template>
<div>
<table border="1">
<tr>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr v-for="item in user" :key="item.id">
<td>{
{
item.id }}</td>
<td>{
{
item.name }}</td>
<td>{
{
item.age }}</td>
<td>{
{
item.gender }}</td>
</tr>
</table>
<button @click="modifyTheFn">修改数据</button>
</div>
</template>
<script>
import {
reactive } from 'vue';
export default {
setup () {
// 复杂类型数据定义
let user=reactive([
{
id:1,name:'张三',age:20,gender:'男'},
{
id:2,name:'李四',age:30,gender:'中性'},
{
id:3,name:'王五',age:40,gender:'女'},
{
id:4,name:'老六',age:50,gender:'未知'},
])
function modifyTheFn(){
user[1].name='老七'
}
return {
user,modifyTheFn
}
}
}
</script>