Vue.js也称为Vue,
是一个用来构建用户界面的框架
是一个轻量级的MVVM框架(Model-View-ViewModel)框架，其实就是数据的双向绑定
数据驱动+组件化的前端开发(核心思想)通过简单的API可以实现响应式
的数据绑定和组合的视图组件更容易上手、小巧参考官网：vuejs.org
vue由个人维护，尤雨溪，华人，目前就职于阿里巴巴
2014 2月开源了vue.js的源代码
都不兼容低版本的IE
v-model:双向数据绑定，常用于表单元素
v-for: 对数组或对象进行循环操作
v-on:时间绑定,用法：v-on:事件
v-for:对数组或对象进行循环操作
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="lin"> <ul> <li v-for='v in arr'>{{v}}</li> </ul> </div> <script src="vue.js"></script> <script> new Vue({ el:'.lin', data:{ arr:[1,2,3,4,5] } }) </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="lin"> <ul> <li v-for="(value,ind) in arr">{{ind}}=>{{value}}</li> </ul> </div> <script src="vue.js"></script> <script> new Vue({ el:'.lin', data:{ arr:[1,2,3,4,5], obj:{name:'wsk',age:21} } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="lin"> <ul> <li v-for="val in arrs"> {{val.num}} {{val.name}} {{val.price}} </li> </ul> </div> <script src="vue.js"></script> <script> new Vue({ el:'.lin', data:{ arrs:[ {num:1,name:'火龙果',price:3}, {num:2,name:'榴莲',price:2}, {num:3,name:'菩提子',price:1} ] } }) </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> table{ width:300px; } </style> <body> <div class="lin"> <table border="1" cellspacing='0'> <!-- <thead> <th>1</th> <th>1</th> <th>1</th> </thead> --> <tbody> <tr v-for="value in arrs"> <td>{{value.num}}</td> <td>{{value.name}}</td> <td>{{value.price}}</td> </tr> </tbody> </table> </div> <script src="vue.js"></script> <script> new Vue({ el:'.lin', data:{ arrs:[ {num:'商品',name:'名称',price:'单价'}, {num:1,name:'强傲',price:'1.45斤'}, {num:2,name:'付宝',price:50.95}, {num:3,name:'王帅康',price:70}, {num:4,name:'王哲胜',price:70} ] } }) </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="lin"> <input type="text" v-model="msg"> <p>{{msg}}</p> </div> <script src="vue.js"></script> <script> new Vue({ el:'.lin', data:{ msg:'' } }) </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="lin"> {{wsk}} </div> <script src='./vue.js'></script> <script> new Vue({ el:'.lin', data:{ wsk:'我下铺' } }) </script> </body> </html>
image
image
image
image
image
image
image
