五、绑定属性

单向绑定 v-bind

1、v-bind

起因：除了内容需要动态决定之外，某些属性我们也希望动态来绑定

作用：动态绑定属性

缩写：:

预期：any (with argument) | Objecr (without argument)

参数：attrOrProp (optional)
1.、v-bind语法糖

语法糖：其简写方式。在开发中，通常使用语法糖的形式，因为更加简洁

简写方式如下：
2、v-bind动态绑定class

2.1、v-bind动态绑定class（方式一：字符串写法）
适用于class样式的类名不确定时，需要动态指定

将class属性的值放在数组中进行调用
在这里插入图片描述

2.2、v-bind动态绑定class（方式二：数组语法）

适用于：要绑定的样式个数不确定、名字也不确定
绑定数组 :class="classArr"，在实现的方法中通过调用shift和push方法对class样式进行添加

数组语法的含义是：class后面跟的是一个数组

用法如下

2.3、v-bind动态绑定class（方式三：对象语法）

适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用
可以将绑定的class名作为布尔值进行判断true和false

点击事件不需要加()，绑定类函数需要加()
在这里插入图片描述

通过不同的class的布尔值，判断该属性是否被添加

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind动态绑定class（对象语法）</title>
  <style>
    .active{
    
    
        color: red;
    }
    .line{
    
    
        text-decoration: underline;
    }
  </style>
</head>
<body>

<div id="app">
<!--  {}表示的是对象,当Boolean值为true时，表示添加-->
<!--  <h2 v-bind:class="{类名1: boolean, 类名2: boolean}"> {
   
   {message}} </h2>-->
  <h2 v-bind:class="{active: isActive, line: isLine}"> {
  
  {message}} </h2>
  // 绑定点击事件
  <button v-on:click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>

<script>
  const app = new Vue({
    
    
    el: '#app',
    data: {
    
    
      message: '你好啊',
      isActive: true,
      isLine: false
    },
    methods: {
    
    
      btnClick:function (){
    
    
      // 控制再次点击使得active属性值为false
        this.isActive = !this.isActive;
      }
    }
  })
</script>

</body>
</html>

3、v-bind动态绑定style

对象绑定均是 key:value 格式，
v-bind:class="{类名1: boolean, 类名2: boolean}"> { {message}}
但在此处用到的是 key(属性名):value(属性值),
key表示类名无需加单引号，value加单引号表示字符串，不加单引号表示是变量，需要在 new Vue 中进行定义
3.1、对象语法

3.2、数组语法

4、解绑事件

第一种：this.$off()
第二种：直接使用钩子函数destroy

2、v-model

双向绑定 v-model

v-model:value="name"的语法糖简写为：v-model="name"

1、表单绑定 v-model

Vue中使用 v-model 指令来实现表单元素和数据的双向绑定
案例解析：

当我们在输入框输入内容时
因为 input 中的 v-model 绑定了 message，所以会实时将输入的内容传递给message，message发生改变
当message发生改变时，因为上面我们使用Mustache语法，将 message 的值插入到DOM中，所以DOM会发生响应的改变
所以，通过v-model 实现了双向的绑定

在这里插入图片描述

我们也可以将v-model用于textarea

2、v-model原理

在这里插入图片描述

3、v-model结合radio类型

制作按钮事件时，一般先做一个 label ，在 label 中放置input，这样可实现点击文字实现点击效果
radio 按钮：name 相同时实现互斥效果 / 或者有 v-model 属性时，也可实现互斥
原理：服务器把 name 作为 key 传到服务器，key 只有一个所以实现互斥
4、v-model结合checkbox类型
单选框返回值是一个 Boolean 值
多选框返回值是一个数组

5、v-model结合select类型

https://www.cnblogs.com/zhuhukang/p/15411337.html

6、input 中的值绑定

7、v-model修饰符的使用

六、计算属性

在这里插入图片描述

1、计算属性

原理：底层借助了Object.defineproperty 方法提供的 getter 和 setter。
我们知道，在模板中可以直接通过插值语法显示一些data中的数据
但是在某些情况下，我们可能需要对数据进行一些转换后再显示，或者需要将多个数据结合起来进行显示
- 比如我们有 firstName和lastName两个变量，我们需要显示完整的名称fullName
- 但是如果多个地方都需要显示完整的名称，我们就需要写多个 { {firstName}} { {lastName}}
  2、计算属性setter和getter
  
  2.1、set
  1. 计算属性一般没有set方法，如果计算属性要被修改，那必须写set 函数去响应修改，且 set 中要引起计算时依赖的数据发生改变。
  2. 当没有可以set方法时，可以看成是只读属性（不常用）
    2.2、get
  3. get函数什么是会后执行
  4. 初次读取时会执行一次
  5. 当依赖的数据发生改变时会被再次调用
  6. 在调用计算属性的时候会使用get中的返回值作为计算属性
  7. 一般省略写成以下形式
```
fullName: function (){
return 'abc'
}
```
    3、计算属性和methods的对比
  8. 总结：多使用计算属性，而不是methods方法函数
  9. 效率：计算属性 > methods
  10. 与 methods 实现相比，内部有缓存机制（复用），效率更高，调试方便
    4、计算属性的简写
    直接上图解释：

案例：求书籍总价的三种方式：https://www.cnblogs.com/zhuhukang/p/15368384.html

七、监视属性

通过监测新值与旧值的变化来确定接下来需要做的事情

1、监视属性watch

当被监视的属性变化时，回调函数自动调用，进行相关操作
监视的属性必须存在，才能进行监视！
监视的两种写法：
- new Vue 时传入 watch配置
- 通过vm.$watch监视
  
  2、深度监视
