小白浅学Vue3（中）

2024-01-30 99

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 小白浅学Vue3

小白浅学Vue3（上）：https://developer.aliyun.com/article/1431690

数组变化监听

变更方法

Vue能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。

以下方法引起UI自动更新

Push()、pop()、shift()、unshift()、sort()、reverse()

<button @click="addname">add name</button>
    <ul>
        <li v-for="(name,index) of names" :key="index">{{ name }}</li>
    </ul>

methods:{
        addname(){
            //pushu()方法引起UI自动更新
            //this.names.push("小明");
            //concat（）不会引起UI自动更新
            this.names = this.names.concat(["小王"])
        },

计算属性

计算属性：计算属性值基于响应式依赖缓存。一个计算属性仅会在响应式依赖更新时才重新计算

方法：方法调用总会重新渲染发生时执行函数

<p>{{ countname }}
    {{ getcountnames() }}
</p>
computed: {
        countname(){
            return this.names.length > 0 ? 'ok' : 'no'
        }
    },

methods:{
        countname(){
            return this.names.length > 0 ? 'ok' : 'no'
        },

Class绑定

Vue为class的v-vind提供了功能增强

单个calss绑定

<template>
    <p :class="{'active':isActive}">class</p>
</template>
<script>
export default{
    data(){
        return{
            isActive:true
        }
    }
}
</script>
<style>
.active{
    color: burlywood;
    font-size: 35px;
}
</style>

多calss对象绑定

<template>
    <p :class="classObject">class</p>
</template>
<script>
export default{
    data(){
        return{
            classObject:{
                active:true,
                active2:true
            }  
        }
    }
}
</script>
<style>
.active{
    color: burlywood;
    font-size: 35px;
}
.active2{
    background-color: rgb(170, 222, 135);
}
</style>

Class数组绑定

<template>
    <p :class="classObject">class</p>
    <p :class="[arractive,arractive2]">class数组</p>
</template>
<script>
export default{
    data(){
        return{
            classObject:{
                active:true,
                active2:true
            },
            arractive:"active",
            arractive2:"active2"
        }
    }
}
</script>
<style>
.active{
    color: burlywood;
    font-size: 35px;
}
.active2{
    background-color: rgb(170, 222, 135);
}
</style>

Style绑定

对象绑定

<p :style="{color:activeColoe,fontSize: fontSize}">style</p>

<p :style="styleObject">style2</p>

侦听器

侦听页面响应式数据的变化

<template>
    <p>{{ message }}</p>
    <button @click="updata">点击</button>
</template>
<script>
export default{
    data(){
        return{
            message:"hello"
        }
    },
    methods:{
        updata(){
            this.message="word"
        }
    },
    watch:{
        message(newValue,oldValue){
            console.log(newValue+":"+oldValue)
        }
    }
}
</script>

v-model表单的输入绑定

v-model修饰符常用 .lazy .number .trim

.lazy 懒惰的输入完在显示

.number 只接受输入的值为数字

.trim 去掉前后空格

<template>
<form>
    <input type="text" v-model="msg">
    <input type="text" v-model.lazy="msg">
    <input type="text" v-model.number="msg">
    <p>{{ msg }}</p>
  <!-- v-model修饰符常用 .lazy .number .trim
    .lazy 懒惰的  输入完在显示
    .number 只接受输入的值为数字
    .trim 去掉前后空格
-->
</form>
</template>
<script>
export default{
    data(){
        return{
            msg:""
        }
    }
}
</script>

模板引用

使用ref 属性，挂载结束后引用会暴露在$refs.

<template>
<div class="container" ref="container">{{ container }}</div>
<button @click="getinfo">获取数据</button>
</template>
<script>
export default{
    methods:{
        getinfo(){
            console.log(this.$refs.container)
        }
    },
    data(){
        return{
            container:"demo"
        }
    }
}
</script>

console.log(this.$refs.container.innerHTML="test")

<template>
    <input type="text" ref="name">
    <button @click="getinfo">获取数据</button>
<div class="container" ref="container">{{ container }}</div>
</template>
<script>
export default{
    methods:{
        getinfo(){
            this.$refs.container.innerHTML= this.$refs.name.value
        }
    },
    data(){
        return{
            container:"demo",
            name:""
        }
    }
}
</script>

Vue组件

组件的优点：可复用性

组件构成

<template>
</template>
<script>
export default{
}
</script>
<style>
</style>

组件引入

组件的生命周期钩子

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

创建期：beforeCreate、created

挂载期：beforeMount 、mounted

更新期：beforeUpdate、updated

销毁期：beforeUnmount 、unmountd

<script>
export default{
beforeCreate(){
    console.log("创建之前")
},
created(){
    console.log("创建之后")
},
beforeMount(){
    console.log("挂载之前")
},
mounted(){
    console.log("挂载之后")
},
beforeUpdate(){
    console.log("更新之前")
},
updated(){
    console.log("更新之后")
},
beforeUnmount(){
    console.log("销毁之前")
},
unmountd(){
    console.log("销毁之后")
}
}
</script>

组件嵌套关系

组件允许将ui划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际项目中，组件是层层嵌套的树形结构，每个组件内封装自定义内容与逻辑。

取消main.css依赖

Article.vue

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

Item.vue

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

Hrader.vue

<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.vue

<template>
    <div class="main">
        <H3>Main</H3>    
        <Article/>
        <Article/>
        <Article/>
    </div>
</template>
<script>
import Article from "./article.vue"
export default{
    components:{
        Article
    }
}
</script>
<style scoped>
.main{
    float: right;
    width: 85%;
    height: 500px;
    border: 5px solid #999;
    box-sizing: border-box;
    text-align: center;
}
</style>

Aside.vue

<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: left;
    width: 14%;
    height: 500px;
    border: 5px solid #999;
    box-sizing: border-box;
    text-align: center;
}
</style>

效果

组件注册

局部注册(建议使用)

在一个组件中进行注册

全局注册

在main.js中全局注册

全局注册很方便，但是在全局注册中，没有被使用的组件无法在生成打包的时候被自动移除(“tree-shaking”)，依然出现在打包后的js文件中。

在项目嵌套较多的时候，全局注册的依赖关系不明确，可能影响应用长期维护性。

组件数据传递props

组件之间是可以传递数据，而传递数据的解决方案是props，注：props传递数据只能父级传递子级。

组件传递的数据类型：数字、对象、数字等。任何类型的值都可以作为props的值传递

组件间传递数据应用场景: 父传子

Parent.vue

<template>
    <h3>Parent</h3>
    <input v-model="msg">
    <Child :title="msg" test="数据"/>
</template>
<script>
import Child from './Child.vue';
export default{
    data(){
        return{
            msg:""
        }
    },
    components:{
        Child
    }
}
</script>

Child.vue

<template>
    <h3>Child</h3>
    <p> {{ title }} </p>
    <p>{{ test }}</p>
</template>
<script>
export default{
    data(){
        return{
        }
    },
    //接收数据
    props:["title","test"]
}
</script>

传递效果

小白浅学Vue3（下）：https://developer.aliyun.com/article/1431693