Vue.js的詳細入門教程①

時間 2019-12-15

原文原文鏈接

↓— Vue.js框架魅力 —↓

前言

Vue.js 是一個構建數據驅動的 web 界面的漸進式框架。Vue.js 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。Vue 只關注視圖層而且採用自底向上增量開發的設計。javascript

Vue.js做爲一個後起的前端框架，借鑑了Angular 、React等現代前端框架/庫的諸多特色，取得了至關不錯的成績。Vue.js 自身不是一個全能框架——它只聚焦於視圖層。所以它很是容易學習，很是容易與其它庫或已有項目整合。另外一方面，在與相關工具和支持庫一塊兒使用時，Vue.js 也能完美地驅動複雜的單頁應用。OK，讓咱們一塊兒來學習一下吧！html

-_-前端

Hello Vue

建立一個Vue.js的Hello Vue示例很是簡單：vue

一、引入vue.js庫java

直接用 <script> 標籤引入：web

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

二、建立Vue實例api

　　每一個 Vue 應用都是經過 Vue 函數建立一個新的 Vue 實例開始的它鏈接 View 與 Model：數組

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Vue 測試實例 - 博客園</title>
 6 <script src="js/vue.js"></script>
 7 </head>
 8 <body>
 9 <!--View-->
10 <div id="app">
11   <p>{{ message }}</p>
12 </div>
13 
14 <script>
15 new Vue({
16   el: '#app',
17   data: {
18     message: 'Hello Vue.js!' // Model
19   }
20 })
21 </script>
22 </body>
23 </html>

Vue.js 模板語法

Vue.js 使用了基於 HTML 的模板語法，容許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。全部 Vue.js 的模板都是合法的 HTML ，因此能被遵循規範的瀏覽器和 HTML 解析器解析。
Vue.js 的核心是一個容許你採用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統。

　　Vue 可以智能地計算出從新渲染組件的最小代價並應用到 DOM 操做上。瀏覽器

1、插值

① 文本

數據綁定最多見的形式就是使用「Mustache」語法 {{...}}（雙大括號）的文本插值：前端框架

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

② 原始Html

雙大括號會將數據解釋爲普通文本，而非 HTML 代碼。爲了輸出真正的 HTML ，你須要使用v-html 指令：

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>Hello Vue.js!</h1>' } }) </script>

③ 屬性

mustache 語法不能做用在 HTML 特性上，遇到這種狀況應該使用v-bind 指令。

如下實例判斷 class1 的值，若是爲 true 使用 class1 類的樣式，不然不使用該類：

<div id="app">
  <label for="r1">修改顏色</label><input type="checkbox" v-model="class1" id="r1">
  <br><br>
  <div v-bind:class="{'class1': class1}">
    directiva v-bind:class
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      class1: false
  }
});
</script>

效果：

④表達式

Vue.js 都提供了徹底的 JavaScript 表達式支持。

<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">Vue</div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    message: 'RUNOOB',
    id : 1
  }
})
</script>

2、指令

指令 (Directives) 是帶有 v- 前綴的特殊屬性。指令屬性的值預期是單個 JavaScript 表達式(v-for 是例外狀況，稍後咱們再討論)。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地做用於 DOM。以下例子：

<div id="app">
    <p v-if="seen">我出現了！！</p>  //這裏， v-if 指令將根據表達式 seen 的值(true 或 false )來決定是否插入 p 元素。
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true     //false就隱藏了
  }
})
</script>

參數

一些指令可以接收一個「參數」，在指令名稱以後以冒號表示。例如，v-bind 指令能夠用於響應式地更新 HTML 屬性：

<div id="app">
    <pre><a v-bind:href="url">vue.js</a></pre>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.cnblogs.com'
  }
})
</script>

在這裏 href 是參數，告知 v-bind 指令將該元素的 href 屬性與表達式 url 的值綁定。

另外一個例子是 v-on 指令，它用於監聽 DOM 事件：

<a v-on:click="doSomething">

在這裏參數是監聽的事件名。

修飾符

修飾符是以半角句號 . 指明的特殊後綴，用於指出一個指定應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

3、用戶輸入

在 input 輸入框中咱們可使用 v-model 指令來實現雙向數據綁定：

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '你好VUE!'
  }
})
</script>

效果：

