1. 基础知识
1.new Vue 创建一个实例,传入一个对象。
2. 对象包括:
el:作用域
data:所用到的数据
methods:所用到的函数
3.{{}} 数据绑定 其中不止可以绑定 data,也可以绑定函数 (如果这个函数有返回值并且返回值是字符串之类的可以输出的东西)
4.{{}} 大括号只能绑定内容,不能在 html 属性里使用,如:< a href={{}}} >, 这是不行的
5. 上面那个可以使用 v-bind:href=”link” –> 属性值的绑定, 告诉 html : 后面的数据是绑定的。
6. 使用 v -html 绑定 html 标签而不是直接输出字符串,不过这样会造成跨站脚本攻击,不安全。
几个简单的例子:
1. 2 个输入框,1 个接收初始值,一个接收步长,两个按钮,一个增加一个减少,一行输出文字。
html 部分:
<div id="app">
起始值 <input v-model="start" />
步长 <input v-model="step" />
<button v-on:click="increase"> 增加 </button>
<button v-on:click="decrease"> 减少 </button>
<br />
<hr />
<span> 输出结果:{{result}} </span>
</div>
js 部分
<script>
new Vue({
el:'#app',
data:{
start:0,
step:0,
result:0,
},
methods:{increase:function(){if(this.result==0){this.result=parseInt(this.start);
this.result+=parseInt(this.step);
}else{this.result+=parseInt(this.step);
}
},
decrease:function(){if(this.result==0){this.result=parseInt(this.start);
this.result-=parseInt(this.step);
}else{this.result-=parseInt(this.step);
}
},
}
})
</script>
这个例子用到了:
1.v-model input 框的双向绑定。
2.v-on:click 监听 click 事件,其他事件道理类似。
2. 在上一个例子的基础上,如果 resultPrint 是一个函数,返回目前值是大于 5 还是小于 5,还有一个增加另一个变量的按钮 2。
<div id="app">
起始值 <input v-model="start" />
步长 <input v-model="step" />
<button v-on:click="increase"> 增加 </button>
<button v-on:click="decrease"> 减少 </button>
<button v-on:click="increase2"> 增加 2 </button>
<br />
<hr />
<span> 输出结果:{{resultPrint()}} </span>
<br />
<span>sum2 is {{sum2}}</span>
</div>
<script>
new Vue({
el:'#app',
data:{
sum2:0,
start:0,
step:0,
result:0,
},
methods:{increase:function(){if(this.result==0){this.result=parseInt(this.start);
this.result+=parseInt(this.step);
}else{this.result+=parseInt(this.step);
}
},
decrease:function(){if(this.result==0){this.result=parseInt(this.start);
this.result-=parseInt(this.step);
}else{this.result-=parseInt(this.step);
}
},
increase2:function(){this.sum2++;},
resultPrint:function(){console.log("resultPrint 的打印")
return this.result>10? '结果大于 10':'结果小于 10'
}
}
})
</script>
解析:如果 resultPrint 是一个函数的话,不管我点击按钮 1 还是按钮 2,由于并不知道按钮 2 是否会影响到 resultPrint 的输出值,因此无论页面做什么操作,resultPrint 都会渲染重新执行, 如果 resultPrint 是一个计蒜属性的话,既可以解决普通属性无法加逻辑的局限,又可以避免写成一个函数的话不必要的执行。
computed:{resultPrint:function(){console.log("resultPrint 的打印")
return this.result>10? '结果大于 10':'结果小于 10'
}
},
3.v-bind 动态改变背景图片
<div id="app">
<img v-bind:src="picUrl" v-on:click="changPic" />
</div>
<script>
new Vue({
el:'#app',
data:{
index:0,
sum2:0,
start:0,
step:0,
result:0,
picUrl:'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1560069366&di=8b211d63775a606bf33b3a362b2b475d&src=http://hbimg.b0.upaiyun.com/54ebececeda0217648263cc944d6cfd413a17cdf2cc6-MGHS0y_fw658'
},
methods:{changPic:function(){if(this.index==0){
this.picUrl='https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1130583636,2033493811&fm=26&gp=0.jpg'
this.index=1;
}else{
this.picUrl='https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1560069366&di=8b211d63775a606bf33b3a362b2b475d&src=http://hbimg.b0.upaiyun.com/54ebececeda0217648263cc944d6cfd413a17cdf2cc6-MGHS0y_fw658'
this.index=0;
}
}
}
})
</script>