Vue.js 0基礎學習

一、應用與組件實例

1、生命周期函數不能采用箭頭函數的寫法，因為箭頭函數沒有this

二、模版語法

1、v-once：一次插值

2、v-html：類似react的dangerouslySetInnerHTML

3、v-bind：動態(tài)設置屬性值，簡寫為冒號

4、v-on：監(jiān)聽方法，簡寫為@

5、@click.stop 不會向上冒泡

6、v-bind:class?值支持"","{}","[]"

7、模版表達式{{}}無法訪問用戶定義的全局變量

三、計算屬性和監(jiān)聽器

1、計算屬性computed與方法methods的區(qū)別：computed有緩存，當data不變時，不會重新計算

2、計算屬性computed與watch監(jiān)聽器的區(qū)別：watch監(jiān)聽器更適合異步操作

四、條件渲染

1、v-show = false? 本質上是display: none

2、為不可見的包裹元素

3、標簽添加key屬性，將不會復用

五、列表渲染

1、v-for="item,index in items" //數組?v-for=“value,key in object” //對象

六、事件綁定

1、事件最后一個參數是$event，則獲取原始DOM的event.target.tagName

2、scroll.passive 提升滾動性能

七、表單輸入綁定

1、v-model.lazy：只有在發(fā)生change事件時才會觸發(fā)，而不是input觸發(fā)

2、v-model.number：將輸入值轉數字

3、v-model.trim：過濾首尾空白字符

八、組件基礎

1、組件內部用this.$emit('clicknow',this.count) 綁定外部方法clicknow，并且將count值傳給外部方法clicknow

外部調用組件并通過@clicknow="myclick"傳入myclick方法，myclick方法類似這樣定義：

methods:{    myclick: function(e){????????console.log(e)?//this.count????}}

2、組件中的data必須是函數

3、v-model="a" 等價于?:value="a" @input="a=$event.target.value"

4、調用組件時，在組件標簽之間添加文本內容，需要在組件內部用占位

5、動態(tài)組件：

九、插槽

1、slot標簽中可以有內容，用于默認顯示

2、slot可以有name屬性，在調用該組件時通過template標簽v-slot傳入該name值，會顯示在對應位置

3、v-slot縮寫為#