VUE 开发——Vue学习(二)
一、watch侦听器
作用:监视数据变化,执行一些业务逻辑或异步操作
简单写法
<div id="app">
<textarea v-model="words"></textarea>
</div>
<script>
const app = new Vue({
el:'#app',
data: {
words: ''
},
watch: {
//该方法会在数据变化时调用执行
//newvalue 新值 oldvalue 老值(一般不用)
words (newValue, oldValue){
console.log("变化了",newValue,oldValue)
}
}
})
</script>
完整写法
添加额外配置项
1.deep:true 对复杂类型深度监视
2.immediate:true 初始化立刻执行一次handler方法
data: {
obj: {
'words':'',
'lang':'italy'
},
result:'',
},
watch: {
obj: {
deep:true,
handler (newValue) {
console.log("修改了")
}
}
}
二、Vue生命周期
生命周期四个阶段:创建、挂载、更新、销毁
生命周期函数(钩子函数)
Vue生命周期过程中,会自动运行一些函数,被称为生命周期钩子
1.创建阶段(响应式数据)————beforeCreate、created
2.挂载(渲染模板)————beforeMount、mounted
3.更新阶段(修改数据,更新视图) ————beforeUpdate、updated
4.销毁阶段(销毁实例)————beforeDestory、destroyed
三、工程化开发
四、普通组件的注册使用
组件注册的两种方式:
1.局部注册:只能在注册的组件内使用
1.创建.vue文件
2.在使用的组件内导入并注册
2.全局注册:所有组件内都能使用
1.创建.vue文件
2.main.js中进行全局注册
使用:作为html标签使用 <组件名></组件名>
局部注册
app.vue
<template>
<div class="App">
<!-- 头部组件 -->
<Header></Header>
<!-- 主体组件 -->
<!-- 底部组件 -->
</div>
</template>
<script setup>
import Header from './components/Header.vue';
export default {
components: {
//‘组件名’:组件对象
Header:Header
}
}
</script>
<style scoped>
.app {
background-color: aqua;
}
</style>
组件使用
<template>
<div class="header">header</div>
</template>
<script setup>
</script>
<style scoped>
.header {
font-size: 30px;
background-color: rosybrown;
height: 200px;
}
</style>
五、组件的三大组成部分
结构template 、样式style 、逻辑script
组件样式冲突scoped
默认情况下:写在组件中的样式会全局生效 --> 因此很容易造成多个组件之间的样式冲突问题
1.全局样式:默认组件中的样式会作用到全局
2.局部样式:可以给组件加上scoped属性,可以让样式只作用于当前组件
六、组件通信
组件与组件之间的数据传递
组件关系分类:父子关系、非父子关系
父子关系:props和$emit
父子通信:
1.父组件通过props将数据传递给子组件
2.子组件利用$emit通知父组件修改更新
非父子关系:provide&inject 、eventbus
七、ref和$refs
作用:用于获取dom元素或组件实例
特点:查找范围 -> 当前组件内
原文地址:https://blog.csdn.net/weixin_74113429/article/details/142755519
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!