VUE学习（一）

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

<script type="text/javascript" src="../../js/vue.js"></script>

声明式渲染
先编写Vue对象

<script type="application/javascript">
		// 创建一个vue对象
		var vue = new Vue({
			el: "#app", // 控制范围,#后跟id
			data: {	 //  el中要用到的数据
				msg: "hello" // 具体数据,通过vue提供的指示命令，把数据渲染到页面上，不需要手动进行DOM操作
			}

		});
		// vue 把数据和DOM之间建立关联 是响应式的
	</script>

编写显示区域

<div id="app">
	{{msg}}	
</div>

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

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

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

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

    <!-- v-if判断语句 -->
    <div id="app">
    	<p v-if="seen">你还好吗？</p>
    	{{seen}}
    </div>

循环

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

使用v-for指令进行遍历

<div id="app2">
	<ol>
		<li v-for="score in scores">{{score.name}}</li>
	</ol>
</div>

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

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

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

<div id="app">
	{{msg}}<br />
	<button type="button" v-on:click="reverMsg" >逆转信息</button>
</div>

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

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

进行绑定

<div id="app2">
	{{msg}}<br />
	<form >
		<!--v-model表单输入和vue的应用数据进行双向绑定-->
		<input  v-model="msg" />
		<input  v-bind:value="msg" />
	</form>
	
</div>

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

<script type="application/javascript">
	var vm = new Vue({
		el:"#app",
		data:{
			msg:"hello",
			htmlText:"<span style='color:red'>红色文本</span>",
			divId:1,
			btnBoo:true,
			inRead:false,
			myUrl:"http://www.baidu.com"
		}
		
		
	});
	
</script>

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

<!--v-once指令：只执行一次-->
<span v-once="">{{msg}}</span>

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

<!--v-html:输出html代码-->
<span v-html="htmlText"></span>

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

<div v-bind:id="divId">
	1234
</div>

将vue中的数据绑定到id中

<button v-bind:disabled="btnBoo">按钮</button>
<input v-bind:readonly="inRead" />

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

<a v-bind:href="myUrl">百度一下</a>

<!--使用javaScript表达式-->
{{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;
		}
	}
	
});

输出

<div id="app">
	{{msg.split('').reverse().join('')}}<br />
	姓：<input v-model="firstName" /><br />
	名：<input v-model="secondName" /><br />
	计算属性输出：{{fulName}}<br />
	方法输出：{{ful()}}
</div>

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