1. <wbr id="m8vu6"></wbr>

      <del id="m8vu6"><center id="m8vu6"><source id="m8vu6"></source></center></del>
        <p id="m8vu6"><sub id="m8vu6"></sub></p>

        VB.net 2010 視頻教程 VB.net 2010 視頻教程 python基礎視頻教程
        SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
        當前位置:
        首頁 > 編程開發 > .net教程 >
        • ASP.net教程之Vue 2.6 + 補漏

        Vue 2.6 + 補漏

        指令#

        動態參數#

        
        
        Copy
        <a v-bind:[attributeName]="url"> ... </a> <a v-on:[eventName]="doSomething"> ... </a>

        如果你的 Vue 實例有一個 data 屬性 attributeName,其值為 "href",那么這個綁定將等價于 v-bind:href

        約束

        
        
        Copy
        <!-- 這會觸發一個編譯警告 --> <a v-bind:['foo' + bar]="value"> ... </a> <!-- 在 DOM 中使用模板時這段代碼會被轉換為 `v-bind:[someattr]` --> <a v-bind:[someAttr]="value"> ... </a>

        計算屬性和偵聽器#

        計算屬性#

        計算屬性緩存 vs 方法#

        為什么計算屬性有緩存?

        
        
        Copy
        <p>Reversed message: "{{ reversedMessage() }}"</p>
        
        
        Copy
        // 在組件中 methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } }

        可以在模板中直接使用methods中的方法 計算屬性是基于它們的響應式依賴進行緩存的

        • 使用methods 訪問reversedMessage() ,每一次都會執行一遍
        • 使用computed 訪問reversedMessage() ,如果內部依賴的message沒有變化,不會執行內部邏輯,會返回上一次計算的結果

        注意:計算屬性依賴的數據必須是響應式數據(如data內定義的數據)

        計算屬性 vs 偵聽屬性#

        • 計算屬性 依賴變化 依賴數據變化才執行函數邏輯
        • 偵聽器 自身變化 自身數據變化才執行邏輯

          計算屬性的 setter#

          計算屬性默認還有getter

        
        
        Copy
        computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } }

        現在再運行 vm.fullName = 'John Doe' 時,setter 會被調用,vm.firstName 和 vm.lastName也會相應地被更新。

        偵聽器#

        數據變化時執行異步或開銷較大的操作時使用

        
        
        Copy
        watch: { // 如果 `question` 發生改變,這個函數就會運行 foo: function (new, old) { //... }, list:{ handler:function(){ }, deep:true // 如果list是個數組或對象,改變某一項或屬性都會 深度檢測到 } },

        Class和Style#

        class#

        對象用法#

        
        
        Copy
        <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

        注意前面已經有class了  isActive 是bl 值, 也可以直接在data或者計算屬性里寫 

        數組用法#

        
        
        Copy
        <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> or <div v-bind:class="[{ active: isActive }, errorClass]"></div>

         用在組件上#

        會被加到組件根元素上

        
        
        Copy
        <my-component class="baz boo"></my-component> <!-- class="之前的 baz boo" -->

        Style#

         對象用法#

        
        
        Copy
        <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

        可以直接在data里寫或者計算屬性也可以 vue-js 可以自動加前綴 如transform  注意 {直接寫,字符串} 不管是在template還是data里 

        條件渲染#

        v-if#

        2.1 新增

        
        
        Copy
        <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div>

        key #

        Vue 會盡可能高效地渲染元素,會復用一些元素(同一DOM,不同數據) 使用 Key 添加唯一標識,阻止復用

        v-show#

        v-show 只是控制 css display屬性 注意,v-show 不支持< template >元素,也不支持 v-else。 一般來說,v-if 有更高的切換開銷,而 v-show 有更高的初始渲染開銷。因此,如果需要非常頻繁地切換,則使用 v-show 較好;如果在運行時條件很少改變,則使用 v-if 較好

        v-for比v-if 優先級更高  不推薦使用

        列表渲染#

        使用對象#

        
        
        Copy
        <div v-for="(value, name, index) in object"> {{ index }}. {{ name }}: {{ value }} </div>

        遍歷時按Object.keys()遍歷順序

        維護狀態#

        注意:key 必須是 number和string

        數組更新檢測#

        變異方法#

        • push()
        • pop()
        • shift()
        • unshift()
        • splice()
        • sort()
        • reverse()

        這些方法改變原數組,可以做響應式變化

        注意事項#

        由于 JavaScript 的限制,Vue 不能檢測以下數組的變動:

        
        
        Copy
        var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // 不是響應性的 vm.items.length = 2 // 不是響應性的
        1. 使用 vm.$set 
        
        
        Copy
        vm.$set(vm.items, indexOfItem, newValue)
        1. 使用 splice()

        同樣對象也是如此

        1. 修改添加單個
        
        
        Copy
        //Vue.set(object, propertyName, value) Vue.set(vm.userProfile, 'age', 27)
        1. 修改添加多個
        
        
        Copy
        vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green' })

        可以在v-for 使用的

        
        
        Copy
        <li v-for="n in even(numbers)">{{ n }}</li> //函數 <div> <span v-for="n in 10">{{ n }} </span> </div> // 1 2 3 4 5.. 10 <ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider" role="presentation"></li> </template> </ul>

        組件上使用 v-for key 是必須的

        事件處理#

        事件修飾符 >>>#

        • .stop
        • .prevent
        • .capture
        • .self
        • .once
        • .passive
        
        
        Copy
        <!-- 阻止單擊事件繼續傳播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重載頁面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾符可以串聯 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修飾符 --> <form v-on:submit.prevent></form> <!-- 添加事件監聽器時使用事件捕獲模式 --> <!-- 即元素自身觸發的事件先在此處理,然后才交由內部元素進行處理 --> <div v-on:click.capture="doThis">...</div> <!-- 只當在 event.target 是當前元素自身時觸發處理函數 --> <!-- 即事件不是從內部元素觸發的 --> <div v-on:click.self="doThat">...</div>

        ??? 修飾符 

        v-model#

        v-model 在內部為不同的輸入元素使用不同的屬性并拋出不同的事件:

        • text 和 textarea 元素使用 value 屬性和 input 事件;
        • checkbox 和 radio 使用 checked 屬性和 change 事件;
        • select 字段將 value 作為 prop 并將 change 作為事件。
        相關教程
                
        免费看成年人视频大全_免费看成年人视频在线观看