構(gòu)造器

• 實例化vue時，需傳入一個選項對象，它可以包括 數(shù)據(jù)、模板、掛載元素、方法和生命周期鉤子

屬性與方法

• 每個vue實例都會代理其data對象中所有的屬性
• vue實例暴露了一些有用的實例屬性和方法,這些屬性與方法都有前綴$,以便與代理的data屬性相區(qū)分

實例生命周周期

• created鉤子 在實例被創(chuàng)建后被調(diào)用
• mounted 當(dāng)編譯好的HTML被掛載到對應(yīng)的位置，這個操作完成后觸發(fā)
• updated 當(dāng)data中的數(shù)據(jù)改變，并且虛擬DOM重新渲染完成后觸發(fā)
• destroyed
• 概要: 鉤子的this指向調(diào)用它的實例

生命周期圖示

image.png

image.png

如果使用構(gòu)造生成文件(例如構(gòu)造單文件組件)
模板編譯將提前執(zhí)行

插值

• 文本
  • 雙大括號
  • v-text
• 純html
• v-html
  -屬性
• v-bind（大雙括號不能在屬性中使用，因此需要使用v-bind）
  -使用Javascript表達(dá)式

指令

• 那些指令
• v-bind
• v-on
• v-if
• v-for(特殊)

v-if

<div id="app">
<template v-if="ok==='username'">
用戶名: <input type="text" placeholder="請輸入用戶名" key="name-input">
</template>
<template v-else>
密碼: <input type="text"  placeholder="請輸入密碼" key="psd-input">
</template>
<button @click="toggle">點擊切換類型</button>
</div>

new Vue({
  el: "#app",
  data: {
    ok:'username'
  },
  methods: {
  toggle: function(todo){
      if(this.ok==='username'){
      this.ok = 'psd'
    }else{
      this.ok = 'username';
    }
  }
  }
})

v-for