Vue的Options

el：掛載點

與$mount有替換關系

new Vue({
  el: "#app"
});

new Vue({}).$mount('#app')

注：被你選為掛載點的那個元素，如果在index.html里那個元素里面本來就有內容，在渲染時會消失（網速慢可以看到），被這個vue實例的對應內容所覆蓋。

data：內部數據

支持對象和函數，優先用函數

new Vue({
  //優先使用函數
  data() {
    return {
      n: 0,
    }
  }
}).$mount("#app");

注：能寫函數盡量寫函數，否則有可能有BUG；

methods：方法

事件處理函數

new Vue({
     data (){
        return{
            n:0
        }
     },
    template:`
        <div class="red">
            {{n}}
            <button @click="add">+1</button>
        </div>
    `,
  //add必須寫到methods里面
    methods:{
         add(){
             this.n+=1
         }
    }
}).$mount('#app')

普通函數：methods代替filter

import Vue from "vue";
Vue.config.productionTip = false;

new Vue({
  data() {
    return {
      n: 0,
      array: [1, 2, 3, 4, 5, 6, 7, 8]
    };
  },
  template: `
  <div class=red>
  {{n}}
  <button @click="add">+1</button>  //事件處理函數
  <hr>
  {{filter()}}   //普通函數(JS的filter直接在視圖里調用，每一次更新渲染都會調用一次)
  </div>
  `,//主動在模板里面調用
  methods: {
    add() {
      this.n += 1;  //事件處理函數
    },
    filter() {
      return this.array.filter(i => i % 2 === 0);  //普通函數
    }
  }
}).$mount("#app");

components：方法

使用Vue組件，注意大小寫
（建議用法） 模塊化：

• 新建一個vue文件Demo.vue，這個vue文件就是一個組件
• 在main.js中引入這個vue文件
• 在vue實例的components中聲明這是我要用的組件，並且命名為Demo
• 這樣在這個Vue實例的template中就可以直接使用這個組件<Demo/>

import Vue from "vue";
import Demo from "./Demo.vue";  //引入這個vue文件   ---文件名最好小寫 組件名最好大寫
Vue.config.productionTip = false;

new Vue({
  components: {
    Demo  //在vue實例的components中聲明這是我要用的組件，並且命名為Demo
    //如果組件名就叫Demo，即Demo：Demo，那就寫Demo --ES6縮寫
    //components: {Demo},
  },
  data() {
    return {
      n: 0
    };
  },
  template: `
  <div class=red>
  {{n}}
  <button @click="add">+1</button>
  <Demo/>   //這樣在這個Vue實例的template中就可以直接使用這個組件`<Demo/>`
  </div>
  `,
  methods: {
    add() {
      this.n += 1;
    },
  }
}).$mount("#app");
 	

四個鈎子

created -- 實例出現在內存中后觸發

created(){
         debugger
         console.log('這玩意出現在內存中')
    },

mounted-- 實例出現在頁面中（掛載了）后觸發

  mounted(){
    debugger
         console.log('這玩意兒已出現在頁面中')
    },

updated -- 實例更新了后觸發

updated(){
         console.log('更新了')
        console.log(this.n)  
    },
 //當你+1的時候，能證明他在更新的時候觸發,還可以拿到最新的n

destroyed -- 實例從頁面和內存中消亡了后觸發

props：外部屬性

外部來傳值

• message="n"傳入字符串
• :message="n"傳入vue實例的this.n數據
• :fn="add"傳入vue實例的this.add函數

示例