目录 搜索 展开 简介 Database Go Dart Javascript 语言基础 Nodejs nodejs基础 uniapp vue vite cool-admin elementui-plus Svelte hono 常用库 小程序 JSSDK PHP 开发工具 编程语言 暂无相关搜索结果! 阅读次数:313 本文档使用 MinDoc 发布 vue 官方 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" @click="fn">绑定v-on事件不传参数省略小括号 @[event]=fn"动态 真 v-else-if 假 显示 隐藏 v-html 渲染html标签 v-once 渲染一次 v-pre 原样输出 v-text 解析文本 @click.stop="doThis"> @click.stop.prevent="doThat"> @click.once="doThis"> @keyup.enter="submit" /> 自动转换为数字 去除首尾空白 ~作者:Yoby 创建时间:2020-07-22 21:31 更新时间:2024-12-05 13:26 上一篇: uniapp下一篇: vite