1.计算属性:
使用计算属性来描述依赖响应式状态的复杂逻辑。
关键字computed:{}//计算属性,使用的时候和函数方法不一样,不需要加括号。
简单来说就是模板方法的复杂逻辑放到了计算属性中去。
2.计算属性缓存VS方法:
计算属性值会基于其响应式依赖被缓存。其仅会在其响应式依赖更新时才会重新计算。方法调用在每次重渲染发生时再次执行函数。
3.class绑定:
class是属性,可以使用v-bind进行绑定。可以绑定字符串,对象或者数组。
绑定对象以及多个对象的绑定:
绑定对象:
<p :class="{'active':isActive}">css样式绑定</p>
多个对象绑定:
<div :class='classObject'>isActive</div>
classObject:{'active':isActive,'text-danger':true}
绑定数组【了解即可】:
<div :class="[activeClass,errorClass]"></div>
return{activeClass:'active',errorClass:'text-danger'}
数组中可以是一个,也可以是多个。数组中可以使用三元运算符号。
绑定数组和对象:
<div :class="[{'active':isActive},errorClass]"></div>
return{isActive:true,errorClass:"text-danger"}
ps:数组和对象进行绑定的时候,只能是数组嵌套对象,不能让对象嵌套数组。
4.侦听器,侦听数据的变化:
关键字watch。同级的有data,computed,methods,watch。
侦听器中的方法名有讲究,要和data中的属性名一致。
方法有两个参数,newValue和oldValue。前者是改变之后的数据,后者是改变之前的数据。
5.表单输入绑定:
v-model:进行值绑定,也可以使用复选框。
v-model的修饰符:
.lazy:懒惰的,更改为在每次change事件之后更新数据。
.number:只接受输入的数字,其他的不管。
.trim:获取的时候去掉前后空格。
6.模板引用获取dom操作:
前提:内容改变使用模板语法{{msg}}进行插值;属性改变使用v-bind指令;事件使用v-on。
使用ref属性进行挂载。挂载结束后引用都在暴露到this.$refs之上,使用this.$refs后可以获取到ref挂载的dom节点。在获取到节点之后,可以使用原生js的方法,比如:innerHTML,.value等。 如果没有特别的需求,不要操作dom。
7.组件组成:
组件的优势:可复用性,vue中是组件式开发。单文件组件开发。
引入组件的步骤:
1.将单文件组件放到components文件夹中。
2.在app.vue文件中的<script>使用import...from...引入单文件组件。
3.在app.vue文件中的<script>注入组件。export default{components:{[组件名]}}
4.在app.vue的<template>中显示组件。以标签的形式显示组件。
【<style scoped>中的scoped有什么作用?
答:让当前样式只在当前组件中生效。
】
8.组件嵌套关系:
因为vue是组件式开发,所以组件之间进行前端页面的布局,组件之间可以相互嵌套, 就使用组件引入的部分对组件进行嵌套,谁使用谁嵌套。
9.组件注册方式:
就是组件的引入方式,分为全局注册和局部注册。
组件的引入方式三步:引入,注入,显示。
全局注册要在main.js中去注册。
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
首先导入文件。创建[createApp]并挂载[mount]。
通过creataApp函数来创建一个应用示例,从vue导入createApp。应用实例必须在调用了mount()才会渲染,该方法接受一个参数,可以是一个dom元素或者是一个Css选择器字符串。
公共资源:src目录下的assets文件夹作用是存放公共资源,如图片。
【注意:组件的注册要在创建[createApp]和挂载[mount]中间写】
局部注册的组件要单独放在components文件夹中。