图灵三期图灵学院图灵java架构师

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>