[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> ~~~