一、vue基本用法
1.setup函数
在vue2中数据放在data中、方法放在method中等等。在vue3中统一放在了setup函数中。
代码如下：APP.vue
在setup中一定要有return函数，将 “所有数据（变量，函数等）” 返回在能在视图中返回
<template>
<div>
<h1>我的名字叫{{ name }}, 我今年{{ age }} 岁了</h1>
</div>
</template>
<script>
export default {
setup(){
const name = "zhangsan"
const age = 20
return {name,age}
}
}
</script>
<style scoped>
</style>
2.ref和reactive函数
reative函数和ref的功能式一样的。主要是"响应式数据"函数。在vue3中不能像vue2中使用 “this.变量” 操作数据值。必须使用ref进行响应式数据
区别：
1.ref 既可以用简单数据类型（数字、字符串），又可以用于复杂数据类型（对象、数组）
2.reactive是用来将复杂式的数据类型(对象，数组)。不能用于简单数据类型
建议简单数据类型用ref 复杂数据类型用reactive
2.1 ref 实例
<template>
<div>
<h1>我的名字叫{{ name }}, 我今年{{ user_info.age }} 岁了</h1>
<h1>我是一个{{ user_info.genter }}</h1>
<button @click="btn">按钮</button>
</div>
</template>
<script>
// 引用ref函数
import { ref,reactive } from 'vue'
export default {
setup(){
//处理简单数据
const name = ref("zhangsan")
//处理复杂数据
const user_info = ref({
age: 20,
genter: "男孩"
})
const btn = () => {
// 使用value修改变量的值
name.value = "lisi"
user_info.value.age = 30
user_info.value.genter = "女孩"
}
return {name,user_info,btn}
}
}
</script>
<style scoped>
</style>
2.2 reacti实例
<template>
<div>
<h1>我的名字叫{{ name }}, 我今年{{ user_info.age }} 岁了</h1>
<h1>我是一个{{ user_info.genter }}</h1>
<button @click="btn">按钮</button>
</div>
</template>
<script>
// 引用ref函数
import { ref,reactive } from 'vue'
export default {
setup(){
const name = ref("zhangsan")
const user_info = reactive({
age: 20,
genter: "男孩"
})
const btn = () => {
// 使用value修改变量的值
name.value = "lisi"
//如果使用reactive,不用使用value进行修改，直接对数据进行修改即可
user_info.age = 30
user_info.genter = "女孩"
}
return {name,user_info,btn}
}
}
</script>
<style scoped>
</style>
3.计算属性computed
场景：在购物车里增加或者减少商品，总价会跟着变。
代码如下：
<template>
<div>
加数：<input type="number" v-model="num.x">
<br>
加数：<input type="number" v-model="num.y">
<br>
<--!引入计算属性返回的值-->
和：<input type="number" v-model="sum">
</div>
</template>
<script>
//引入计算属性
import { reactive,computed } from 'vue'
export default {
setup(){
const num = reactive({
x: "",
y: ""
})
//使用计算属性进行运算
const sum = computed(()=>{
return num.x + num.y
})
return {num,sum}
}
}
</script>
<style scoped>
</style>
二、vuex组件传值
1.作用
1.专门为vue.js设计的状态管理库
2.采用集中式的方式存储需要的共享的状态
3.vuex的作用是进行状态管理，解决复杂的组件通信，数据共享问题
在创建项目的时候vuex已经安装，在src/store/index.js 就是vuex的文件
import { createStore } from 'vuex'
export default createStore({
//数据仓库，所有的数据都定义在state当中
state: {
},
//类似于组件中的计算属性，监视state中的数据，一旦数据发生变化就开始运行
getters: {
},
//同步调用
mutations: {
},
//异步调用
actions: {
},
modules: {
}
})
2.state的基本使用
import { createStore } from 'vuex'
export default createStore({
state: {
username: "zhangsan"
}
})
2.1 template中直接调用
在App.vue组件的视图层直接调用，代码如下文章来源：https://www.toymoban.com/news/detail-454693.html
<template>
<div>
<!-- 直接使用$store.state来调用vuex中的数据 -->
hello: {{ $store.state.username }}
</div>
</template>
2.2 script中调用
<script>
// 导入useStore函数
import { useStore } from 'vuex'
export default {
setup(){
//通过useStore返回值来调用state中的数值
const store = useStore()
console.log(store.state.username)
}
}
</script>
3.getters的基本使用
在getters中定义函数文章来源地址https://www.toymoban.com/news/detail-454693.html
import { createStore } from 'vuex'
export default createStore({
state: {
//定义一个基本数据
username: "zhangsan"
},
getters: {
//对username数据进行二次处理,每一个处理函数都需要将state作为参数传递过来
newusername(state){
return state.username + "您好"
}
}
})
2.1.template中直接调用
<template>
<div>
hello: {{ $store.state.username }}
<br>
<!-- 依然式通过$store来调用 -->
hello1: {{ $store.getters.newusername }}
</div>
</template>
2.2 script中调用
<script>
// 导入useStore函数
import { useStore } from 'vuex'
export default {
setup(){
const store = useStore()
console.log(store.getters.newusername)
}
}
</script>
到了这里，关于vue3基础知识的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
