近期在学习vue3知识点，做一个系统记录

脚手架安装与运行

npm init vue@latestcnpm installnpm run dev

知识点

条件渲染

列表循环，key状态管理

事件处理

内联事件处理

方法事件处理

事件修饰符

<a @click.prevent="method01" href="https://www.baidu.com">百度一下，你就知道</a>

数组变化侦听

计算属性

计算属性与方法的区别：计算属性，在表达式没有变更场景下，只执行一次。而方法会执行多次

<p>方法实现：{{ computedOne }}</p>//计算属性
computed:{computedOne(){return this.objectOne.items.length>0 ? 'yes':'no';}}

class绑定

操作元素的class

<p>class多对象绑定方式：:class="{'fontClassOne':isActive,'text-danger':isDanger}"</p>
<p :class="{'fontClassOne':isActive,'text-danger':isDanger}">样式绑定()</p>
<p :class="classObjectOne">样式绑定(多对象绑定)</p>
<p :class="[isActiveArray,isDangerArray]">样式绑定(数组绑定)</p>
<p :class="[isActive?'text-danger':'']">样式绑定(三元运算符)</p>data(){return{isActive:true,isDanger:true,classObjectOne:{'fontClassOne':true,'text-danger':true}}
},
<style>
.fontClassOne{font-size: 23px;}.text-danger{color: red;}
</style>

style绑定

style标签中的scoped作用，让当前样式只在当前组件中生效

<h3>对象绑定</h3>
<p :style="{color:styleColor,fontSize:styleSize+'px'}">style绑定01</p>
<p :style="styleObjectOne">style绑定对象</p>data(){return{styleColor:'red',styleSize:20,styleObjectOne:{color:'red',fontSize:20+'px',}}
}

侦听器

什么是具有响应式的数据？就是在data中所声明的数据，通过双花括号模版语法绑定的数据,可以监听到,侦听器的方法命名要求，和响应式数据一致

<p>{{ message }}</p>
<button @click="changeMessage">修改响应式数据</button>
watch:{message(newValue,oldValue){console.log("侦听器在执行,newValue->"+newValue+"oldValue->"+oldValue)}
}

表单输入绑定 v-model指令

<form>v-model指令<input type="text" v-model="inputMessage"><p>{{ inputMessage }}</p><input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label>v-model指令带修饰符<input type="text" v-model.lazy="inputMessageXiu"><p>{{ inputMessageXiu }}</p>
</form>

$refs 获取dom元素

<div class="container" ref="container">{{ content }}</div>
<button @click="getDomElement">获取dom元素</button>
methods:{getDomElement(){//innerHTML：原生js属性console.log( this.$refs.container);this.$refs.container.innerHTML="我修改了dom元素内容"}
}

组件的使用

三个步骤引用组件

1. 在script内，通过ES6的import引入组件
2. 在components内注入组件
3. 在templath中通过标签形式显示组件

$组件嵌套

组件局部注册

直接在当前页面引入

组件全局注册

在main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import HeaderQuan from './pages/HeaderQuan.vue'
const app = createApp(App);
// 在中间写组件的注册，否则无用
app.component('HeaderQuan',HeaderQuan)
app.mount('#app')

要实现如下图的布局

header

<template><h3>Header(局部注册，只有在引入页面可以使用)</h3>
</template>
<style scoped>h3{width: 100%;height: 100px;border: 5px solid #999;text-align: center;line-height: 100px;box-sizing: border-box;}
</style>

main

<template><div class="main"><h3>Main</h3><Article /><Article /></div>
</template>
<script>
import Article from './Article.vue';
export default{components:{Article}
}
</script>
<style scoped>
.main{float: left;width: 70%;height: 400px;border: 5px solid #999;box-sizing: border-box;
}
</style>

aside

<template><div class="aside"><h3>Aside</h3><Item/><Item/><Item/></div>
</template>
<script>
import Item from './Item.vue'
export default{components:{Item}
}
</script>
<style scoped>
.aside{float: right;width: 30%;height: 400px;border: 5px solid #999;box-sizing: border-box;
}
</style>

article

<template><h3>Article</h3>
</template>
<style scoped>
h3{width: 80%;margin: 0 auto;text-align: center;line-height: 100px;box-sizing: border-box;background: #999;margin-top: 50px;
}
</style>

item

<template><h3>Item</h3>
</template> 
<style scoped>
h3{width: 80%;margin: 0 auto;text-align: center;line-height: 100px;box-sizing: border-box;background: #999;margin-top: 10px;
}
</style>

app.vue

<template><Header /><Main /><Aside />
</template>
<script>
import Header from './pages/Header.vue';
import Main from './pages/Main.vue';
import Aside from './pages/Aside.vue';
export default{components:{Header,Main,Aside}
}
</script>

父子组件数据传递( props父传子)

props传递，只能是父给子传

实现方案

父引入子
父放值

动态数据传递<child :titleDongtai="message" :parentObject="wifeObject" :parentArray="wifes" :parentNum="age" name="fanbin"/>

子取值

 props:["title","name","titleDongtai","parentArray","parentObject"]
<template><h1>child</h1><p>父页面传来的静态数据(字符串)---》{{ name }}</p><p>父页面传来的动态数据(字符串)---》{{ titleDongtai }}</p><p>父页面传来的动态数据(数字)---》{{ parentNum }}</p><p>父页面传来的动态数据(数组)---》{{ parentArray }}</p><ol><li v-for="wife,index in parentArray" :key="index">{{ wife }}</li></ol><p>父页面传来的动态数据(对象)---》{{ parentObject }}</p>
</template>

1. 子在接收数据，可增加props校验
2. 子不允许修改父传来的值
3. 关于默认值：数字和字符串是可以直接default，但是如果是数组和对象，必须通过工厂函数返回默认值，例如：default(){return
   [“空”]}

父子组件数据传递($emit 子传父)

子页面传值

methods:{
invokeParentMethod(){//自定义事件this.$emit("parentFunction","我是子页面的参数");}
},

父页面取值

<childEvent @parentReceveValue="myFunction"/>
父页面获取到了子页面实时输入的数据<p>{{ childParam }}</p>methods:{
myFunction(data){this.childParam = data;}
}

组件生命周期函数

1. 创建期：beforeCreate created
2. 挂载期：beforeMount mounted
3. 更新期：beforeUpdate updated
4. 销毁期：beforeUnmount unmounted

export default{data(){return{message:"更新之前",friends:[]}},methods:{changeMessage(){this.message="更新之后。"}},computed:{},watch:{message(a,b){console.log("watch开始工作了,修改前-->"+a+" 修改后-->"+b)}},components:{},props:{},beforeCreate(){console.log('组件创建之前');},created(){console.log('组件创建之后');},beforeMount(){console.log('组件渲染之前');},mounted(){console.log('组件渲染之后');console.log('获取dom元素  '+this.$refs.fanbin)this.friends = [{"name":"张三1","age":111},{"name":"张三2","age":222},{"name":"张三3","age":333}]},beforeUpdate(){console.log('组件更新之前');},updated(){console.log('组件更新之后');},beforeUnmount(){console.log('组件销毁之前');},unmounted(){console.log('组件销毁之后');},
}