vue监听watch
Vue.js 监听属性 watch，可以通过 watch 来响应数据的变化,使用这个属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数
案例一：实现加减乘除计算器功能
在第一个表单中输入数字，然后通过下拉列表选择要进行的运算，然后再第二个表单中输入数字后，结果便会自动显示再最后一个表单中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
//注意：若是没安装vue.js可以使用注释掉的这个script标签
//<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 简单的加减乘除计算器 -->
<div id="app">
<h1>加减乘除计算器</h1>
<input type="number" v-model="firstname">
<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="lastname">=
<input type="number" v-model="fullname">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: '',
selected:''
},
watch: {
//firstname和lastname的值默认为0
'firstname': function(newVal){
if(this.selected=='0'){
this.fullname = (newVal-0) + (this.lastname-0)
}
if(this.selected=='1'){
this.fullname = (newVal-0) - (this.lastname-0)
}
if(this.selected=='2'){
this.fullname = (newVal-0) * (this.lastname-0)
}
if(this.selected=='3'){
this.fullname = (newVal-0) / (this.lastname-0)
}
},
'lastname': function(newVal){
if(this.selected=='0'){
this.fullname = (this.firstname-0) + (newVal-0)
}
if(this.selected=='1'){
this.fullname = (this.firstname-0) - (newVal-0)
}
if(this.selected=='2'){
this.fullname = (this.firstname-0) * (newVal-0)
}
if(this.selected=='3'){
this.fullname = (this.firstname-0) / (newVal-0)
}
}
}
});
</script>
</body>
</html>
案例二：单位换算器（千米、米、厘米）
不多解释直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 简单的单位换算 -->
<div id = "app">
<h1>单位换算</h1>
千米 : <input type = "number" v-model = "kilometers">
米 : <input type = "number" v-model = "meters">
厘米：<input type = "number" v-model = "limeters">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
kilometers : 0,
meters:0,
limeters:0
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = this.kilometers * 1000;
this.limeters = this.kilometers * 100000;
},
meters:function (val) {
this.kilometers = val/1000;
this.meters = val;
this.limeters = val/100;
},
limeters:function(val){
this.limeters = val;
this.kilometers = val/ 100000;
this.meters = val/100;
}
}
});
</script>
</body>
</html>
vue的事件处理
第一个小案例是模仿购物车写的一个简单的事件处理案例，第二个也是一个加减乘除计算器，但是没使用watch监听，需点击等号才可以得出结果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 对于vue事件处理的学习案例 -->
<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>
<!-- 事件处理简单的加减乘除计算器 -->
<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>
var vm = new Vue({
el:'#app',
data:{
price:'5',
count:'0',
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>
事件修饰符
Vue为 v-on 提供了事件修饰符来处理 DOM 事件细节，通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once
<div v-on:click.prevent="greet">1</div>//等价于event.preventDefault()
<div v-on:click.stop="greet">2</div>//等价于event.stopPropagation()
<div v-on:click.capture="greet">3</div>//等价于事件回调函数采用捕获阶段监听事件
<div v-on:click.self="greet">4</div>//等价于event.target
按键修饰符
常见按键名：
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
心得：
现在慢慢开始接触到比较难点的东西了，但多去看看其他大佬们写的小案例，借鉴下，感觉还是挺好的，一步一步的学其实代码什么的都能看懂，主要就是要多练对编写要具有一定熟练度，去看别人写的案例时，要自己看着敲一遍，或者加入自己的一些想法去改编一下，这都是一种学习。