一、指令修饰符

1、什么是指令修饰符？

所谓指令修饰符就是通过“.”指明一些指令后缀不同的后缀封装了不同的处理操作 —> 简化代码

2、按键修饰符

@keyup.enter —>当点击enter键的时候才触发

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>记事本</title>
</head>
<body>

<!-- 主体区域 -->
<section id="app">
    <!-- 输入框 -->
    <header class="header">
        <h1>小凯的记事本</h1>
        <input v-model:id="toName" @keyup.enter="add" placeholder="请输入任务" class="new-todo" />
        <button @click="add" class="add">添加任务</button>
    </header>
    <!-- 列表区域 -->
    <section class="main">
        <ul class="todo-list">
            <li class="todo" v-for="(item,index) in list" :key="item.id">
                <div class="view">
                    <span class="index">{
   
   { index + 1 }}.</span> <label>{
   
   { item.name }}</label>
                    <button class="destroy" @click="del(item.id)"></button>
                </div>
            </li>
        </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer" v-show="list.length > 0">
        <!-- 统计 -->
        <span class="todo-count">合 计:<strong> {
   
   { list.length }}</strong></span>
        <!-- 清空 -->
        <button class="clear-completed" @click="clear">
            清空任务
        </button>
    </footer>
</section>

<!-- 底部 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    const app = new Vue({
      
      
        el: '#app',
        data: {
      
      
            toName: '',
            list: [
                {
      
      id: 1,name: '微服务学习'},
                {
      
      id: 2,name: 'SpringBoot从入门到精通'},
                {
      
      id: 3,name: 'SpringCloud'}
            ]
        },
        methods: {
      
      
            del(id){
      
      
                this.list = this.list.filter(item => item.id !== id)
            },
            add(){
      
      
                if (this.toName.trim()=== ''){
      
      
                    alert('请输入内容')
                    return
                }
                this.list.unshift({
      
      
                    id: +new Date(),
                    name: this.toName
                })
                this.toName=''
            },
            clear(){
      
      
                   this.list=[]
            }
        }
    })

</script>
</body>
</html>

3、v-model修饰符

v-model.trim —>去除首位空格
v-model.number —>转数字

4、事件修饰符

@事件名.stop —> 阻止冒泡
@事件名.prevent —>阻止默认行为
@事件名.stop.prevent —>可以连用即阻止事件冒泡也阻止默认行为

 <style>
    .father {
      
      
      width: 200px;
      height: 200px;
      background-color: pink;
      margin-top: 20px;
    }
    .son {
      
      
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>

 <div id="app">
    <h3>v-model修饰符 .trim .number</h3>
    姓名：<input v-model="username" type="text"><br>
    年纪：<input v-model="age" type="text"><br>

    
    <h3>@事件名.stop     →  阻止冒泡</h3>
    <div @click="fatherFn" class="father">
      <div @click="sonFn" class="son">儿子</div>
    </div>

    <h3>@事件名.prevent  →  阻止默认行为</h3>
    <a @click href="http://www.baidu.com">阻止默认行为</a>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      
      
      el: '#app',
      data: {
      
      
        username: '',
        age: '',
      },
      methods: {
      
      
        fatherFn () {
      
      
          alert('老父亲被点击了')
        },
        sonFn (e) {
      
      
          // e.stopPropagation()
          alert('儿子被点击了')
        }
      }
    })
  </script>

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

为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制。

1、语法：

<div> :class = "对象/数组">这是一个div</div>

2、对象语法

当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类

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

适用场景：一个类名，来回切换

3、数组语法

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

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

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

4、tab栏切换导航高亮案例

1.需求：

当我们点击哪个tab页签时，哪个tab页签就高亮

2.实现

<style>
  * {
    margin: 0;
    padding: 0;
  }
  ul {
    display: flex;
    border-bottom: 2px solid #e01222;
    padding: 0 10px;
  }
  li {
    width: 100px;
    height: 50px;
    line-height: 50px;
    list-style: none;
    text-align: center;
  }
  li a {
    display: block;
    text-decoration: none;
    font-weight: bold;
    color: #333333;
  }
  li a.active {
    background-color: #e01222;
    color: #fff;
  }

</style>

