Vue 基礎語法入門（轉載）

時間  2019-12-12
標籤 vue 基礎 語法 入門 轉載 简体版
原文   原文鏈接

使用vue.js原文介紹：Vue.js是一個構建數據驅動的web界面庫。Vue.js的目標是經過儘量簡單的API實現響應式數據綁定和組合的視圖組件。vue.js上手很是簡單，先看看幾個例子：javascript

    例一：Helloworldcss

    html代碼：html

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

    js代碼：vue

複製代碼 
new Vue({
    el: '#app',
    data: {
    message: 'Hello Vue.js!'
    }
})
複製代碼

    例二：雙向綁定java

    說明：html中以v-開頭的標記都是vue.js提供的標記。v-model屬性表示數據模型。web

    html代碼：json

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

    js代碼：數組

複製代碼 
new Vue({
    el: '#app',
    data: {
    message: 'Hello Vue.js!'
    }
})
複製代碼

    例三：渲染列表app

    說明：v-for表示遍歷集合數據，下面的代碼遍歷集合todos並輸出每項。ide

    html代碼：

複製代碼 
<div id="app">
    <ul>
        <li v-for="todo in todos">
        {{ todo.text }}
        </li>
    </ul>
</div>
複製代碼

    js代碼：

複製代碼 
new Vue({
    el: '#app',
        data: {
        todos: [
            { text: 'Learn JavaScript' },
            { text: 'Learn Vue.js' },
            { text: 'Build Something Awesome' }
        ]
    }
})
複製代碼

    例四：事件綁定

    說明：v-on是vue.js特性，表示綁定事件方法。

    html代碼：

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
</div>

    js代碼：

複製代碼 
new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!'
    },
    methods: {
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
        }
    }
})
複製代碼

   

    看完上面的4個例子，感受vue.js挺容易入門，確實是這樣，不得不說vue.js深受開發人員喜好，簡單易學。前面的例子只是展現瞭如何使用vue.js，但它到底包含了哪些功能？vue.js提供了兩大核心功能：響應的數據綁定、視圖組件化。接下來咱們看看vue.js是怎麼定義這兩大功能的。

兩大核心功能：響應的數據綁定、視圖組件化

    響應的數據綁定：vue.js擁抱數據驅動的概念，一當DOM和數據綁定，Dom將會和數據保持同步，數據有變更DOM會當即渲染，在也不用擔憂數據變動後DOM如何渲染的問題。而且若是手動修改數據綁定的DOM元素的值，數據模型也會被同步。由於vue.js支持雙向綁定。綁定過程以下圖所示：

image

  

 

    視圖組件化：vue支持抽象組件化，咱們整個系統可使用若干個小的組件構造，例以下面是一個html頁面對應的摸快。整個系統可分爲三個大的組件：app-nav、app-sidebar、app-content，app-sidebar下又包含兩個小組件，app-content下包含三個小組件。這些組件也至關因而自定義的DOM元素，咱們能夠直接使用。

   image

    html代碼：

複製代碼 
<div id="app">
    <app-nav></app-nav>
    <app-view>
        <app-sidebar></app-sidebar>
        <app-content></app-content>
    </app-view>
</div>
複製代碼

     前面簡單介紹了vue的主要功能，接下來咱們詳細的看看在實際項目開發中，vue.js到底給咱們提供了哪些方面的功能。

數據綁定語法

    1.文本綁定：在html的文本字符串中，能夠經過{{}}格式包含vue特性。

<span>Message: {{ msg }}</span>

    2.單向綁定：只同步一次，若是msg特性值有變化，html中的文本不會被更新。

<span>This will never change: {{* msg }}</span>

    3.輸出包含html的數據：1和2中的代碼不支持輸出html代碼，須要用下面的格式。

<div>{{{ raw_html }}}</div>

    4.html屬性值綁定

<div id="item-{{ id }}"></div>

    5.支持javascript表達式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

    6.過濾器：vue提供了屬性過濾功能，下面的代碼message是一個特性，filterA是一個過濾函數，最終輸出爲filterA(message)的結果。

{{ message | filterA }}

    7.判斷語法：若是條件成立則輸出結果，條件不成立無任何輸出。

<p v-if="greeting">Hello!</p>

    8.html屬性綁定：下面代碼和：<a href={{url}}」></a>和效果同樣，其實最終也會轉換爲v-bind模式。

