vue笔记(四)指令、v-bind、冒号、#default、defineProps等宏编译器

文章目录指令v-bind指令v-on指令v-model指令v-if/v-else-if/v-else指令v-show指令v-for指令v-slot指令vue的绑定规则defineProps等宏编译器definePropsdefineProps数组语法(简单声明)defineProps对象语法(带验证)(推荐)defineProps是如何实现参数传递的呢?指令指令是vue在模板语法中的核心功能是将响应式数据映射到视图的最主要方式。”6大核心指令是早期的说法vue1就已经成型了所以v-slot不再6大指令之内。v-bind指令用于动态绑定属性简写:(冒号)或者:是v-bind的语法糖。v-on指令用于事件监听简写或者是v-on的语法糖。常见的如clickadd 相当于 v-on:clickadd inputhandleInput 相当于 v-on:inputhandleInput # 监听input事件 submit.preventonSubmit 相当于 v-on:submit.preventonSubmit # 可以同时使用修饰符v-model指令用于双向绑定。v-if/v-else-if/v-else指令用于条件渲染。v-show指令用于(显示/隐藏)。v-for指令用于列表渲染。v-slot指令v-slot指令和slot标签不是一回事。slot标签是占位符v-slot是指令两者经常配合使用。简写#(井号)或者#是v-slot的语法糖。#default相当于v-slot:default。例如这句话的意思是fetchData.vue的默认插槽替换为该template的内容。FetchDataurl/mysite/api/sysUser/query:params{ pageNum: 1, pageSize: 3 }template#default{ data, loading, error, refresh }vue的绑定规则指令绑定值要求示例v-bind(:)任意 JS 表达式:classclassName、:stylestyleObjv-on()方法名或 JS 表达式clickhandle、clickcountv-if/v-else-if布尔值表达式v-ifisVisiblev-for可迭代数据v-foritem in listv-model响应式变量v-modelusernamev-show布尔值表达式v-showisShownv-html字符串v-htmlhtmlContentv-slot(#)解构对象#default{ data, loading }defineProps等宏编译器这些都是内置的函数。defineProps # 定义组件接收的 propsdefineEmits # 定义组件触发的事件defineExpose # 暴露组件内部的属性/方法给父组件defineOptions # 定义组件选项(如 name、inheritAttrs)defineSlots # 定义插槽类型(TypeScript 中使用)defineModel # 简化 v-model 绑定(Vue 3.4)definePropsdefineProps数组语法(简单声明)scriptsetup// 只声明 prop 名称不验证类型defineProps([url,params,immediate])/scriptdefineProps对象语法(带验证)(推荐)scriptsetupdefineProps({url:{type:String,required:true},params:{type:Object,default:()({})// 对象/数组默认值必须用工厂函数},immediate:{type:Boolean,default:true}})/scriptdefineProps是如何实现参数传递的呢?在父组件中通过:属性绑定来传递参数例如FetchDataurl/mysite/api/sysUser/query:params{ pageNum: 1, pageSize: 3 }