vue.js教程
用script引用即可
一、基礎
直接上案例自己執行就懂
<div id="app" class="demo">
{{ message }}
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
<div id="app" class="demo"> <input v-model="message"> </div> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } })
<div id="app2"> <ul> <li v-for="todo in todos"> {{ todo.text }} </li> </ul> </div> new Vue({ el: '#app2', data: { todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue.js' }, { text: 'Build Something Awesome' } ] } })
逆轉字串
<div id="app3"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Reverse Message</button> </div> new Vue({ el: '#app3', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })
事件
<div id="app5">
<input v-model="newTodo" v-on:keyup.enter="addTodo">
<ul>
<li v-for="todo in todos">
<span>{{ todo.text }}</span>
<button v-on:click="removeTodo($index)">X</button>
</li>
</ul>
</div>
new Vue({
el: '#app5',
data: {
newTodo: '1',
todos: [
{ text: 'Add some todos' }
]
},
methods: {
addTodo: function () {
var text = this.newTodo.trim()
if (text) {
this.todos.push({ text: text })
this.newTodo = ''
}
},
removeTodo: function (index) {
this.todos.splice(index, 1)
}
}
})
//輸出html程式碼需要3個{
<div>{{{ raw_html }}}</div>
二、進階
實時重新整理資料
開啟瀏覽器的控制檯,修改 exampleData.name
,你將看到相應地更新。
<div id="example-1">
Hello {{ name }}!
</div>
//DOM 會自動響應資料的變化
var exampleData = {
name: 'Vue.js'
}
var exampleVM = new Vue({
el: '#example-1',
data: exampleData
})
繼續在控制檯設定 exampleVM2.greeting
為 false
,你會發現 "Hello!" 消失了
<div id="example">
<p v-if="greeting">Hello!</p>
</div>
var exampleVM2 = new Vue({
el: '#example',
data: {
greeting: true
}
})
三、例項
var MyComponent = Vue.extend({ // 擴充套件選項 })
// 所有的 `MyComponent` 例項都將以預定義的擴充套件選項被建立
var myComponentInstance = new MyComponent()
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
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` 改變後呼叫
})
JavaScript 表示式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
有些指令可以在其名稱後面帶一個“引數” (Argument),中間放一個冒號隔開
<a v-bind:href="url"></a>
這裡 href
是引數,它告訴 v-bind
指令將元素的 href
特性跟表示式 url
的值繫結。可能你已注意到可以用特性插值 href="{{url}}"
獲得同樣的結果:這樣沒錯,並且實際上在內部特性插值會轉為 v-bind
繫結。
另一個例子是 v-on
指令,它用於監聽 DOM 事件
<a v-on:click="doSomething">
v-bind
縮寫
<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>
<!-- 完整語法 -->
<button v-bind:disabled="someDynamicCondition">Button</button>
<!-- 縮寫 -->
<button :disabled="someDynamicCondition">Button</button>
v-on 縮寫
<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>
例子
<div id="example">
a={{ a }}, b={{ b }}
</div>
var vm = new Vue({
el: '#example',
data: {
a: 1
},
computed: {
// 一個計算屬性的 getter
b: function () {
// `this` 指向 vm 例項
return this.a + 1
}
}
})
控制檯輸入vm.a 可以看到a和b的值改變
計算屬性 vs. $watch
<div id="app3">{{fullName}}</div>
var vm = new Vue({
el: '#app3',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
}
})
vm.$watch('firstName', function (val) {
this.fullName = val + ' ' + this.lastName
})
vm.$watch('lastName', function (val) {
this.fullName = this.firstName + ' ' + val
})
計算setter
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...
物件語法
我們可以傳給 v-bind:class
一個物件,以動態地切換 class。注意 v-bind:class
指令可以與普通的 class
特性共存:
<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
data: {
isA: true,
isB: false
}
//渲染為
<div class="static class-a"></div>
陣列語法
我們可以把一個數組傳給 v-bind:class
,以應用一個 class 列表:
<div v-bind:class="[classA, classB]">
data: {
classA: 'class-a',
classB: 'class-b'
}
渲染為
<div class="class-a class-b"></div>
物件語法
v-bind:style
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
if語句
<h1 v-if="ok">Yes</h1>
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
template v-if
因為 v-if
是一個指令,需要將它新增到一個元素上。但是如果我們想切換多個元素呢?此時我們可以把一個 <template>
元素當做包裝元素,並在上面使用 v-if
,最終的渲染結果不會包含它。
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
v-show
<h1 v-show="ok">Hello!</h1>
列表渲染
v-for
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
在 v-for
塊內我們能完全訪問父元件作用域內的屬性,另有一個特殊變數 $index
,是當前陣列元素的索引:
<ul id="example-2">
<li v-for="item in items">
{{ parentMessage }} - {{ $index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
template v-for
類似於 template v-if
,也可以將 v-for
用在 <template>
標籤上,以渲染一個包含多個元素的塊
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
Vue.js 包裝了被觀察陣列的變異方法,故它們能觸發檢視更新。被包裝的方法有:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
方法與事件處理器
可以用 v-on
指令監聽 DOM 事件:
<div id="example">
<button v-on:click="greet">Greet</button>
</div>
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)
}
}
})
// 也可以在 JavaScript 程式碼中呼叫方法
vm.greet() // -> 'Hello Vue.js!'
內聯語句處理器
<div id="example-2">
<button v-on:click="say('hi')">Say Hi</button>
<button v-on:click="say('what')">Say What</button>
</div>
new Vue({
el: '#example-2',
methods: {
say: function (msg) {
alert(msg)
}
}
})
<button v-on:click="say('hello!', $event)">Submit</button>
methods: {
say: function (msg, event) {
// 現在我們可以訪問原生事件物件
event.preventDefault()
}
}
事件修飾符
<!-- 阻止單擊事件冒泡 -->
<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>
<!-- 新增事件偵聽器時使用 capture 模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素本身(而不是子元素)觸發時觸發回撥 -->
<div v-on:click.self="doThat">...</div>
按鍵修飾符
在監聽鍵盤事件時,我們經常需要檢測 keyCode。Vue.js 允許為 v-on
新增按鍵修飾符:
<!-- 只有在 keyCode 是 13 時呼叫 vm.submit() -->
<input v-on:keyup.13="submit">
記住所有的 keyCode 比較困難,Vue.js 為最常用的按鍵提供別名:
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">
就先到這裡其他後面更新