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

目录
打赏
0
0
0
0
48
分享
相关文章
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
183 64
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
169 60
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
168 1
|
3月前
|
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
150 58
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
146 3
从Vue 2到Vue 3的演进
从Vue 2到Vue 3的演进
100 17
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
120 17
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
76 8
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
64 1

热门文章

最新文章

相关实验场景

更多