Vue学习笔记（二）动态绑定、计算属性和事件监听

目录

• 一、为属性绑定变量
  • 1. v-bind的基本使用
  • 2. v-bind动态绑定class(对象语法)
  • 3. v-bind动态绑定class(数组语法)
  • 4. v-bind动态绑定style(对象语法)
  • 5. v-bind动态绑定style(数组语法)
• 二、计算属性
  • 1. 基本使用
  • 2. 计算属性的setter和getter
  • 3. 计算属性和method对比
• 三、事件监听
  • 1. v-on的参数问题
  • 2. v-on修饰符
    • click的.stop修饰符
    • click的.prevent修饰符
    • click的.once修饰符
    • keydown的.enter修饰符

一、为属性绑定变量

在前面第一部分中，我们已经可以使用Vue来动态绑定元素中的值了，但是我们该怎样绑定为元素的属性绑定一个变量呢？

1. v-bind的基本使用

我们可以使用v-bind来为一个元素的属性绑定一个在Vue实例中定义好的变量，语法为：

v-bind:属性名="表达式"

如下例所示：

var app = new Vue({
  el: '#app',
  data: {
    imgURL: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2296203553,2815843260&fm=58",
    aHref: "http://baidu.com",
    aName: "百度一下"
  }
});

<div id="app">
  <!-- 错误的做法 -->
  <!-- <img src="{{imgURL}}" alt=""> -->
  <img v-bind:src="imgURL" alt="">
  <a v-bind:href="aHref">{{aName}}</a>
  <!-- 语法糖写法,实际开发主要使用 -->
  <img :src="imgURL" alt="">
  <a :href="aHref">{{aName}}</a>
</div>

运行结果：

可以发现元素上属性的值都可以由变量指定了，而 :属性名="表达式"是原始写法的语法糖。

2. v-bind动态绑定class(对象语法)

语法：

v-bind:class="obj"

其中obj是一个js对象，它的键（变量名）是某个类的类名，值为bool类型，决定这个类是否绑定到该元素上。

示例：

var app = new Vue({
  el: '#app',
  data: {
    message: "你好啊",
    active: "active",
    isActive: true,
    isLine: true,
  },
  methods: {
    btnClick: function () {
      this.isActive = !this.isActive;
    },
    getClasses: function () {
      return { active: this.isActive, line: this.isLine };
    }
  }
});

.active {
  color: red;
}

<div id="app">
  <h2 class="active">第一个：{{message}}</h2>
  <h2 :class="active">第二个：{{message}}</h2>
  <!-- <h2 v-bind:class="{key1:value, key2:value}"></h2> -->
  <!-- <h2 v-bind:class="{类名1:true, 类名2:false}"></h2> -->
  <h2 class="title" v-bind:class="{active:isActive, line:isLine}">TrueOrFalse</h2>
  <h2 class="title" v-bind:class="getClasses()">TrueOrFalse</h2>
  <button v-on:click="btnClick">变色</button>
</div>

运行结果：

3. v-bind动态绑定class(数组语法)

语法：

v-bind:class="list"

其中list是一个js数组，其中的各个元素的值（字符串）是要绑定到该html元素的class。

示例如下：

var app = new Vue({
  el:'#app',
  data:{
    message:"你好啊",
    active:"aaaa",
    line:"bbbb",
  },
  methods:{
    getClasses:function(){
      return ["aaa","bbb"]
    }
  }
});

<div id="app">
  <!-- 有单引号当做字符串,无当做变量解析 -->
  <h2 :class="['active','line']">{{message}} </h2>
  <h2 :class="[active, line]">{{message}} </h2>
  <h2 :class="getClasses()">{{message}} </h2>
</div>

运行结果：

4. v-bind动态绑定style(对象语法)

语法：

v-bind:style="obj"

其中obj是Vue实例中的一个js对象，它的键（变量名）对应着css的样式属性，而值对应着该样式属性的值，因此我们可以通过改变obj中的某个键的值来改变某个样式。

示例：

var app = new Vue({
  el: '#app',
  data: {
    message: "你好啊",
    finalSize: "100px",
    finalInt: 100,
    finalColor: "red"
  },
  methods: {
    getStyles: function () {
      return { fontSize: this.finalInt + 'px', color: this.finalColor }
    },
    addSize: function () {
      if (this.finalInt < 130) {
        this.finalInt += 10;
      }
    },
    subSize: function () {
      if (this.finalInt > 50) {
        this.finalInt -= 10;
      }
    },
    change: function () {
      if (this.finalColor == 'blue') {
        this.finalColor = 'red';
      }
      else {
        this.finalColor = 'blue';
      }
    }
  }
});

<div id="app">
  <!-- <h2 :style="{key(属性名):value(属性值)}">{{message}} </h2> -->
  <!-- <h2 :style="{fontSize:'50px'}">{{message}} </h2> -->
  <!-- <h2 :style="{fontSize: finalSize}">{{message}}</h2> -->
  <h2 :style="{fontSize: finalInt+'px', color: finalColor}">{{message}}</h2>
  <h2 :style="getStyles()">{{message}}</h2>
  <button @click="addSize">+</button>
  <button @click="subSize">-</button>
  <button @click="change">变色</button>
