动态class 动态style
1.
● 格式1：<标签 :class=“变量” />
● 格式2：<标签 :class=“{类名1: 布尔值, 类名2: 布尔值}” />
○ 如果布尔值为true，就添加对应的类名
2.
<标签 :style=“{css属性名: 值}” />
- 可以和静态style共存
- 样式中带-属性写成小驼峰
过滤器
作用:对数据格式调整,在显示出来之后,进行一些格式调整
格式:
定义:是一个对象中有多个函数,每个函数就是一个过滤器 使用在视图中和插件表达式结合使用
分类 : 全局 局部
计算属性
作用:对现有的数据进行加工,得到新数据项
定义: { computed:{ 计算属性名1: function() { return} }}
使用 在模板中{
{ 计算属性名}} 在实例内部 this.计算属性名 与data数据项的使用一致
特点: 响应式的 如果它依赖的数据变化 ,则他会变化 缓存 : 如果在页面使用同一个计算属性多次,那么它会执行一次
计算属性-完整写法
computed: {
"属性名": {
set(值){
},
get() {
return "值"
}
}
}
created
他是一个函数 当vue 实例创建完成 会自动调用 这一类函数也称为钩子函数 生命周期函数
watch侦听器 可以监听值得变化
他可以监听数据的变化 一旦数据项有变化 ,它就会执行
格式: new Vue{
{ watch :{侦听器1: 组件1 : (新值,旧值) { }}}
watch: {
"要监听的属性名": {
immediate: true, // 立即执行
deep: true, // 深度监听复杂类型内变化
handler (newVal, oldVal) {
}
}
}
//修改data的对象的属性的值 (要深度监听) data->obj->(修改name的值)name
//v-model一起使用
watch: {
// 固定属性(设置监听哪些属性)
user: {
// 具体属性名(被监听)
handler(newVal, oldVal){
// 固定触发此函数
console.log(newVal);
},
immediate: true, // 马上监听触发
deep: true // 深度监听(监听name和age值的改变)
}
}
components
组件:可服用的vue实例
对页面上的各个部分,根据实际需要进行封装 组件
是一个封闭体系
格式: 定义 new Vue ( {
{componens :{ 组件 1: { 配置项 }}})
三大件 data() return{ //数据项}
template
methods
{
data(){
},
methods: {
}
// 声明计算属性
computed: {
//属性名字（计算属性名称）
//属性的值（计算属性处理函数）
计算属性名1 () {
// 对依赖的数据进行处理，且进行return
return
}，
计算属性名2 () {
// 对依赖的数据进行处理，且进行return
return
}
}
}