旅游网站开发的需求,微信公众号管理工具,游戏推广好做吗,网页美工设计课程标准1、Vue3相关语法内容
1、赋值语法#xff08;ref#xff0c;reactive#xff09;
1.1、ref 、isRef、 shallowRef、triggerRef、customRef 支持所有的类型#xff08;原因没有泛型约束#xff09;
##### 1、ref
// 简单数据类型 可以直接通过 赋值
type M {name:string…1、Vue3相关语法内容
1、赋值语法refreactive
1.1、ref 、isRef、 shallowRef、triggerRef、customRef 支持所有的类型原因没有泛型约束
##### 1、ref
// 简单数据类型 可以直接通过 赋值
type M {name:string;
}
const name refM()// 复杂数据类型 可以直接通过 赋值
import type {Ref} from vue;
type M {name:string;
}
const name:RefM ref(屈小康)// 取值
name.value // 屈小康
name // Object// 为什么
ref返回值是一个ES6的class的类里面有一个 .value的属性所以取值和赋值 都必须通过 .value 固定语法### 2、isRefisRef(name) // 判断定义的内容是否为一个ref定义的内容 返回 true/false.### 3、shallowRef //浅层响应式
const a ref({name:a})
const b shallowRef(b)// 改变值const handleClick () {a.value.name aa // 页面展示 aab.value.name bb // 页面展示 b 页面没有发生改变但是值已经发生改变 (也就是说没有双向数据绑定)b.value {name:bb // 页面展示 bb 修改成功 这就是浅层 只绑定到 value属性}}
### 4、triggerRef 强制跟新 shallowRef### 5、customRef 自定义一个reffunction MyRef(value){return customRef((track,trigger){return {get(){track();},set(newVal){value newVal;trigger();},}})}
const name customRef(1);
name.value // 1 输出内容## 6、获取 元素 相当于 v2的 this.$refs
div refdom/div
// 获取 元素
const dom ref(); // dom 必须和 refdom 中的 dom 保持一致
// 获取
dom.value 相当于 this.$refs.dom1.2、 reactive、readonly、shallowReactive 支持引用数据类型泛型约束 reactive targetT // 源码实例 继承与 object。 const stu reactive({name:屈小康
})### 1.1 获取值stu.name // 屈小康
### 1.2 修改值
stu.name 张三
### 1.3 修改值错误做法
let obj {name:张三}
stu obj;
引用数据类型无法进行重新赋值### 2.1 readonly 只读属性
const name raeadonly({}) // 不可进行操作后续属性相对情况下如果你的readonly依赖于reactive这个时候修改reactive的时候就会变更### 3.1 shallowReactive 浅层的 只到第一个属性。
const stu reactive({age:14,person:{sex:男}
})
// 只影响到 stu.age2、to系列toRef、toRefs、toRaw
2.1 toRef
用法毫无卵用的用法不能说这种用法是错的只能说没有任何意义
const stu {name:张三};
const stus toRef(stu,name)
stus.name 李四; 值发生了改变但是页面不会变还是 张三如何发生改变
const stu reactive({name:张三}) // 这样进行 修改就好了
总结非响应式使用的时候 没有任何作用。只能修改响应式的。
2.2 toRefs
const stu {name:1,age:2};
const {name,age} toRefs(stu);
总结非响应式使用的时候 没有任何作用。只能修改响应式的。2.3 toRaw 脱离响应式对象 const stu {name:“1”,age:“2”}; toRaw(stu) // {name:“1”,age:“2”} 2、组件传值
2.1.1、父—子 基本数据传参 [不是TS版]defineProps
### Father 组件
template我是FatherSon :titletitle/Son
/template
script setupimport Son from ./b.vue;
import { ref } from vue;const title ref(把这个值传给孩子组件);/script#### Son 组件templatediv我是孩子{{ title }}/div
/template
script setup
import { defineProps } from vue;## 简单 用法 不带默认值
defineProps ({title: String,
});## 带默认值
const props defineProps({title: {type: String,default: 我是默认值}
})/script2.1.2、父—子 事件数据传参 [不是TS版]defineExpose父调用子组件的方法
###### Fatner
template我是FatherSon refson/Sonbutton clickhandleClick点我/button
/template
script setupimport Son from ./b.vue;
import { ref } from vue;
const son ref(null);const handleClick () {son.value.handleClick();
}/script###### Sontemplatediv我是孩子/div
/template
script setup
import { defineProps } from vue;const handleClick () {console.log(我被点击了)
}defineExpose({ handleClick })/script
2.1.3 子— 父 事件传参【不是TS版本】$emit
###### Fatner
template我是FatherSon childEmitchildEmit/Son
/template
script setupimport Son from ./b.vue;
import { ref } from vue;const childEmit (value) {console.log(value)
}/script########### Son
templatediv我是孩子button clickhandleSend点我/button/div
/template
script setup
import { defineProps } from vue;const emit defineEmits([childEmit]);const handleSend () {emit(childEmit, 数据)
}
/script
2.2.1 基本数据类型传参TS版本withDefaults
template我是FatherSon :titletitle/Son/template
script setup langtsimport Son from ./b.vue;
import { ref } from vue;const title refstring()/scripttemplatediv我是孩子{{ props.title }}/div
/template
script setup langtsimport { defineProps } from vue;const props withDefaults(defineProps{title: string,}(),{title: 默认值}
)
/script
