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>