Vue介绍 -2

使用JavaScript表达式
在使用了v-bind的html属性，或者使用了{{}}的文本。我们还可以执行一个JavaScript表达式

注意，只能是JavaScript表达式，不能是语句，比如var a=1;a=2;这样的是js语句，不是表达式了

条件判断
在模板中，可以根据条件进行渲染。条件用到的是v-if、v-else-if以及v-else来组合实现的

有时候我们想要在一个条件中加载多个html元素，那么我们可以通过template元素上实现

另外，在模板中，Vue会尽量重用已有的元素，而不是重新渲染，这样可以变得更加高效。如果你允许用户在不 同的登录方式之间切换


这个里面会有一个问题，就是如果我在username的输入框中输入完信息，切换到邮箱中，之前的信息还是保留 下来，这样肯定不符合需求的，如果我们想要让html元素每次切换的时候都重新渲染一遍，可以在需要重新渲染 的元素上加上唯一的key属性，其中key属性推荐使用整形，字符串类型。

注意，元素仍然会被高效地复用，因为它们没有添加key属性

v-show和v-if
v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件 块。 相比之下，v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进 行切换。 一般来说， v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切 换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。

循环
在模板中可以用 v-for 指令来循环数组，对象等
循环数组

循环对象
循环对象跟循环数组是一样的。并且都可以在循环的时候使用接收多个参数

<div id="app">				
   <div v-for="(value,key)	in	person">
   			{{key}}:{{value}}				
   		</div> 
   	</div> 
<script>				
   	let	vm =new Vue({								
   		el:"#app",								
   		data:{												
   		   person:{
   		      "username":"欢欢",	
   		      "age":18,
   		      "homepage":"https://www.baidu.com/"																  																	   																										}	
   	}				
   	}); 
 </script>

保持状态
循环出来的元素，如果没有使用 key 元素来唯一标识，如果后期的数据发生了更改，默认是会重用的，并且元 素的顺序不会跟着数据的顺序更改而更改

触发视图更新
Vue 对一些方法进行了包装和变异，以后数组通过这些方法进行数组更新，会出发视图的更新。

1. push() ：添加元素的方法。
   this.books.push(“Ellen”)

2. pop() ：删除数组最后一个元素。
   this.books.pop()

3. shift() ：删除数组的第一个元素。
   this.books.shift()

4. unshift(item) ：在数组的开头位置添加一个元素。
   this.books.unshift(“Ellen”)

5. splice(index,howmany,item1,…,itemX) ：向数组中添加或者删除或者替换元素。
   向books第0个位置添加元素 this.books.splice(0,0,“红楼梦”)
   下标从0开始，删除2个元素 this.books.splice(0,2)
   下标从0开始，替换2个元素 this.books.splice(0,2,‘西游记’,‘骆驼祥子’)

6. sort(function) ：排序。

	this.books.sort(function(x,y){
			//	取两个随机数排序					
			a=Math.random();					
			b=Math.random();					
			return	a-b;	
			});

7. reverse() ：将数组元素进行反转。
   this.books.reverse();

视图更新注意事项

1. 直接修改数组中的某个值是不会触发视图更新的。比如：
   this.books[0] = ‘Python’;
   这种情况应该改成用 splice 或者是用 Vue.set 方法来实现：
   Vue.set(this.books,0,‘Python’);
2. 如果动态的给对象添加属性，也不会触发视图更新。只能通过 Vue.set 来添加。比如：

<div id="app">					
	<ul>									
	    <li	v-for="(value,name)	in	person">{{name}}:{{value}}</li>
	</ul>								
	<script>									
	     let vm	= new Vue({													
	         el:"#app",													
	         data:{	
	             person:{"username":'老李'}																    
		     },													
		     methods:{
		          changePerson:function(event){
		              Vue.set(this.person,'age',18)	
		          }	
		      }																																																						     													  									
		});					
   </script>	
</div>

事件绑定
事件绑定就是在 HTML 元素中，通过 v-on 绑定事件的。事件代码可以直接放到 v-on 后面，也可以写成 一个函数。

传入 event 参数
如果在事件处理函数中，想要获取原生的 DOM 事件，那么在 html 代码中，调用的时候，可以传递一个 $event 参数。

<button	v-on:click="subtract(10,$event)">减10</button> ... 
<script>
 ...
 methods:{				
    subtract:function(value,event){								
         this.count-=value;
         console.log(event);			
      }
   }          
 ...
</script>