Vue.js 入門教程

時間 2019-12-11

標籤 vue.js vue 入門教程欄目 JavaScript 简体版

原文原文鏈接

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('')
})

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。