Vue 基礎：Vue 實例生命週期 & 模版語法 & 計算屬性、方法與偵聽器 & 樣式綁定 & 條件渲染 & 列表渲染 & set

♻️ Vue 實例生命週期

生命週期函數就是Vue實例在某一個時間點會自動執行的函數。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue實例生命週期函數</title>
  <script src="./vue.js"></script>
</head>

<body>
  <div id="app"></div>

  <script>
    var vm = new Vue({
      el: '#app',
      template: "<div>{{test}}</div>",
      data: {
        test: "hello world"
      },
      beforeCreate() {
        console.log("beforeCreate");
      },
      created() {
        console.log("created");
      },
      beforeMount() {
        console.log(this.$el); // 此時頁面還沒有被渲染，裏面沒有內容：<div id="app"></div>
        console.log("beforeMount");
      },
      mounted() {
        console.log(this.$el); // 頁面被渲染完畢，內容：<div>hello world</div>
        console.log("mounted");
      },
      // 通過在控制檯輸入 vm.$destroy(); 進行測試
      beforeDestroy() {
        console.log("beforeDestroy");
      },
      destroyed() {
        console.log("destroyed");
      },
      // 通過在控制檯輸入 vm.test="update"; 進行測試
      beforeUpdate() {
        console.log("beforeUpdate");
      },
      updated() {
        console.log("updated");
      },
    })
  </script>
</body>

</html>

是否指定“template”選項？
是：

<div id="app"></div>
<script>
   var vm = new Vue({
     el: '#app',
     template: "<div>hello world</div>"
   })
</script>

否：

<div id="app">hello world</div>
<script>
   var vm = new Vue({
     el: '#app'
   })
</script>

兩種情況是相同的。

✏️ Vue 的模版語法

v-text 和差值表達式 {{}} 的功能相同。

vue 指令（v-text）後面跟着一個值（=“name”）的時候，這個值就不再是字符串了，而是一個 js 表達式。

v-html 不對內容進行轉義，直接顯示 html 樣式。

<div id="app">
    <div>{{name}}</div>
    <div v-text="name"></div>
    <div v-html="name"></div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        name: "<h1>bule_daze</h1>"
      }
    })
  </script>

<div id="app">
  <div>{{name + ' Hi'}}</div>
  <div v-text="name + ' Hi'"></div>
  <div v-html="name + ' Hi'"></div>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      name: "bule_daze"
    }
  })
</script>

🐟 計算屬性，方法與偵聽器

我們不希望在模版中寫一些帶有邏輯的表達式：

<div>{{firstName + " " + lastName}}</div>

而是：

<div>{{fullName}}</div>

🌊 此時就要利用計算屬性。✯

<div id="app">
    <div>{{fullName}}</div>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      firstName: "daze",
      lastName: "bule"
    },
    // 計算屬性
    computed: {
      fullName() {
        return this.firstName + " " + this.lastName;
      }
    }
  })
</script>

計算屬性有一個緩存，如果其依賴的值沒有發生改變，就不會重新計算。

🌊 也可以利用方法實現。

<div id="app">
  <div>{{fullName()}}</div>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      firstName: "daze",
      lastName: "bule"
    },
    // 方法
    methods: {
      fullName() {
        return this.firstName + " " + this.lastName;
      }
    }
  })
 </script>

但是不推薦，因爲其內部沒有緩存機制，只要頁面重新渲染方法就會被重新執行。

🌊 還可以利用偵聽器。

<div id="app">
  <div>{{fullName}}</div>
</div>
<script>
   var vm = new Vue({
     el: '#app',
     data: {
       firstName: "daze",
       lastName: "bule",
       fullName: "daze bule"
     },
     watch: {
       firstName() {
         this.fullName = this.firstName + " " + this.lastName;
       },
       lastName() {
         this.fullName = this.firstName + " " + this.lastName;
       }
     }
  })
</script>

🐳 計算屬性的 getter 和 setter

<div id="app">
  <div>{{fullName}}</div>
</div>
  <script>
  var vm = new Vue({
    el: '#app',
    data: {
      firstName: "daze",
      lastName: "bule",
    },
    computed: {
      fullName: {
        get() {
          return this.fullName = this.firstName + " " + this.lastName;
        },
        set(value) {
          var arr = value.split(" ");
          this.firstName = arr[0];
          this.lastName = arr[1];
        }
      }
    }
  })
</script>

computed 計算屬性上，不僅可以寫一個 get 的方法，通過其它的值算出一個新值；同時還可以寫一個 set 的方法，通過設置一個值來改變它相關聯的值，而改變相關聯的值之後，又回引起重新計算，頁面變化爲新的內容。

⚓️ Vue 中的樣式綁定

我們希望當 div 被點擊一次的時候，字體變成紅色；當再次點擊時，恢復默認顏色；循環往復。

1⃣️ class 的對象綁定

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue 中的樣式綁定</title>
  <script src="./vue.js"></script>
  <style>
    .activated {
      color: red;
    }
  </style>
</head>

<body>
  <div id="app">
    <div @click="handleDivClick" :class="{activated: isActivated}">hello world</div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        isActivated: false
      },
      methods: {
        handleDivClick() {
          this.isActivated = !this.isActivated;
        }
      }
    })
  </script>
</body>

</html>

:class="{activated: isActivated}"：div 元素上面有一個 class，這個 class 的名字是 activated，activated 取決於 isActived 變量。

2⃣️ class 的數組綁定

class 可以和一個數組相綁定，數組裏的內容代表一個變量。數組裏可以寫多個變量。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue 中的樣式綁定</title>
  <script src="./vue.js"></script>
  <style>
    .activated {
      color: red;
    }
  </style>
