vue.js簡單小案例
阿新 • • 發佈：2019-02-14
一、Vue.js實現點選自增
點選事件：v-on
縮寫：@
預期：Function | Inline Statement | Object
引數：event
修飾符：
.stop - 呼叫 event.stopPropagation()。
.prevent - 呼叫 event.preventDefault()。
.capture - 新增事件偵聽器時使用 capture 模式。
.self - 只當事件是從偵聽器繫結的元素本身觸發時才觸發回撥。
.{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回撥。
.native - 監聽元件根元素的原生事件。
.once - 只觸發一次回撥。
.left - (2.2.0) 只當點選滑鼠左鍵時觸發。
.right - (2.2.0) 只當點選滑鼠右鍵時觸發。
.middle - (2.2.0) 只當點選滑鼠中鍵時觸發。
.passive - (2.3.0) 以 { passive: true } 模式新增偵聽器
用法：
繫結事件監聽器。事件型別由引數指定。表示式可以是一個方法的名字或一個內聯語句，如果沒有修飾符也可以省略。
用在普通元素上時，只能監聽原生 DOM 事件。用在自定義元素元件上時，也可以監聽子元件觸發的自定義事件。
在監聽原生DOM事件時，方法以事件為唯一的引數。如果使用內聯語句，語句可以訪問一個event屬性：v-on:click=”handle(‘ok’, $event)”。從 2.4.0 開始，v-on 同樣支援不帶引數繫結一個事件/監聽器鍵值對的物件。注意當使用物件語法時，是不支援任何修飾器的。
<!DOCTYPE html>
<html lang="en" 效果圖：
二、購物車商品的簡單計算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
商品價格：<input type="number" v-model = "price"><br>
商品數量：<button v-on:click = "count--">-</button>{{ count }}<button v-on:click = "count++">+</button><br>
總價格:<span>{{ price * count }}</span>
</div>
</div>
<script src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
price:'5',
count:'1'
}
})
</script>
</body>
</html>效果圖：
三、實現簡單的加減乘除運算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="number" v-model = "input1">
<select v-model="selected">
<option value="0">+</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
<input type="number" v-model = "input2">
<button v-on:click="onclick">=</button>
<span>{{ sum }}</span>
</div>
<script src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
selected:'',
input1:'',
input2:'',
sum:''
},
methods:{
onclick(){
if(this.selected=='0'){
this.sum=(this.input1-0)+ (this.input2-0)
}
if(this.selected=='1'){
this.sum=eval(this.input1- this.input2)
}
if(this.selected=='2'){
this.sum=eval(this.input1* this.input2)
}
if(this.selected=='3'){
this.sum=eval(this.input1/this.input2)
}
}
}
})
</script>
</body>
</html>效果圖：
四、簡記所要做的事情（TODO）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.done{
text-decoration: line-through;
color:#ccc;
}
</style>
</head>
<body>
<div id="app">
<h1>ToDo</h1>
<p>{{todos.filter(item=>!item.done).length}}of {{todos.length}} remaining [archive]</p>
<p v-for="(item,index) in todos">
<!--
checkbox:雙向綁定了item.done,
當CheckBox改變的時候，會影響資料 item.done 也跟著改變
當 item.done 改變的時候，會影響所有使用了這個 item.done 的繫結
-->
<input type="checkbox" v-model="item.done">
<!--
v-bind:可用來動態的繫結屬性值，class給了一個物件：
物件的key就是類名，物件的value是布林值
當布林值為true的時候，作用這個key樣式
當布林值為false的時候，去除這個key樣式
-->
<span v-bind:class = "{done:item.done}">{{item.title}}</span>
<button @click = "handleremovetodoclick(index)">刪除</button>
</p>
<input type="text" v-model="todoText" @keydown.enter="handerIncrease">
<button v-on:click="handerIncrease">Add</button>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const todos = [
{id:1,
title:'吃飯',
done:true},
{id:2,
title:'睡覺',
done:false},
{id:3,
title:'寫程式碼',
done:true},
]
const app = new Vue({
el:'#app',
data:{
todos,
todoText:''
},
methods:{
handerIncrease(){
//console.log('hander click')
//得到文字框的內容，將內容push到todos
const todoText = this.todoText.trim()
if(!todoText.length){//非空判斷
return
}
this.todos.push({
id:this.todos[this.todos.length-1].id+1,
title:todoText,
done:false
})
//新增完後清空
this.todoText = ''
},
handleremovetodoclick(index){
this.todos.splice(index,1)
},
}
})
</script>
</body>
</html>效果圖：
