工作中用了很久vue,但是都是我们这边前端经理封装好的组件,想要看到底部的原理还要从层层代码里面剥离出来,逻辑太复杂,还不如自己一点点整理一下,一步一步走下去.
github地址:https://github.com/manlili/vue_learn里面的lesson01
目录如下:
一 单向数据绑定
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vue</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="js/vue.js"></script> </head> <body> <div class="test"> {{message}} </div> <script> var vue = new Vue({ el: ".test", //必须有el data:{ message:"这是个测试" } }) </script> </body> </html>
二 双向数据绑定
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue双向数据成功</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <script src="js/vue.js"></script> </head> <body> <div class="test"> <!--注意文本和input要在同一个el下面,要不然input输入改变不了p里面内容--> <p>{{message}}</p> <input type="text" v-model="message"> </div> <script> var vue = new Vue({ el: ".test", //必须有el data:{ message:"这是个测试" } }) </script> </body> </html>
三 访问数组数据
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue数组</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <script src="js/vue.js"></script> </head> <body> <ul class="test" v-for="item in message"> <li>{{item}}</li> </ul> <script> var vue = new Vue({ el: ".test", //必须有el data:{ message:["aa","bb","cc"] } }) </script> </body> </html>
四 访问数组中对象数据
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue数组中对象</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <script src="js/vue.js"></script> </head> <body> <ul class="test" v-for="item in message"> <li>{{item.name}}</li> </ul> <script> var vue = new Vue({ el: ".test", //必须有el data:{ message:[{name:"lili"},{name:"haha"},{name:"kkkk"}], //注意此处name这个key值必须保持一致,要不然数组循环没法访问不同的key值 } }) </script> </body> </html>
五 vue方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue方法</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <script src="js/vue.js"></script> </head> <body> <div class="test"> <p class="pp">{{message}}</p> <button @click="changeColor">使用vue方法</button> </div> <script> var vue = new Vue({ el: ".test", //必须有el data:{ message:"这是个测试" }, methods:{ changeColor:function () { document.getElementsByClassName("pp")[0].style.color="#ff0000"; } } }) </script> </body> </html>