Vue3【计算属性、Class绑定、Style绑定、侦听器、表单输入绑定、模板引用、组件注册方式、组件嵌套关系、组件注册方式】(三)-全面详解（学习总结---从入门到深化）

👏作者简介：大家好，我是小童，Java开发工程师，CSDN博客博主，Java领域新星创作者
📕系列专栏：前端、Java、Java中间件大全、微信小程序、微信支付、若依框架、Spring全家桶
📧如果文章知识点有错误的地方，请指正！和大家一起学习，一起进步👀
🔥如果感觉博主的文章还不错的话，请👍三连支持👍一下博主哦
🍂博主正在努力完成2023计划中：以梦为马，扬帆起航，2023追梦人

计算属性

侦听器

表单输入绑定

模板引用

组件组成

组件嵌套关系

创建组件及引用关系

组件注册方式

计算属性

模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑

<template>
    <div>
        <h3>{{ ittxc.name }}</h3>
        <p>{{ ittxc.content.length > 0 ? 'Yes' : "No" }}</p>
    </div>
</template>
<script>
  export default {
    data(){
        return{
            ittxc:{
                name:"xiaotong",
                content:["前端","Java","python"]
           }
       }
   }
}
</script>

应用计算属性

<template>
    <div>
        <h3>{{ itxiaotong.name }}</h3>
        <p>{{ getReadBook }}</p>
    </div>
</template>
<script>
export default {
    data(){
        return{
            itxiaotong:{
                name:"xiaotong",
                content:["前端","Java","python"]
           }
       }
   },
    computed:{
        getReadBook(){
           return this.itxiaotong.content.length > 0 ? 'Yes' : "No"
       }
   }
}
</script>

计算属性缓存 vs 方法

你可能注意到我们在表达式中像这样调用一个函数也会获得和计算属性相同的结果

<template>
    <div>
        <h3>{{ itxiaotong.name }}</h3>
        <p>{{ getReadBook() }}</p>
    </div>
</template>
<script>
  export default {
    data(){
        return{
            itxiaotong:{
                name:"童小纯",
                content:["前端","Java","python"]
           }
       }
   },
    methods:{
        getReadBook(){
             return this.itxiaotong.content.length > 0 ? 'Yes' : "No"
       }
   }
}
</script>

重点区别：

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

方法：方法调用总是会在重渲染发生时再次执行函数

实时效果反馈

1. 下列那个是计算属性关键字：

A data

B methods

C computed

D vue

Class绑定

数据绑定的一个常见需求场景是操纵元素的 CSS class 列表，因为 class 是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 class 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组

绑定对象

<template>
    <div :class="{ active: isActive,'text-danger': hasError }">isActive</div>
</template>
<script>
 export default {
    data(){
        return{
            isActive:true,
            hasError:true
       }
   }
}
</script>

多个对象绑定

<template>
    <div :class="classObject">isActive</div>
</template>
<script>
  export default {
    data() {
        return {
            classObject: {
                active: true,
                'text-danger': true
           }
       }
   }
}
</script>

绑定数组

<template>
    <div :class=" [activeClass,errorClass]">isActive</div>
</template>
<script>
 export default {
    data() {
        return {
            activeClass: 'active',
            errorClass: 'text-danger'
       }
   }
}
</script>

如果你也想在数组中有条件地渲染某个 class，你可以使用三元表达式：

<template>
    <div :class="[isActive ? 'active' : '']">isActive</div>
</template>
<script>
  export default {
    data() {
        return {
            isActive:true
       }
   }
}
</script>

数组和对象

<template>
    <div :class="[{ 'active':isActive }, errorClass]"></div>
</template>
<script>
  export default {
    data() {
        return {
            isActive:true,
            errorClass:"text-danger"
       }
   }
}
</script>

温馨提示

数组和对象嵌套过程中，只能是数组嵌套对象，不能反其道而行

Style绑定

数据绑定的一个常见需求场景是操纵元素的 CSS style列表，因为 style 是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组

绑定对象

<template>
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">Style绑定</div>
</template>
<script>
  export default {
    data() {
        return {
            activeColor: 'red',
            fontSize: 30
       }
   }
}
</script>

<template>
    <div :style="styleObject">Style绑定</div>
</template>
<script>
  export default {
    data() {
        return {
            styleObject: {
                color: 'red',
                fontSize: '30px'
           }
       }
   }
}
</script>

绑定数组

我们还可以给 :style 绑定一个包含多个样式对象的数组

<template>
    <div :style="[baseStyles]">Style绑定
