vue

网站收藏

Vue.js
Vue.js @尤雨溪 老师写的一个用于创建 web 交互界面的库，是一个精简的 MVVM。从技术角度讲，Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来。实际的 DOM 封装和输出格式都被抽象为了Directives 和 Filters。Vue.js和其他库相比是一个小而美的库，作者的主要目的是通过一个尽量简单的 API 产生可反映的数据绑定和可组合的视图组件，感觉作者的思路非常清晰。
优点：
  1. 简单：官方文档很清晰，比 Angular 简单易学。
  2. 快速：异步批处理方式更新 DOM。（减少dom操作，节省性能）
  3. 组合：用解耦的、可复用的组件组合你的应用程序。
  4. 紧凑：~18kb min+gzip，且无依赖。
  5. 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。
  6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。
缺点：不支持IE8：哈哈不过AngularJS 1.3也抛弃了对IE8的支持，但是 @司徒正美 老师的avalon是支持IE6+的，应该下了很多努力去优化。这一点对于那些需要支持IE8的项目就不好了，不过这也是web前端开发的一个趋势，像IE低版本就应该退出历史舞台了，通过改变我们的前端思维，而不是顺应那些使用老版本而不去升级的人。 @玉伯老师就说过一句话，我觉得说的非常好“这年头，支持 IE6、7 早就不再是特性，而是耻辱。努力推动支付宝全面不支持 IE6、7，期待更多兄弟加盟”。
 
 
 
第一天学vue，总结一下今天的收获。。。
第一个vue小程序 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="js/vue.js"></script> //第一步先引入vue文件，官网上就可以下载
</head>
<body>
    <div class="app">　　　　　　/*然后在html页面准备一个控制器*/
      {{ message }}　　　　　　　　{{}}两个花括号  把你想呈现的东西包起来
    </div>
</body>
<script>
    var app = new Vue({　　　　　　//var 一个vue里面是一个json   el代表选择器    data代表数据  data里的message代表信息  用的话直接到控制器里面用就可以了
      el: '.app',//控制器
      data: {
        message: '王老五'
      }
    })
</script>
</html>

指令：

　　v-bind  绑定，他可以将dom属性与vue属性绑定在一起；

　　v-if　　v-else 判断

　v-on:click　　点击

　mothods 下面都是保存一些方法的

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="js/vue.js"></script>
<script>
	window.onload=function(){
		var app=new Vue({
			el:'.box',
			data:{
				abc:true		//true代表显示
			},
			methods:{			//methods方法  它下面保存的都是一些方法
				toHide:function(){
					this.abc=!this.abc;	 	//this值得就是new Vue这个对象
				}	
			}
		});	
	};
</script>
</head>
<body>
	
	<div class="box" style="border:1px solid red;" >
    	<input type="button" value="按钮" v-on:click="toHide()" />
    	<!--v-if判断，true代表真，则显示第一段，false代表假，则显示第二段-->
    	<p v-if="abc">你能看到我</p>			
        <p v-else="abc">这是第二段</p>
    </div>
</body>
</html>

　　v-for  循环

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="js/vue.js"></script>
<script>
	window.onload=function(){
		var app=new Vue({
			el:'.list',
			data:{
				list:[
					'天天向上',
					'好好学习',
					'goodgoodstudy',
					'daydayup'
				]	
			}	
		});
	};
</script>
</head>
<body>
	<ul class="list">
    	<li v-for="item in list">　　/*这段代码还能写成(item,index) in list    item代表值  index代表索引*/
        	{{item}}
        </li>
    </ul>
</body>
</html>

　　此时我们再回头看第一个vue小程序，有一些在angular上不能实现的方法在这里也可以实现，他可以用字符串拼接的方式来写。比如：

		var app=new Vue({
			el:'.box',
			data:{
				text:'窗前明月光'	
			},
		});
	};
</script>
</head>
<body>
	<div class="box">
    	{{text+'天气不错'}}
    </div>
</body>

　　v-model　　在表单控件或者组件上创建双向绑定(类似原生的onchange)

　　

        var app=new Vue({
            el:'.box',
            data:{
                text:'窗前明月光'    
            },
        });
    };
</script>
</head>
<body>
    <div class="box">
        <input type="text" v-model="text" /><br />
        {{text}}
    </div>

第一个小案例  ：   简易留言板

 1     window.onload=function(){
 2         var app=new Vue({
 3             el:'.msgBox',
 4             data:{
 5                 text:'',
 6                 list:[]    
 7             },
 8             methods:{
 9                 add:function(){
10                     this.list.push(this.text);
11                     this.text='';
12                 },
13                 remove:function(index){
14                     this.list.splice(index,1);    
15                 },
16                 alert:function(n){
17                     alert(n);    
18                 }
19             }
20         });
21     };
22 </script>
23 </head>
24 <body>
25     <!--
26         @keyup.enter  代表键盘按下enter键
27         @click  ==  v-on:click
28     -->
29     <div class="msgBox">
30         <input type="text" v-model="text" 
31         @keyup.enter="add()" />
32         <input type="button" v-on:click="add()" value="按钮" />
33         <h3 v-if="list.length==0">暂无留言</h3>
34         <ul>
35             <li v-for="(item,index) in list">
36                 {{item}}
37                 <a href="#" @click="remove(index)">删除</a>
38             </li>
39         </ul>
40     </div>
41 </body>

过滤器　　filters

　　

 

　　  
　　
　　
 
 
 
posted @ 2016-11-30 18:23  有梦想的小白  阅读(620)  评论(0)    收藏  举报