vue
1.0、 组件化的实际操作
就是拼积木,把组件组合在一起使用
引入组件:
<script>
import 组件名 from '路径/组件名'
</script>
组件注册:
export default {
components:{ '自定义组件名':组件名 }
}
使用组件:
<template>
<自定义组件名></自定义组件名>
<自定义组件名 />
</template>
推荐:
<home-header></home-header>
<home-main></home-main>
<home-footer />
2.0 v-bind
把标签属性 或 class 或 style 添加动态属性,让属性变为数据驱动
简写 :
语法: <标签 v-bind:属性="表达式"></标签>
简写: <标签 :属性="表达式"></标签>
对class进行数据动态绑定
语法: <标签 v-bind:class="{class名:表达式,class名1:表达式}"></标签>
class键值返回的结果如果为true就显示class名,如果为false就隐藏class名
<标签 v-bind:class="表达式"></标签> // 表达式需返回一个类名
简写: <标签 :class="表达式"></标签>
对style进行数据动态绑定
语法: <标签 v-bind:style="{color:'red',background:表达式}"></标签>
<标签 v-bind:style="变量"></标签>
简写: <标签 :style="变量"></标签>
3.0 三个其他指令
v-pre
作用:让标签里的胡须Mustach表达式失效
<标签 v-pre>{{ message }}</标签>
v-once
作用:让标签李的胡须Mustach表达式只渲染一次
<标签 v-once>{{ message }}</标签>
v-cloak
作用:在页面没有渲染完毕时,会出现Mustach语法影响页面显示,v-cloak隐藏胡须表达式,是在CDN引入时才会出现的情况,脚手架搭建的项目不存在显示的情况,需要配合CSS样式使用
<style>
[v-cloak]{
display: none;
}
</style>
<div id="app">
<h1 v-cloak>{{message}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data(){
return {
message:'我是指令v-cloak的展示内容'
}
}
})
</script>
4.0 计算属性computed
配置选项,使用方法与methods是一样的,计算属性用于处理一堆逻辑运算,并且返回一个结果,直接只用这个函数名就相当于这个结果。
export default{
methods:{},// 方法们 方法名()
computed:{
函数名(){
// 有一堆逻辑运算
return '结果'
}
} // 计算属性
}
特点:
1.直接使用函数名就等于是返回的结果 —>函数名
2.如果计算属性中依赖的数据发生改变,就会自动重新计算
3.依赖缓存,就是数据如果没有发生改变,就直接使用上一次的结果
配置选项 methods 与 computed两者之间区别:
1. methods 调用需要使用(), computed计算属性直接只用函数名
2. 两者写法都一样,都是方法,但是computed计算属性必须有一个返回值,但是methods不一定
3. 当数据没有发生改变,调用methdos每次都会重新计算代码,computed有依赖缓存,只会执行一次代码,之后就返回之前的结果
5.0 filters过滤器
用于处理页面显示格式的函数
<template>
<div>
{{ message | 函数名 }}
</div>
</template>
export default{
components:{},
data(){
return {
message:数据
}
},
methods:{},
computed:{},
filters:{
函数名(参数){
// 处理参数代码
return '结果'
}
}
}
6.0 watch侦听器
用于监听数据的变化,数据发生改变,就会通知侦听器,进行相应代码的执行
export default{
data(){
return {
msg:'xxx'
}
},
methods:{},
computed:{},
filters:{},
components:{},
watch:{
msg(newVal,oldVal){
// newVal 变化后的新值
// oldVal 变化前的值
// 执行相应代码
}
}
}
computed(计算属性)和watch差异:
1.computed是计算一个新的属性,并将该属性挂载到Vue实例上,而watch是监听已经存在且已挂载到Vue实例上的数据,所以用watch同样可以监听computed计算属性的变化;
2.computed本质是一个惰性求值的观察者,具有缓存性,只有当依赖变化后,第一次访问computed值,才会计算新的值。而watch则是当数据发送变化便会调用执行函数;
3.从使用场景上来说,computed适用一个数据被多个数据影响,而watch使用一个数据影响多个数据
7.0生命周期
Vue组件的创建及挂载、更新到销毁的过程,就跟人的一生一样
共4个阶段,8生命钩子函数,会在组件创建之后自动执行对应的生命周期钩子函数,作用是让用户可以在对应的时间添加自己的代码
分为4个阶段
创建前后:
beforeCreate 实例对象创建前
created 实例对象创建后 (页面初始化时使用)
挂载前后:
beforeMount 挂载DOM节点前 (创建了虚拟DOM ,页面真实DOM还不存在)
mounted 挂载DOM节点后 (挂载了真实Dom)
更新前后:
beforeUpdate 更新前
updated 更新后
销毁前后:
beforeDestroy 销毁前
destroyed 销毁后