一、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">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id = "app">
<input type="text" v-model="number">
<button v-on:click="handerIncrease()">点击+1</button>
</div>
<script src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
new Vue({
el :"#app",
data:{
number:'1'
},
methods:{
handerIncrease:function(){
this.number++
}
}
})
</script>
</body>
</html>效果图：
二、购物车商品的简单计算
<!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>效果图：
