VUE学习（一）

MVVM模式
MVVM是Model-View-ViewModel的缩写，是一种基于前端的架构模式，其核心是提供对view和viewModel的双向数据的绑定，这使得ViewModel的状态改变可以自动传递给View。
VUE的使用
直接使用

声明式渲染
先编写Vue对象

编写显示区域

	{{msg}}	

注意：
Vue是一种自底向上增量开发的设计，所以有关于vue的标签要写在body标签下，否则怎运行时会报错；输出的文本{{msg}} 一定是被两个{}包括；el后的id地址要与显示区域的id是一样的。

条件与循环
判断
和上述一样先写Vue

var vm = new Vue({
	el:"#app",
	data:{
		seen:false
	}
});

使用v-if指令来判断是否是true，如果是true就显示，是false就不显示。

    
    

    	
你还好吗？
    	{{seen}}
    

循环

var vm2 = new Vue({
    el:"#app2",
    data:{
	scores:[
		{name:"java"},
		{name:"mysql"},
		{name:"linux"}
	]
    }
  });

使用v-for指令进行遍历

	

		
{{score.name}}
	

处理用户输入
使用v-on指令添加一个监听事件

var vm = new Vue({
	el:"#app",
	data:{
		msg:"123456789"
	},
	methods:{
		reverMsg:function(){
			this.msg = this.msg.split('').reverse().join('');// 把字符串逆转
			
		}
	}
});

*methods里编写监听事件做出处理的方法
编写一个button按钮，并对按钮注册一个监听事件，点击按钮实现输出反转

	{{msg}}

	逆转信息

使用v-model指令，实现表单输入和应用状态之间大的双向绑定。

var vm2 = new Vue({
	el:"#app2",
	data:{
		msg:"hello"
	}
});

进行绑定

	{{msg}}

	

		
		
		
	
	

v-model绑定的数据，在修改输入框中的数据时，会修改{{msg}}中的值，v-bind:value绑定的input修改输入框中的值不会对{{msg}}中的值进行修改。
使用Object.freeze();方法在浏览器的开发者模式下会禁止修改数据。
语法模板

通过v-once指令，可以设置浏览器只加载一次，当修改数据时，v-once指令标记的内容不会做出修改。

{{msg}}

v-html：输出html代码，会加载文本中标签和样式

v-bind：绑定数据，可以用在html特性上

	1234

将vue中的数据绑定到id中

按钮

通过绑定指令来控制按钮是否被禁用，输入框是否能输入。
还可以将vue中的地址绑定到 中。

百度一下

{{1+1}} |
{{divId+2}} |
{{btnBoo?1:0}}

计算属性

var vm = new Vue({
	el:"#app",
	data:{
		msg:"不想再看见你",
		firstName:"",
		secondName:"",
		
	},
	computed:{  // 计算属性
		fulName:function(){
			return this.firstName + this.secondName;
			// 运算属性会进行缓存， 基于依赖缓存了，只有相关的依赖发生改变时，
			//它才会重新求值，否则返回上次计算结果
		}
		
	},
	methods:{
		ful:function(){
			return this.firstName + this.secondName;
		}
	}
	
});

输出

	{{msg.split('').reverse().join('')}}

	姓：

	名：

	计算属性输出：{{fulName}}

	方法输出：{{ful()}}

区别：
计算属性是基于他们依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。即只要msg 不发生改变，多次访问fulName 计算属性会立即返回之前计算的结果，而不必再次执行函数。使用方法，每次调用方法总会再次执行函数，也就意味着每次都需进行计算