vue尝鲜
演示效果1
将 data 中的数据渲染到页面上。
预览：https://ityanxi.github.io/Vue-tutorial/chapter01/02vue-demo1.html
示例代码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://ityanxi.github.io/Vue-tutorial/chapter01/02vue-demo2.html
示例代码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数据。
预览：https://ityanxi.github.io/Vue-tutorial/chapter01/02vue-demo3.html
代码示例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
>[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
>[success]代码示例5
<!DOCTYPE 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>