Vue框架学习（二）

一、指令修饰符

通过 " . " 指明一些指令后缀，不同后缀封装了不同的处理操作 ，目的是为了简化代码。

1、按键修饰符

@keyup.enter  键盘回车监听，一旦回车就对文本框里的数据进行处理。

2、v-model 修饰符

v-model.trim              去除首尾空格

v-model.number        转为数字

3、事件修饰符

@事件名.stop   阻止冒泡（冒泡是从子级到父级；捕获是从父级到子级）

@事件名.present   阻止默认行为（例如<a>标签，点击会跳转到新页面，加了这个，就可以阻止跳转）

二、v-bind  对样式控制的增强 

1、操作class

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

（1）对象

对象就是键值对格式的，键就是类名，值是布尔值。如果值为true，有这个类，否则没有这个类。

使用场景：来回切换效果，导航栏这种

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

（2）数组

数组中的类都会被添加到盒子里，本质上就是一个class列表。

使用场景：批量添加或删除类

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

2、操作style

语法： :style="样式对象"

使用场景：某个具体属性的动态设置

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

三、v-model 应用于其他表单元素

常见的表单元素都可以用v-model绑定关联，用来快速获取或设置表单元素的值，会根据空间类型自动选取正确的方法来更新元素

输入框： input:text    

文本域：textarea，和文本绑定方式一样，只要设置v-model

复选框：input:checkbox，只需要设置v-model用来实现绑定选定的值

单选框：input:radio ， v-model和name，value结合起来使用，用来实现绑定选定的值

下拉菜单：select，option要设置value值，select的value，关联选中的option的值，结合v-model用来实现绑定选中的值。

    姓名：
      <input type="text" v-model="username"> 
      <br><br>

    是否单身：
      <input type="checkbox" v-model="isSingle"> 
      <br><br>
    
<!--  name用来控制只勾选一个， value关联勾选的值 -->
    性别: 
      <input v-model="gender" type="radio" name="gender" value="0">男
      <input v-model="gender" type="radio" name="gender" value="1">女
      <br><br>

    
    所在城市:
      <select v-model="cityId">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="成都">成都</option>
        <option value="南京">南京</option>
      </select>
      <br><br>

    自我描述：
      <textarea v-model="desc"></textarea>

四、计算属性

基于现有的数据，计算出一个新属性。依赖的数据改变，自动重新计算。比如淘宝购物车的结算页面，会有商品数量和商品总价格。

1、只涉及读取，不涉及修改

语法：

声明在computed配置项中，一个计算属性对应一个函数；使用起来和普通属性一样{{ 计算属性名 }}

computed:{
    计算属性名(){
        // 基于现有的数据，编写出求值的逻辑
        return 结果
    }
}

示例：

    <script>
      const app = new Vue({
        el: '#app',
        data: {
          list: [
            { id: 1, subject: '语文', score: 20 },
            { id: 7, subject: '数学', score: 99 },
            { id: 12, subject: '英语', score: 70 },
          ],
          subject: '',
          score: ''
        },
        
        computed:{
          total(){
            // 返回score的总和
            return this.list.reduce((sum, item)=> sum+item.score, 0)
          }
        }
      })
    </script>

2、涉及修改

计算属性默认的简写，只能读取访问，不能"修改"；如果要修改，需要写计算属性的完整写法。

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

3、computed计算属性 vs methods方法

computed计算属性：写在computed配置项中；作为属性直接使用，this.计算属性。

methods方法：写在methods配置项中；作为方法需要调用，this.方法名()  

五、watch监听器

作用：用来监视数据变化，执行一些业务逻辑或者异步操作。最常见的就是实时翻译，左边输入，右边就进行翻译。

1、简单写法

简单类型数据，直接监听。

watch: {
   // 该方法会在数据变化时调用执行
   // newValue新值, oldValue老值（一般不用）
   数据属性名 (newValue) {
       console.log('变化了', newValue)
   },
   '对象.属性名' (newValue) {
       console.log('变化了', newValue)
    }
}

2、完整写法

添加额外配置项

（1）deep:true          对复杂数据进行深度监视

（2）immediate:true 初始化立刻执行一次handler方法

watch: {
    数据属性名: {
        deep: true, // 深度监视
        immediate: true, // 立刻执行，一进入页面handler就立刻执行一次
        handler (newValue) {
           console.log(newValue)
        }
     }
 }