官方 https://v3.cn.vuejs.org/guide/introduction.html
- vue3使用
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).use(router).use(store).mount('#app')
<template>
<h1 ref="box">{{ name }}09</h1>
<button type="button" @click="count++">count is: {{ count }}</button>
<button type="button" @click="prints">函数{{ name }}</button>
<button type="button" @click="add">函数{{ name1 }}</button>
</template>
import {computed, inject, onMounted, onUnmounted, provide, reactive, readonly, ref, toRef, toRefs} from 'vue'
export default {
name: "hello",
props:{//父给子组件传值,响应式,不能用es6解析用torefs
qq:String,
},
setup(props,context){
/* const props=defineProps({//替代传递props接收
qq:String
})*/
const name="测试";
const name1=ref(0)//基础类具备响应式
const count = ref(0);
let re=reactive({
a:"12"
})//引用类型具备响应式
let ro=readonly({
a:"12"
})//只读防止子组件修改数据
//toRef,toRefs解析readonly reactive
console.log(toRef(props,"ab"))//不存在设置默认key
//console.log(toRefs(props))//同上不设置默认值
console.log(context)
const {attrs,slots,emit}=context//上下文环境,包含属性插槽自定义事件
function prints(){
console.log('函数')
}
provide('ro',readonly(ro))//发送数据或函数
const ro1=inject('ro')//接收数据函数
console.log(ro1)
computed(()=>{//计算属性
})
const box=ref(null)
console.log(box.value) //获取真实dom
onMounted(()=>{
})
onUnmounted(()=>{
})//离开卸载事件
//beforeCreated,created钩子函数被setup替代,其他加on
function add(){
name1.value--
}
return {
name,
count,
name1,
prints,
add,
};
}
}
- 数据绑定
~
双向数据绑定 - {{item.id}} //列表渲染 动态绑定属性,缩写 :src="url" 动态属性:[key]="url"
~
作者:Yoby 创建时间:2020-07-22 21:31
更新时间:2024-12-05 13:26
更新时间:2024-12-05 13:26