[TOC]
-----
## vue尝鲜
### 演示效果1
将 data 中的数据渲染到页面上。
>[success] 预览：https://ityanxi.github.io/Vue-tutorial/chapter01/02vue-demo1.html
>[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
>[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
>[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
>[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>
<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>
~~~
- 前端新手村
- 前言
- 第1章 遇见Vue.js
- 第一个Vue.js程序
- vue尝鲜
- 第2章 概念理解
- 渐进式框架
- 虚拟DOM
- MVVM模式
- MVX模式是什么
- 第3章 Vue基础概览
- 第4章 Vue内置指令详解
- vue-text
- vue-html
- v-show
- v-if
- v-else
- v-else-if
- v-for
- v-on
- v-bind
- v-model
- v-pre
- v-cloak
- v-once
- 第5章 基础demo小练习
- 图书管理系统
- 页面布局
- 列表渲染
- 功能实现
- 基于BootStrap+Vuejs实现用户信息表
- 功能描述
- 布局实现
- 星座判断
- 第6章 组件
- 什么是组件
- 使用组件
- Prop
- 自定义事件
- 使用Slot分发内容
- 动态组件
- 杂项
- 第7章-过渡
- 过渡效果
- 概述
- 单元素/组件的过渡
- 初始渲染的过渡
- 多个元素的过渡
- 多个组件的过渡
- 列表过渡
- 可复用的过渡
- 动态过渡
- 过渡状态
- 状态动画与watcher
- 动态状态转换
- 通过组件组织过渡
- Render函数
- 基础
- createElement参数
- 使用JavaScript代替模板功能
- JSX
- 函数化组件
- 模板编译
- 自定义指令
- 简介
- 钩子函数
- 钩子函数参数
- 函数简写
- 对象字面量
- Vuex状态管理
- Vuex是什么？
- Vuex的安装
- Vuex起步
- data的替代品-State和Getter
- 测试Getter
- Action-操作的执行者
- 测试Action
- 只用Mutation修改状态
- 测试Mutations
- Vuex的基本结构
- 子状态和模块
- 用服务分离外部操作
- Vue-router
- Vue-router是什么
- Vue-router安装
- 基本用法1
- 基本用法2
- Vue-cli
- Vue中的Node.js
- Vue中的npm、cnpm
- Vue中的webpack
- 安装
- 基本使用
- 模板
- 全局API
- Vue.extend
- Vue.nextTick
- Vue.set
- Vue.delete
- Vue.directive
- Vue.filter
- Vue.component
- Vue.use
- Vue.mixin
- Vue.compile
- 附录
- 相关网站
- 尤雨溪
- 第10章 webpack
- webpack安装
- webpack基本使用
- webpack命令行
- webpack配置文件
- 单页面应用SPA
- 第1章 Vue.js简介
- 1.1 Vue.js简介
- 1.1.1 Vue.js是什么
- 1.1.2 为什么要用Vue.js
- 1.1.3 Vue.js的发展历史
- 1.1.4 Vue.js与其他框架的区别
- 1.2 如何使用Vue.js
- 1.2.1 第一个Vue.js程序
- 1.2.2 Vue.js小尝鲜
- 1.3 概念详解
- 1.3.1 什么是渐进式框架
- 1.3.2 虚拟DOM是什么
- 1.3.3 如何理解MVVM
- 第2章 基础概览
- 2.1 Vue实例
- 2.1.1 构造器
- 2.1.2 属性与方法
- 2.1.3 实例生命周期
- 2.1.4 生命周期图示
- 2.2 模板语法
- 2.2.1 插值
- 2.2.2 指令
- 2.2.3 过滤器
- 2.2.4 缩写
- 第3章 Class与Style的绑定
- 第4章 模板渲染
- 第5章 事件详解
- 第6章 表单控件绑定
- 第7章 指令详解
- 7.1 内部指令
- 7.2 自定义指令
- 7.3 指令的高级选项
- 第8章 计算属性
- 第9章 过滤器
- 第10章 组件
- 10.1 什么是组件
- 10.2 注册组件
- 10.3 组件选项
- 10.4 组件间的通信
- 10.5 内容分发
- 10.6 动态组件