什麼是死鎖?如何防止死鎖?
阿新 • • 發佈:2020-11-13
Vue's Info
- 官方源網址
- 此篇文章版本:v2
宣告式渲染
不再和 HTML 直接互動、一個 Vue 應用會將其掛載到一個 DOM 元素上然後對其進行完全控制
- 文字插值
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
- 繫結元素attribute
- v-bind attribute 被稱為指令:指令帶有字首 v-,以表示它們是 Vue 提供的特殊 attribute
<div id="app-2"> <span v-bind:title="message"> 滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊! </span> </div> var app2 = new Vue({ el: '#app-2', data: { message: '頁面加載於 ' + new Date().toLocaleString() } })
條件與迴圈
不僅可以把資料繫結到 DOM 文字或 attribute,還可以繫結到 DOM 結構
- if語句
<div id="app-3">
<p v-if="seen">現在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
app3.seen = false,你會發現之前顯示的訊息消失了。
- for語句
v-for指令:可以繫結陣列的資料來渲染一個專案列表:
<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '學習 JavaScript' }, { text: '學習 Vue' }, { text: '整個牛專案' } ] } })
在控制檯裡,輸入app4.todos.push({ text: '新專案' }),你會發現列表最後添加了一個新專案。
處理使用者輸入
- v-on指令:新增一個事件監聽器
在 reverseMessage 方法中,我們更新了應用的狀態,但沒有觸碰 DOM——所有的 DOM 操作都由 Vue 來處理,你編寫的程式碼只需要關注邏輯層面即可。
<div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">反轉訊息</button> </div> var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })
- v-model指令:實現表單輸入和應用狀態之間的雙向繫結
就是我輸入什麼,頁面就顯示什麼
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
元件化應用構建
在 Vue 裡,一個元件本質上是一個擁有預定義選項的一個 Vue 例項
- 註冊元件
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '乳酪' },
{ id: 2, text: '隨便其它什麼人吃的東西' }
]
}
})
- 構建元件模板
使用 v-bind 指令將待辦項傳到迴圈輸出的每個元件中
<div id="app-7">
<ol>
<!--
現在我們為每個 todo-item 提供 todo 物件
todo 物件是變數,即其內容可以是動態的。
我們也需要為每個元件提供一個“key”,稍後再
作詳細解釋。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>