小白浅学Vue3(中)

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

目录
相关文章
|
11天前
|
JavaScript 前端开发 索引
「Vue3系列」Vue3 条件语句/循环语句
在 Vue 3 中,你可以使用条件语句来动态地控制模板中的渲染内容。Vue 提供了多种方式来实现条件渲染,包括 `v-if`、`v-else-if`、`v-else` 和 `v-show` 指令。
31 0
|
12天前
Vue3框架中让table合计居中对齐
Vue3框架中让table合计居中对齐
|
12天前
Vue3 子/父组件相互调用
Vue3 子/父组件相互调用
33 0
|
12天前
|
JavaScript
vue3 使用element plus 打包时 报错
vue3 使用element plus 打包时 报错
18 0
|
8天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue3——如何实现页面访问拦截
Vue3——如何实现页面访问拦截
|
12天前
Vue3 子传父 暴露数据 defineExpose
Vue3 子传父 暴露数据 defineExpose
Vue3 子传父 暴露数据 defineExpose
|
2天前
|
JavaScript 算法 前端开发
vue3和vue2的区别都有哪些
【4月更文挑战第15天】Vue3与Vue2在响应式系统(Proxy vs. Object.defineProperty)、组件模块化(Composition API vs. Options API)、数据变化检测(Reactive API vs. $watch)、虚拟DOM算法(基于迭代 vs. 基于递归)及Tree-Shaking支持上存在显著差异。Vue3的改进带来了更好的性能和灵活性,适合追求新技术的项目。Vue2则因其成熟稳定,适合维护大型项目。选择版本需根据项目需求、团队情况和技术追求来决定。
8 0
|
3天前
|
JavaScript
vue3+vite项目配置ESlint
vue3+vite项目配置ESlint
6 0
|
3天前
乾坤子应用配置(vue3+vite)
乾坤子应用配置(vue3+vite)
12 0