<div id="app">
  <ul>
    <li v-for="(item,index) in list" :key="item.id" @click="activeIndex = index">
      <a :class="{active: index === activeIndex}" href="#">{
   
   { item.name }}</a>
    </li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      activeIndex: 0,
      list: [
        { id: 1, name: 'spring' },
        { id: 2, name: 'SpringBoot' },
        { id: 3, name: 'SpringCloud' }
      ]
    }
  })
</script>

3.思路：

1.基于数据，动态渲染tab（v-for）

2.准备一个下标记录高亮的是哪一个 tab

扫描二维码关注公众号，回复： 16003364 查看本文章

3.基于下标动态切换class的类名

三、v-bind对有样式控制的增强-操作style

1、语法

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

2、进度条案例

<style>
  .progress {
      
      
    height: 25px;
    width: 400px;
    border-radius: 15px;
    background-color: #272425;
    border: 3px solid #272425;
    box-sizing: border-box;
    margin-bottom: 30px;
  }
  .inner {
      
      
    width: 50%;
    height: 20px;
    border-radius: 10px;
    text-align: right;
    position: relative;
    background-color: #409eff;
    background-size: 20px 20px;
    box-sizing: border-box;
    transition: all 1s;
  }
  .inner span {
      
      
    position: absolute;
    right: -20px;
    bottom: -25px;
  }
</style>

<div id="app">
  <div class="progress">
    <div class="inner" :style="{ width: percent + '%'}">
      <span>{
   
   {percent}}%</span>
    </div>
  </div>
  <button @click="percent = 25">set25%</button>
  <button @click="percent = 50">set50%</button>
  <button @click="percent = 75">set75%</button>
  <button @click="percent = 100">set100%</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
      
      
    el: '#app',
    data: {
      
      
      percent: 0
    }
  })
</script>

四、v-model在其他表单元素的使用

1、讲解内容：

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

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

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

2、案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./css/index.css" />
  <title>记事本</title>
</head>
<style>
  textarea {
      
      
    display: block;
    width: 240px;
    height: 100px;
    margin: 10px 0;
  }
</style>
<div id="app">
  <h3>信息收集</h3>
  姓名：
  <input type="text" v-model="username">
  <br><br>
  是否单身：
  <input type="checkbox" v-model="isSingle">
  <br><br>
  <!--
    前置理解：
      1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
      2. value: 给单选框加上 value 属性，用于提交给后台的数据
    结合 Vue 使用 → v-model
  -->
  性别:
  <input v-model="gender" type="radio" name="gender" value="1">男
  <input v-model="gender" type="radio" name="gender" value="2">女
  <br><br>
  <!--
    前置理解：
      1. option 需要设置 value 值，提交给后台
      2. select 的 value 值，关联了选中的 option 的 value 值
    结合 Vue 使用 → v-model
  -->
  所在城市:
  <select v-model="cityId">
    <option value="101">合肥</option>
    <option value="102">杭州</option>
    <option value="103">苏州</option>
    <option value="104">南京</option>
  </select>
  <br><br>
  自我描述：
  <textarea v-model="desc"></textarea>
  <button>立即注册</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
      
      
    el: '#app',
    data: {
      
      
      username: '',
      isSingle: false,
      gender: "2",
      cityId: '101',
      desc: ""
    }
  })
</script>

五、computed计算属性

1、概念

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

2、语法

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

3、注意

computed配置项和data配置项是同级的
computed中的计算属性虽然是函数的写法，但他依然是个属性
computed中的计算属性不能和data中的属性同名
使用computed中的计算属性和使用data中的属性是一样的用法
computed中计算属性内部的this依然指向的是Vue实例

4、案例

比如我们可以使用计算属性实现下面这个业务场景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    table {
      
      
        border: 1px solid #000;
        text-align: center;
        width: 240px;
    }
    th,td {
      
      
        border: 1px solid #000;
    }
    h3 {
      
      
        position: relative;
    }
</style>

<div id="app">
    <h3>礼物清单</h3>
    <table>
        <tr>
            <th>名字</th>
            <th>数量</th>
        </tr>
        <tr v-for="(item, index) in list" :key="item.id">
            <td>{
   
   { item.name }}</td>
            <td>{
   
   { item.num }}个</td>
        </tr>
    </table>

    <!-- 目标：统计求和，求得礼物总数 -->
    <p>礼物总数：{
   
   { totalCount }} 个</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
      
      
        el: '#app',
        data: {
      
      
            // 现有的数据
            list: [
                {
      
       id: 1, name: '篮球', num: 1 },
                {
      
       id: 2, name: '玩具', num: 2 },
                {
      
       id: 3, name: '铅笔', num: 5 },
            ]
        },
        computed: {
      
      
            totalCount(){
      
      
                let total =  this.list.reduce((sum,item) => sum + item.num,0)
                return total
            }
        }
    })
