新人成長之入門Vue.js指令介紹（一）

寫在前面作為一個剛步入職場工作的新人，對於公司中所用的技術和框架基本上不懂，只能從最基礎的開始做起，進入公司接觸的第一個框架就是前端框架Vue.js，幾個功能做下來，覺得Vue.js首先學習起來真的非常簡單，用起來也是非常的方便，通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件。它不僅 ...

寫在前面

作為一個剛步入職場工作的新人，對於公司中所用的技術和框架基本上不懂，只能從最基礎的開始做起，進入公司接觸的第一個框架就是前端框架Vue.js，幾個功能做下來，覺得Vue.js首先學習起來真的非常簡單，用起來也是非常的方便，通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件。它不僅易於上手，還便於與第三方庫或既有項目整合，足以應付任何規模的應用。

如果你之前已經習慣了用jQuery、JS操作DOM，學習Vue.js時請先拋開手動操作DOM的思維，因為Vue.js是數據驅動的，你無需手動操作DOM。它通過一些特殊的HTML語法，將DOM和數據綁定起來。一旦你創建了綁定，DOM將和數據保持同步，每當變更了數據，DOM也會相應地更新。

當然了，在使用Vue.js時，你也可以結合其他庫一起使用，比如jQuery、JS等等。

這是我第一次在博客上對於自己的學習成長經歷進行記錄，先從最簡單的一些基本指令記起，下麵開始

Vue.js介紹

Vue (讀音 /vju?/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關註視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。

Vue.js安裝

我們可以在 Vue.js 的官網上直接下載 vue.min.js 並用 <script> 標簽引入，官網鏈接：https://cn.vuejs.org/v2/guide/installation.html，

Vue.js環境詳細安裝教程可參考https://blog.csdn.net/dreamzuora/article/details/78911664

聲明式渲染第一個實例“helloword”

無論學習哪一種語言，第一步都會是用“helloword”打開這門語言的大門，Vue.js也是一樣，看看是如何在Vue.js中輸出“helloword”的。

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

helloword聲明式渲染html部分

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello word!'
  }
})

helloword聲明式渲染JS部分

作用：簡化字元串的拼接。

註意：變化的部分使用{{}} 和Vue.js的v-text效果一樣定義

常用指令總結

1.將上面helloword中的div中的內容換做input框的話，可實現雙向綁定，input框中的你輸入的內容與JS部分中的data中的message綁定

eg：

雙向綁定v-model指令HTML部分

雙向綁定v-model指令JS部分

2.v-if 條件渲染指令，根據其後表達式的bool值進行判斷是否渲染該元素；

eg：

<div id="example01">
    <p v-if="male">Male</p>
    <p v-if="female">Female</p>
    <p v-if="age>25">Age:{{age}}</p>
    <p v-if="name.indexOf('lin')>0">Name:{{name}}</p>
</div>

v-if指令html部分

var vm= new Vue({
        el:"#example01",
        data:{
            male:true,
            female: false,
            age:29,
            name:'colin'
        }
    })

v-if指令JS部分

v-if指令只渲染他身後表達式為true的元素；在這裡引入v-show指令，因為二者的區別是v-show指令會渲染他身後表達式為false的元素，這樣的元素上會添加css代碼：style="display:none"; 將上面v-if的實例代碼改為v-show

3.v-show 與v-if類似，只是會渲染其身後表達式為false的元素，而且會給這樣的元素添加css代碼：style="display:none";

4.v-else 必須跟在v-if/v-show指令之後，不然不起作用；如果v-if/v-show指令的表達式為true，則else元素不顯示；如果v-if/v-show指令的表達式為false，則else元素顯示在頁面上；

eg：

<div id="app">
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-else>Name: {{ name }}</h1>
<hr>
<h1 v-show="name.indexOf('cool') = 0">Name: {{ name }}</h1>
<h1 v-else>Sex: {{ sex }}</h1>
</div>

v-else指令html部分

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            age: 21,
            name: 'keepcool',
            sex: 'Male'
        }
    })
</script>

v-else指令JS部分

5. v-for 渲染迴圈列表，類似JS的遍歷，用法為 v-for="item in items", items是數組，item為數組中的數組元素

<div id="example03">
    <table>
        <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>position</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="person in people">
            <td>{{ person.name  }}</td>
            <td>{{ person.age  }}</td>
            <td>{{ person.position}}</td>
        </tr>
        </tbody>
    </table>
</div>

v-for指令html部分

<script>
    var vm = new Vue({
        el: '#example03',
        data: {
            people: [{
                name: 'lebron',
                age: 33,
                position: 'SF'
            }, {
                name: 'wade',
                age: 34,
                position: 'SG'
            }, {
                name: 'paul',
                age: 32,
                position: 'PG'
            }, {
                name: 'anthony',
                age: 34,
                position: 'SF'
            }]
        }
    })
</script>

v-for指令的JS部分

6.v-bind 這個指令用於響應地更新 HTML 特性，比如綁定某個表格中的數據或者某個class元素或元素的style樣式。該指令也可以簡寫為一個“:”，

eg：

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

v-bind指令的html部分

<script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2018-08-31',
            name: 'lebron',
            address: 'LA'
          }, {
            date: '2018-08-31',
            name: 'wade',
            address: 'Miami'
          }, {
            date: '2018-08-31',
            name: 'paul',
            address: 'Houston'
          }, {
            date: '2018-08-31',
            name: 'anthony',
            address: 'Houston'
          }]
        }
      }
    }
  </script>

v-bind指令JS部分

分頁功能中當前頁數高亮的效果，可以使用bind指令，綁定該元素的style樣式

7.v-on 用於監聽指定元素的DOM事件，比如點擊事件。該指令可簡寫為“@”，以監聽點擊事件為例

eg：

<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
  <el-form-item
    label="年齡"
    prop="age"
   >
    <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
    <el-button @click="resetForm('numberValidateForm')">重置</el-button>
  </el-form-item>
</el-form>

v-on指令HTML部分

<script>
  export default {
    data() {
      return {
        numberValidateForm: {
          age: ''
        }
      };
    },
    methods: {
      submitForm(formName) {
            alert('submit!');
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

v-on指令JS部分

這次是對於Vue.js中的最基本的常用指令進行總結，其實之前學習過JS和HTML的朋友，對於這方面的理解是非常快的，只不過是一些寫法上面的不同，語法都會是大同小異的。

希望大家這篇博客中有什麼錯誤的地方幫我指出來，一方面對我自己是一種進步，一方面也不會讓錯誤的地方誤導了看到這篇博客的朋友，謝謝！！！