Vue.js入門學習

時間 2019-11-08

標籤 vue.js vue 入門學習欄目 JavaScript 简体版

原文原文鏈接

Vue簡述

是一個MVVM模式的JavaScript庫，他的核心思想是數據驅動和組件化，是雙向數據綁定的一個實現庫。在vue中實現MVVM模式：vue

vue的viewmodel是實現雙向數據綁定的關鍵，它包含了DOM listeners 和Data Bindings這兩個工具；
從view到viewmodel，DOM listeners工具幫助咱們檢測頁面上DOM元素的變化，實現更新；
從model到viewmodel，Data Bindings幫助咱們監聽model的變化，實現實時更新。

環境搭建

node安裝（https://nodejs.org/en/download/）——安裝npm

cnpm安裝（淘寶對npm的鏡像服務器）node

npm install -g cnpm --registry=https://registry.npm.taobao.org

vue-cli安裝
是Vue官方提供的一個命令行工具，用於快速搭建大型的單頁面應用。webpack
```
cnpm install -g vue-cli
```
最後輸入vue檢查是否安裝成功
建立一個Vue項目
在指定文件夾輸入web
```
vue init webpack vue-demo
```
運行一個vue項目vue-cli
```
npm run dev
```

實現helloworld輸出

<body>
    <!--建立view-->
    <div id="app">
        {{ message }}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 建立的Model
    var exampleData = {
        message: 'Hello World!'
    }

    // 建立一個 Vue 實例或 "ViewModel"
    // 它鏈接 View 與 Model
    new Vue({
        el: '#app',
        data: exampleData
    })
</script>

上面的這種方式，是經過直接引入vue.js庫來實現，若想經過vue-cli實現的話，原理也是同樣的，只是將建立view、viewmodel、vue實例的過程模塊化和組件化了。npm

Vue經常使用指令

vue的指令是以v-開頭的，他們敢於HTML元素，提供了一些特殊的特性，將指令綁定在元素上時，指令會爲綁定的目標元素添加一些特殊的行爲服務器

v-if：條件渲染指令，根據表達式的真假來刪除和插入元素。
v-bind指令能夠在其名稱後面帶一個參數，中間放一個冒號隔開，這個參數一般是HTML元素的特性（attribute），例如：v-bind:class
v-for:遍歷
v-on指令用於給監聽DOM事件，它的用語法和v-bind是相似的，例如監聽元素的點擊事件：app
```
a v-on:click="doSomething"
```

還有等等以v-開頭的指令（略）模塊化