医院网站icp备案吗,做特卖的网站,优秀集团网站案例,中国男女做网站最近打算做一个项目#xff0c;涉及到一些前端的知识#xff0c;因上一次接触前端已经是三四年前了#xff0c;所以捡一些简单的功能做一下复习。
响应式函数#xff1a;reactive 和 ref属性绑定#xff1a;v-bind 和简写语法事件监听#xff1a;v-on 和简写语法 双向绑…最近打算做一个项目涉及到一些前端的知识因上一次接触前端已经是三四年前了所以捡一些简单的功能做一下复习。
响应式函数reactive 和 ref属性绑定v-bind 和简写语法事件监听v-on 和简写语法 双向绑定v-model]条件渲染v-if, v-else, v-else-if列表渲染v-for 和 key生命周期钩子onMounted, onUpdated, onUnmounted侦听器watch父子组件props 和 emit插槽Slots
响应式函数reactive 和 ref
reactive
Vue 的 reactive() API 用于声明响应式对象。它通过 JavaScript 的 Proxy 实现能够使对象包括数组和 Map、Set的属性响应式
import { reactive } from vueconst counter reactive({count: 0
})console.log(counter.count) // 0
counter.countreactive() 适用于对象类型的数据。创建的对象是深度响应式的修改任何嵌套的属性都会自动更新视图。
ref
ref() 用于声明响应式的基本数据类型如字符串、数字、布尔值等或复杂类型。ref() 返回的对象有一个 .value 属性来存储值。
import { ref } from vueconst message ref(Hello World!)console.log(message.value) // Hello World!
message.value Changedref 用于包裹值特别是基本数据类型。
注意事项
reactive 与 ref 的选择reactive 用于对象、数组ref 用于基本数据类型以及其他对象类型。ref 的值不可直接修改必须通过 .value。reactive 的对象不支持直接解除响应式但可以通过替换整个对象来解除响应式。 属性绑定v-bind 和简写语法 :
v-bind 语法
v-bind 用于动态绑定属性它可以绑定 JavaScript 表达式到元素的特性
div v-bind:iddynamicId/div简写形式为 :
div :iddynamicId/div注意事项
动态绑定可以用于 class、style、id 等 HTML 属性。绑定对象时Vue 会自动合并类和样式。 事件监听v-on 和简写语法
v-on 语法
v-on 用于监听 DOM 事件通常用来绑定事件处理器
button v-on:clickincrement{{ count }}/button简写形式为
button clickincrement{{ count }}/button注意事项
.once 修饰符只触发一次事件。.prevent 和 .stop 修饰符阻止默认行为和事件冒泡。 双向绑定v-model
v-model 语法
v-model 用于实现双向绑定将表单控件的值与组件状态同步
input v-modeltextv-model 自动处理绑定和事件监听的工作不需要手动写事件监听器。
自定义 v-model
v-model 允许自定义绑定属性和事件名称
ChildComp v-model:customPropdata/ChildComp条件渲染v-if, v-else, v-else-if
v-if 语法
v-if 用于根据条件渲染元素
h1 v-ifawesomeVue is awesome!/h1v-if 只会在条件为真时渲染元素。
注意事项
v-if 会移除 DOM 元素因此适用于不常更改的条件。使用 v-show 代替 v-if 时性能较好因为它只改变元素的 display 样式。 列表渲染v-for 和 key
v-for 语法
v-for 用于渲染数组或对象的列表
ulli v-fortodo in todos :keytodo.id{{ todo.text }}/li
/ulkey 是必需的它帮助 Vue 跟踪每个元素优化渲染性能。
注意事项
key 的作用是确保每个元素的唯一性帮助 Vue 更高效地更新 DOM。在渲染对象时最好将对象转换为数组进行渲染。 生命周期钩子onMounted, onUpdated, onUnmounted
onMounted
onMounted 钩子在组件挂载到 DOM 后调用。它常用于操作 DOM 或执行异步请求。
import { onMounted } from vueonMounted(() {console.log(Component is mounted);
});注意事项
onMounted 在组件首次渲染后调用不会在子组件的渲染前调用。可以使用 onBeforeMount 和 onAfterMount 来控制组件挂载过程。 侦听器watch
watch 语法
watch 用于响应式地监听数据变化
import { ref, watch } from vueconst count ref(0)watch(count, (newValue, oldValue) {console.log(Count changed:, newValue)
})深度侦听
可以通过设置 deep: true 来深度监听对象的嵌套属性
watch(myObject, (newVal) {console.log(Object changed, newVal);
}, { deep: true })父子组件props 和 emit
props 语法
父组件可以通过 props 向子组件传递数据
!-- ChildComp.vue --
script setup
const props defineProps({msg: String
})
/scriptemit 语法
子组件通过 emit 向父组件触发事件
script setup
const emit defineEmits([response])
emit(response, Hello from child)
/script注意事项
props 可以设置类型验证、默认值等属性。emit 支持传递多个参数可以定义事件名称和类型。 插槽Slots
默认插槽
父组件通过插槽向子组件传递内容
ChildCompThis is some slot content!
/ChildComp子组件通过 slot 显示插槽内容
!-- ChildComp.vue --
slot /具名插槽
可以使用具名插槽来区分不同的内容
ChildComptemplate #headerHeader content/templatetemplate #footerFooter content/template
/ChildComp作用域插槽
子组件可以将数据暴露给父组件的插槽
ChildComptemplate #default{ data }p{{ data }}/p/template
/ChildComp
