vue.js的库 用来构建页面的。入门简单，更容易上手。
常用：vue Angular React
el:是element的简写
vue 由个人维护 Angular React由团体维护 尤雨溪是vue.js的框架作者.
vue是一个轻量级的框架。
vue由个人维护。
vue是简化Dom的操作。
vue的指令：（命令）
Vue.js也称为Vue
版本 v1.0 v2.0
是一个用来构建用户界面的框架
是一个轻量级的MVVM框架(Model-View-ViewModel)框架，其实就是数据的双向绑定
数据驱动+组件化的前端开发(核心思想)
通过简单的API可以实现响应式的数据绑定和组合的视图组件
参考官网：vuejs.org
由个人维护，尤雨溪，华人，目前就职于阿里巴巴
2014年2月开源了vue.js的源代码
都不兼容低版本的IE
循环指令：v-for（示例如下：）
<div id="itany">
<ul>
<li v-for='v in arr'>{{v}}</li>
<li v-for='v-value in obj'>{{value}}</li>
<li v-for="(value,ind) in arr">{{ind}}---{{value}}</li>
<li v-for="val in arrs"></li>
</ul>
</div>
js部分：
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany'，
data:{
arr:['1','2','3','4'],
obj:{name:'jiao',age;'18'}
arrs:[
{num:1,name:'苹果',price:3},
{num:2,name:'香蕉',price:2},
{num:3,name:'鸭梨',price:1}
]
}
})
</script>
双向数据绑定：v-model 一般只适用于表单元素 （示例如下：）
<div id="lhf">
<input type="text" v-model="msg">
<p>{{msg}}</p>
</div>
<script src="js/vue.js></script>
<script>
new Vue({
el:'#lhf',
data:{
mag:" "
}
})
</script>
事件：v-on：事件名 v-on:click=“ ” 点击事件 （示例如下：）
<div id="lhf">
<button v-on:click='alt'>按钮</button>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:'#lhf',
data:{
msg:"hello vue"
},
methods:{
alt:function(){
alert(vm.msg)
alert(this.msg)
}
}
})
</script>
练习小例子：
<style>
table{
width:360px;
text-align:center；
}
</style>
<div class="lgy">
<table border='1' cellspacing='0'>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr v-for="lbx in arr">
<td>{{lbx.num}}</td>
<td>{{lbx.name}}</td>
<td>{{lbx.price}}</td>
</tbody>
</table>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'.lgy',
data:{
arr:[
{num:1,name:'苹果',price:3}，
{num:2,name:'橘子'，price:3’},
{num:3,name:'香蕉'，price:3}
]
}
})
</script>
网友评论