国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue.js 學(xué)習(xí)筆記（一）

gaosboy / 2330人閱讀

摘要：一縮寫完整語法縮寫完整語法縮寫二縮寫完整語法縮寫三過濾器四條件渲染五列表渲染數(shù)組變動檢測包裝了被觀察數(shù)組的變異方法，故它們能觸發(fā)視圖更新。

一、v-bind 縮寫
二、v-on 縮寫
三、過濾器 
{{ message | capitalize }}
四、條件渲染 v-if 
Yes


No





  Sorry




  Not sorry
template-v-if
v-show 
Hello!
五、列表渲染 for v-for 
    
  
  • 
    {{ item.message }}
  
    • 


var example1 = new Vue({
  el: "#example-1",
  data: {
    items: [
      { message: "Foo" },
      { message: "Bar" }
    ]
  }
});
    

    
  
  • 
    {{ parentMessage }} - {{ $index }} - {{ item.message }}
  
    • 


var example2 = new Vue({
  el: "#example-2",
  data: {
    parentMessage: "Parent",
    items: [
      { message: "Foo" },
      { message: "Bar" }
    ]
  }
});
數(shù)組變動檢測

Vue.js 包裝了被觀察數(shù)組的變異方法，故它們能觸發(fā)視圖更新。被包裝的方法有：push(), pop(), shift(), unshift(), splice(), sort(), reverse()

example1.items.push({ message: "Baz" });
example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/);
});
template-v-for
對象 v-for 
    
  
  • 
    {{ $key }} : {{ value }}
  
    • 


new Vue({
  el: "#repeat-object",
  data: {
    object: {
      FirstName: "John",
      LastName: "Doe",
      Age: 30
    }
  }
});
值域 v-for 

  {{ n }}
六、方法與事件處理器 方法處理器 

  



var vm = new Vue({
  el: "#example",
  data: {
    name: "Vue.js"
  },
  // 在 `methods` 對象中定義方法
  methods: {
    greet: function (event) {
      // 方法內(nèi) `this` 指向 vm
      alert("Hello " + this.name + "!")
      // `event` 是原生 DOM 事件
      alert(event.target.tagName)
    }
  }
})

// 也可以在 JavaScript 代碼中調(diào)用方法
vm.greet(); // -> "Hello Vue.js!"
內(nèi)聯(lián)語句處理器 

  
  


new Vue({
  el: "#example-2",
  methods: {
    say: function (msg) {
      alert(msg)
    }
  }
});

有時也需要在內(nèi)聯(lián)語句處理器中訪問原生 DOM 事件?？梢杂锰厥庾兞?$event 把它傳入方法


 methods: {
  say: function (msg, event) {
    // 現(xiàn)在我們可以訪問原生事件對象
    event.preventDefault()
  }
};

## 事件修飾符

## 按鍵修飾符

全部的按鍵別名：enter，tab，delete，esc，space，up，down，left，right

## 其他實例

new Vue({
  el: "#demo",
  data: {
    newLabel: "",
    stats: stats
  },
  methods: {
    add: function (e) {
      e.preventDefault()
      if (!this.newLabel) {
        return;
      }
      this.stats.push({
        label: this.newLabel,
        value: 100
      });
      this.newLabel = "";
    },
    remove: function (stat) {
      if (this.stats.length > 3) {
        this.stats.$remove(stat); // 注意這里的$remove
      } else {
        alert("Can"t delete more!")
      }
    }
  }
});
七、過渡 CSS 過渡 
hello

然后為 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS 規(guī)則:

/* 必需 */
.expand-transition {
  transition: all .3s ease;
  height: 30px;
  padding: 10px;
  background-color: #eee;
  overflow: hidden;
}

/* .expand-enter 定義進入的開始狀態(tài) */
/* .expand-leave 定義離開的結(jié)束狀態(tài) */
.expand-enter, .expand-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}

你可以在同一元素上通過動態(tài)綁定實現(xiàn)不同的過渡：

hello
 