<a v-bind:href="url"></a>

    9.事件綁定：使用v-on爲html的事件屬性綁定方法。

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

    10.v-bind縮寫：下面的第一段代碼爲v-bind的完整寫法，第二段代碼爲縮寫方式。

複製代碼 
<!-- 完整語法 -->
<a v-bind:href="url"></a>

<!-- 縮寫 -->
<a :href="url"></a>

<!-- 完整語法 -->
<button v-bind:disabled="someDynamicCondition">Button</button>

<!-- 縮寫 -->
<button :disabled="someDynamicCondition">Button</button>
複製代碼

    11.v-on縮寫：和v-bind類似，區別在於v-on用@符號表示，而v-bind用:表示。

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

<!-- 縮寫 -->
<a @click="doSomething"></a>

   

    vue提供的語法讓開發人員很方便的完成view和model的動態綁定，vue不只提供特性和html元素屬性的綁定，它對css和style支持也比較完善。

Class與Style綁定

    1.class綁定對象特性：vue綁定class支持直接綁定json字符串格式設置。下面代碼vue實例包含isA和isB兩個類型爲布爾的屬性，可供元素的class直接綁定。下面的html代碼有人會有疑問：在div上寫了兩次class屬性。這個問題不用擔憂，vue會自動把兩個class屬性合併成一個。

    html代碼：

<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>

    js代碼：

data: {
    isA: true,
    isB: false
}

    輸出結果：

<div class="static class-a"></div>

    2.class字節綁定對象：vue支持直接給class屬性綁定對象，這樣寫也更靈活些。

    html代碼：

<div v-bind:class="classObject"></div>

    js代碼：

複製代碼 
data: {
    classObject: {
        'class-a': true,
        'class-b': false
    }
}
複製代碼

    3.數組語法：class屬性可直接綁定一個數組，數組裏邊的項爲vue實例特性。

    html代碼：

<div v-bind:class="[classA, classB]">

    js代碼：

data: {
    classA: 'class-a',
    classB: 'class-b'
}

條件渲染

    1.v-if和v-else：下面代碼若是條件爲true則輸出yes，不然輸出no。

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

    2.template v-if輸出多條html元素：v-if和template標籤配合使用可嵌入多個html標籤，當着模板使用，最終輸出值包含html元素。

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

    3.v-show和v-else: 和v-if類似，都做爲條件判斷，不一樣點在於渲染的區別。v-if只有等條件成立時纔會渲染html元素，而v-show無論條件是否成立都會渲染，若是條件不成立則設置元素的display爲none。

    4.v-show和組件混合使用問題：將v-show用在組件上時，因爲指令優先級v-else會出問題，因此不要使用v-else。下面代碼是錯誤的：

<custom-component v-show="condition"></custom-component>
<p v-else>這可能也是一個組件</p>

    應該這樣寫：

<custom-component v-show="condition"></custom-component>
<p v-show="!condition">這可能也是一個組件</p>

列表渲染

    1.語法v-for：經過v-for可遍歷js對象集合，而後用能夠直接輸出每一項的數據。下面的代碼直接用文本輸出items的每項數據。

    html代碼：

<ul id="example-1">
    <li v-for="item in items">
        {{ item.message }}
    </li>
</ul>

    js代碼：

複製代碼 
var example1 = new Vue({
    el: '#example-1',
    data: {
        items: [
            { message: 'Foo' },
            { message: 'Bar' }
        ]
    }
})
複製代碼

     2.獲取遍歷項索引：使用v-for遍歷有時候想獲得每一項的索引值，可經過直接獲取，index直接獲取，index是vue直接提供的特性。咱們也能夠給索引取別名：

<div v-for="(idx, item) in items">
    {{ idx }} {{ item.message }}
</div>

    3.template和v-for：有時候咱們想每次輸出多條html標籤，那麼咱們可經過v-for和template配合使用達到效果：

複製代碼 
<ul>
    <template v-for="item in items">
        <li>{{ item.msg }}</li>
        <li class="divider"></li>
    </template>
</ul>
複製代碼

    4.操做數組：vue提供了一些數組操做方法，包括push、pop、shift、unshift、splice、sort、reverse等。若是我要對vue實例example1的集合特性items添加項，可使用:

example1.items.push({message: ‘Baz’});

    若是要過濾數組選項，可使用filter函數。例以下面的代碼找出item屬性message包含Foo的選項集合：

