Vue.js 入門教程

1.Vue.js 入門教程html

1.1什麼是 Vue.js?vue

Vue.js 是用於構建交互式的 Web 界面的庫。npm

Vue.js 提供了 MVVM 數據綁定和一個可組合的組件系統,具備簡單、靈活的 API。app

1.2Vue.js 特色異步

  • 簡潔: HTML 模板 + JSON 數據,再建立一個 Vue 實例,就這麼簡單。
  • 數據驅動: 自動追蹤依賴的模板表達式和計算屬性。
  • 組件化: 用解耦、可複用的組件來構造界面。
  • 輕量: ~24kb min+gzip,無依賴。
  • 快速: 精確有效的異步批量 DOM 更新。
  • 模塊友好: 經過 NPM 或 Bower 安裝,無縫融入你的工做流。

若是你喜歡下面這些,那你必定會喜歡 Vue.js:組件化

1.3NPM 安裝ui

在用 Vue.js 構建大型應用時推薦使用 NPM 安裝:spa

# 最新穩定版本
$ npm install vue
# 最新穩定 CSP 兼容版本
$ npm install vue@csp
# 開發版本(直接從 GitHub 安裝)
$ npm install vuejs/vue#dev

1.4Bower 安裝code

# 最新穩定版本
$ bower install vue

1.5建立第一個 Vue 應用htm

接下來咱們建立第一個 Vue 應用。

View 層 - HTML 代碼以下:

<div id="app">
  {{ message }}
</div>

Model 層 - JavaScript 代碼以下(需放在指定的HTML元素以後):

new Vue({
    el:'#app',
    data: {
        message:'Hello World!'
    }
});

1.6雙向數據綁定

接下來咱們建立一個 view 層 HTML 文件:vueapp.htm,以及 model 層文件:vueapp.js,而後經過 vue.js(使用v-model這個指令)完成中間的底層邏輯,實現綁定的效果。改變其中的任何一層,另一層都會改變。

vueapp.htm 文件代碼:

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

vueapp.js 文件代碼:

new Vue({
  el: '#app',
  data: {
    message: 'hello!'
  }
})

1.6列表輸出

列表輸出使用 v-for(v-for取代了1.0之前版本中的v-repeat) 這個指令就能完成:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
</div>
<script>
    new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue.js' },
      { text: 'Build Something Awesome' }
    ]
  }
})
</script>
</body>
</html>

1.7條件判斷

在字符串模板中,如 Handlebars,咱們得像這樣寫一個條件塊:

<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

在 Vue.js,咱們使用 v-if 指令實現一樣的功能:

<h1 v-if="ok">Yes</h1>

也能夠用 v-else 添加一個 "else" 塊:

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

由於 v-if 是一個指令,須要將它添加到一個元素上。可是若是咱們想切換多個元素呢?此時咱們能夠把一個 <template> 元素當作包裝元素,並在上面使用 v-if,最終的渲染結果不會包含它。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

1.7v-show

v-show做用與v-if相似,不一樣的是v-show的元素會始終渲染並保持在 DOM 中,且v-show不支持<template>標籤。

<h1 v-show="ok">Hello!</h1>

1.8過濾器

與Linux中的管道相似,vue.js也使用的是|:

{{message | uppercase}}

這樣就能輸出message的大寫了,過濾器也能串聯在一塊兒使用:

{{message | reverse | uppercase}}

這裏reverse並非內建的過濾器,咱們能夠用Vue.filter自定義:

Vue.filter('reverse', function (value) {
    return value.split('').reverse().join('')
})
相關文章
相關標籤/搜索