追求卓越一諾千金

藍藍設計_|_重庆富士康工资待遇,2011年成立--临朐韩涛,主創清華團隊-|易富彩平台注册,專注軟件和互聯網ui設計開發-||中央一台在线直播观看。擅長企業信息化管理|-_帅猴手机维修论坛、監控||众彩国际app、大數據軟件UIUE谘詢和設計開發服務-_掌上彩票客服。立足UI||青岛教育人事网,好好學習-|-北京耳鼻喉科解放军466医院,天天進步-|ems一般几天能到!


Vue一些注意點

2019-8-27 釋然 前端及開發文章及欣賞


1.Method與計算屬性computed的區別
區別在於method每次都執行函數_-|立冬立秋诗句,而computed基於依賴緩存-_-互动作业在线网站使用,隻要相關值不變__法蓝瓷价格,那麼就不必再執行函數||长青贝妮。

下麵|--3g彩票网址com,注意Date不是響應式依賴|_芙蓉树下的博客:

computed: {
  now: function () {
    return Date.now()
  }
}
所以使用計算屬性

2.v-if與v-show
v-if 是真實的條件渲染-|_陈默的新浪微博,因為它會確保條件塊在切換當中適當地銷毀與重建條件塊內的事件監聽器和子組件-|_金华市婺城区地图。

v-if 也是惰性的-_中国水产网:如果在初始渲染時條件為假-_娱乐天地检点登录,則什麼也不做——在條件第一次變為真時才開始局部編譯(編譯會被緩存起來)网上三好街报价。

相比之下--7k 7k小游戏, v-show 簡單得多——元素始終被編譯並保留|--创业我们的故事,隻是簡單地基於 CSS 切換|-苹果皮c皮官网。

一般來說_105彩票安全吗, v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗|-_注册即送30彩金彩票。因此|-众发娱乐是违法赌博吗?,如果需要頻繁切換使用 v-show 較好||-ct透视器,如果在運行時條件不大可能改變則使用 v-if 較好-_|静安 大火。

令__|嘉酒视窗,v-show不支持template語法_|_易旺彩票靠谱吗。

3.v-for
可以v-for="item in items"也可以of

還有可選第二參數作為前項的索引--|盈彩在线下载:

<li v-for="(item, index) in items">
也可以用模板渲染父節點或模板|-hp5200打印机驱动下载,來渲染多個子塊_-朴树亚健康创新平台。

<ul id="repeat-object" class="demo">
     <li v-for="value in object">
       {{ value }}
     </li>
  </ul>
new Vue({
       el: '#repeat-object',
       data: {
       object: [
        {FirstName: 'John'},
        {LastName: 'Doe'},
        {Age: 30}
      ]
    }
  })
寫成這樣_-11选五任选7中奖率,輸出|-142857和彩票的规律性:

{ "FirstName": "John" }
{ "LastName": "Doe" }
{ "Age": 30 }
將object從數組變為如下_|盐都区政府:

object: {

FirstName: 'John',

LastName: 'Doe',

Age: 30

}

那麼輸出|-_进口报关单样本:

John
Doe
30
此時直接指向的是值了_|长沙租房口碑网。

還有三參數|_云顶国际赌场:v-for="(value, key, index) in object"
還可以用整數_--泷泽萝拉 七里香,輸出10個數字|-金亚莱的领袖:

<div id="haha">
  <span v-for="n in 10">{{ n }}</span>
</div>
var t=1,n=0;
new Vue({
 el: '#haha',
 data: {
 object: {
 n:n+t
  }
 }
})
很好的例子
4.一些數組方法
push()__sky浪翻云博客:在末尾添加一個或多個元素|_|奶妈论坛,並返回新長度
pop()|-2009手机qq:刪除並返回最後一個元素
shift()_-警车开道铃声:刪除並返回第一個元素
unshift()-湖北恩施特产:數組開頭添加一個或多個元素-|长风破浪会有时下一句,並返回新長度
splice()_360彩票杀号时时彩:刪除或替換元素|山西环法尊道长,返回被刪除元素-|_亿发彩票?。splice(index|_qq2011版下载,number|-51jiemeng,new ele)_|256cp彩票三分11选5,用new ele 替換index開始的number個元素
sort()
reverse()


5.類似v-on:click(含參)的注意點
<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
methods: {
  warn: function (message, event) {
    // 現在我們可以訪問原生事件對象
    if (event) event.preventDefault()
    alert(message)
  }
}
如上||乒乓球教学视频下载,可以傳入原生DOM對象|||银河彩票网址。
阻止冒泡還有其他方法||35彩票官网,即在v-on上使用事件修飾符-_256彩票。常見事件修飾符有||真崎航资源:
<!-- 阻止單擊事件冒泡 -->
<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>
<!-- 隻當事件在該元素本身(而不是子元素)觸發時觸發回調 -->
<div v-on:click.self="doThat">...</div>
<!-- 隻會觸發一次點擊 -->
<a v-on:click.once="doThis"></a>
有事件修飾符--|能看cctv5的网络电视,還有鍵盤修飾符--中兴彩票ApP。
<!-- 隻有在 keyCode 是 13 時調用 vm.submit() -->
<input v-on:keyup.13="submit">
<input v-on:keyup.enter="submit">
又新增了按鍵修飾符|__亿博彩票手机端,和組合鍵修飾_|注册即送30彩金彩票:
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
6.神奇的v-model
神奇之處在於會根據控件形式自動選取方法更新元素-|288彩票平台官网。
例子
<div id="che">
      <select v-model="sele"  multiple>
         <option v-for="op in ops" v-bind:value="op.index">{{op.va}}</option>
         
      </select>
      <span>{{sele}}</span>
    </div>
new Vue({
          el: '#che',
          data: {
            sele: [],
            ops:[
                {index:1,va:"s"},
                {index:2,va:"ss"},
                {index:3,va:"ssr"}
            ]
          }
        })
若option裏綁定value-|至尊时时彩票平台4567,則會將value值按所選中的放在數組sele開頭|||湖笔徽墨宣纸端砚。
若沒有綁定value-盈彩娱乐骗局,會將{{op.va}}當做value__艽艽99999。若寫為{{op.index}}則將index當做value_--血色玫瑰金陵女神。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司_|盈彩网apP,為期望卓越的國內外企業提供卓越的UI界麵設計|||咏宁 失手死亡的视频、BS界麵設計 -_18146大乐透开奖结果、 cs界麵設計 __钟小江微博、 ipad界麵設計 |-_网通固定电话费查询、 包裝設計 -90后无视鸣枪砍警察、 圖標定製 _阳城县人力资源和社会保障局、 用戶體驗 -|365彩票买不了怎么回事、交互設計|-_钱莹博客、 網站建設 --诺亚舟电子词典、平麵設計服務_|-月工作总结结尾。
標簽: Vue一些注意點 « 當我們談論設計的高級感時_-qq2009手机版,到底在說什麼|||云顶注册送25? | 全方位揭秘有讚的產品設計原則»


訂閱Rss