Vue.js-note0

[ronghaoZHI]

vue.js

//安装： npm install vue
//MVVM
1.定义View
2.定义Model
3.创建ViewModel，链接V M.

//数据绑定 // {{message}} //string格式

> <div id="app1">
> 		{{message?message:'我是初始化数据'}}
> 	</div>
> 	
> 
> 	<script src="./vue.min.js"> </script>
> 	<script>		
> 		var vm = new Vue({
> 			el: "#app1"
> 			data:{ 
> 				message:'hello'
> 			}
> 			
> 		})
> 	</script>
> 

//数据双向绑定 v-model

> <div id="app1">
> 		<!-- {{message?message:'我是初始化数据'}} -->
> 		 {{message?message:'我是默认信息'}} 
> 		<input type="text" v-model='message'>
> 
> 	</div>
>  
> 	<script src="./vue.min.js"> </script>
> 	<script>		
> 		var vm = new Vue({
> 			el: "#app1",
> 			data:{ 
> 				message:''
> 			}
> 			
> 		})
> 	</script>

//一个 Vue 实例其实正是一个 MVVM 模式中所描述的 ViewModel

> 	<script>
> 		var message = {name:'bob',age:25 }
> 
> 		var vm = new Vue({
> 			el: "#app",
> 			data:{messag:message},
> 		})
> 		alert(vm.messag === message); //true
> 	</script>

实例上的data属性绑定的数据和原数据指定的是同一内存空间

> //数据更新 视图刷新
> var message  = {
>     name:'hello'
> };
> var vm = new Vue({
>     el:'.app',
>     data:{
>         message:message
>     }
> });
> message.name = 1000; //视图刷新

Vue.set()//vm.$set()
//改变数组数据时 界面是不会自动跟新数组的，我们需要用Vue.set(app.arr,1,’ddd’)来设置改变，vue才会给我们自动更新
//

//事例上属性与方法

//vue通过$ 暴露实力上的属性与方法
// $el //获取当前绑定的对象
vm.$el = document.querySelector('.app');
// $data //获取当前绑定的数据
vm.$data = {message:{name:1}} //会更换data对象刷新视图，尽量不去更换
//$wacth //监控模型的变化
vm.wacth('message',function( newVal,oldVal) { });