vue.js入門

Vue.js核心概念速覽

Vue.js是一個基於MVVM架構的JavaScript庫，用於構建用戶界面。它比AngularJS更簡潔、易學且靈活。其核心功能包括：

• 數據綁定： 支持單向和雙向數據綁定，v-model指令實現雙向綁定，模型變化實時反映在視圖上。
• 指令和過濾器： 指令用於操作DOM，過濾器用於數據處理。
• 組件化： 創建可複用的自定義HTML元素，提高代碼可讀性和維護性，使用props屬性傳遞組件屬性。

注意：本教程基於Vue.js 1.x版本。 Vue 2.x教程請參考其他資源。

將Vue.js添加到頁面

推薦使用CDN引入Vue.js：

<🎜>

創建視圖模型

Vue.js視圖模型使用Vue類創建。視圖模型連接數據模型和視圖。

示例：

HTML視圖：

<div id="my_view"></div>

數據模型：

var myModel = {
  name: "Ashley",
  age: 24
};

視圖模型：

var myViewModel = new Vue({
  el: '#my_view',
  data: myModel
});

使用{{ }}語法在視圖中顯示數據：

<div id="my_view">
  {{ name }} is {{ age }} years old.
</div>

雙向數據綁定

使用v-model指令實現雙向數據綁定：

<div id="my_view">
  <label for="name">Enter name:</label>
  <input type="text" v-model="name" id="name" name="name">
  <p>{{ name }} is {{ age }} years old.</p>
</div>

過濾器

過濾器用於數據處理，使用|符號調用：

{{ name | uppercase }}

渲染數組

使用v-for指令渲染數組：

<div id="my_view">
  <ul>
    <li v-for="friend in friends">{{ friend.name }}</li>
  </ul>
</div>

使用orderBy過濾器排序：

<li v-for="friend in friends | orderBy 'age'">{{ friend.name }}</li>

使用filterBy過濾器篩選：

<li v-for="friend in friends | filterBy 'a' in 'name'">{{ friend.name }}</li>

事件處理

在視圖模型的methods屬性中定義事件處理函數，使用v-on指令綁定事件：

var myViewModel = new Vue({
  // ...
  methods: {
    myClickHandler: function(e) {
      alert("Hello " + this.name);
    }
  }
});

<button v-on:click="myClickHandler">Say Hello</button>

創建組件

使用Vue.component方法創建組件：

Vue.component('sitepoint', {
  template: '<a href="https://www.php.cn/link/aeda4e5a3a22f1e1b0cfe7a8191fb21a">Sitepoint</a>'
});

使用props屬性傳遞組件屬性：

Vue.component('sitepoint', {
  props: ['channel'],
  template: '<a href="https://www.php.cn/link/aeda4e5a3a22f1e1b0cfe7a8191fb21a/{{ channel | lowercase }}">{{ channel }} @Sitepoint</a>',
});

總結

本教程介紹了Vue.js的基本概念，包括數據綁定、指令、過濾器、事件處理和組件創建。 更多高級特性，請參考官方文檔。

(後續內容，例如常見問題解答，可以根據需要添加，保持與原文一致性即可。)

以上是vue.js入門的詳細內容。更多資訊請關注PHP中文網其他相關文章！