初识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

        <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://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，写的一些小练习相关推荐

使用vue写一个bilibili小组件
文章目录前言一.效果展示二.源代码使用方法 1.设置代理 2.新建vue组件 3.设置自己的bilibili mid 总结前言在别人的博客中看见了一个展示自己bilibili账号的组件,看 ...
分析初识vue小案例
前言我们已经写好了一个案例:初识vue小案例接下来我们就分析初识vue小案例容器和vue实例是一一对应的! 容器和vue实例应该是一一对应的,不允许出现一对一或者一对多下面是一个一个容器对多个 ...
用 vue 写小程序，基于 mpvue 框架重写 weui
mpvue-weui 前言上周美团开源了 mpvue 框架,他基于Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系.what,小程序可以用vue写了?简直有点不太敢确定, ...
运用vue.js写的表格小demo
2019独角兽企业重金招聘Python工程师标准>>> 最近在学习vue.js,我把工作中项目里面的一个小实例用vue.js重构了下,写成一个小demo,巩固自己所学,并与大家分享, ...
01 【Vue简介初识Vue 模板语法和数据绑定】
1.Vue简介 1.1官网英文官网中文官网 1.2介绍与描述 Vue 是一套用来动态构建用户界面的渐进式JavaScript框架 ○构建用户界面:把数据通过某种办法变成用户界面 ○渐进式:Vue可 ...
基于vue-cli、elementUI的Vue超简单入门小例子
基于vue-cli.elementUI的Vue超简单入门小例子这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. 开始写例子之前,先对环境的部署做点简单 ...
mpvue 微信小程序_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
在react里写原生js_小程序原生开发与第三方框架选择
最近正在更新<微信小程序入门与实践>一书的第二版.书中有一章节谈到了"多样化的小程序开发",摘取并加以整理分享给各位开发者.我一向不推荐也不提倡公众号阅读学习编程,文章 ...
[html] 写H5和小程序有什么相同及不同的地方吗？
[html] 写H5和小程序有什么相同及不同的地方吗? 第一条是运行环境的不同.传统的HTML5的运行环境是浏览器,包括webview,而微信小程序的运行环境并非完整的浏览器,大家注意,我这里写的是& ...
用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...

初识Vue，写的一些小练习

vue尝鲜

演示效果1

演示效果2

演示效果3

演示效果4

演示效果5

初识Vue，写的一些小练习相关推荐

最新文章

热门文章