</script>
</html>

六、computed计算属性与 methods方法的比较

1、computed计算属性

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

语法：

写在computed配置项中
作为属性，直接使用
- js中使用计算属性： this.计算属性
- 模板中使用计算属性：{ {计算属性}}

2、methods计算属性

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

语法：

写在methods配置项中
作为方法调用
- js中调用：this.方法名()
- 模板中调用 { {方法名()}} 或者 @事件名=“方法名”

3、计算属性的优势

缓存特性（提升性能）

计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化了，会自动重新计算 → 并再次缓存
methods没有缓存特性
通过代码比较

4、总结

1.computed有缓存特性，methods没有缓存

2.当一个结果依赖其他多个值时，推荐使用计算属性

3.当处理业务逻辑时，推荐使用methods方法，比如事件的处理函数

七、计算属性的完整写法

既然计算属性也是属性，能访问，应该也能修改了？

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

c9d8ed4a2c28faadebff53697991d848

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改名卡</title>
</head>
<body>
<div id="app">
  姓：<input type="text" v-model="firstName"> +
  名：<input type="text" v-model="lastName"> =
  <span>{
   
   { fullName }}</span><br><br>
  <button @click="changeName">改名卡</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: '刘',
      lastName: '备'
    },
    computed: {
      fullName: {
        get(){
          return this.firstName + this.lastName
        },
        set(value){
          this.firstName=value.slice(0,1)
          this.lastName=value.slice(1)
        }
      }
    },
    methods: {
        changeName(){
          this.fullName='貂小婵'
        }
    }
  })
</script>
</body>
</html>

八、watch侦听器（监视器）

1、作用：

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

2、语法：

watch同样声明在跟data同级的配置项中
简单写法：简单类型数据直接监视

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

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

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

3、watch侦听器

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

deep:true 对复杂类型进行深度监听
immdiate:true 初始化立刻执行一次

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

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

1.简单写法

watch: {
    
    
  数据属性名 (newValue, oldValue) {
    
    
    一些业务逻辑 或 异步操作。 
  },
  '对象.属性名' (newValue, oldValue) {
    
    
    一些业务逻辑 或 异步操作。 
  }
}

2.完整写法

watch: {
    
    // watch 完整写法
  数据属性名: {
    
    
    deep: true, // 深度监视(针对复杂类型)
    immediate: true, // 是否立刻执行一次handler
    handler (newValue) {
    
    
      console.log(newValue)
    }
  }
}

Vue学习Day2——指令补充

一、指令修饰符

1、什么是指令修饰符？

2、按键修饰符

3、v-model修饰符

4、事件修饰符

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

1、语法：

2、对象语法

3、数组语法

4、tab栏切换导航高亮案例

1.需求：

2.实现

3.思路：

三、v-bind对有样式控制的增强-操作style

1、语法

2、进度条案例

四、v-model在其他表单元素的使用

1、讲解内容：

2、案例

五、computed计算属性

1、概念

2、语法

3、注意

4、案例

六、computed计算属性与 methods方法的比较

1、computed计算属性

2、methods计算属性

3、计算属性的优势

4、总结

七、计算属性的完整写法

八、watch侦听器（监视器）

1、作用：

2、语法：

3、watch侦听器

猜你喜欢

Vue学习Day2——指令补充

一、指令修饰符

1、什么是指令修饰符？

2、按键修饰符

3、v-model修饰符

4、事件修饰符

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

1、语法：

2、对象语法

3、数组语法

4、tab栏切换导航高亮案例

1.需求：

2.实现

3.思路：

三、v-bind对有样式控制的增强-操作style

1、语法

2、进度条案例

四、v-model在其他表单元素的使用

1、讲解内容：

2、案例

五、computed计算属性

1、概念

2、语法

3、注意

4、案例

六、computed计算属性 与 methods方法的比较

1、computed计算属性

2、methods计算属性

3、计算属性的优势

4、总结

七、计算属性的完整写法

八、watch侦听器（监视器）

1、作用：

2、语法：

3、watch侦听器

猜你喜欢

六、computed计算属性与 methods方法的比较