Vue的基本使用教程4

2021-10-10 03:18:23 字數 1180 閱讀 9301

事件修飾符-stop-once控制

表單繫結-text-textarea

表單繫結-checkbox-單個-多個

表單繫結-radio

表單繫結-select-單選-多選

表單繫結-修飾符

使用component自定義元件

使用component-動態傳遞引數

使用component-使用物件傳遞多個引數

使用component-子元件向父元件傳遞自定義事件

使用component-子元件向父元件傳遞自定義事件以及攜帶資料輸出

修飾符是控制事件物件的接下來的行為,比如是否繼續傳播或者只響應依次

(1)stop:阻止事件的繼續傳播

(2)once: 只觸發一次

}

stop

once

}

}

(1)繫結到單個核取方塊,布林型別

記住

(2)繫結到多個核取方塊,陣列型別

記住

足球 籃球

桌球

羽毛球

(1)下拉列表單選

}

(2)下拉列表多選

}

(1)lazy修飾是改變輸入渲染為change事件發生時渲染

(2)number修飾將輸入的資料由字串型別自動轉化為數值型別

(3)trim修飾符將使用者輸入的資料前面和後面的空格去掉

}

.lazy渲染:}

.number渲染 .trim渲染

元件是自定義html元素,同時可以應用vue的功能,複雜應用可以使用元件方式進行封裝

向元件中傳遞引數通過props屬性進行

子元件傳遞事件時攜帶資料

Vue高階4 route基本使用

路由 vue router 就是vue框架裡只有乙個html,但是乙個 不可能只有乙個頁面,或者好多個視窗,所以就用vue router來實現用於整合頁面。官網 vue router的基本使用 main.js中 import vuerouter from vue router vue.use vue...

VUE的基本使用

cn.vuejs.org src vue.js script 掛載點 data msg 資料 methods v text v html 插入文字兩者的區別和innertext innerhtml 區別一樣 v show css級別的顯示隱藏,display none v show true fal...

Vue的基本使用

1.例項引數分析 2.插值表示式用法 3.陣列相關api 3.1 變異方法 修改原有資料 3.2 替換陣列 生成新的陣列 3.3 修改響應式資料 前段渲染方式 2.指令 2.1 資料繫結指令 2.2 資料響應式 2.3自定義指令 3.事件繫結 3.1vue如何處理事件?3.2事件函式的呼叫方式 3....