</div>
</template>
<script>
  export default {
    data() {
        return {
            baseStyles:{
                color:"green",
                fontSize:"30px"
           }
       }
   }
}
</script>

侦听器

我们可以使用 watch 选项在每次响应式属性发生变化时触发一个函数

<template>
    <p>{{ message }}</p>
    <button @click="clickHandle">修改数据</button>
</template>
<script>
  export default {
    data() {
        return {
            message:"前端"
       }
   },
    methods:{
        clickHandle(){
            this.message = "Python"
       }
   },
    watch:{
        message(newValue,oldValue){
            console.log(newValue,oldValue);
       }
    }
}
</script>

实时效果反馈

1. 下列那个是侦听器关键字：

A data

B methods

C computed

D watch

表单输入绑定

在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦, v-model 指令帮我们简化了这一步骤

<template>
    <input type="text" v-model="message">
    <p>{{ message }}</p>
</template>
<script>
  export default {
    data() {
        return {
            message:""
       }
   }
}
</script>

复选框

单一的复选框，绑定布尔类型值

<template>
    <input type="checkbox" id="checkbox" v-model="checked" />
    <label for="checkbox">{{ checked }}</label>
</template>
<script>
  export default {
    data() {
        return {
            checked:true
       }
   }
}
</script>

修饰符

v-model 也提供了修饰符： .lazy 、 .number 、 .trim

.lazy

默认情况下， v-model 会在每次 input 事件后更新数据。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据

<template>
    <input type="text" v-model.lazy="message">
    <p>{{ message }}</p>
</template>
<script>
  export default {
    data() {
        return {
            message:""
       }
   }
}
</script>

实时效果反馈

1. 下列那个是表单输入惰性属性：

A .lazy

B .number

C .trim

D .type

模板引用

虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。要实现这一点，我们可以使用特殊的 ref attribute

挂载结束后引用都会被暴露在 this.$refs 之上

<template>
    <div ref="container">容器</div>
    <input type="text" ref="username">
    <button @click="getUserName">获取数据
</button>
</template>
<script>
  export default {
    methods:{
        getUserName(){
          console.log(this.$refs.container);
          console.log(this.$refs.username.value);
       }
   }
}
</script>

实时效果反馈

1. 下列直接获取DOM，读取 ref 正确的方式是：

A this.ref

B this.refs

C this.$ref

D this.$refs

组件组成

组件最大的优势就是可复用性

当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件(简称 SFC)

组件组成结构

<template>
    <div>承载标签</div>
</template>
<script>
   export default {}
</script>
<style scoped>
</style>

组件引用

<template>
  <TemplateDemo />
</template>
<script>
  import TemplateDemo from "./components/TemplateDemo.vue"
  export default {
     components: {
        TemplateDemo
  }
}
</script>

实时效果反馈

1. 在Vue单文件组件中，样式中的 scoped 的作用是：

A 生效作用域，只在当前组件内生效

B 生效作用域，全局生效

C 引用组件，在引用组件中生效

D 单文件组件必须存在的结构

组件嵌套关系

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构

这和我们嵌套 HTML 元素的方式类似，Vue 实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑

创建组件及引用关系

Header

<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

<template>
    <div class="main">
        <h3>Main</h3>
        <Article />
        <Article />
    </div>
</template>
<script>
  import Article from './Article.vue';
  export default {
    components: {
        Article
   }
}
</script>
<style scoped>
.main{
     float: left;
    width: 70%;
    height: 400px;
    border: 5px solid #999;
    box-sizing: border-box;
    border-top: 0px;
}
</style>

Aside

<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: right;
    width: 30%;
    height: 400px;
    border: 5px solid #999;
    box-sizing: border-box;
    border-left: 0;
    border-top: 0;
}
</style>

Article

<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: 50px;
    background: #999;
}
</style>

Item

<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: 10px;
    background: #999;
}
</style>

组件注册方式

一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import GlobalComponent from "./components/GlobalComponent.vue"
const app = createApp(App);
app.component("GlobalComponent",GlobalComponent)
app.mount('#app');

<template>
    <h3>全局应用组件</h3>
</template>

局部注册

全局注册虽然很方便，但有以下几个问题:

局部注册需要使用 components 选项

<template>
  <GlobalComponent />
</template>
<script>
 import GlobalComponent from "./components/GlobalComponent.vue"
 export default {
  components:{
    GlobalComponent
   }
}
</script>
<style>
*{
  margin: 0;
  padding: 0;
}
</style>