标签：生命周期 .com 方式 index for round 历史 指令 isp
Vue:一个可以帮助你实现前端MVVM的简单框架，易于上手。
声明式渲染方式，使用{{}}标记占位符
<div id="app">
<p>
<span>{{message}}</span>
</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:function(){
return {message:‘hello vue!‘}
}
});
</script>
条件渲染，使用v-if指令
1 <body> 2 <div id="app"> 3 <p> 4 <span>{{message}}</span> 5 </p> 6 <p> 7 条件渲染 8 </p> 9 <p> 10 <span v-if="seen">看得到</span> 11 <span v-if="flag==3">{{flag}}</span> 12 </p> 13 </div> 14 </body> 15 <script> 16 var app = new Vue({ 17 el:"#app", 18 data:function(){ 19 return { 20 message:‘hello vue!‘, 21 seen:true, 22 flag:3 23 24 } 25 } 26 }); 27 </script>
循环渲染列表，使用v-for指令
<ol> <li v-for="course in courses" >{{course.id}}-{{course.text}}</li> </ol> <ol> <!--使用index获取索引 --> <li v-for="(course,index) in courses" >{{index+1}}-{{course.text}}</li> </ol> </div> <script> var app = new Vue({ el:"#app", data:function(){ return { message:‘hello vue!‘, seen:true, flag:3, courses:[ {id:‘yw‘,text:‘语文‘}, {id:‘sx‘,text:‘数学‘}, {id:‘wy‘,text:‘外语‘}, {id:‘ls‘,text:‘历史‘} ] } } }); </script>
使用v-model指令实现双向绑定
<p> <input v-model="name"/><span>{{name}}</span> </p> </div> <script> var app = new Vue({ el:"#app", data:function(){ return { message:‘hello vue!‘, seen:true, flag:3, courses:[ {id:‘yw‘,text:‘语文‘}, {id:‘sx‘,text:‘数学‘}, {id:‘wy‘,text:‘外语‘}, {id:‘ls‘,text:‘历史‘} ], name:‘张三‘ } } }); </script>
组件化展示
<ol> <todo-item v-for="item in courses" v-bind:todo="item" v-bind:key="item.id"></todo-item> </ol> </div> <script> Vue.component(‘todo-item‘,{ props:[‘todo‘], template:‘<li>{{todo.text}}</li>‘ }); var app = new Vue({ el:"#app", data:function(){ return { message:‘hello vue!‘, seen:true, flag:3, courses:[ {id:‘yw‘,text:‘语文‘}, {id:‘sx‘,text:‘数学‘}, {id:‘wy‘,text:‘外语‘}, {id:‘ls‘,text:‘历史‘} ], name:‘张三‘ } } }); </script>
标签：生命周期 .com 方式 index for round 历史 指令 isp
原文地址：http://www.cnblogs.com/alddin/p/7163407.html
