vue3.0入門（一）

前言

• 最近在b站上學習了飛哥的vue教程
• 學習案例已上傳，下載地址

使用方式

1. 使用在線cdn
2. 下載js文件並自托管，引入到項目后使用
3. 使用npm安裝后，用cli來構建項目

聲明式渲染

• Vue2需引入vue.min.js

{{msg}}  // Mustache 語法

var vm = new Vue({ // 實例化vue，在實例中渲染
    data: {  
        msg: '文本'
    }
})   

• Vue3不需要實例化vue，需引入vue.global.js (在 unpkg 和 jsDelivr 上獲取)

{{msg}}

const Counter = {   //聲明一個常量接收返回的數據
    data() {
        return {
            msg: '文本'
        }
    }
}
Vue.createApp(Counter).mount('dom節點') // 創建vue應用並掛載
	

事件綁定

v-on:click='方法名'

Vue.createApp({
    methods: {
        方法名() {   
            //具體實現
        }
    }
}).mount("dom節點")

• 雙向綁定

{{msg}}
v-model="msg"

Vue.createApp({
    data() {
        return {
            msg: '文本'   
        }
    }
}).mount("dom節點")

條件循環

• v-if

v-if='鍵名'

Vue.createApp({
    data() {
        return {
            鍵名: true  //邏輯為真   
        }
    }
}).mount("dom節點")

• v-for

v-for="對象名 in 數組名"
{{對象名.屬性名}}

Vue.createApp({
    data() {
        return {
            數組名: [
                {},{},{} //多個對象
            ]
        }
    }
}).mount("dom節點")

組件

• 注冊新組件

<todo-item></todo-item>

// 創建 Vue 應用
const app = Vue.createApp({

})

// 定義名為 todo-item 的新組件
app.component('todo-item', {
  template: `自定義模板`
})

// 掛載 Vue 應用
app.mount('dom節點')

• 組件實例
  createApp方法創建一個應用實例，該實例提供一個應用上下文，該方法返回的是實例本身；mount方法返回的是一個根組件實例，一個代理對象

該實例的常用方法包括：
	component    //用於注冊或檢索全局組件
	config       //包含應用配置的對象
	directive    //用於注冊或檢索全局指令
	mount        //將所提供的dom節點替換成應用根組件的模板渲染結果
	use

在一個vue應用中data方法就是一個組件實例（property）

• 生命周期鈎子
  寫在vue應用中，不能使用箭頭函數來定義生命周期方法

常用生命周期方法，讓我們在實例的不同階段執行自己的操作：
	beforeCreate     // 在實例初始化之后
	created          // 在實例創建完成后被立即調用
	beforeMount      // 在實例被掛載之前調用
	mounted          // 在實例被掛載后調用
	beforeUpdate     // 數據更新導致dom節點重新渲染之前
	updated          // 數據更改導致dom節點重新渲染時
	

模板語法

• 插值

{{}}     // 使用該方式進行數據綁定
v-once   // 使用該指令使數據只進行一次綁定

#c2{
    // css
}
v-bind:id = 'c1'  // 視圖部分
data(){  // 腳本部分
    return{
        c1 : 'c2'
    }
}

<div v-html = 'data'></div>    // 視圖部分，綁定html標簽
data(){    // 腳本部分
    data : 'html標簽'
}

腳本部分methods對象中寫方法時，盡量避免使用箭頭函數；
Vue 自動為 methods 綁定 this對象，使用箭頭函數時則會指向window對象，這時就不能使用this.$data.屬性