vue嘗鮮 · Vue從入門到實戰

[TOC] ----- ## vue嘗鮮 ### 演示效果1 將 data 中的數據渲染到頁面上。 >[success] 預覽：https://ityanxi.github.io/Vue-tutorial/chapter01/02vue-demo1.html ![](https://box.kancloud.cn/8f6af6041ebe886ab0c204efa39f7204_459x231.png) >[success]示例代碼1 ~~~ <div id="app"> {{message}} <hr /> {{msg2}} <hr /> {{msg}} <hr /> {{arr}} <hr /> {{json}} </div> <script src="vue.js"></script> <script type="text/javascript"> new Vue({ el:'#app',// data:{ message:'Hello Vue!', msg2:10, msg:true, arr:['apple','banana','orange','pear'], json:{a:'張三',b:'李四',c:'王五'} } }); </script> ~~~ ----- ### 演示效果2 實現數據雙向綁定。 >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter01/02vue-demo2.html ![](https://box.kancloud.cn/b35cec6d6a0ce4579a06a197dc4cca54_243x70.png) >[success]示例代碼2 ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #demo{ width: 800px; margin: 200px auto; } input{ width: 600px; height: 50px; border:10px solid green; padding-left: 10px; font:30px/50px "微軟雅黑"; } .msg{ width: 600px; font:30px/50px "微軟雅黑"; color:red; } </style> <script src="vue.js"></script> <script type="text/javascript"> window.onload=function(){ new Vue({ el: '#demo', data: { msg:'welcome vue.js', } }) } </script> </head> <body> <div id="demo"> <input v-model='msg'/> <div class="msg"> {{msg}} </div> </div> </body> </html> ~~~ ---- ### 演示效果3 渲染json數據。 >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter01/02vue-demo3.html ![](https://box.kancloud.cn/4957add6431e3b313a2eebc58e4872e7_210x131.png) >[success]代碼示例3 ~~~ <div id="app"> <ol> <li v-for="list in msg"> {{list.name}} {{list.age}} {{list.addr}} </li> </ol> </div> <script src="vue.js"></script> <script type="text/javascript"> new Vue({ el:'#app',// data:{ msg:[ {name:'張三1',age:'18',addr:'vue1'}, {name:'張三2',age:'18',addr:'vue2'}, {name:'張三3',age:'18',addr:'vue3'}, {name:'張三4',age:'18',addr:'vue4'}, {name:'張三5',age:'18',addr:'vue5'}, {name:'張三6',age:'18',addr:'vue6'} ] } }); </script> ~~~ -------- ### 演示效果4 渲染圖書電商數據，數據存儲在libary.json中，https://ityanxi.github.io/Vue-tutorial/chapter01/libary.json >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter01/02vue-demo4.html ![](https://box.kancloud.cn/d22b5a3a9b990e0906caeca0c7697384_475x643.png) >[success]代碼示例4 ~~~ <div id="app"> <h1>圖書電商數據</h1> <table> <thead> <tr> <th>ID</th> <th>分類</th> </tr> </thead> <tbody> <tr v-for="list in result"> <td>{{list.id}}</td> <td>{{list.catalog}}</td> </tr> </tbody> </table> </div> <script src="vue.js"></script> <script type="text/javascript"> new Vue({ el:'#app',// data:{ "resultcode":"200", "reason":"success", "result":[ { "id":"242", "catalog":"中國文學" }, { "id":"252", "catalog":"人物傳記" }, { "id":"244", "catalog":"兒童文學" }, { "id":"248", "catalog":"歷史" }, { "id":"257", "catalog":"哲學" }, { "id":"243", "catalog":"外國文學" }, { "id":"247", "catalog":"小說" }, { "id":"251", "catalog":"心靈雞湯" }, { "id":"253", "catalog":"心理學" }, { "id":"250", "catalog":"成功勵志" }, { "id":"249", "catalog":"教育" }, { "id":"245", "catalog":"散文" }, { "id":"256", "catalog":"理財" }, { "id":"254", "catalog":"管理" }, { "id":"246", "catalog":"經典名著" }, { "id":"255", "catalog":"經濟" }, { "id":"258", "catalog":"計算機" } ], "error_code":0 } }); </script> ~~~ -------- ### 演示效果5 渲染微信精選數據，數據存儲在wechat.json中，https://ityanxi.github.io/Vue-tutorial/chapter01/wechat.json >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter01/02vue-demo5.html ![](https://box.kancloud.cn/2e1d27895e36f2cf00d7093a56e97a12_768x702.png) >[success]代碼示例5 ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> h1{ text-align: center; } table, td, th { border-collapse: collapse; border-spacing: 0 } table { /*width: 400px;*/ margin: 0 auto; text-align: center; } td, th { border: 1px solid #bcbcbc; padding: 5px 10px; } th { background: #42b983; font-size: 1.2rem; font-weight: 400; color: #fff; cursor: pointer; } tr:nth-of-type(odd) { background: #fff; } tr:nth-of-type(even) { background: #eee; } a{ text-decoration: none; display: block; padding: 5px 10px; background: #269ABC; color:#fff; } </style> </head> <body> <div id="app"> <h1>微信精選文章</h1> <table> <thead> <tr> <th>ID</th> <th>標題</th> <th>來源</th> <th>圖片</th> <th>查看</th> </tr> </thead> <tbody> <tr v-for="list in result['list']"> <td>{{list.id}}</td> <td>{{list.title}}</td> <td>{{list.source}}</td> <td><img :src="list.firstImg" alt="" width="300"/></td> <td><a :href="list.url" target="_blank">閱讀原文</a></td> </tr> </tbody> </table> </div> <script src="vue.js"></script> <script type="text/javascript"> new Vue({ el:'#app',// data:{ "reason":"請求成功", "result":{ "list":[ { "id":"wechat_20170524020647", "title":"這才是中國說話禮儀，太全了！", "source":"騰訊網", "firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25166268.jpg\/640", "mark":"", "url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524020647" }, { "id":"wechat_20170524021107", "title":"十八層地獄都是什么樣子？勸世人多行善", "source":"刀墓手札", "firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25166891.jpg\/640", "mark":"", "url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524021107" }, { "id":"wechat_20170524022075", "title":"編輯部殺人事件", "source":"故事會", "firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25167481.jpg\/640", "mark":"", "url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524022075" }, { "id":"wechat_20170524020087", "title":"生活的美好，緣于一顆平常心", "source":"情緒管理", "firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-24770365.jpg\/640", "mark":"", "url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524020087" }, { "id":"wechat_20170524020085", "title":"做一個純粹的女人", "source":"情緒管理", "firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-15035340.jpg\/640", "mark":"", "url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524020085" }, { "id":"wechat_20170524020223", "title":"看懂的請給下一個人", "source":"環球好聽英文歌", "firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-15866850.static\/640", "mark":"", "url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524020223" }, { "id":"wechat_20170524020612", "title":"你知道嗎？好茶是泡出來的，好人是做出來的！", "source":"普洱茶界", "firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25166255.jpg\/640", "mark":"", "url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524020612" }, { "id":"wechat_20170524020995", "title":"子若強于我，要錢做什么？子若不如我，留錢做什么（說得太好了！）", "source":"洲際電池圈", "firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-21531071.static\/640", "mark":"", "url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524020995" }, { "id":"wechat_20170524022415", "title":"電纜人必看！借錢見人心，還錢見人品！", "source":"買賣寶", "firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25167687.jpg\/640", "mark":"", "url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524022415" }, { "id":"wechat_20170523061558", "title":"孩子出不出色，取決于媽媽的性格（深度好文）", "source":"媽媽手冊", "firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-24679658.static\/640", "mark":"", "url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170523061558" }, { "id":"wechat_20170524017876", "title":"每日詩詞(359-109)", "source":"詩詞月刊", "firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25164852.jpg\/640", "mark":"", "url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524017876" }, { "id":"wechat_20170524002636", "title":"新婚不久丈夫去世，漂亮的妻子第二天就...太現實了！", "source":"每日幽默小視頻", "firstImg":"", "mark":"", "url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524002636" }, { "id":"wechat_20170524014500", "title":"【我與濃情黑土地文學平臺之緣】韓治林：我與濃情黑土地平臺", "source":"濃情黑土地", "firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-18100317.static\/640", "mark":"", "url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524014500" }, { "id":"wechat_20170524014630", "title":"書畫|精美五百羅漢圖五百羅漢的由來附500羅漢全名單", "source":"上上閣藝術沙龍", "firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25163758.jpg\/640", "mark":"", "url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524014630" }, { "id":"wechat_20170524014621", "title":"【漲知識】特稿寫作秘訣在這里，拿走不謝！", "source":"中國報業", "firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25163761.jpg\/640", "mark":"", "url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524014621" }, { "id":"wechat_20170524014617", "title":"書畫|美國 Ricky.Mujica 瑞奇.穆希卡超現實浪漫主義繪畫欣賞", "source":"上上閣藝術沙龍", "firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25163726.jpg\/640", "mark":"", "url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524014617" }, { "id":"wechat_20170524014603", "title":"視聽|心經的境界佛音《般若波羅密多心經》-演唱:王蓉", "source":"上上閣藝術沙龍", "firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25163713.jpg\/640", "mark":"", "url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524014603" }, { "id":"wechat_20170524014607", "title":"文化|中國古代四大美女之二《落雁?回望昭君》朗誦：高昂", "source":"上上閣藝術沙龍", "firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25163715.jpg\/640", "mark":"", "url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524014607" }, { "id":"wechat_20170524015424", "title":"宗譜在我心中－記駱相生宗叔（修正版）", "source":"駱姓論壇", "firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25164030.jpg\/640", "mark":"", "url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524015424" }, { "id":"wechat_20170524015418", "title":"安徽蕪湖繁陽駱氏《忠懇堂》建祠修譜公告", "source":"駱姓論壇", "firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25164010.jpg\/640", "mark":"", "url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524015418" } ], "totalPage":3739, "ps":20, "pno":1 }, "error_code":0 } }); </script> </body> </html> ~~~