vue.js 學習筆記（一）

gaosboy 發布于2019-08-19 17:57 / 2331人閱讀

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

一、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" }
    ]
  }
});

數組變動檢測

Vue.js 包裝了被觀察數組的變異方法，故它們能觸發視圖更新。被包裝的方法有：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) {
      // 方法內 `this` 指向 vm
      alert("Hello " + this.name + "!")
      // `event` 是原生 DOM 事件
      alert(event.target.tagName)
    }
  }
})

// 也可以在 JavaScript 代碼中調用方法
vm.greet(); // -> "Hello Vue.js!"

內聯語句處理器


  
  

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

有時也需要在內聯語句處理器中訪問原生 DOM 事件。可以用特殊變量 $event 把它傳入方法


 methods: {
  say: function (msg, event) {
    // 現在我們可以訪問原生事件對象
    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 規則:

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

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

你可以在同一元素上通過動態綁定實現不同的過渡：

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
  }
});

云服務器 GPU云服務器學習筆記一學習筆記基礎學習筆記深度學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79031.html

Vue.js學習系列二 —— vuex學習實踐筆記（附DEMO）

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

DobbyKim 2019-08-21 15:52 評論0 收藏0
(原創)vue 學習筆記

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

layman 2019-08-22 18:09 評論0 收藏0
Vue學習筆記（一）

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

baoxl 2019-08-30 13:47 評論0 收藏0
Vue學習筆記（一）

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

liukai90 2019-08-21 17:05 評論0 收藏0
Vue學習筆記（一）

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

rollback 2019-08-01 17:49 評論0 收藏0