vue3知识点学习
近期在学习vue3知识点，做一个系统记录
脚手架安装与运行
npm init vue@latest
cnpm install
npm 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元素内容"
}
}
组件的使用
三个步骤引用组件
- 在script内，通过ES6的import引入组件
- 在components内注入组件
- 在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>
- 子在接收数据，可增加props校验
- 子不允许修改父传来的值
- 关于默认值：数字和字符串是可以直接default，但是如果是数组和对象，必须通过工厂函数返回默认值，例如：default(){return
[“空”]}
父子组件数据传递($emit 子传父)
子页面传值
methods:{
invokeParentMethod(){
//自定义事件
this.$emit("parentFunction","我是子页面的参数");
}
},
父页面取值
<childEvent @parentReceveValue="myFunction"/>
父页面获取到了子页面实时输入的数据<p>{{ childParam }}</p>
methods:{
myFunction(data){
this.childParam = data;
}
}
组件生命周期函数
- 创建期：beforeCreate created
- 挂载期：beforeMount mounted
- 更新期：beforeUpdate updated
- 销毁期：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('组件销毁之后');
},
}
4057
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