example1.items = example1.items.filter(function (item) {
    return item.message.match(/Foo/)
})

    5.數組操做問題

    不能直接使用數組索引設置元素，例如vm.items[0] = {}，這樣設置的話，vue是不能檢測到數組的變化。可以使用set方法：

example1.items. set(0, { childMsg: 'Changed!'})

    不能直接修改數組長度，這樣設置後vue檢測不到變化。可直接使用一個空數組替換：

example1.items = [];

    6.對象v-for:v-for也可直接遍歷對象屬性。

    html代碼：

<ul id="repeat-object" class="demo">
    <li v-for="value in object">
        {{ $key }} : {{ value }}
    </li>
</ul>

    js代碼：

複製代碼 
new Vue({
    el: '#repeat-object',
    data: {
        object: {
            FirstName: 'John',
            LastName: 'Doe',
            Age: 30
        }
    }
})
複製代碼

方法與事件處理器

    1.方法處理器：使用v-on監聽DOM事件，例如

    html代碼：

<div id="example">
    <button v-on:click="greet">Greet</button>
</div

    js代碼：

複製代碼 
var vm = new Vue({
    el: '#example',
    data: {
        name: 'Vue.js'
    },
    // 在 `methods` 對象中定義方法
    methods: {
        greet: function (event) {
            // 方法內 `this` 指向 vm
            alert('Hello ' + this.name + '!')
            // `event` 是原生 DOM 事件
            alert(event.target.tagName)
        }
    }
})
複製代碼

    2.如何傳遞參數：可直接傳遞字符串或者對象，若是想傳遞事件對象可使用$event：

<buttonv−on:click="say(′hello!′,eventHtml：<buttonv−on:click="say(′hello!′, event)">Submit</button>

    js代碼和其餘綁定同樣：

複製代碼 
// ...
methods: {
    say: function (msg, event) {
        // 如今咱們能夠訪問原生事件對象
        event.preventDefault()
    }
}
複製代碼

    3.數據邏輯和事件邏輯隔離：爲了讓數據模型只處理數據邏輯，而不混雜其餘邏輯，vue.js提供了兩個事件修飾符.prevent和.stop。

複製代碼 
<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件再也不重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符能夠串聯 -->
<a v-on:click.stop.prevent="doThat">

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
複製代碼

    4.按鍵修飾符：可使用按鍵編碼或者別名。

複製代碼 
<!-- 只有在 keyCode 是 13 時調用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 縮寫語法 -->
<input @keyup.enter="submit">
複製代碼

    vue.js提供的別名包括：enter、tab、delete、esc、space、up、down、left、Right。

    vue.js也支持自定義別名，例如咱們想控制F1按鍵事件，能夠先給F1（編碼爲112）定義一個別名：

// 可使用 @keyup.f1
Vue.directive('on').keyCodes.f1 = 112

    直接使用別名便可：

<input v-on:keyup.f1="doSomething">

表單控件綁定

    1.text控件：若是修改了text控件的值，span綁定的message會不一樣更新。

<span>Message is: {{ message }}</span>
<br>
<input type="text" v-model="message" placeholder="edit me">

    2.checkbox控件

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

    多個checkbox綁定：每一個checkbox綁定一個類型爲數組的數據模型checkedNames。

    html代碼：

複製代碼 
input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames | json }}</span>
複製代碼

    js代碼：

複製代碼 
new Vue({
    el: '...',
    data: {
        checkedNames: []
    }
})
複製代碼

    3.radio

複製代碼 
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
複製代碼

    4.select

    單選：

複製代碼 
<select v-model="selected">
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
複製代碼

    多選：

複製代碼 
<select v-model="selected" multiple>
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected | json }}</span>
複製代碼

    select的option也能夠動態經過v-for方式渲染。

    html代碼：

複製代碼 
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
複製代碼

    js代碼：

複製代碼 
new Vue({
    el: '...',
    data: {
        selected: 'A',
        options: [
            { text: 'One', value: 'A' },
            { text: 'Two', value: 'B' },
            { text: 'Three', value: 'C' }
        ]
    }
})
複製代碼

   

     以上的內容都是本人跟着官網學習記錄的筆記，內容都比較偏向基礎，若有哪些地方介紹有誤望各位指正。vue.js還有一個比較重要的知識點：組件。下篇內容應該主要分享vue.js組件，有須要的同窗可關注下。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程