在data中定义如下属性，其中isHot是一层属性，numbers是多层级属性（）numbers中有a，b，
Vue中的watch默认不监测对象内部值的改变（一层）
配置deep:true可以监测对象内部值改变（多层）
Vue自身可以监测对象内部值的改变，但Vue提供的watcch默认不可以！
使用watch时根据数据的具体结构，决定是否采用深度监视

3、监视的简写

使用前提：当不需要初始化调用immediate和深度监视deep的时候
在watch中的正常写法和简写
第二种简写

4、watch和computed对比

我们以姓名为案例：

computed的写法：

watch 的写法

在这里插入图片描述

==因此，computed计算属性是无法开启异步任务的，当需求是要开启异步任务比如延迟触发时，就需要用到watch监听属性==
在这里插入图片描述

5、监视属性的原理

在这里插入图片描述

案例：对数据进行列表模糊查询

watch 实现

<body>
    <div id="app">
        <h2>列表过滤</h2>
        <!-- 搜集用户的输入 -->
        <input type="text" placeholder="请输入搜索关键字" v-model="keyWord">
        <ul>
            <li v-for="(p,index) of filPersons" :key="index">
                {
  
  {p.name}}-{
  
  {p.age}}-{
  
  {p.sex}}
            </li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
    
    
           el:'#app',
           data:{
    
    
               keyWord:"",
            //    源数据
               persons:[
                   {
    
    id:001,name:"马冬梅",age:19,sex:"女"},
                   {
    
    id:003,name:"周杰伦",age:20,sex:"男"},
                   {
    
    id:004,name:"温兆伦",age:21,sex:"男"},
                   {
    
    id:002,name:"周冬雨",age:22,sex:"女"},
               ],
            //    过滤后的数据
               filPersons:[]
           },
            watch:{
    
    
             keyWord:{
    
    
                 immediate:true,
                 handler(newVal){
    
    
                    this.filPersons = this.persons.filter((p)=>{
    
    
   //    拿到persons中的每一个对象p，return p.name中是否包含newVal
                             return p.name.indexOf(newVal) !== -1
                     })
                 }
             }
           }
        });
    </script>
</body>

computed实现

<body>
    <div id="app">
        <h2>列表过滤</h2>
        <!-- 搜集用户的输入 -->
        <input type="text" placeholder="请输入搜索关键字" v-model="keyWord">
        <ul>
            <li v-for="(p,index) of filPersons" :key="index">
                {
  
  {p.name}}-{
  
  {p.age}}-{
  
  {p.sex}}
            </li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
    
    
           el:'#app',
           data:{
    
    
               keyWord:"",
            //    源数据
               persons:[
                   {
    
    id:001,name:"马冬梅",age:19,sex:"女"},
                   {
    
    id:003,name:"周杰伦",age:20,sex:"男"},
                   {
    
    id:004,name:"温兆伦",age:21,sex:"男"},
                   {
    
    id:002,name:"周冬雨",age:22,sex:"女"},
               ],
           },
        // 计算属性实现
            computed:{
    
    
                filPersons(){
    
    
                   return this.persons.filter((p)=>{
    
    
                //    拿到persons中的每一个对象p，return p.name中是否包含newVal
                      return p.name.indexOf(this.keyWord) !== -1
                    })
                }
            }

        });
    </script>
</body>

八、ES6补充

1、块级作用域 - let 和 var

我们可以将 let 看成更完美的 var

案例：点击按钮打印点击的是第几个按钮

const btns = document.getElementsByTagName('button');
for (let i = 0;i<btns.length;i++){
     
     
  btns[i].addEventListener('click',function (){
     
     
    console.log('第'+i+'个按钮被点击')
  })
}

ES5中只有函数 function 有作用域，而 if 和 for 都没有作用域

2、const的使用

使用const修饰的标识符不会被再次赋值，可以使用const来保证数据的安全性
在ES6开发中，有限使用const，只有需要改变某一个标识符的时候才使用let

const注意

注意一：一旦给const修饰的标识符被赋值之后，不能修改
```
const a = 20;
a = 30; // 错误：不可以修改
```

注意二：在使用const定义标识符，必须进行赋值

const name; // 错误： const修饰的标识符必须赋值

注意三：常量的含义是指向的对象不能修改，但是可以改变对象内部的属性

const obj = {
       
       
  name:'Kobe',
  age : 18
}
obj.age = 40; // 当const标识对象时，对象内部的属性是可以改变的

3、对象增强写法

ES6 中，对对象字面量进行了很多增强
属性初始化简写和方法的简写

Vuejs基础版II

五、绑定属性

1、v-bind

1.、v-bind语法糖

2、v-bind动态绑定class

2.1、v-bind动态绑定class（方式一：字符串写法）

2.2、v-bind动态绑定class（方式二：数组语法）

2.3、v-bind动态绑定class（方式三：对象语法）

3、v-bind动态绑定style

3.1、对象语法

3.2、数组语法

4、解绑事件

2、v-model

1、表单绑定 v-model

2、v-model原理

3、v-model结合radio类型

4、v-model结合checkbox类型

5、v-model结合select类型

6、input 中的值绑定

7、v-model修饰符的使用

六、计算属性

1、计算属性

2、计算属性setter和getter

2.1、set

2.2、get

3、计算属性和methods的对比

4、计算属性的简写

七、监视属性

1、监视属性watch

2、深度监视

3、监视的简写

4、watch和computed对比

5、监视属性的原理

八、ES6补充

1、块级作用域 - let 和 var

2、const的使用

3、对象增强写法

热门文章

最新文章

相关课程

相关电子书