當前位置：首頁 > 前端技术 > vue >内容正文

vue

初识Vue，写的一些小练习

發布時間：2025/6/15 vue 41 豆豆

生活随笔收集整理的這篇文章主要介紹了初识Vue，写的一些小练习小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

vue嘗鮮

演示效果1

將 data 中的數據渲染到頁面上。

預覽：https://91jack.github.io/Vue-...

示例代碼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

實現數據雙向綁定。

預覽：https://91jack.github.io/Vue-...

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數據。

預覽：https://91jack.github.io/Vue-...

代碼示例3

演示效果4

渲染圖書電商數據，數據存儲在libary.json中，https://91jack.github.io/Vue-...

預覽：https://91jack.github.io/Vue-...

代碼示例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://91jack.github.io/Vue-...

預覽：https://91jack.github.io/Vue-...

代碼示例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>

總結

以上是生活随笔為你收集整理的初识Vue，写的一些小练习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： day15 python-03 列表，
下一篇： html5倒计时秒杀怎么做,vue 设