Vue学习02

1.指令修饰符

通过“.”指明一些指令后缀，不同的后缀封装了不同的处理操作 —> 简化代码

@keyup.enter   ->按键回车监听

<input @keyup.enter="fn" v-model="username" type="text">

@v-model.trim  ->去除首尾空格

<input v-model.trim="username" type="text">

@v-model.number       ->转数字

<input v-model.number="age" type="text">

事件修饰符：

@事件名.stop       ->阻止冒泡

    <div @click="fatherFn" class="father">
      <div @click.stop="sonFn" class="son">儿子</div>
    </div>

@事件名.prevent  ->阻止默认行为

<a @click.prevent href="http://www.baidu.com">阻止默认行为</a>

2.v-bind对样式控制的增强-操作class

语法：class="对象/数组"

1、对象->键就是类名，值是布尔值。if为true，有这个类，否则无。

<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>

2、当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>

3.v-bind对有样式控制的增强-操作style

语法：style="样式对象"

<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

4.v-model应用于其他表单元素

常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值

它会根据 控件类型 自动选取 正确的方法 来更新元素

输入框  input:text   ——> value
文本域  textarea     ——> value
复选框  input:checkbox  ——> checked
单选框  input:radio   ——> checked
下拉菜单 select    ——> value

5.computed 计算属性

基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。

1. 声明在 computed 配置项中，一个计算属性对应一个函数

2. 使用起来和普通属性一样使用 {{ 计算属性名}}

 需要注意：

1. computed配置项和data配置项是同级的

2. computed中的计算属性虽然是函数的写法，但他依然是个属性

3. computed中的计算属性不能和data中的属性同名

4. 使用computed中的计算属性和使用data中的属性是一样的用法

5. computed中计算属性内部的this依然指向的是Vue实例

 6.computed计算属性和methods方法的区别

1.computed计算属性

作用：封装了一段对于数据的处理，求得一个结果

语法：

1. 写在computed配置项中

2. 作为属性，直接使用

   • js中使用计算属性： this.计算属性

   • 模板中使用计算属性：{{计算属性}}

2.methods计算属性

作用：给Vue实例提供一个方法，调用以处理业务逻辑。

语法：

1. 写在methods配置项中

2. 作为方法调用

   • js中调用：this.方法名()

   • 模板中调用 {{方法名()}} 或者 @事件名=“方法名”

3.计算属性的优势

1. 缓存特性（提升性能）

   计算属性会对计算出来的结果缓存，再次使用直接读取缓存，

   依赖项变化了，会自动重新计算 → 并再次缓存

2. methods没有缓存特性

 7.计算属性的完整写法

<script>
    const app = new Vue({
      el: '#app',
      data: {

      },
      computed: {
        计算属性名:{
          get(){
            一段代码逻辑(计算逻辑)
            return 结果
          },
          set(修改的值){
            一段代码逻辑(修改逻辑)
          }
        }
      },
      methods: {

      }
    })
  </script>

8.watch侦听器（监视器）

监视数据变化，执行一些业务逻辑或异步操作

语法：

1. watch同样声明在跟data同级的配置项中

2. 简单写法： 简单类型数据直接监视

3. 完整写法：添加额外配置项

<script>
data: { 
  words: '苹果',
  obj: {
    words: '苹果'
  }
},

watch: {
  // 该方法会在数据变化时，触发执行
  数据属性名 (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  },
  '对象.属性名' (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  }
}
</script>

完整写法 —>添加额外的配置项

1. deep:true 对复杂类型进行深度监听

2. immdiate:true 初始化 立刻执行一次

data: {
  obj: {
    words: '苹果',
    lang: 'italy'
  },
},

watch: {// watch 完整写法
  对象: {
    deep: true, // 深度监视
    immdiate:true,//立即执行handler函数
    handler (newValue) {
      console.log(newValue)
    }
  }
}