<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue01</title>
<script src="vue.js"></script>
</head>
<body>
<!--例1:双向数据绑定——实时监控输入内容-->
<div id="app">
<input v-model="number">
<p>数字:{{ number }}</p>
</div>
<!--例2:组件化——封装注册名为card的组件-->
<div id="comp">
<card></card>
<card></card>
<card></card>
</div>
<!--例3:filters过滤器的使用——讲过滤条件写入函数中-->
<div id="filter">
<p>数字1:{{ num1 | toInt }}</p>
<p>数字2:{{ num2 | toInt }}</p>
<p>数字3:{{ num3 | toInt }}</p>
</div>
<!--例4:computed计算属性的使用-->
<div id="compute">
{{num1}}+{{num2}}+{{num3}}={{sum}}
</div>
<!--例5:methods方法的使用-->
<div id="method">
{{num}}<input type="button" value="加1" v-on:click="plus">
{{numNow}}<!--问题:任何监控到num变化时对numNow值进行修改???-->
</div>
</body>
<script>
/*例1*/
let vm = new Vue({
el:"#app",
data:{
number:"",
}
});
/*例2*/
Vue.component('card',{
template:`
<div style="border:1px solid black;">
<input type="button" value="button">
<p>My name is liuting!</p>
</div>
`
});
new Vue({
el:"#comp"
});
/*例3*/
let vm3=new Vue({
el:"#filter",
data:{
num1:342.214,
num2:353.124,
num3:34.4352
},
filters: {
toInt(value) {
return parseInt(value);
}
}
});
/*例4*/
let vm4=new Vue({
el:"#compute",
data:{
num1:123,
num2:324,
num3:32
},
computed:{
sum(){
return this.num1+this.num2+this.num3;
}
}
});
/*例5 + 例6:watch检测数据发生变化的api*/
let vm6=new Vue({
el:"#method",
data:{
num:0,
numNow:""
},
methods:{
plus(){
return this.num++;
}
},
watch:{
num(){
console.log(`num最新值:${this.num}`);
}
}
});
</script>
</html>