最細致的vue.js基礎(chǔ)語法 值得收藏!
介紹
前段時間接觸到一個庫叫做Vue.js, 個人感覺很棒，所以整理了一篇博文做個介紹。
Vue讀音/vju:/,和view類似。是一個數(shù)據(jù)驅(qū)動的web界面庫。Vue.js只聚焦于視圖層，可以很容易的和其他庫整合。代碼壓縮后只有24kb。
可以去 這里下載 。自己整理了一個Vue.js的demo， https://github.com/chenhao-ch/demo-vue
快速入門
以下代碼是Vue.js最簡單的例子， 當(dāng)input中的內(nèi)容變化時，p節(jié)點的內(nèi)容會跟著變化。
<!-- html -->
<div id="demo">
<p>{{message}}</p>
<input v-model="message">
</div>
new Vue({
el: '#demo',
data: {
message: 'Hello Vue.js!'
}
})
語法介紹
數(shù)據(jù)綁定
數(shù)據(jù)綁定就是指將js中的變量自動更新到html中。如下代碼, message的默認值是“Hello Vue.js!”, 那么當(dāng)頁面啟動時，html中的默認值會被設(shè)置成“Hello Vue.js”
<!-- html -->
<div id="demo">
<p>{{message}}</p>
<input v-model="message">
</div>
new Vue({
el: '#demo',
data: {
message: 'Hello Vue.js!'
}
})
如果要輸出原生的html，可以使用三個大括號來實現(xiàn)
<p>{{{messageHtml}}}</p>
也可以做表達式的綁定
<div>{{length - 1}}</div>
<div>{{isShow ? 'block' : 'none'}}</div>
過濾器
表達式后面可以添加過濾器，對輸出的數(shù)據(jù)進行過濾。
<div>{{ message | capitalize }}</div>
自定義過濾器
Vue.js運行自己定義過濾器。比如:
Vue.filter('wrap', function (value, begin, end) {
return begin + value + end;
})
<!-- 'vue' => 'before vue after' -->
<span>{{ message | wrap 'before' 'after' }}</span>
指令
指令是特殊的帶有前綴v-的特性。當(dāng)表達式的值發(fā)生變化時，響應(yīng)應(yīng)用特定的行為到DOM。
<!-- 當(dāng)greeting為true時，才顯示p節(jié)點 --> <p v-if="greeting">hello</p> <!-- 綁定href屬性為js中url的值 --> <a v-bind:href="url"></a> <!-- 綁定事件，btnClick是js方法 --> <button v-on:click="btnClick"></button>
bind,on指令可以進行縮寫
<a v-bind:href="url"></a> <a :href="url"></a> <button v-on:click="btnClick"></button> <button @click="btnClick"></button>
自定義指令
Vue.directive('demo', {
bind: function () {
// 準備工作
// 例如，添加事件處理器或只需要運行一次的高耗任務(wù)
},
update: function (newValue, oldValue) {
// 值更新時的工作
// 也會以初始值為參數(shù)調(diào)用一次
},
unbind: function () {
// 清理工作
// 例如，刪除 bind() 添加的事件監(jiān)聽器
}
})
html模板
Vue.js支持對js對象進行判斷(if), 循環(huán)(for)輸出。類似于前端模板。
<!-- 判斷，如果ok為true,則顯示yes, 如果為false, 顯示no -->
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
<!-- 類似于v-if, v-if是是否加節(jié)點， v-show是display是否為none -->
<h1 v-show="ok">Hello!</h1>
<!-- 循環(huán)， 對items屬性進行循環(huán)。 track-by指item的是否重復(fù)，對重復(fù)的進行服用 -->
<!-- 循環(huán)中， $index表示數(shù)組第n個元素; $key表示對象的key -->
<ul id="example-1">
<li v-for="item in items" track-by="_uid">
{{ $index }} : {{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{_uid: '1', message: 'Foo' },
{_uid: '2', message: 'Bar' }
]
}
})
樣式綁定
樣式也可以根據(jù)js中的變量來動態(tài)確定。
<!-- isA 為true時， class多一個class-a -->
<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
<!-- classA, classB 兩個變量的值設(shè)置成class -->
<div v-bind:class="[classA, classB]">
<!-- 綁定style, 自動添加前綴，styleObject里面是style鍵值對 -->
<div v-bind:style="styleObject"></div>
事件綁定
可以使用v-on指令來監(jiān)聽DOM事件。
<div id="example-2">
<button v-on:click="say('hi', $event)">Say Hi</button>
<button v-on:click="say('what', $event)">Say What</button>
</div>
new Vue({
el: '#example-2',
methods: {
say: function (msg, event) {
alert(msg);
event.preventDefault();
}
}
})
常見的阻止冒泡，禁止默認行為等event方法可以通過修飾符來快速處理。
<!-- 禁止冒泡 --> <a v-on:click.stop='do'></a> <!-- 禁止冒泡和默認行為 --> <a @click.stop.prevent="do"></a>
對特殊按鍵生效也可以使用修飾符
<!-- keyCode是13的時候出發(fā)。 --> <input v-on:keyup.13="submit" /> <input v-on:keyup.enter="submit" /> <!-- 支持的鍵名有： enter,tab,delete,esc,space,up,down,left,right -->
組件
組件系統(tǒng)是 Vue.js 另一個重要概念，因為它提供了一種抽象，讓我們可以用獨立可復(fù)用的小組件來構(gòu)建大型應(yīng)用。
注冊
通過Vue.extend()來定義一個組件，Vue.component()來注冊組件。
<div id="box">
<tree></tree>
</div>
// 定義
var Tree = Vue.extend({
template: '<div>This is a tree!</div>'
});
// 注冊
Vue.component('tree', Tree);
// 開始渲染
new Vue({
el: '#box'
});
// 定義，注冊可以合并成一步。下面的代碼和上面一樣
Vue.component('tree', {
template: '<div>This is a tree!</div>'
});
new Vue({
el: '#box'
});
渲染結(jié)果為：
<div id="box"> <div>This is a tree!</div> </div>
還可以進行局部注冊
var Child = Vue.extend({ /* ... */ })
var Parent = Vue.extend({
template: '...',
components: {
'my-component': Child
}
})
props
props用于父組件向子組件傳遞數(shù)據(jù)。
Vue.component('child', {
props: ['childMsg'],
// prop 可以用在模板內(nèi)
// 可以用 `this.msg` 設(shè)置
template: '<span>{{ childMsg }}</span>'
});
<child child-msg="hello"></child>
動態(tài)props， 當(dāng)父組件的數(shù)據(jù)變化時，需要通知子組件跟著變化。
<input v-model="parentMsg" /> <child v-bind:child-msg="parentMsg"></child>
父子組件通信
當(dāng)父組件數(shù)據(jù)變化時，可以通過props來通知子組件，子組件狀態(tài)變化時，可以利用事件的冒泡來通知父組件。
子組件可以用this.$parent訪問它的父組件。父組件有一個數(shù)組this.$children，包含它所有的子元素。
例子：
<!-- 子組件模板 -->
<template id="child-template">
<input v-model="msg">
<button v-on:click="notify">Dispatch Event</button>
</template>
<!-- 父組件模板 -->
<div id="events-example">
<p>Messages: {{ messages | json }}</p>
<child></child>
</div>
// 注冊子組件
// 將當(dāng)前消息派發(fā)出去
Vue.component('child', {
template: '#child-template',
data: function () {
return { msg: 'hello' }
},
methods: {
notify: function () {
if (this.msg.trim()) {
this.$dispatch('child-msg', this.msg) // 觸發(fā)child-msg事件
this.msg = ''
}
}
}
})
// 啟動父組件
// 將收到消息時將事件推入一個數(shù)組
var parent = new Vue({
el: '#events-example',
data: {
messages: []
},
// 在創(chuàng)建實例時 `events` 選項簡單地調(diào)用 `$on`
events: {
'child-msg': function (msg) { // 監(jiān)聽到 child-msg事件
// 事件回調(diào)內(nèi)的 `this` 自動綁定到注冊它的實例上
this.messages.push(msg) // messages改變自動修改html內(nèi)容
}
}
})
上面這種寫法child-msg事件觸發(fā)后，的執(zhí)行方法不直觀。 所以可以采用v-on綁定事件。
<!-- 當(dāng)child-msg觸發(fā)時， 執(zhí)行父組件的handleIt方法。 --> <child v-on:child-msg="handleIt"></child>
構(gòu)建大型應(yīng)用
在典型的 Vue.js 項目中，我們會把界面拆分為多個小組件，每個組件在同一地方封裝它的 CSS 樣式，模板和 JavaScript 定義，這么做比較好。如上所述，使用 Webpack 或 Browserify 以及合適的源碼轉(zhuǎn)換器，我們可以這樣寫組件：
當(dāng)然也可以使用預(yù)處理器：
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue父子組件通信的高級用法，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了路由vue-route的使用,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
vue-seamless-scroll無縫滾動組件使用方法詳解
這篇文章主要為大家詳細介紹了vue-seamless-scroll無縫滾動組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue利用better-scroll實現(xiàn)輪播圖與頁面滾動詳解
在我們?nèi)粘５捻椖块_發(fā)中，處理滾動和輪播圖是再常見不過的需求了，下面這篇文章主要給大家介紹了關(guān)于vue利用better-scroll實現(xiàn)輪播圖與頁面滾動的相關(guān)資料，文中給出了詳細的示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面來一起看看吧。2017-10-10
模板內(nèi)的表達式非常便利，但是設(shè)計它們的初衷是用于簡單運算的。接下來通過本文給大家介紹vue中的計算屬性,需要的朋友可以參考下2018-09-09
這篇文章主要Vue 處理表單input單行文本框的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
Vue.js結(jié)合bootstrap實現(xiàn)分頁控件
這篇文章主要為大家詳細介紹了Vue.js 合bootstrap實現(xiàn)分頁控件的相關(guān)資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
本篇文章主要介紹了VueJs異步動態(tài)加載塊，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
vue2.0 + element UI 中 el-table 數(shù)據(jù)導(dǎo)出Excel的方法
下面小編就為大家分享一篇vue2.0 + element UI 中 el-table 數(shù)據(jù)導(dǎo)出Excel的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue項目中的遇錯:Invalid?Host?header問題
這篇文章主要介紹了vue項目中的遇錯:Invalid?Host?header問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07