Vue基本功能
表單綁定
-
用 v-model 指令在表單 <input>虑瀑、<textarea> 及 <select> 元素上創(chuàng)建雙向數(shù)據(jù)綁定
- 它會根據(jù)控件類型自動選取正確的方法來更新元素
- 通過 JavaScript 在組件的 data 選項中聲明初始值
-
文本
-
多行文本
-
model 指令的作用是將 input 元素 value 屬性的值和創(chuàng)建的 Vue 對象中 value 的值 進行綁定
- Vue 將這個值綁定后，在 input 中引起的 value 值變化就會實時反映到關(guān)聯(lián)的 Vue 對象抵皱，所以引用的 {{ value }} 也會跟著變化
body當(dāng)中使用v-model
<div id="app">
<input type="text" v-model="value" />
<div>value的值是：{{ value }}</div>
</div>
- vue對象data屬性指定元素
<script>
var app = new Vue({
el: '#app',
data: function(){
return {value: ""}
}
})
</script>
事件綁定
- body中使用v-on指令
<div id="app">
...
<input type="button" value="發(fā)送" v-on:click="send" />
</div>
- VUE對象中增加methods
var app = new Vue({
...
methods:{
send: function(){
alert("發(fā)送成功!")
this.value = ''
}
}
})
計算屬性
-
對于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用計算屬性
-
Vue 還可以根據(jù)綁定的數(shù)據(jù)做計算，然后引用計算的結(jié)果
- 假設(shè)想實時統(tǒng)計輸入的字數(shù)，可以在 Vue 對象里加上對 value 長度的計算值
-
計算屬性申明到 computed 對象里吼虎，這個對象的鍵是計算的結(jié)果，值是計算函數(shù)苍鲜，這里計算了 value 的長度
- 可以使用 this.count 引用計算結(jié)果思灰，也可以在關(guān)聯(lián)的模板中直接引用，和綁定的數(shù)據(jù)value的用法非常類似
div標(biāo)簽指定綁定變量
<div id="app">
...
<div>字數(shù)：{{ count }}</div>
</div>
- 實現(xiàn)computed對象混滔，增加count屬性
var app = new Vue({
...
computed:{ //計算屬性
count: function(){
return this.value.length
}
}
})
樣式綁定
- vue還可以動態(tài)地幫為元素綁定樣式（class 屬性）
- 實現(xiàn)： input 中沒有任何值輸入洒疚，即 value 的值為空時，input 的邊框為紅色以提醒用戶沒有內(nèi)容
- 首先寫一個簡單的樣式坯屿，樣式通常寫到 head 標(biāo)簽里油湖，用 style 包裹
- 然后將這個 empty 用于 input 的 class 屬性，瀏覽器就會渲染對應(yīng)的樣式
- vue會根據(jù) empty 后的表達式 !count 的真假來判斷 class 的值是否為 empty领跛，如果為真（即 count = 0 的情況）乏德，則 class 的值為 empty，否則為空
- 實現(xiàn)： input 中沒有任何值輸入洒疚，即 value 的值為空時，input 的邊框為紅色以提醒用戶沒有內(nèi)容
- head中添加style
<head>
...
<style>
.empty {
border-color: red;
}
</style>
</head>
- 使用v-bind綁定樣式
<input type="text" v-bind:class="{empty: !count}" v-model="value" />
功能01：methods增加判斷
methods:{
send: function(){
if(!this.count){
alert("請輸入內(nèi)容！")
return
}
...
}
},
功能02：條件渲染
- v-if 指令用于條件性地渲染一塊內(nèi)容喊括。這塊內(nèi)容只會在指令的表達式返回 truthy 值的時候被渲染
<h1 v-if="awesome">Vue is awesome!</h1>
- v-else
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no ??</h1>
v-else-if胧瓜，顧名思義，充當(dāng) v-if 的“else-if 塊”
-
用 key 管理可復(fù)用的元素
-
這兩個元素是完全獨立的郑什，不要復(fù)用它們
-
這兩個元素是完全獨立的郑什，不要復(fù)用它們
條件渲染
<div id="app">
...
<div v-if="count">value的值是：{{ value }}</div>
</div>
count非零的時候為真
項目實戰(zhàn)
顯示TODOS
- 創(chuàng)建vue對象府喳，指定data對象
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
var app = new Vue({
el: '#todo-app',
data: function(){
return {
todos:[
{id:0, title:'學(xué)習(xí)vue'},
{id:1, title:'工作匯報'},
]
}
}
})
</script>
- 修改li標(biāo)簽，使用v-for指令
<ul>
<li v-for="todo in todos" :key='todo.id'>
<span>{{ todo.title }}</span>
...
</li>
添加TODO
- 實現(xiàn) addTodo 方法
- 方法聲明在 Vue 對象的 methods 屬性里
- 生成一個新的 todo 對象蘑拯，然后將其添加到 todos 列表里（使用push 方法把一個元素加入到數(shù)組的末尾）钝满，然后將用戶的輸入值清空
- 注意 newTodoTitle 和輸入框的 value 值是雙向綁定的，任何一個值改變申窘，相應(yīng)的值都會跟著變
- 生成一個新的 todo 對象蘑拯，然后將其添加到 todos 列表里（使用push 方法把一個元素加入到數(shù)組的末尾）钝满，然后將用戶的輸入值清空
- 方法聲明在 Vue 對象的 methods 屬性里
- input輸入
- 雙向綁定弯蚜，獲取用戶輸入
- 綁定回車事件，調(diào)用函數(shù)
<input type="text" placeholder="添加 todo" v-model="newTodoTitle"
@keyup.enter="addTodo"/>
- vue對象偶洋，添加methods
<script>
let id = 0
var app = new Vue({
...
data: function(){
return {
todos:[],
newTodoTitle:'',
}
},
methods:{
addTodo:function(){
this.todos.push({id: id++, title: this.newTodoTitle})
this.newTodoTitle = ''
}
}
})
功能03
methods:{
addTodo:function(){
if (this.newTodoTitle === ''){
return
}
...
功能04
- 增加樣式
...
<style>
...
.empty {
border-color: red;
}
...
- 修改用戶輸入input
<div id="todo-app">
<div>
...
<input type="text" v-bind:class="{empty: emptyCheck}"
placeholder="添加 todo" v-model="newTodoTitle"
@keyup.enter="addTodo"/>
<span v-if="emptyCheck" class="selected">請輸入內(nèi)容熟吏！</span>
...
- Vue對象，增加emptyCheck計算屬性玄窝，checkEmpty
<script>
let id = 0
var app = new Vue({
el: '#todo-app',
data: function(){
return {
...
checkEmpty: false,
...
methods:{
addTodo:function(){
if (this.newTodoTitle === ''){
this.checkEmpty = true;
return
}
...
this.checkEmpty = false;
}
},
computed:{ //計算屬性
emptyCheck: function(){
return this.newTodoTitle.length === 0 && this.checkEmpty
}
}
...