new Vue({
  el: "...",
  data: {
    show: false,
    transitionName: "fade"
  }
}

另外，可以提供 JavaScript 鉤子:

Vue.transition("expand", {

  beforeEnter: function (el) {
    el.textContent = "beforeEnter"
  },
  enter: function (el) {
    el.textContent = "enter"
  },
  afterEnter: function (el) {
    el.textContent = "afterEnter"
  },
  enterCancelled: function (el) {
    // handle cancellation
  },

  beforeLeave: function (el) {
    el.textContent = "beforeLeave"
  },
  leave: function (el) {
    el.textContent = "leave"
  },
  afterLeave: function (el) {
    el.textContent = "afterLeave"
  },
  leaveCancelled: function (el) {
    // handle cancellation
  }
});

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/79031.html

相關(guān)文章

  • Vue.js學(xué)習(xí)系列二 —— vuex學(xué)習(xí)實踐筆記（附DEMO）

    摘要：有興趣的同學(xué)可以查看之前發(fā)布的文章學(xué)習(xí)系列一學(xué)習(xí)實踐筆記附學(xué)習(xí)系列二學(xué)習(xí)實踐筆記附學(xué)習(xí)系列三和網(wǎng)絡(luò)傳輸相關(guān)知識的學(xué)習(xí)實踐學(xué)習(xí)系列四打包工具的使用學(xué)習(xí)系列五從來聊聊學(xué)習(xí)系列項目地址項目暫時有點亂，之后會進行整理優(yōu)化。 上次學(xué)習(xí)了vue-router的使用，讓我能夠在各個頁面間切換，將頁面搭建了起來。這次則要學(xué)習(xí)vue的狀態(tài)管理模式——vuex。它類似于redux來應(yīng)用的全局狀態(tài)。 注：本...

    DobbyKim 評論0 收藏0

  • (原創(chuàng))vue 學(xué)習(xí)筆記

    摘要：菜鳥教程這是一個屬性其值是字符串菜鳥教程同上這是一個屬性其值是字符串用于定義的函數(shù)，可以通過來返回函數(shù)值。它們都有前綴，以便與用戶定義的屬性區(qū)分開來。 開篇語 我最近學(xué)習(xí)了js,取得進步,現(xiàn)在學(xué)習(xí)vue.js.建議新手學(xué)習(xí),請不要用npm的方式(vue-cli,vue腳手架),太復(fù)雜了. 請直接下載vue.js文件本地引入,就上手學(xué)習(xí)吧參照菜鳥教程網(wǎng)站的vue.js教程http://...

    layman 評論0 收藏0

  • Vue學(xué)習(xí)筆記（一）

    摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護。隱藏四事件之前說了一些關(guān)于事件的指令，這里詳細學(xué)習(xí)一下事件的相關(guān)知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進行數(shù)據(jù)綁定，顯示在頁面中，也稱為語法。 一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯誤讀音v-u-e，由華人尤雨溪開源并維護。 Vue有以下特點： 是一個構(gòu)建用戶界面的框架 是一...

    baoxl 評論0 收藏0

  • Vue學(xué)習(xí)筆記（一）

    摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護。隱藏四事件之前說了一些關(guān)于事件的指令，這里詳細學(xué)習(xí)一下事件的相關(guān)知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進行數(shù)據(jù)綁定，顯示在頁面中，也稱為語法。 一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯誤讀音v-u-e，由華人尤雨溪開源并維護。 Vue有以下特點： 是一個構(gòu)建用戶界面的框架 是一...

    liukai90 評論0 收藏0

  • Vue學(xué)習(xí)筆記（一）

    摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護。隱藏四事件之前說了一些關(guān)于事件的指令，這里詳細學(xué)習(xí)一下事件的相關(guān)知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進行數(shù)據(jù)綁定，顯示在頁面中，也稱為語法。 一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯誤讀音v-u-e，由華人尤雨溪開源并維護。 Vue有以下特點： 是一個構(gòu)建用戶界面的框架 是一...

    rollback 評論0 收藏0

發(fā)表評論

0條評論

gaosboy

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<