</head>

<body>
  <div id="app">
    <div @click="handleDivClick" :class="[activated]">hello world</div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        activated: ""
      },
      methods: {
        handleDivClick() {
          this.activated = this.activated === "activated" ? "" : "activated"
        }
      }
    })
  </script>
</body>

</html>

:class="[activated]"：div 元素上面有一個class，這個 class 顯示的是 activated 變量的內容。

3⃣️ style 的對象綁定

<div id="app">
  <div :style="styleObj" @click="handleDivClick">hello world</div>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      styleObj: {
        color: "black"
      }
    },
    methods: {
      handleDivClick() {
        this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
      }
    }
  })
</script>

4⃣️ style 的數組綁定

<div id="app">
  <div :style="[styleObj]" @click="handleDivClick">hello world</div>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      styleObj: {
        color: "black"
      }
    },
    methods: {
      handleDivClick() {
        this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
      }
    }
  })
</script>

數組，可以掛載多個對象。

 <div :style="[styleObj,{fontSize: '20px'}]" @click="handleDivClick">hello world</div>

在 js 對象中 font-size 需要寫成 fontSize。

🌲 Vue 中的條件渲染

🍃 v-if

v-if 指令，決定這個標籤是否在頁面中存在。當其值爲 true 時存在(顯示)，false 不存在(不顯示)。

<div id="app">
  <div v-if="show">{{message}}</div>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      show: false,
      message: "hello world"
    }
  })
</script>

在控制檯中輸入 vm.show = true; 使 div 顯示出來。

🍃 v-show

v-show 指令，決定這個標籤是否在頁面中顯示。當其值爲 true 時顯示，false 不顯示。

<div v-if="show">{{message}}</div>

🍃 v-else

v-if 和 v-else 要緊貼在一起使用。

<div v-if="show">{{message}}</div>
<div v-else>bye</div>

🍃 v-else-if

v-if，v-else-if，v-else 也要連在一起寫，中間不能被其它標籤分隔。

<div id="app">
  <div v-if="show === 'a'">This is A.</div>
  <div v-else-if="show === 'b'">This is B.</div>
  <div v-else>This is others.</div>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      show: "a"
    }
  })
</script>

當你給某一個元素標籤加一個 key 值時，Vue 會知道它是唯一的一個元素。如果兩個 key 不一樣，Vue 就不會複用該內容。

<div id="app">
  <div v-if="show">
    用戶名：<input key="username" />
  </div>
  <div v-else>
    郵箱：<input key="email" />
  </div>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      show: false
    }
  })
</script>

不加 key 的時候，你嘗試一下在 input 中輸入內容後更改 show 的值，看 input 的顯示。

🌳 Vue 中的列表渲染

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue 中的列表渲染</title>
  <script src="./vue.js"></script>
</head>

<body>
  <div id="app">
    <div v-for="(item,index) in list">{{item}}----{{index}}</div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        list: [
          "hello",
          "censek",
          "haha"
        ]
      }
    })
  </script>
</body>

</html>

key 值通常用 id 表示。 v-for="(item,index) in list" :key="item.id"

當我們去嘗試修改數組裏的內容時，不能直接通過下標的形式來改變數組。數據變了但是頁面中沒有變化。

想要改變頁面內容的 解決辦法： 1⃣️ 通過 Vue 提供的幾個數組變異方法修改數組。2⃣️ 改變數據的引用地址。

🌱 操作數組的方法

push
pop
shift
unshift
splice
sort
reverse

🌱 template

如果我想根據 list 循環 div 和 span 標籤，讓循環寫兩遍不好。

<!-- bad -->
<div id="app">
  <div v-for="(item,index) in list">{{item}}----{{index}}</div>
  <span v-for="(item,index) in list">{{item}}</span>
</div>

所以，考慮在最外層加一個 div，把循環寫在最外層的 div 裏面。

<div id="app">
  <div v-for="(item,index) in list">
    <div>{{item}}----{{index}}</div>
    <span>{{item}}</span>
  </div>
</div>

但是我只想顯示一個 div 和 span，怎麼辦呢？利用 template 模版佔位符。

<div id="app">
  <template v-for="(item,index) in list">
    <div>{{item}}----{{index}}</div>
    <span>{{item}}</span>
  </template>
</div>

🌱 對象的循環

<div id="app">
  <div v-for="(item,key,index) of userInfo">{{item}}---{{key}}---{{index}}</div>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      userInfo: {
        name: "blue_daze",
        age: 18
      }
    }
  })
</script>

v-for="(item,key,index) of userInfo"

item：對象的值

key：對象的鍵名

index：位置

如果我想修改 name 的值，直接在控制檯輸入 vm.userInfo.name = "censek" 進行測試即可。

但是如果我想加一個字段，同操作數組，需要改變數據的引用。

vm.userInfo =  {
  name: "blue_daze",
  age: 18,
  address: "Xian"
}

🌿 set 方法

通過 set 方法改變對象中數據內容。

Vue 全局方法：Vue.set()

Vue.set(vm.userInfo, "address", "Xian");

Vue 實例方法：$set()

vm.$set(vm.userInfo, "address", "Xian");

set 也可以對數組進行修改。

<div id="app">
  <div v-for="(item,index) of userInfo">{{item}}</div>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      userInfo: [1, 2, 3, 4]
    }
  })
</script>

Vue 全局方法：Vue.set()
```
Vue.set(vm.userInfo, 1, 5);
```
Vue 實例方法：$set()
```
vm.$set(vm.userInfo, 2, 10);
```