小白浅学Vue3（中）

2024-01-30 130

版权

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

简介： 小白浅学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

小白浅学Vue3（中）

数组变化监听

计算属性

Class绑定

Style绑定

侦听器

v-model表单的输入绑定

模板引用

Vue组件

组件的生命周期钩子

组件嵌套关系

组件注册

组件数据传递props

热门文章

最新文章

相关课程

相关电子书

相关实验场景

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

小白浅学Vue3（中）

数组变化监听

计算属性

Class绑定

Style绑定

侦听器

v-model表单的输入绑定

模板引用

Vue组件

组件的生命周期钩子

组件嵌套关系

组件注册

组件数据传递props

热门文章

最新文章

相关课程

相关电子书

相关实验场景