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