</div>

5. v-bind动态绑定style(数组语法)

语法：

v-bind:style="list"

其中list是一个js数组，其中的各个元素的值（对象）是要绑定到该html元素的style键值对。其中键名（变量名）是style属性名，值是对应属性值。

示例：

var app = new Vue({
  el:'#app',
  data:{
    message:"你好啊",
    baseStyle:{backgroundColor:'red'},
    baseStyle1:{fontSize:'100px'}
  },
  methods:{}
});

<div id="app">
  <h2 :style="[baseStyle, baseStyle1]">{{message}}</h2>
</div>

运行效果：

二、计算属性

计算属性被编写到Vue实例中的computed属性中

语法：

...
computed: {
  计算属性名(一般以名词命名): function () {
    // 相当于一个属性
    return xxx;
  }
},
...

在语法上和方法的写法基本相同。

1. 基本使用

var app = new Vue({
  el: '#app',
  data: {
    firstName: "Lebron",
    lastName: "James"
  },
  computed: {
    fullName: function () {
      // 相当于一个属性
      return this.firstName + " " + this.lastName;
    }
  },
  methods: {
    getFullName: function () {
      return this.firstName + " " + this.lastName;
    }
  }
});

<div id="app">
  <h2>{{firstName+" "+lastName}} </h2>
  <h2>{{firstName}} {{lastName}} </h2>
  <h2>{{getFullName()}} </h2>
  <h2>{{fullName}} </h2>
</div>

运行结果：

可以发现使用方法和计算属性都可以得到正确的结果。

2. 计算属性的setter和getter

语法：

computed:{
  计算属性名:{
    set:function(){
      ...
    },
    get:function(){
      ...
    }
  }
},

且计算属性一般是没有set方法的

3. 计算属性和method对比

最主要的差别是计算属性在第一次返回结果后会有缓存机制，若结果相同则不会再次计算，如下例所示：

var app = new Vue({
  el: '#app',
  data: {
    firstName: "Kobe",
    lastName: "Bryant",
  },
  computed: {
    fullName: function () {
      console.log("+++++")
      return this.firstName + " " + this.lastName;
    }
  },
  methods: {
    getFullName: function () {
      console.log("=========")
      return this.firstName + " " + this.lastName;
    }
  }
});

<div id="app">
  <h2>{{getFullName()}} </h2>
  <h2>{{getFullName()}} </h2>
  <h2>{{getFullName()}} </h2>
  <h2>{{getFullName()}} </h2>
  <!-- 缓存机制 -->
  <h2>{{fullName}} </h2>
  <h2>{{fullName}} </h2>
  <h2>{{fullName}} </h2>
  <h2>{{fullName}} </h2>
</div>

运行结果：

可以发现getFullName()方法执行了4次，而fullName计算属性只执行了1次

三、事件监听

v-on的基本使用可以参照上个部分的计数器。

1. v-on的参数问题

1. 如果没有传入参数，则默认的参数为undifined

<button @click="click1()">按钮1</button>

1. 如果不写函数的括号，则会默认将event对象传递过去

<button @click="click2">按钮2</button>

1. 如何手动获得浏览器产生的event对象（使用$event）

<button @click="click3(123, $event)">按钮3</button>

示例：

var app = new Vue({
  el: '#app',
  data: {},
  methods: {
    click1() {
      console.log("按钮1");
    },
    click2(abc) {
      console.log(abc);
    },
    click3(abc, event) {
      console.log(abc, event);
    }
  }
});

<div id="app">
  <button @click="click1()">按钮1</button>
  <!-- 如果没有传入参数，则默认参数为undefined -->
  <!-- <button @click="click2(123)">按钮2</button> -->
  <!-- <button @click="click2()">按钮2</button> -->
  <!-- 这种情况会将event对象传递过去 -->
  <button @click="click2">按钮2</button>
  <!-- 如何手动获得浏览器产生的event对象 -->
  <button @click="click3(123, $event)">按钮3</button>
</div>

运行结果：

2. v-on修饰符

click的.stop修饰符

这个修饰符可以阻止事件气泡往下传递

对比：

<div @click="divClick">
  inside div
  <button @click="btnClick">按钮</button>
</div>

和：

<div @click="divClick">
  inside div
  <button @click.stop="btnClick">按钮</button>
</div>

第一种情况除了btnClick()方法会被调用外，button元素的父元素div也会收到点击事件，进而divClick()函数也会被调用。

而第二种情况则使用了.stop阻止气泡向下传递，只有btnClick()方法会被调用。

click的.prevent修饰符

作用：阻止事件的默认行为，然后执行后面引用的method。

例如：

<form action="baidu">
  <input type="submit" value="提交" @click.prevent="submitClick">
</form>

这样当点击按钮时不会提交表单，而之后调用submitClick()方法。

click的.once修饰符

作用：事件只监听一次

<button @click.once="btn2Click">
  按钮2
</button>

这种情况下多次点击button，只会执行一次btn2Click()方法

keydown的.enter修饰符

作用：监听键盘的点击

<input type="text" @keydown.enter="keyDown">