MVC、MVVM關系圖解
1. mvc（后端思想）
2. mvvm（前端思想）
簡單指令
1.v-cloak
<div v-cloak>{{ msg }}</div>
解決插值運算式的閃爍問題(頁面重繪加載時出現的{{}})
注 ： 配 合 樣 式 [ v ? c l o a k ] d i s l p a y : n o n e \color{red}{注：配合樣式 [v-cloak] { dislpay: none }} 注：配合樣式[v?cloak]dislpay:none
**
- 不決議標簽
- 只替換占位符，不覆寫原本內容
2. v-text
<div v-text = "msg"></div>
- 默認沒有閃爍問題
- 覆寫元素中的內容
- 不決議標簽
3.v-html
<div v-html= "msg"></div>
- 覆寫元素中內容
- 會決議標簽
4.v-bind:（簡寫為‘:’）
<input type='button' v-bind:title='mytitle'></div>
系結屬性,資料單向系結
不加v-bind時，則認為’mytitle’為字串，加上后則為變數或者合法js運算式5.v-on:（簡寫‘@’）
系結事件
- 點擊：v-on:click = ‘方法名’ -------@click
- 懸浮：v-on:mouseover = ‘方法名’ -------@mouseover
- 離開：v-on:mouseout = ‘方法名’ -------@mouseout
- 移動端 touchstart、touchend、touchmove…
6.事件修飾符
寫在系結事件名后：如 @click.stop
- .stop：阻止冒泡
- .prevent：阻止默認行為
- .capture：改為事件捕獲
- .self：事件在該元素本身觸發時 觸發回呼
- .once：只觸發一次
7.資料雙向系結指令 v-model
<input type ='text' v-module = '屬性名'>
注 ： 僅 適 用 于 表 單 元 素 \color{red}{注：僅適用于表單元素} 注：僅適用于表單元素8.v-for回圈遍歷
<p v-for = '(值, 索引) in 陣列名/物件名' :key=''></p>
- key的值只能為 srting 或者 number型別
- 使用系結屬性的形式指定key的值
9.v-if、v-show
<p v-if = '條件'></p>
<p v-show = '條件'></p>
- v-if 洗掉或創建元素
- 有較高切換性能消耗，若元素需頻繁切換，不適用v-if
- v-show 隱藏或顯示元素，等同切換 display值 => ‘none’
- 有較高初始渲染消耗，若元素并不需要顯示，不適用v-show
過濾器
用作常見的文本格式化，可使用在：mustache插值 和 v-bind運算式；
{{ msg | 過濾器名稱(傳參)}} ===> 先通過過濾器對資料進行處理后，在回傳給name顯示；
‘|’ => 管道符；
過濾器呼叫 采用就近原則，當全域過濾器與私有過濾器重名，則優先采用私有過濾器；
1.全域過濾器
所有的vm實體都共享
定義：Vue.filter(‘過濾器名稱’, function(msg,arg){ //資料處理 })
定義位置：在vm實體外面定義
引數：
- msg：管道符前面的資料
- arg：接收的引數
2.私有過濾器(區域)
定義位置：vm內部，filters: {}，與methods同級
定義：filters:{ 過濾器名稱(管道符前資料，接受的引數) {}}
《=========》
(小知識)：string.padStart(2, ‘0’) 用來給個位數補零
自定義指令
自定義指令名以 ‘v-’ 開頭
1.全域
定義：Vue.directive(‘自定義指令嗎’, {})
引數1：指令名稱 定義時，自定義指令名不加 ‘v-’ 前綴，呼叫時需加上
引數2：物件，物件中有一些指令相關函式，在特定階段執行相應操作
例：焦點事件
<input type='text' v-focus>Vue.directive('focus', { 每個函式第一個引數為 el，表示被系結指令的元素，此時可使用原生的方法 bind:function(el){ //指令系結到元素上時執行，僅一次 el.focus() //元素還未插入到DOM 中,不生效 //多為與樣式相關的操作 } inserted:function(el){ //元素插入到 DOM 中的時候執行，僅一次 el.focus() //元素已經插入到DOM 中，生效 //多為與js相關的操作 } updated:function(){ //VNode 更新時執行,可能觸發多次 } })函式相關引數
2.私有
定義位置：在vm實體內定義，與 methods 同級
定義：directives: {'自定義指令名': {相關函式}}
函式簡寫(全域/私有)：
實體生命周期
生命周期函式與 methods 同級
**html:** <div id='app'> <input type='button' value='改變msg' @click="msg='No'"> <p id='p'>{{ msg }}</p> </div> **js:** var vm = new Vue({ el: '#app', data: { msg: 'ok' }, methods: { show() { console.log('執行了show方法') } }, })***創建期間的生命周期函式*** beforCreate(){ //實體被完全創建之前執行 //在這個生命周期內，data 和 methods 中的資料未初始化 console.log(this.msg); //undefined this.show() //報錯，this.show() is not a function } created() { //在這個生命周期內，data 和 methods 中的資料初始化完成 //可呼叫 methods 中的方法和操作 data 中的資料 console.log(msg) //ok this.show() //執行了show方法 } beforeMount() { //模板在記憶體中編譯完成，還未渲染到頁面中 //在這個生命周期內，頁面中的元素未被替換，還是原來寫好的模板字串 console.log(document.getElementById('p').innerHtml) //{{ msg }} } mounted() { 實體創建期間的最后一個生命周期函式 //將編譯好的記憶體中的模板掛在到頁面中 console.log(document.getElementById('p').innerHtml) //ok } ***組件運行階段的生命周期函式*** beforeUpdate() { //界面還未被更新，但資料已被更新 //組件/資料被改變時觸發 //例：當點擊input按鈕時： console.log(document.getElementById('p').innerHtml) // ok ===>頁面未更新 console.log(this.msg) // No ===>資料已經改變 } undaated(){ //頁面與資料都已更新 //組件/資料被改變時觸發 //例：當點擊input按鈕時： console.log(document.getElementById('p').innerHtml) // No ===>頁面已更新 console.log(this.msg) // No ===>資料已經改變 } ***組件銷毀階段的生命周期函式*** beforeDestroy() { //還未執行銷毀程序 } destroyed() { //組件被完全銷毀，此時組件中所有的資料、方法、指令、過濾器等 都不可用 }
影片
將需要影片的元素使用 標簽包裹
樣式：
v-enter, v-leave-to {} ——>進入和離開
v-enter-active, v-leave-active {} ——>中間程序影片
點擊查看：vue影片詳細介紹
組件
定義：拆分vue實體的代碼量，不同組件劃分不同功能模塊，需要時呼叫
1.全域創建
<div id='app'> <my-com1></my-com1>//參考組件 </div> <template id='tmp1'> <div> //根元素 <p>創建的組件</p> </div> </template> ****Vue.component('組件名稱', { //創建的組件模板物件 })**** Vue.component('myCom1', { template: '#tmp1' }) 注： 1.若組件名稱使用駝峰命名時，呼叫時用小寫，并且單詞之間‘-’連接，若未使用駝峰命名，則直接參考組件名； 2.常見的模板物件必須有一個根元素包裹2.區域創建(私有)
實體內部，與methods同級
components: { //定義實體內部私有組件 組件名: { template: '' } }3.組件中 data、methods
Vue.compontent('com1', { template: '', data: function() { return {} //組件中的 data 為一個函式，且必須 return 一個物件 }, methods: {} })4.組件切換
<component :is="'組件名'"></component>5.組件傳值
1.父傳子
<div id='#app'> <com1 :parentmsg='msg' v-on:func='show'></com1> </div> <template id='son'> <div> <input type='button' value='點擊呼叫父組件傳遞的方法' @click=‘parentfunc’> <p>子組件---{{ parentmag }}</p> </div> </template> var vm = new Vue({ el: '#app', data: { msg: '父組件資料' }, methods: { show() { console.log('呼叫了父組件方法') } }, //定義子組件： components: { com1: { template: '#son', props: ['parentmsg'], //將父組件傳遞的parentmsg屬性在props陣列中定義，然后才能使用，但是不做更改 methods: { parentfunc() { this.$emit(‘func’) } } } } }) 總結： （1）在父組件呼叫子組件的地方，系結一個自定義屬性，屬性值為要傳遞的資料，在子組件定義的地方通過props陣列接收 （2）若呼叫父組件的方法，在父組件呼叫子組件的地方，使用事件系結方式，自定義事件名,在子組件的方法中，通過this.$emit('方法名')呼叫父組件方法2.子傳父
通過子組件呼叫父組件方法的方式，將要傳給父組件的資料以引數形式回傳，在父組件中，呼叫方法時接受該引數,若傳遞的為物件，則在父組件data中定義變數接收
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/125070.html
標籤：其他