按鈕的事件咱們可使用 v-on 監聽事件，並對用戶的輸入進行響應。

如下實例在用戶點擊按鈕後對字符串進行反轉操做：

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反轉</button>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>

效果：

4、過濾器

Vue.js和AngularJS同樣容許你自定義過濾器，被用做一些常見的文本格式化。由"管道符"指示, 格式以下：

<!-- 在兩個大括號中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

過濾器函數接受表達式的值做爲第一個參數。

如下實例對輸入的字符串第一個字母轉爲大寫：

<div id="app">
  {{ message | capitalize }}
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'vue'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

過濾器串聯：

{{ message | filterA | filterB }}

過濾器是 JavaScript 函數，所以能夠接受參數：

{{ message | filterA('arg1', arg2) }}

這裏，message 是第一個參數，字符串 'arg1' 將傳給過濾器做爲第二個參數， arg2 表達式的值將被求值而後傳給過濾器做爲第三個參數。

5、縮寫

① v-bind 縮寫

　　Vue.js 爲兩個最爲經常使用的指令提供了特別的縮寫：

<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>

② v-on 縮寫

<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>

5、Vue 實例

① 構造器

　　每一個 Vue.js 應用都是經過構造函數 Vue 建立一個 Vue 的根實例來啓動的：

var vm = new Vue({
  // 選項
})

② 屬性與方法

　　每一個 Vue 實例都會代理其 data 對象裏全部的屬性：

var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a === data.a // -> true
// 設置屬性也會影響到原始數據
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3

除了 data 屬性， Vue 實例暴露了一些有用的實例屬性與方法。這些屬性與方法都有前綴 $，以便與代理的 data 屬性區分。例如：

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一個實例方法
vm.$watch('a', function (newVal, oldVal) {
  // 這個回調將在 `vm.a`  改變後調用
})

Vue.js 條件與循環

條件判斷

① v-if

條件判斷使用 v-if 指令在元素和 template 中使用 v-if 指令：

<div id="app">
    <p v-if="seen">哈哈你看到我了</p>
    <template v-if="ok">
      <h1>吃魚大神</h1>
      <p>爲了夢想！</p>
      <p>巴拉巴拉小魔仙！</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>

這裏， v-if 指令將根據表達式 seen 的值(true 或 false )來決定是否插入 p 元素。

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

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

② v-else

能夠用 v-else 指令給 v-if 添加一個 "else" 塊

　　隨機生成一個數字，判斷是否大於0.5，而後輸出對應信息：

<div id="app">
    <div v-if="Math.random() > 0.5">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>
</div>
    
<script>
new Vue({
  el: '#app'
})
</script>

③ v-else-if

v-else-if 在 2.1.0 新增，顧名思義，用做 v-if 的 else-if 塊。能夠鏈式的屢次使用：

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

v-else 、v-else-if 必須跟在 v-if 或者 v-else-if以後。

④ v-show

咱們也可使用 v-show 指令來根據條件展現元素：

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

v-if vs v-show

v-if 是「真正的」條件渲染，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建。
v-if 也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——直到條件第一次變爲真時，纔會開始渲染條件塊。
相比之下，v-show 就簡單得多——無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於 CSS 進行切換。
通常來講，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不太可能改變，則使用v-if 較好。

循環語句

循環使用 v-for 指令。

v-for 指令須要以 site in sites 形式的特殊語法， sites 是源數據數組而且 site 是數組元素迭代的別名。

v-for 能夠綁定數據到數組來渲染一個列表：

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'bokeyuan' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

模板中使用 v-for：

<ul>
  <template v-for="site in sites">
    <li>{{ site.name }}</li>
    <li>--------------</li>
  </template>
</ul>

v-for 迭代對象

v-for 能夠經過一個對象的屬性來迭代數據：

<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: 博客園',
      url: 'http://www.cnblongs.com',
      slogan: '代碼改變世界！'
    }
  }
})
</script>

你也能夠提供第二個的參數爲鍵名：

<div id="app">
  <ul>
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>
</div>

第三個參數爲索引：

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

v-for 迭代整數

v-for 也能夠循環整數

<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

當 v-if 與 v-for 一塊兒使用時，v-for 具備比 v-if 更高的優先級。

感謝關注我

　　　　後續文章更新敬請關注，但願與你們一塊兒交流學習

相關標籤/搜索

每日一句

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