目录
计算属性
侦听器
表单输入绑定
模板引用
组件组成
组件嵌套关系
创建组件及引用关系
组件注册方式
计算属性
模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑
<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
挂载结束后引用都会被暴露在 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
组件组成结构
<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>
