关于Vue的学习笔记（八）

关于Vue的一些基本参数、方法及其应用规则

关于ES6中for循环的增强写法：

在笔记六中有提过ES6中新增了对对象的属性和方法做了新的增强写法，除了这些，ES6中同时对for循环也做了相应的增强写法，如下所示：

//1.第一种写法，类似于java中对集合对象的遍历
for(let i in this.books){
    console.log(this.books[i]);
}
//2.第二种写法
for(let i of this.books){
    console.log(this.books[i])
}

计算属性的setter和getter

每个计算属性(computed)都包含一个getter和setter，不做任何设置时，我们使用计算属性通常默认使用它的getter方法，而setter方法很少使用。以此为例，这里的setter方法使用仅限浏览器中开发者手动为fullname更改，将更改的fullname拆解成创建vue对象的firstname和lastname，再由computed中的getter方法将更改后的属性呈现在DOM中。

<!--DOM部分-->
<div id="app">
  <h2>{{fullname}}</h2>
</div>

<!--Vue创建的对象部分--->
const app = new Vue({
    el: '#app',
    data:{
      letters: ['a','b','c','d'],
      firstname: 'komish',
      lastname: 'batch'
    },
    computed: {
      fullname: {
        set(newValue) {
          const names = newValue.split(' ');
          this.firstname = names[0];
          this.lastname = names[1];
        },
        get() {
          return this.firstname + this.lastname;
        }
    },
})

v-bind绑定：

1.v-bind绑定class（class后跟一个对象）

对象语法有下面几种用法：

<!--1.直接通过{}绑定一个类-->
  <h2 :class="{'active': isActive}">Hello World</h2>
  <!--2.也可以通过判断，传入多个值-->
  <h2 :class="{'active': isActive,'line': isLine}">Hello World</h2>
  <!--3.和普通的类同时存在，并不冲突-->
  <h2 class="title" :class="{'active': isActive,'line': isLine}">Hello World</h2>
  <!--4.如果过于复杂，可以放到methods或者computed中，做一个集合-->
  <h2 class="title" :class="classes">Hello World</h2>

//此处是选择放于computed中，保持原有格式，切忌两端加引号，否则传回去为字符串会被解析为类名
classes() {
        return {'active': this.isActive,'line': this.isLine};
      }

2.v-bind绑定style

我们可以用v-bind:style绑定一些CSS内联样式。在写CSS属性名时，如font-size，我们可以使用驼峰式fontSize或短横线分割font-size。

<!--一般格式为：<h2 :style="{key(属性名):value(属性值)}">Hello World</h2>-->
<!--50px必须加上单引号，否则作为变量去解析-->
  <h2 :style="{fontSize: '50px'}">Hello World</h2>
<!--finalSize作为一个变量使用-->
  <h2 :style="{fontSize: finalSize}">Hello World</h2>
<!--与绑定class一样，如果过于复杂也可将style形式放在methods或这computed中，做一个集合-->
  <h2 :style="getStyle">Hello World</h2>

<!--以下依旧将getStyle放在computed中,finalSize放在vue创建实例的data中-->
getStyle() {
        return{
          fontSize: '100px',
          color: 'red',
        }
}