項目目錄簡介
一.v-on和v-bind
(1)縮寫:
v-on:click=“方法” ? ? => ? ?@click="方法"
v-bind:title=“” ?=> ?:titlle=""
解析:
v-on提供了一些修改器操作安皱,例如:v-on:click.stop是阻止事件冒泡的,常用的有
@click
@keydown
@keydown.enter
v-bind: ?主要是一些屬性的綁定
二.子組件向外觸發(fā)的自定義事件
1.父組件中引用子組件
(1)把子組件import(我理解為node里面的require)
? ? ? ? ? ?eg:import comA from “子組件路徑”
(2)父組件的js
export default{
components:{
comA:comA ? ?(注意在ES6寫法中,如果等號兩邊的參數一樣可以直接寫comA)
}
methods{
//parmformA接收的參數是子組件傳遞的參數
oncomaMyevent (parmformA){
? ? ? ? console.log("oncomaMyevent" + parmformA)
}
}
}
父組件的body
<comA @my-event=“oncomaMyevent”></comA> ? ? ? ? ? ? ? ? ? ? ? ? ? ?
2.子組件,如圖
三.表單的數據綁定
四.計算屬性
計算屬性很強大在vue中权薯,體現在:
可以根據其他屬性來動態(tài)的更新計算屬性哥力,在一些場景下我們不使用一些類似事件監(jiān)聽的復雜功能倘核,直接使用計算屬性進行替代获印。
如果不用計算屬性同樣可以使用方法的形式涂滴。兩者有何區(qū)別呢:
1.計算屬性更新這里只會根據另一個值(這里指myValue)來更新肝陪,如果myValue不更新驳庭,那么myValWithoutNum也不會更新
2.使用方法調用時,不管是什么時候調用此方法都會進行處理氯窍,比如說Date.now(),計算屬性里面如果沒有引用變量饲常,這個值就是頁面渲染的初始值,不會變動
五.屬性監(jiān)聽watch
六.父子組件間的通信
在 Vue.js 中荞驴,父子組件的關系可以總結為props down, events up不皆。
父組件通過 props 向下傳遞數據給子組件,子組件通過 events 給父組件發(fā)送消息熊楼∨Γ看看它們是怎么工作的。
1.靜態(tài)組件通信
2.動態(tài)組件通信鲫骗,具體方法如下
(1)通過屬性向內傳遞props犬耻。父組件是通過props屬性給子組件通信的來看下代碼
父組件