Vue 2.6版本基礎知識概要(一)
掛載元件
//將 App元件掛載到div#app節點裡
new Vue({
render: h => h(App),
}).$mount('#app')
VueComponent.$mount
封裝元件
<template>
<div id="app">
Hello Vue
</div>
</template>
<script>
export default {
name: 'app',
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
1 Vue元件檔案以.vue 結尾;
2 Vue元件模版，將html,css,js分別抽離到 tempplate ,style ,script ，各司其職，層次分明;
3 Vue實現css模組化的方式，是 scoped屬性，style scoped ,其原理與css-module類似，以多位hash值避免命名衝突(所以依然存在衝突的可能性);
4 Vue實現資料雙向繫結, 指令 v-model = 'dataOrPropName',即繫結props物件或data物件的key。因此，props與data的key命名不可衝突；
5 Vue實現列表渲染的關鍵指令是 v-for:"item in list" ,v-for屬性對當前標籤起作用,為了diff演算法依賴key值遍歷比對的實現，應當同時新增 v-bind:key = 'renewableVariat'繫結key值 ;
6 Vue元件實現父子元件間通訊:
<template>
<div id="app">
<HelloWorld v-bind:msg='msg' v-bind:click='getDataFormChild'/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
},
methods:{
getDataFormChild:(zz,yy)=>{
console.log(zz,yy);
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
如程式碼所示，單向資料流父傳子依然是通過props傳遞資訊，通過v-bind實現變數的傳值，子元件可通過呼叫父元件定義的方法並傳參，實現資料的逆向傳遞；
7 注意定義data的方式：
data:()=>({
msg:'hello, vue'
}),
如程式碼所示，data為函式，最終返回一個data物件。（這裡應考慮返回data物件的函式如果為非同步的情形）;
8 :
<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
name: 'app',
components: {
HelloWorld
},
props: {
msg: String,
click: Function
},
data:()=>({
msg:'hello, vue'
}),
methods:{
getDataFormChild:(zz,yy)=>{
console.log(zz,yy);
}
}
}
</script>
如程式碼所示，在js中引入依賴元件,最終暴露的是一個Vue元件的配置物件,其中，components為引入的元件集物件，data為函式，return出一個data物件，methods是方法集物件 ，props裡為props型別檢測物件。
9 注意所有js集或框架的型別檢測，都是 弱型別(源於js)的靜態/動態型別檢測: 靜態-指程式碼執行時才進行檢測; 動態-指程式碼編譯時就進行檢測(如ts);
10 Vue其他豐富的指令及封裝指令的方式;
11 Vue提供的元件通訊的多種api；
12 Vue-router ， vuex等外掛的使用;
13 vue 配合node 實現 ssr;
14 vue 配合node 實現部分同構；
15 vue底層原始碼的消化;
16 基於vue手封實現vuex的功能;
17 擁抱新版本，全面面向es6，深刻學習proxy(替代Object.defineProperty)及class(替代建構函式)的使用;
18 基於Vue指令的思想，寫react繼承類高階元件基於React.Component實現多個指令;