├── .gitignore
├── Lesson3-3
    ├── style.css
    ├── webpack.config.js
    ├── entry.js
    ├── content.js
    └── index.html
├── README.md
├── images
    ├── defaultAvatar.png
    └── bill gates & ---<<<@.jpg
├── css
    ├── lesson1-3.css
    ├── lesson1-1.css
    └── lesson2-1.css
├── docs
    ├── dist
    │   └── 77901b04f4a8e72fcf03ee1313f4717a.png
    └── index.html
├── Lesson3-4
    ├── main.js
    ├── CompanyLogo.vue
    ├── index.html
    ├── CompanyTitle.vue
    ├── webpack.config.js
    └── package.json
├── .editorconfig
├── Lesson1-2
    ├── ex-2.html
    └── ex-1.html
├── Lesson1-4
    ├── ex-2.html
    ├── ex-3.html
    └── ex-1.html
├── Lesson2-3
    ├── ex_2.html
    ├── ex_3.html
    ├── ex_1.html
    ├── ex_4.html
    └── ex_5.html
├── Lesson1-3
    ├── ex-2.html
    └── ex-1.html
├── Lesson2-2
    ├── ex_3.html
    ├── ex_4.html
    ├── ex_2.html
    ├── ex_1.html
    ├── ex_5.html
    └── ex_6.html
├── Lesson2-1
    ├── ex-4.html
    ├── ex-3.html
    ├── ex-2.html
    └── ex-1.html
├── Lesson1-1
    ├── ex-2.html
    ├── ex-1.html
    └── ex-3.html
├── Lesson2-4
    ├── ex_1.html
    ├── ex_3.html
    └── ex_2.html
├── Lesson3-1
    ├── ex_5.html
    ├── ex_6.html
    ├── ex_3.html
    ├── ex_4.html
    ├── ex_2.html
    └── ex_1.html
└── Lesson3-2
    ├── flightInfo_2.html
    ├── flightInfo_1.html
    ├── ex_1.html
    ├── ex_2.html
    ├── ex_3.html
    └── ex_4.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | 


--------------------------------------------------------------------------------
/Lesson3-3/style.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/Lesson3-3/webpack.config.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/Lesson3-3/entry.js:
--------------------------------------------------------------------------------
1 | document.write(require('./content.js'))
2 | 


--------------------------------------------------------------------------------
/Lesson3-3/content.js:
--------------------------------------------------------------------------------
1 | module.exports = 'content.js 说：webpack 我看行！'
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 极客学院 Vue.js 课程示例代码
2 | 
3 | [极客学院](http://www.jikexueyuan.com/) Vue.js 课程的示例代码。
4 | 
5 | 


--------------------------------------------------------------------------------
/images/defaultAvatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KingMario/vue-course/HEAD/images/defaultAvatar.png


--------------------------------------------------------------------------------
/css/lesson1-3.css:
--------------------------------------------------------------------------------
1 | .item {
2 |   cursor: pointer;
3 | }
4 | .subitems div {
5 |   padding-left: 15px;
6 | }
7 | 


--------------------------------------------------------------------------------
/images/bill gates & ---<<<@.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KingMario/vue-course/HEAD/images/bill gates & ---<<<@.jpg


--------------------------------------------------------------------------------
/docs/dist/77901b04f4a8e72fcf03ee1313f4717a.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KingMario/vue-course/HEAD/docs/dist/77901b04f4a8e72fcf03ee1313f4717a.png


--------------------------------------------------------------------------------
/Lesson3-4/main.js:
--------------------------------------------------------------------------------
 1 | var CompanyTitle = require('./CompanyTitle.vue')
 2 | var Vue = require('vue')
 3 | 
 4 | new Vue({
 5 |   el: 'body',
 6 |   components: {
 7 |     CompanyTitle
 8 |   }
 9 | })
10 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/Lesson3-3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>webpack 打包示例</title>
 6 | </head>
 7 | <body>
 8 | <script src="bundle.js"></script>
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/Lesson3-4/CompanyLogo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <img class="logo" :src="logo">
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | import Vue from 'vue'
 8 | 
 9 | export default Vue.extend({
10 |   props: ['logo']
11 | })
12 | </script>
13 | <style scoped>
14 | img.logo {
15 |   width: 210px;
16 |   height: 80px;
17 | }
18 | </style>
19 | 


--------------------------------------------------------------------------------
/Lesson3-4/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <title>Vue 单文件组件</title>
 7 |   <link rel="stylesheet" href="style.css">
 8 | </head>
 9 | 
10 | <body>
11 |   <company-title logo="//e.jikexueyuan.com/headerandfooter/images/jk-logo-footer.png?t=1475152597000" slogan="编程是一种信仰！"></company-title>
12 |   <script src="build.js"></script>
13 | </body>
14 | 
15 | </html>
16 | 


--------------------------------------------------------------------------------
/Lesson3-4/CompanyTitle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <span><company-logo :logo="logo"></company-logo><span class="slogan">{{slogan}}</span></span>
 3 | </template>
 4 | <script>
 5 | import CompanyLogo from './CompanyLogo.vue'
 6 | 
 7 | export default {
 8 |   props: ['companyName', 'logo', 'slogan'],
 9 |   components: {
10 |     CompanyLogo
11 |   }
12 | }
13 | </script>
14 | <style scoped>
15 | span.slogan {
16 |   display: block;
17 |   font-size: 12px;
18 |   color: #999;
19 |   margin-top: 20px;
20 | }
21 | </style>
22 | 


--------------------------------------------------------------------------------
/css/lesson1-1.css:
--------------------------------------------------------------------------------
 1 | .form-select {
 2 |   cursor: pointer;
 3 |   display: inline-block;
 4 | }
 5 | .form-select-text {
 6 |   display: inline-block;
 7 |   width: 100px;
 8 |   padding-left: 5px;
 9 |   border-bottom: 1px dashed black;
10 | }
11 | .form-select-text .glyphicon {
12 |   float: right;
13 | }
14 | .form-select-list {
15 |   background-color: white;
16 |   position: absolute;
17 |   border: 1px solid black;
18 |   width: 100px;
19 | }
20 | .form-select-list ul {
21 |   margin: 0;
22 |   padding: 0;
23 |   list-style: none;
24 | }
25 | .form-select-list li {
26 |   padding: 0 0 0 5px;
27 | }
28 | .form-select-list li:hover {
29 |   color: blue;
30 |   background-color: ghostwhite;
31 | }
32 | 


--------------------------------------------------------------------------------
/Lesson1-2/ex-2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Vue.js 计算属性</title>
 6 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 7 | </head>
 8 | <body>
 9 | <div class="container">
10 |   <h2>Vue.js 计算属性</h2>
11 |   <div id="app">
12 |     <div>
13 |       正方形边长：{{ a }}m
14 |     </div>
15 |     <input type="range" v-model="a">
16 |     <div>
17 |       正方形面积：{{ s }}m<sup>2</sup>
18 |     </div>
19 |   </div>
20 | </div>
21 | <script src="../js/vue.js"></script>
22 | <script>
23 |   var vm = new Vue({
24 |     el: '#app',
25 |     data: {
26 |       a: 1
27 |     },
28 |     computed: {
29 |       s: function () {
30 |         return this.a * this.a
31 |       }
32 |     }
33 |   })
34 | </script>
35 | </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/css/lesson2-1.css:
--------------------------------------------------------------------------------
 1 | [data-pseudo-content]::before {
 2 |   content: attr(data-pseudo-content);
 3 | }
 4 | .switch {
 5 |   display: inline-block;
 6 |   width: 90px;
 7 |   font-size: 0;
 8 |   border-radius: 2px;
 9 |   border: 1px solid #0082ff;
10 |   height: 20px;
11 | }
12 | .switch span {
13 |   display: inline-block;
14 |   width: 44px;
15 |   line-height: 18px;
16 |   font-size: 12px;
17 |   vertical-align: middle;
18 |   text-align: center;
19 |   cursor: pointer;
20 | }
21 | .switch .switch-item-1 {
22 |   background-color: #0082ff;
23 |   color: #fff;
24 | }
25 | .switch .switch-item-2 {
26 |   background-color: #fff;
27 |   color: #a8b1c0;
28 | }
29 | .switch.switched .switch-item-1 {
30 |   background-color: #fff;
31 |   color: #a8b1c0;
32 | }
33 | .switch.switched .switch-item-2 {
34 |   background-color: #0082ff;
35 |   color: #fff;
36 | }
37 | 


--------------------------------------------------------------------------------
/Lesson1-4/ex-2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>对象属性遍历</title>
 6 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 7 | </head>
 8 | <body>
 9 | <div class="container">
10 |   <h2>对象属性遍历</h2>
11 |   <ul>
12 |     <li v-for="(key, val) in paxInfo">{{keyTitles[$key]}}: {{val}}</li>
13 |   </ul>
14 | </div>
15 | 
16 | <script src="../js/vue.js"></script>
17 | <script>
18 |   var vm = new Vue({
19 |     el: 'body',
20 |     data: {
21 |       keyTitles: {
22 |         name: '姓名',
23 |         idType: '证件类型',
24 |         idNumber: '证件号码',
25 |         mobile: '手机号码'
26 |       },
27 |       paxInfo: {
28 |         name: '张萌萌',
29 |         idType: '身份证',
30 |         idNumber: '310104198508101022',
31 |         mobile: '18988886666'
32 |       }
33 |     }
34 |   })
35 | </script>
36 | </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/Lesson3-4/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var ExtractTextPlugin = require("extract-text-webpack-plugin");
 2 | 
 3 | module.exports = {
 4 |   // 应用的入口
 5 |   entry: './main.js',
 6 |   // 编译打包后的输出
 7 |   output: {
 8 |     path: __dirname,
 9 |     filename: 'build.js'
10 |   },
11 |   module: {
12 |     // `loaders` 是需要用到的 loader 组成的数组
13 |     // 这里只配置 vue-loader
14 |     loaders: [{
15 |       test: /\.vue$/, // 正则匹配所有以 `.vue` 结尾的文件
16 |       loader: 'vue!eslint' // 对匹配到的文件使用何种 loader
17 |     }, {
18 |       test: /\.(png|jpg|gif)$/,
19 |       loader: 'url',
20 |       query: {
21 |         // 低于该值则内联为 base64，单位是 byte
22 |         limit: 10000,
23 |         // 对于超过阈值的文件，定义命名规则
24 |         name: '[name].[ext]?[hash]'
25 |       }
26 |     }]
27 |   },
28 |   vue: {
29 |     loaders: {
30 |       css: ExtractTextPlugin.extract("css")
31 |     }
32 |   },
33 |   plugins: [
34 |     new ExtractTextPlugin("style.css")
35 |   ]
36 | }
37 | 


--------------------------------------------------------------------------------
/Lesson2-3/ex_2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>事件绑定与处理</title>
 6 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 7 |   <link rel="stylesheet" href="../css/animate.min.css">
 8 | </head>
 9 | <body>
10 | <div>
11 | </div>
12 |   <div class="container">
13 |     <h2>内联语句事件绑定</h2>
14 |     <div class="row">
15 |       <button class="btn btn-primary" @click="thumbsUp++">
16 |         赞！
17 |       </button>
18 |       <span :class="thumbsUp ? 'text-success' : 'text-danger'">
19 |         <span class="glyphicon shake infinite" :class="thumbsUp ? 'glyphicon-thumbs-up' : ['animated ', 'glyphicon-circle-arrow-left']"></span> {{thumbsUp}}
20 |       </span>
21 |     </div>
22 |   </div>
23 | <script src="../js/vue.js"></script>
24 | <script>
25 |   var vm = new Vue({
26 |     el: 'body',
27 |     data: {
28 |       thumbsUp: 0
29 |     }
30 |   })
31 | </script>
32 | </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/Lesson1-2/ex-1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Vue.js 数据绑定</title>
 6 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 7 | </head>
 8 | <body>
 9 | <div class="container">
10 |   <h2>Vue.js 数据绑定</h2>
11 |   <div id="app">
12 |     <img src="{{{user.photo}}}"/>
13 |     <div>姓名：{{user.name}}</div>
14 |     <div>简介：{{{user.profile}}}</div>
15 |   </div>
16 | </div>
17 | <script src="../js/vue.js"></script>
18 | <script>
19 |   var vm = new Vue({
20 |     el: '#app',
21 |     data: {
22 |       user: {
23 |         photo: 'http://tva1.sinaimg.cn/crop.0.0.400.400.180/6d2828b2jw8f193hei9uij20b40b4mxd.jpg',
24 |         name: 'Bill Gates',
25 |         profile: '<div><strong>技术专家</strong>、<strong>商业领袖</strong>与<strong>慈善家</strong>，比尔及梅琳达·盖茨基金会联席主席。</div><div><a href="http://www.weibo.com/gates" target="_blank">访问微博</a></div>'
26 |       }
27 |     }
28 |   })
29 | </script>
30 | </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/Lesson1-3/ex-2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>条件渲染</title>
 6 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 7 |   <link rel="stylesheet" href="../css/lesson1-3.css">
 8 | </head>
 9 | <body>
10 | <div class="container">
11 |   <h2>条件渲染</h2>
12 |   <div id="app">
13 |     <div>
14 |       <div class="item" @click="subitemsExpanded = !subitemsExpanded">
15 |         成人票套餐
16 |         <span class="glyphicon glyphicon-chevron-up" v-show="subitemsExpanded"></span>
17 |         <span class="glyphicon glyphicon-chevron-down" v-else></span>
18 |       </div>
19 |       <div class="subitems" v-show="subitemsExpanded">
20 |         <div>成人票</div>
21 |         <div>门票抵用券</div>
22 |         <div>酒店抵用券</div>
23 |       </div>
24 |     </div>
25 |   </div>
26 | </div>
27 | <script src="../js/vue.js"></script>
28 | <script>
29 |   var vm = new Vue({
30 |     el: '#app',
31 |     data: {
32 |       subitemsExpanded: true
33 |     }
34 |   })
35 | </script>
36 | </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/Lesson2-3/ex_3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>事件绑定与处理  </title>
 6 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 7 | </head>
 8 | <body>
 9 | <div>
10 |   <div class="container">
11 |     <h2>访问原生DOM事件属性</h2>
12 |     <div class="row">
13 |       <div class="col-md-12">
14 |         {{ msg }}
15 |       </div>
16 |       <form class="form" method="post">
17 |         <input type="text" class="form-control">
18 |         <button class="form-control" type="submit" v-on:click="submitForm({hiddenInfo: 99}, $event)">
19 |           Submit
20 |         </button>
21 |       </form>
22 |     </div>
23 |   </div>
24 | </div>
25 | 
26 | <script src="../js/vue.js"></script>
27 | <script>
28 |   var vm = new Vue({
29 |     el: 'body',
30 |     data: {
31 |       msg: ''
32 |     },
33 |     methods: {
34 |       submitForm: function (data, event) {
35 |         event.preventDefault()
36 |         this.msg = 'sending request ...'
37 |       }
38 |     }
39 |   })
40 | </script>
41 | </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/Lesson2-2/ex_3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>表单控件绑定</title>
 6 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 7 | </head>
 8 | <body>
 9 | <div class="container">
10 |   <h2>Radio 数据双向绑定</h2>
11 |   <div class="row">
12 |     <label class="col-md-12">
13 |       <input type="radio" name="radio1" value="One" v-model="picked"> One
14 |     </label>
15 |     <label class="col-md-12">
16 |       <input type="radio" name="radio1" value="Two" v-model="picked"> Two
17 |     </label>
18 |     <label class="col-md-12">
19 |       <input type="radio" name="radio2" value="three" v-model="picked"> three
20 |     </label>
21 |     <label class="col-md-12">
22 |       <input type="radio" name="radio2" value="four" v-model="picked"> four
23 |     </label>
24 |   </div>
25 |   <div class="row">
26 |     <div class="col-md-12">
27 |       Picked: {{ picked }}
28 |     </div>
29 |   </div>
30 | </div>
31 | 
32 | <script src="../js/vue.js"></script>
33 | <script>
34 | var vm = new Vue({
35 |   el: 'body',
36 |   data: {
37 |     picked: ''
38 |   }
39 | })
40 | </script>
41 | </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/Lesson2-1/ex-4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>
 6 |     类与样式绑定
 7 |   </title>
 8 |   <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
 9 | </head>
10 | <body>
11 | <div class="container">
12 |   <h1>
13 |     样式绑定对象与数组语法
14 |   </h1>
15 |   <div class="row">
16 |     <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
17 |       颜色：红，字体：30px
18 |     </div>
19 |     <hr>
20 |     <div :style="styleObject">
21 |       颜色一样红，字体也是30px
22 |     </div>
23 |     <hr>
24 |     <div :style="[styleObjectA, styleObjectB]">
25 |       颜色继续红，字体保持30px，并且增加了阴影
26 |     </div>
27 |   </div>
28 | </div>
29 | <script src="../js/vue.js"></script>
30 | <script>
31 |   var vm = new Vue({
32 |     el: 'body',
33 |     data: {
34 |       activeColor: 'red',
35 |       fontSize: 30,
36 |       styleObject: {
37 |         color: 'red',
38 |         'font-size': '30px'
39 |       },
40 |       styleObjectA: {
41 |         color: 'red'
42 |       },
43 |       styleObjectB: {
44 |         fontSize: '30px',
45 |         boxShadow: '10px 10px 5px #888888'
46 |       }
47 |     }
48 |   })
49 | </script>
50 | </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/Lesson1-1/ex-2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>数据驱动</title>
 6 |   <link rel="stylesheet" href="../css/lesson1-1.css">
 7 | </head>
 8 | <body>
 9 | <div>
10 |   <span>请选择：</span>
11 |   <div class="form-select" v-on:mouseover="listStyle.display = 'block'" v-on:mouseout="listStyle.display = 'none'">
12 |     <span class="form-select-text">{{selected}}</span>
13 |     <div class="form-select-list" v-bind:style="listStyle">
14 |       <ul>
15 |         <li v-for="option in options" v-on:click="selectOption(option)">{{option}}</li>
16 |       </ul>
17 |     </div>
18 |   </div>
19 | </div>
20 | <script src="../js/vue.js"></script>
21 | <script>
22 |   var options = ('选项一,选项二,选项三,选项四,选项五').split(',')
23 | 
24 |   var vm = new Vue({
25 |     el: 'body',
26 |     data: {
27 |       options: options,
28 |       selected: options[0],
29 |       listStyle: {
30 |         display: 'none'
31 |       }
32 |     },
33 |     methods: {
34 |       selectOption: function (opt) {
35 |         this.selected = opt
36 |         this.listStyle.display = 'none'
37 |       },
38 |       log: function (info) {
39 |         console.log(info)
40 |       }
41 |     }
42 |   })
43 | </script>
44 | </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/Lesson2-2/ex_4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>表单控件绑定</title>
 6 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 7 | </head>
 8 | <body>
 9 | <div class="container">
10 |   <h2>Select 数据双向绑定</h2>
11 |   <div class="row">
12 |     <div class="col-md-6">
13 |       <select v-model="selected">
14 |         <option value="a" selected>Apple</option>
15 |         <option value="b">Banana</option>
16 |         <option value="c">Cherry</option>
17 |       </select>
18 |       <span>
19 |         Selected: {{ selected }}
20 |       </span>
21 |     </div>
22 |   </div>
23 |   <hr>
24 |   <div class="row">
25 |     <div class="col-md-6">
26 |       <select v-model="arrSelected" multiple>
27 |         <option value="a" selected>Apple</option>
28 |         <option value="b">Banana</option>
29 |         <option value="c">Cherry</option>
30 |       </select>
31 |       <span>
32 |         Selected: {{ arrSelected | json }}
33 |       </span>
34 |     </div>
35 |   </div>
36 | </div>
37 | 
38 | <script src="../js/vue.js"></script>
39 | <script>
40 | var vm = new Vue({
41 |   el: 'body',
42 |   data: {
43 |     selected: '',
44 |     arrSelected: []
45 |   }
46 | })
47 | </script>
48 | </body>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/Lesson2-1/ex-3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>
 6 |     类与样式绑定
 7 |   </title>
 8 |   <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
 9 | </head>
10 | <body>
11 | <div class="container">
12 |   <h1>
13 |     类绑定数组语法
14 |   </h1>
15 |   <table class="table" :class="tableClasses">
16 |     <caption>
17 |       Table Caption
18 |     </caption>
19 |     <thead>
20 |     <tr>
21 |       <th>#</th>
22 |       <th>First Name</th>
23 |       <th>Last Name</th>
24 |       <th>Username</th>
25 |     </tr>
26 |     </thead>
27 |     <tbody>
28 |     <tr>
29 |       <th scope="row">1</th>
30 |       <td>Mark</td>
31 |       <td>Otto</td>
32 |       <td>@mdo</td>
33 |     </tr>
34 |     <tr>
35 |       <th scope="row">2</th>
36 |       <td>Jacob</td>
37 |       <td>Thornton</td>
38 |       <td>@fat</td>
39 |     </tr>
40 |     <tr>
41 |       <th scope="row">3</th>
42 |       <td>Larry</td>
43 |       <td>the Bird</td>
44 |       <td>@twitter</td>
45 |     </tr>
46 |     </tbody>
47 |   </table>
48 | </div>
49 | <script src="../js/vue.js"></script>
50 | <script>
51 |   var vm = new Vue({
52 |     el: 'body',
53 |     data: {
54 |       tableClasses: ['table-striped', 'table-bordered']
55 |     }
56 |   })
57 | </script>
58 | </body>
59 | </html>
60 | 


--------------------------------------------------------------------------------
/Lesson3-4/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "lesson3-4",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "main.js",
 6 |   "dependencies": {
 7 |     "vue": "^1.0.28"
 8 |   },
 9 |   "devDependencies": {
10 |     "babel-core": "^6.17.0",
11 |     "babel-eslint": "^7.0.0",
12 |     "babel-loader": "^6.2.5",
13 |     "babel-plugin-transform-runtime": "^6.15.0",
14 |     "babel-preset-es2015": "^6.16.0",
15 |     "babel-runtime": "^6.11.6",
16 |     "coffee-loader": "^0.7.2",
17 |     "coffee-script": "^1.11.1",
18 |     "css-loader": "^0.25.0",
19 |     "eslint": "^3.8.0",
20 |     "eslint-config-standard": "^6.2.0",
21 |     "eslint-loader": "^1.5.0",
22 |     "eslint-plugin-html": "^1.5.3",
23 |     "eslint-plugin-promise": "^3.0.0",
24 |     "eslint-plugin-standard": "^2.0.1",
25 |     "extract-text-webpack-plugin": "^1.0.1",
26 |     "file-loader": "^0.9.0",
27 |     "style-loader": "^0.13.1",
28 |     "url-loader": "^0.5.7",
29 |     "vue-hot-reload-api": "^1.3.3",
30 |     "vue-html-loader": "^1.2.3",
31 |     "vue-loader": "^8.5.4",
32 |     "vue-style-loader": "^1.0.0",
33 |     "webpack": "^1.13.2",
34 |     "webpack-dev-server": "^1.16.2"
35 |   },
36 |   "scripts": {
37 |     "test": "echo \"Error: no test specified\" && exit 1",
38 |     "dev": "webpack-dev-server --inline"
39 |   },
40 |   "author": "",
41 |   "license": "ISC"
42 | }
43 | 


--------------------------------------------------------------------------------
/Lesson1-4/ex-3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>过滤与排序</title>
 6 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 7 | </head>
 8 | <body>
 9 | <div class="container">
10 |   <input v-model="name">
11 |   <ul>
12 |     <li v-for="pax in ffp | filterBy name in 'name' | orderBy 'name'" track-by="$index">
13 |       {{ pax.name }}
14 |     </li>
15 |   </ul>
16 | </div>
17 | 
18 | <script src="../js/vue.js"></script>
19 | <script>
20 |   var vm = new Vue({
21 |     el: 'body',
22 |     data: {
23 |       name: '',
24 |       ffp: [
25 |         {
26 |           name: 'Micheal',
27 |           age: 24
28 |         }, {
29 |           name: 'Jack',
30 |           age: 17
31 |         }, {
32 |           name: 'Tiffany',
33 |           age: 23
34 |         }, {
35 |           name: 'Alice',
36 |           age: 9
37 |         }, {
38 |           name: 'Dannis',
39 |           age: 42
40 |         }, {
41 |           name: 'Greg',
42 |           age: 36
43 |         }, {
44 |           name: 'Pearl',
45 |           age: 3
46 |         }, {
47 |           name: 'David',
48 |           age: 5
49 |         }, {
50 |           name: 'Bob',
51 |           age: 4
52 |         }, {
53 |           name: 'Johnson',
54 |           age: 1
55 |         }
56 |       ]
57 |     }
58 |   })
59 | </script>
60 | </body>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/Lesson1-1/ex-1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>视图驱动</title>
 6 |   <link rel="stylesheet" href="../css/lesson1-1.css">
 7 | </head>
 8 | <body>
 9 | <div>
10 |   <span>请选择：</span>
11 |   <div id="mySelector" class="form-select">
12 |     <span class="form-select-text"></span>
13 |     <div class="form-select-list">
14 |       <ul>
15 |       </ul>
16 |     </div>
17 |   </div>
18 | </div>
19 | 
20 | <script src="../js/jquery.js"></script>
21 | <script>
22 |   $(function () {
23 |     var options = ('选项一,选项二,选项三,选项四,选项五').split(',')
24 | 
25 |     var $mySelector = $('#mySelector')
26 |     var $mySelectorText = $mySelector.find('.form-select-text')
27 |     var $mySelectorListDiv = $mySelector.find('.form-select-list')
28 |     var $mySelectorList = $mySelector.find('.form-select-list ul')
29 | 
30 |     $mySelectorText.html(options[0])
31 |     $mySelectorListDiv.hide()
32 |     $.each(options, function (idx, option) {
33 |       $mySelectorList.append($('<li>' + option + '</li>'))
34 |     })
35 | 
36 |     $mySelectorList.on('click', 'li', function (e) {
37 |       $mySelectorText.html(options[$(this).index()])
38 |       $mySelectorListDiv.hide()
39 |     })
40 | 
41 |     $('.form-select').on('mouseover', function (e) {
42 |       $(this).find('.form-select-list').show()
43 |     }).on('mouseout', function (e) {
44 |       $(this).find('.form-select-list').hide()
45 |     })
46 |   })
47 | </script>
48 | </body>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/Lesson2-1/ex-2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>类与样式绑定</title>
 6 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 7 |   <link rel="stylesheet" href="../css/lesson2-1.css">
 8 | </head>
 9 | <body>
10 | <div class="container">
11 |   <h1>类绑定对象语法</h1>
12 |   <div class="row">
13 |     <span class="switch" :class="{switched: gender}" @click="gender = Math.abs(~-gender)">
14 |       <span class="switch-item-1" data-pseudo-content="男"></span>
15 |       <span class="switch-item-2" data-pseudo-content="女"></span>
16 |     </span>
17 |   </div>
18 |   <div class="row">
19 |     <span class="switch" :class="{switched: off}" @click="off = !off">
20 |       <span class="switch-item-1" data-pseudo-content="开"></span>
21 |       <span class="switch-item-2" data-pseudo-content="关"></span>
22 |     </span>
23 |   </div>
24 |   <div class="row">
25 |     <span class="switch" :class="{switched: nameType === 'Eng'}" @click="nameType = nameType === 'Eng' ? 'Chs' : 'Eng'">
26 |       <span class="switch-item-1" data-pseudo-content="中文名"></span>
27 |       <span class="switch-item-2" data-pseudo-content="英文名"></span>
28 |     </span>
29 |   </div>
30 | </div>
31 | 
32 | <script src="../js/vue.js"></script>
33 | <script>
34 |   var vm = new Vue({
35 |     el: 'body',
36 |     data: {
37 |       gender: 0,
38 |       off: true,
39 |       nameType: 'Eng'
40 |     }
41 |   })
42 | </script>
43 | </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/Lesson2-4/ex_1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Watcher 的使用</title>
 6 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 7 | </head>
 8 | <body>
 9 | <div>
10 | </div>
11 | <div class="container">
12 |   <h2>通过 watch 选项声明 watcher</h2>
13 |   <div class="row">
14 |     <div class="col-md-12">
15 |       姓：<input type="text" v-model="passenger.lastName">
16 |     </div>
17 |     <div class="col-md-12">
18 |       名：<input type="text" v-model="passenger.firstName">
19 |     </div>
20 |     <div class="col-md-12">
21 |       乘客姓名：{{ paxName }}
22 |     </div>
23 |   </div>
24 | </div>
25 | <script src="../js/vue.js"></script>
26 | <script>
27 |   var vm = new Vue({
28 |     el: 'body',
29 |     data: {
30 |       passenger: {
31 |         firstName: 'Barack',
32 |         lastName: 'Obama'
33 |       },
34 |       paxName: ''
35 |     },
36 |     methods: {
37 |       logVal (val, oldVal) {
38 |         console.log(`Now it is ${val}.`)
39 |       }
40 |     },
41 |     watch: {
42 |       'passenger.firstName + \' \' + passenger.lastName': [
43 |         function (val, oldVal) {
44 |           console.log(`The fullname was ${oldVal}.`)
45 |         },
46 |         'logVal',
47 |         {
48 |           handler: function (val, oldVal) {
49 |             this.paxName = val
50 |           },
51 |           immediate: true
52 |         }
53 |       ]
54 |     }
55 |   })
56 | </script>
57 | </body>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width initial-scale=1 user-scalable=no" />
 6 |   <title>Vue.js 课程代码详解</title>
 7 |   <link href="https://fonts.googleapis.com/css?family=Lobster+Two:400,700" rel="stylesheet" type="text/css">
 8 |   <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">
 9 |   <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/prism/1.3.0/themes/prism-tomorrow.css">
10 | <!-- Google Tag Manager -->
11 | <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
12 | new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
13 | j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
14 | 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
15 | })(window,document,'script','dataLayer','GTM-WWJFRC');</script>
16 | <!-- End Google Tag Manager -->
17 | </head>
18 | <body>
19 | <!-- Google Tag Manager (noscript) -->
20 | <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WWJFRC"
21 | height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
22 | <!-- End Google Tag Manager (noscript) -->
23 |   <div id="root"></div>
24 |   <script src="https://cdn.jsdelivr.net/prism/1.3.0/prism.js" type="text/javascript"></script>
25 |   <script src="https://cdn.jsdelivr.net/prism/1.3.0/components/prism-jsx.min.js" type="text/javascript"></script>
26 |   <script src="dist/bundle.js"></script>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/Lesson1-3/ex-1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>条件渲染</title>
 6 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 7 | </head>
 8 | <body>
 9 | <div class="container">
10 |   <h2>条件渲染</h2>
11 |   <div id="app">
12 |     <h3>示例一</h3>
13 |     <div>
14 |       <img v-if="user.photo" :src="user.photo">
15 |       <img v-else src="../images/defaultAvatar.png">
16 |     </div>
17 | 
18 |     <hr>
19 | 
20 |     <h3>示例二</h3>
21 |     <div class="row">
22 |       <div class="col-md-3">
23 |         <a href="http://www.jikexueyuan.com/zhiye/course/12.html?type=8" target="_blank">
24 |           <img src="http://jiuye-res.jikexueyuan.com/zhiye/showcase/attach-6ae2b991-803f-4b63-bda9-89434d70d665.jpg"
25 |                alt="Vue.js前端框架详解－基础&amp;进阶&amp;实战" class="img-responsive">
26 |           Vue.js前端框架详解－基础&amp;进阶&amp;实战
27 |         </a>
28 |       </div>
29 |     </div>
30 |     <template v-if="product.bookmarked">
31 |       <span class="glyphicon glyphicon-bookmark text-success"></span>
32 |       <span class="text-info">已收藏{{product.bookmarkedTimes}}次</span>
33 |     </template>
34 |   </div>
35 | </div>
36 | <script src="../js/vue.js"></script>
37 | <script>
38 |   var vm = new Vue({
39 |     el: '#app',
40 |     data: {
41 |       user: {
42 |         photo: 'http://tva1.sinaimg.cn/crop.0.0.400.400.180/6d2828b2jw8f193hei9uij20b40b4mxd.jpg'
43 |       },
44 |       product: {
45 |         bookmarked: true,
46 |         bookmarkedTimes: 26
47 |       }
48 |     }
49 |   })
50 | </script>
51 | </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/Lesson2-4/ex_3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Watcher 的使用</title>
 6 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 7 | </head>
 8 | <body>
 9 | <div>
10 | </div>
11 | <div class="container">
12 |   <h2>$watch 方法及取消观察</h2>
13 |   <div class="row">
14 |     <div class="col-md-12">
15 |       姓：<input type="text" v-model="passenger.lastName">
16 |     </div>
17 |     <div class="col-md-12">
18 |       名：<input type="text" v-model="passenger.firstName">
19 |     </div>
20 |     <div class="col-md-12">
21 |       <input type="radio" v-model="paxType" value="内宾"> 内宾
22 |       <input type="radio" v-model="paxType" value="外宾"> 外宾
23 |     </div>
24 |     <div class="col-md-12">
25 |       乘客姓名：{{ paxName}}
26 |     </div>
27 |     <div class="col-md-12">
28 |       <button onclick="unwatchPassenger()">不再观察数据变化</button>
29 |     </div>
30 |   </div>
31 | </div>
32 | <script src="../js/vue.js"></script>
33 | <script>
34 |   var vm = new Vue({
35 |     el: 'body',
36 |     data: {
37 |       passenger: {
38 |         lastName: '宋',
39 |         firstName: '江'
40 |       },
41 |       paxName: '',
42 |       paxType: '内宾'
43 |     },
44 |     methods: {
45 |       setPaxName (val, oldVal) {
46 |         this.paxName = val
47 |       }
48 |     }
49 |   })
50 | 
51 |   var unwatchPassenger = vm.$watch(function () {
52 |     return this.paxType === '内宾' ?
53 |       this.passenger.lastName + this.passenger.firstName :
54 |       this.passenger.firstName + ' ' + this.passenger.lastName
55 |   }, vm.setPaxName, {
56 |     immediate: true
57 |   })
58 | </script>
59 | </body>
60 | </html>
61 | 


--------------------------------------------------------------------------------
/Lesson2-1/ex-1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>类与样式绑定</title>
 6 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 7 | </head>
 8 | <body>
 9 | <div class="container">
10 |   <h1>类与样式绑定</h1>
11 |   <div class="row">
12 |     <div class="col-xs-1">
13 |       <img class="{{myImgClass}}"
14 |            src="http://tva1.sinaimg.cn/crop.0.0.400.400.180/6d2828b2jw8f193hei9uij20b40b4mxd.jpg">
15 |     </div>
16 |     <div class="col-xs-2">
17 |       <form class="form-inline">
18 |         <fieldset>
19 |           <legend>图片形状</legend>
20 |           <div class="form-group">
21 |             <label>
22 |               <input type="radio" v-model="imgShapeClass" value="img-rounded"> 矩形
23 |             </label>
24 |           </div>
25 |           <div class="form-group">
26 |             <label>
27 |               <input type="radio" v-model="imgShapeClass" value="img-circle"> 圆
28 |             </label>
29 |           </div>
30 |         </fieldset>
31 |       </form>
32 |       <div class="row">
33 |         <img class="img-responsive" v-bind:class="imgShapeClass"
34 |              src="http://tva1.sinaimg.cn/crop.0.0.400.400.180/6d2828b2jw8f193hei9uij20b40b4mxd.jpg"
35 |              :style="myImgStyles">
36 |       </div>
37 |     </div>
38 |   </div>
39 | </div>
40 | 
41 | <script src="../js/vue.js"></script>
42 | <script>
43 |   var vm = new Vue({
44 |     el: 'body',
45 |     data: {
46 |       myImgClass: 'img-responsive',
47 |       imgShapeClass: 'img-circle',
48 |       myImgStyles: 'border: 1px solid black; padding: 2px;'
49 |     }
50 |   })
51 | </script>
52 | </body>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/Lesson3-1/ex_5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <title>组件</title>
 7 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 8 | </head>
 9 | 
10 | <body>
11 |   <div class="container" id="app">
12 |     <h2>内容分发</h2>
13 |     <div class="row">
14 |       <h3>Parent</h3>
15 |       <div>
16 |         <child>
17 |           <div class="col-sm-3 text-right text-info bg-info">内容一（匿名）</div>
18 |           <div class="col-sm-4 text-danger bg-danger" slot="name1">内容二 {{msg}}（具名一）</div>
19 |           <div class="col-sm-2 text-success bg-success" slot="name2">内容三（具名二）</div>
20 |           <div class="col-sm-6 text-right text-warning bg-warning" slot="name1">内容四 {{msg}}（具名一）</div>
21 |           <div class="col-sm-3 text-primary bg-primary">内容五（匿名）</div>
22 |           <div class="col-sm-2 text-success bg-success" slot="name2">内容六（具名二）</div>
23 |         </child>
24 |       </div>
25 |     </div>
26 |   </div>
27 | 
28 |   <template id="child-template">
29 |     <div>
30 |       <h3>Child</h3>
31 |       <div class="col-sm-2 text-muted">
32 |         Child's own contents
33 |       </div>
34 |       <slot name="name1"></slot>
35 |       <slot></slot>
36 |       <slot name="name2"></slot>
37 |       <div class="col-sm-2 text-muted">
38 |         Child's own contents
39 |       </div>
40 |     </div>
41 |   </template>
42 | 
43 |   <script src="../js/vue.js"></script>
44 |   <script>
45 |   Vue.component('child', {
46 |     template: '#child-template'
47 |   })
48 | 
49 |   var vm = new Vue({
50 |     el: '#app',
51 |     data: {
52 |       msg: 'Hello, Vue.js'
53 |     }
54 |   })
55 |   </script>
56 | </body>
57 | 
58 | </html>
59 | 


--------------------------------------------------------------------------------
/Lesson3-2/flightInfo_2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <title>单程直达机票航班信息</title>
 7 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 8 |   <link rel="stylesheet" href="../css/lesson3-2.css">
 9 | </head>
10 | 
11 | <body>
12 |   <div class="container">
13 |     <div class="row">
14 |       <div class="col-md-7"></div>
15 |       <div class="col-md-5">
16 |         <div class="text-center flight-info">
17 |           <h3>
18 |             10-13 周四 上海 <span class="glyphicon glyphicon-arrow-right"></span> 武汉
19 |           </h3>
20 |           <div class="flight-title flight-title-single">
21 |             <img class="flight-image" src="../images/flight-companies/mu.png">东方航空 MU9345 波音737-800 经济舱
22 |           </div>
23 |           <div class="row flight-detail">
24 |             <div class="col-xs-4 text-right flight-depart">
25 |               <div class="flight-time">22:30</div>
26 |               <div class="flight-airport">浦东国际机场T2</div>
27 |             </div>
28 |             <div class="col-xs-4 flight-arrow">
29 |               <div class="cost-time">
30 |                 <span class="glyphicon glyphicon-time"></span> 2h05m
31 |               </div>
32 |               <div class="timeline">
33 |                 <span class="glyphicon glyphicon-plane"></span>
34 |               </div>
35 |             </div>
36 |             <div class="col-xs-4 text-left flight-arrive">
37 |               <div class="flight-time">00:35</div>
38 |               <div class="flight-airport">天河国际机场T2</div>
39 |             </div>
40 |           </div>
41 |         </div>
42 |       </div>
43 |     </div>
44 |   </div>
45 | </body>
46 | 
47 | </html>
48 | 


--------------------------------------------------------------------------------
/Lesson2-2/ex_2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>表单控件绑定</title>
 6 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 7 | </head>
 8 | <body>
 9 | <div class="container">
10 |   <h2>Checkbox 数据双向绑定</h2>
11 |   <div class="row">
12 |     <label class="col-md-12">
13 |       <input type="checkbox" v-model="checked">
14 |       {{ checked }}
15 |     </label>
16 |   </div>
17 |   <hr>
18 |   <div class="row">
19 |     <label class="col-md-12">
20 |       <input type="checkbox" value="Jack" v-model="checkedNames">
21 |       Jack
22 |     </label>
23 |     <label class="col-md-12">
24 |       <input type="checkbox" value="John" v-model="checkedNames">
25 |       John
26 |     </label>
27 |     <label class="col-md-12">
28 |       <input type="checkbox" value="Mike" v-model="checkedNames">
29 |       Mike
30 |     </label class="col-md-12">
31 |     <div class="col-md-12">
32 |       Checked names: {{ checkedNames | json }}
33 |     </div>
34 |   </div>
35 |   <hr>
36 |   <div class="row">
37 |     <label class="col-md-12">
38 |       <input type="checkbox" id="checkbox" v-model="checkedNoValue">
39 |       Value Missed
40 |     </label>
41 |     <label class="col-md-12">
42 |       <input type="checkbox" id="checkbox" v-model="checkedNoValue">
43 |       Value Missed
44 |     </label>
45 |     <div class="col-md-12">
46 |       Checked (no values): {{ checkedNoValue | json }}
47 |     </div>
48 |   </div>
49 | </div>
50 | 
51 | <script src="../js/vue.js"></script>
52 | <script>
53 | var vm = new Vue({
54 |   el: 'body',
55 |   data: {
56 |     checked: false,
57 |     checkedNames: [],
58 |     checkedNoValue: []
59 |   }
60 | })
61 | </script>
62 | </body>
63 | </html>
64 | 


--------------------------------------------------------------------------------
/Lesson2-4/ex_2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Watcher 的使用</title>
 6 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 7 |   <link rel="stylesheet" href="../css/vue-animate.min.css">
 8 | </head>
 9 | <body>
10 | <div class="container">
11 | <h2>深度观察</h2>
12 | <div class="row">
13 |   <div class="col-md-12">
14 |     姓：
15 |     <input type="text" v-model="user.lastName">
16 |   </div>
17 |   <div class="col-md-12">
18 |     名：
19 |     <input type="text" v-model="user.firstName">
20 |   </div>
21 |   <div class="col-md-12">
22 |     {{ user.fullName }} 的粉丝：
23 |   </div>
24 |   <div class="col-md-4" v-for="fellow in fellows">
25 |     <label>
26 |       <input type="checkbox" v-model="followers" :value="fellow"> {{fellow}}
27 |     </label>
28 |   </div>
29 |   <div class="col-md-12" v-show="liKuiRemoved" transition="bounce">
30 |     <div class="text-danger">
31 |       公明哥哥，你不要俺铁牛了？
32 |     </div>
33 |   </div>
34 | </div>
35 | </div>
36 | <script src="../js/vue.js"></script>
37 | <script>
38 | var fellows = [
39 | '武松',
40 | '鲁智深',
41 | '李逵',
42 | '林冲',
43 | '吴用',
44 | '杨志',
45 | '史进',
46 | '张青'
47 | ]
48 | 
49 | var vm = new Vue({
50 | el: 'body',
51 | data: {
52 |   user: {
53 |     lastName: '宋',
54 |     firstName: '江',
55 |     fullName: ''
56 |   },
57 |   fellows,
58 |   followers: [].concat(fellows),
59 |   liKuiRemoved: false
60 | },
61 | watch: {
62 |   user: {
63 |     handler: function(val, oldVal) {
64 |       this.user.fullName = val.lastName + val.firstName
65 |     },
66 |     deep: true,
67 |     immediate: true
68 |   },
69 |   followers: function(val, oldVal) {
70 |     this.liKuiRemoved = val.indexOf(fellows[2]) === -1
71 |   }
72 | }
73 | })
74 | </script>
75 | </body>
76 | </html>
77 | 


--------------------------------------------------------------------------------
/Lesson2-3/ex_1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>事件绑定与处理</title>
 6 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 7 | </head>
 8 | <body>
 9 | <div>
10 | </div>
11 | <div class="container">
12 |   <h2>Vue 实例方法声明 与 DOM事件绑定</h2>
13 |   <div class="row">
14 |     <div class="col-md-3" @click="doSomething">
15 |       <button>Call nomal method</button>
16 |     </div>
17 |     <div class="col-md-1"></div>
18 |     <div class="col-md-3" @click="doTheSameThing">
19 |       <button>Call abnomal method</button>
20 |     </div>
21 |     <div class="col-md-1"></div>
22 |     <div class="col-md-3" @click="doAnotherThing">
23 |       <button>Call abnomal absent method</button>
24 |     </div>
25 |   </div>
26 |   <div class="row">
27 |     <div class="col-md-3 bg-info text-info">
28 |       The method is declared in methods attribute of Vue instance options object.
29 |     </div>
30 |     <div class="col-md-1"></div>
31 |     <div class="col-md-3 bg-info text-info">
32 |       The method is declared in data attribute of Vue instance options object.
33 |     </div>
34 |     <div class="col-md-1"></div>
35 |     <div class="col-md-3 bg-info text-info">
36 |       The method is to be declared by calling $set.
37 |     </div>
38 |   </div>
39 | </div>
40 | <script src="../js/vue.js"></script>
41 | <script>
42 |   function doSomething (event) {
43 |     console.log(this)
44 |     event && console.log(event)
45 |   }
46 | 
47 |   function doTheSameThing (event) {
48 |     console.log(this)
49 |     event && console.log(event)
50 |   }
51 | 
52 |   function doAnotherThing (event) {
53 |     event && console.log(event)
54 |     console.log(this)
55 |   }
56 | 
57 |   var vm = new Vue({
58 |     el: 'body',
59 |     methods: {
60 |       doSomething: doSomething
61 |     },
62 |     data: {
63 |       doTheSameThing: doTheSameThing // are we really doing the same thing?
64 |     }
65 |   })
66 | </script>
67 | </body>
68 | </html>
69 | 


--------------------------------------------------------------------------------
/Lesson2-2/ex_1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>表单控件绑定</title>
 6 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 7 | </head>
 8 | <body>
 9 | <div class="container">
10 |   <h2>Text 数据双向绑定</h2>
11 |   <div class="row">
12 |     <div class="col-md-6">
13 |       姓名：<input v-model="user.name">
14 |     </div>
15 |     <div class="col-md-2">
16 |       {{user.name}}
17 |     </div>
18 |   </div>
19 |   <div class="row">
20 |     <div class="col-md-6">
21 |       年龄：<input type="range" :title="user.age" v-model="user.age">
22 |     </div>
23 |     <div class="col-md-2">
24 |       {{user.age}}
25 |     </div>
26 |   </div>
27 |   <div class="row">
28 |     <div class="col-md-6">
29 |       File：<input type="file" v-model="user.file">
30 |     </div>
31 |     <div class="col-md-2">
32 |       {{user.file}}
33 |     </div>
34 |   </div>
35 |   <div class="row">
36 |     <div class="col-md-6">
37 |       出生年月：<input type="month" v-model="user.birthday">
38 |     </div>
39 |     <div class="col-md-2">
40 |       {{user.birthday}}
41 |     </div>
42 |   </div>
43 |   <div class="row">
44 |     <div class="col-md-6">
45 |       喜欢的颜色：<input type="color" v-model="user.color">
46 |     </div>
47 |     <div class="col-md-2">
48 |       {{user.color}}
49 |     </div>
50 |   </div>
51 |   <div class="row">
52 |     <div class="col-md-6">
53 |       简介：<textarea v-model="user.profile" style="width:100%;" rows="6"></textarea>
54 |     </div>
55 |     <div class="col-md-6">
56 |       {{user.profile}}
57 |     </div>
58 |   </div>
59 |   <div class="row">
60 |     <input type="submit" v-model="okStr"><input type="button" v-model="cancelStr">
61 |   </div>
62 | </div>
63 | 
64 | <script src="../js/vue.js"></script>
65 | <script>
66 | var vm = new Vue({
67 |   el: 'body',
68 |   data: {
69 |     user: {
70 |       name: 'Bill Gates',
71 |       age: 61,
72 |       birthday: '1955-10',
73 |       file: '',
74 |       color: '#e8c3fc',
75 |       profile: '技术专家、商业领袖与慈善家，比尔及梅琳达·盖茨基金会联席主席。',
76 |     },
77 |     okStr: '确定',
78 |     cancelStr: '取消'
79 |   }
80 | })
81 | </script>
82 | </body>
83 | </html>
84 | 


--------------------------------------------------------------------------------
/Lesson2-3/ex_4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>事件绑定与处理  </title>
 6 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 7 | </head>
 8 | <body>
 9 | <div>
10 |   <div class="container">
11 |     <h2>事件修饰符</h2>
12 |     <div class="row">
13 |       <div class="col-md-12">
14 |         {{ msg }}
15 |       </div>
16 |       <form class="form">
17 |         <input class="form-control" type="submit" v-on:click.prevent="submitForm" value="Submit">
18 |       </form>
19 |     </div>
20 | 
21 |     <div class="row" @click="doSomething">
22 |       <div class="col-md-12">
23 |         <h3>Click Me - It’ll trigger the click event for the <i>.row</i> block</h3>
24 |         Me too.
25 |       </div>
26 |       <div class="col-md-4" v-for="element in array"
27 |         @click.stop="doSomethingIndividually">
28 |         {{ $index }} - {{ element }}
29 |       </div>
30 |     </div>
31 |     <hr>
32 | 
33 |     <div class="row" @click.capture="doSomething">
34 |       <div class="col-md-12">
35 |         <h3>Capture Modifier</h3>
36 |       </div>
37 |       <div class="col-md-4" v-for="element in array"
38 |         @click.stop="doSomethingIndividually">
39 |         {{ $index }} - {{ element }}
40 |       </div>
41 |     </div>
42 |     <hr>
43 | 
44 |     <div class="row">
45 |       <h3 @click.self="doSomething">
46 |         Click EXACTLY Me,
47 |         <b>But NOT Me,</b>
48 |         <i>Nor Me</i>
49 |       </h3>
50 |     </div>
51 |   </div>
52 | </div>
53 | 
54 | <script src="../js/vue.js"></script>
55 | <script>
56 |   var vm = new Vue({
57 |     el: 'body',
58 |     data: {
59 |       msg: '',
60 |       array: ['Coffee table', 'Console', 'Couch', 'Dressing table', 'Chair', 'Armchair', 'Baby crib', 'Fireplace']
61 |     },
62 |     methods: {
63 |       submitForm: function () {
64 |         this.msg = 'sending request ...'
65 |       },
66 |       doSomething: function () {
67 |         alert('Something is done.')
68 |       },
69 |       doSomethingIndividually: function () {
70 |         alert('Something individual is done.')
71 |       }
72 |     }
73 |   })
74 | </script>
75 | </body>
76 | </html>
77 | 


--------------------------------------------------------------------------------
/Lesson1-1/ex-3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>复杂的数据驱动</title>
 6 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 7 |   <link rel="stylesheet" href="../css/lesson1-1.css">
 8 | </head>
 9 | <body>
10 | <div class="container">
11 |   <h2>Vue.js 开发示例</h2>
12 |   <span>您选择的是{{selected.name}}，今年{{selected.age}}岁，{{selected.gender}}，在{{selected.department}}工作。</span>
13 |   <div>
14 |     <span>请选择：</span>
15 |     <div class="form-select" @mouseover="showListDiv=true" @mouseout="showListDiv=false">
16 |       <span class="form-select-text">{{selected.name}}<span
17 |         :class="['glyphicon', {'glyphicon-chevron-down': !showListDiv, 'glyphicon-chevron-up': showListDiv}]"
18 |         aria-hidden="true"></span></span>
19 |       <div class="form-select-list" v-show="showListDiv">
20 |         <ul>
21 |           <li v-for="option in options" @click="selectOption(option)" :title="option | personInfo">{{option.name}}</li>
22 |         </ul>
23 |       </div>
24 |     </div>
25 |   </div>
26 | </div>
27 | <script src="../js/vue.js"></script>
28 | <script>
29 |   var options = [
30 |     {
31 |       id: 1,
32 |       name: '张三',
33 |       age: 27,
34 |       gender: '男',
35 |       department: '开发部'
36 |     }, {
37 |       id: 2,
38 |       name: '李四',
39 |       age: 23,
40 |       gender: '女',
41 |       department: '测试部'
42 |     }, {
43 |       id: 3,
44 |       name: '李四',
45 |       age: 29,
46 |       gender: '男',
47 |       department: '设计部'
48 |     }, {
49 |       id: 4,
50 |       name: '王五',
51 |       age: 32,
52 |       gender: '女',
53 |       department: '产品部'
54 |     }
55 |   ]
56 | 
57 |   Vue.filter('personInfo', function (person) {
58 |     return [person.name, person.gender, person.age + '岁', person.department].join('，')
59 |   })
60 | 
61 |   var vm = new Vue({
62 |     el: '.container',
63 |     data: {
64 |       options: options,
65 |       selected: options[0],
66 |       showListDiv: false
67 |     },
68 |     methods: {
69 |       selectOption: function (opt) {
70 |         this.selected = opt
71 |         this.showListDiv = false
72 |       }
73 |     }
74 |   })
75 | </script>
76 | </body>
77 | </html>
78 | 


--------------------------------------------------------------------------------
/Lesson3-2/flightInfo_1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <title>单程直达机票航班信息</title>
 7 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 8 |   <link rel="stylesheet" href="../css/lesson3-2.css">
 9 | </head>
10 | 
11 | <body>
12 |   <div class="container">
13 |     <div class="row">
14 |       <div class="col-md-7"></div>
15 |       <div class="col-md-5">
16 |         <div class="text-center flight-info">
17 |           <div class="supplier">
18 |             <span class="glyphicon glyphicon-certificate glyphicon-supplier"></span>
19 |             <span class="supplier-text"></span>
20 |             <div class="hover-box">
21 |               <strong>产品供应商：</strong>
22 |               <br> 上海华程西南旅行社有限公司
23 |               <br> 08309722
24 |             </div>
25 |           </div>
26 |           <h3>
27 |             10-13 周四 上海 <span class="glyphicon glyphicon-arrow-right"></span> 武汉
28 |           </h3>
29 |           <div class="flight-title-group">
30 |             <div class="flight-title">
31 |               <img class="flight-image" src="../images/flight-companies/mu.png">东方航空 MU9345 波音737-800 经济舱
32 |             </div>
33 |             <div class="flight-title shared-flight-title">
34 |               <img class="flight-image" src="../images/flight-companies/fm.png">上海航空 FM9345
35 |             </div>
36 |           </div>
37 |           <div class="row flight-detail">
38 |             <div class="col-xs-4 text-right flight-depart">
39 |               <div class="flight-time">22:30</div>
40 |               <div class="flight-airport">浦东国际机场T2</div>
41 |             </div>
42 |             <div class="col-xs-4 flight-arrow">
43 |               <div class="cost-time">
44 |                 <span class="glyphicon glyphicon-time"></span> 2h05m
45 |               </div>
46 |               <div class="timeline">
47 |                 <span class="glyphicon glyphicon-plane"></span>
48 |               </div>
49 |             </div>
50 |             <div class="col-xs-4 text-left flight-arrive">
51 |               <div class="flight-time-with-overmidnight">
52 |                 <div class="flight-time">00:35</div>
53 |                 <div class="flight-time-overmidnight">
54 |                   <small class="overmidnight-text abbr"></small>
55 |                   <div class="hover-box">
56 |                     到达时间为第2天，2016年10月14日 00时35分
57 |                   </div>
58 |                 </div>
59 |               </div>
60 |               <div class="flight-airport">天河国际机场T2</div>
61 |             </div>
62 |           </div>
63 |         </div>
64 |       </div>
65 |     </div>
66 |   </div>
67 | </body>
68 | 
69 | </html>
70 | 


--------------------------------------------------------------------------------
/Lesson3-1/ex_6.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <title>组件</title>
 7 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 8 |   <link rel="stylesheet" href="../css/vue-animate.min.css">
 9 |   <link rel="stylesheet" href="../css/lesson3-1.css">
10 | </head>
11 | 
12 | <body>
13 |   <div class="container" id="app">
14 |     <h2>动态组件</h2>
15 |     <div class="row">
16 |       <div>
17 |         <a href="javascript:void(0);" @click="currentView = 'home'">
18 |           Home
19 |         </a>
20 |         <a href="javascript:void(0);" @click="currentView = 'products'">
21 |           Products
22 |         </a>
23 |       </div>
24 |       <component keep-alive class="main" :is="currentView" name="visitor" date="2014-03" category="Web Front End" :transition="transition" :transition-mode="transitionMode"></component>
25 |       <div class="row">
26 |         过渡动画效果：
27 |         <select v-model="transition">
28 |           <option selected="">fade</option>
29 |           <option>bounce</option>
30 |           <option>rotate</option>
31 |           <option>slideDown</option>
32 |           <option>zoom</option>
33 |         </select>
34 |       </div>
35 |       <div class="row">
36 |         过渡模式：
37 |         <label>
38 |           <input type="radio" v-model="transitionMode" value="in-out"> in-out
39 |         </label>
40 |         <label>
41 |           <input type="radio" v-model="transitionMode" value="out-in"> out-in
42 |         </label>
43 |       </div>
44 |     </div>
45 |   </div>
46 |   </div>
47 |   <template id="home-template">
48 |     <div>
49 |       <h3>Home</h3>
50 |       <div>
51 |         Welcom to www.jikexueyuan.com, <i>{{name}}</i>.
52 |       </div>
53 |       <div class="info">
54 |         Proudly training since {{date}}.
55 |       </div>
56 |     </div>
57 |   </template>
58 |   <template id="products-template">
59 |     <div>
60 |       <h3>Products</h3>
61 |       <div>
62 |         Explore the courses of <i>{{category}}</i> and other categories.
63 |       </div>
64 |     </div>
65 |   </template>
66 |   <script src="../js/vue.js"></script>
67 |   <script>
68 |   Vue.component('home', {
69 |     props: ['name', 'date'],
70 |     template: '#home-template'
71 |   })
72 | 
73 |   Vue.component('products', {
74 |     props: ['category'],
75 |     template: '#products-template',
76 |     activate: [
77 |       function(done) {
78 |         setTimeout(done, 500) // 一般用于加载数据，避免数据还没有准备好就显示，导致页面闪烁或异常
79 |       },
80 |       function(done) {
81 |         setTimeout(done, 2500) // 这里只是简单设置为超时调用 done
82 |       }
83 |     ]
84 |   })
85 | 
86 |   var vm = new Vue({
87 |     el: '#app',
88 |     data: {
89 |       currentView: 'home',
90 |       transition: 'fade',
91 |       transitionMode: 'in-out'
92 |     }
93 |   })
94 |   </script>
95 | </body>
96 | 
97 | </html>
98 | 


--------------------------------------------------------------------------------
/Lesson2-2/ex_5.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>表单控件绑定</title>
  6 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
  7 | </head>
  8 | <body>
  9 | <div class="container">
 10 |   <h2>Checkbox 绑定 Value</h2>
 11 |   <div class="row">
 12 |     <div class="col-md-2">
 13 |       升级套餐：
 14 |     </div>
 15 |     <div class="col-md-2">
 16 |       <label>
 17 |         <input
 18 |           type="checkbox"
 19 |           v-model="package"
 20 |           v-bind:true-value="privilegePkg"
 21 |           v-bind:false-value="economicalPkg"> 超值套餐
 22 |       </label>
 23 |     </div>
 24 |   </div>
 25 |   <div class="row">
 26 |     <div class="col-md-12">
 27 |       package: {{ package | json }}
 28 |     </div>
 29 |   </div>
 30 |   <hr>
 31 |   <div class="row">
 32 |     <div class="col-md-2">
 33 |       购买保险：
 34 |     </div>
 35 |     <div class="col-md-2" v-for="insuranceItem in insuranceItems">
 36 |       <label>
 37 |         <input
 38 |           type="checkbox"
 39 |           v-model="insurances"
 40 |           v-bind:value="insuranceItem">
 41 |         <span :title="insuranceItem.description">
 42 |           {{insuranceItem.name}}
 43 |         </span>
 44 |       </label>
 45 |     </div>
 46 |   </div>
 47 |   <div class="row">
 48 |     <div class="col-md-12">
 49 |       insurances: {{ insurances | json }}
 50 |     </div>
 51 |   </div>
 52 | </div>
 53 | 
 54 | <script src="../js/vue.js"></script>
 55 | <script>
 56 | var privilegePkg = {
 57 |   name: '超值套餐',
 58 |   coupons: [
 59 |     '价值70元门票抵用券',
 60 |     '价值30元航空意外险',
 61 |     '价值50接送机券'
 62 |   ],
 63 |   price: 1020
 64 | }
 65 | var economicalPkg = {
 66 |   name: '经济套餐',
 67 |   coupons: [
 68 |     '价值28元酒店优惠券',
 69 |     '价值50接送机券'
 70 |   ],
 71 |   price: 990
 72 | }
 73 | var insuranceItems = [
 74 |   {
 75 |     name: '航空组合险',
 76 |     price: 40, 
 77 |     description: '航空意外伤害最高100万，指被保险人持有效机票检票并进入保单载明的合法商业运营的客运飞机客舱时起至抵达机票载明的终点离开客运飞机客舱的期间内遭受意外伤害所导致的保险责任；航班延误投保人必须乘坐投保航班且航班抵达目的地时延误3小时及以上赔偿300元；返航或备降赔偿300元；航班取消赔偿100元'
 78 |   }, {
 79 |     name: '航空意外险',
 80 |     price: 30, 
 81 |     description: '航空意外伤害保险责任320万元/航段（国航直销产品120万元/航段），指被保险人持有效机票检票并进入保单载明的合法商业运营的客运飞机客舱时起至抵达机票载明的终点离开客运飞机客舱的期间内遭受意外伤害所导致的保险责任'
 82 |   }, {
 83 |     name: '延误取消险',
 84 |     price: 20, 
 85 |     description: '投保人必须乘坐投保航班且航班抵达目的地时延误3小时及以上赔偿300元；发生返航或备降，赔偿300元；航班被取消赔偿100元'
 86 |   }, {
 87 |     name: '无忧退票险',
 88 |     price: 30, 
 89 |     description: '赔偿退票损失金额的80%，最高不超过人民币2000元'
 90 |   }
 91 | ]
 92 | 
 93 | var vm = new Vue({
 94 |   el: 'body',
 95 |   data: {
 96 |     privilegePkg: privilegePkg,
 97 |     economicalPkg: economicalPkg,
 98 |     package: privilegePkg,
 99 |     insuranceItems: insuranceItems,
100 |     insurances: [
101 |       insuranceItems[1]
102 |     ]
103 |   }
104 | })
105 | </script>
106 | </body>
107 | </html>
108 | 


--------------------------------------------------------------------------------
/Lesson2-3/ex_5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>事件绑定与处理  </title>
 6 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 7 | </head>
 8 | <body @keydown.f1="showHelp = true">
 9 | <div>
10 |   <div class="container">
11 |     <h2>按键修饰符</h2>
12 |     <div class="row">
13 |       <div class="col-md-12" @click="msg = ''">
14 |         {{ msg }}
15 |       </div>
16 |       <form class="form">
17 |         <input type="text" class="form-control" placeholder="press enter does nothing" @keydown.enter.prevent>
18 |         <input type="text" class="form-control" placeholder="press a, b, c, d, e or enter to submit" @keydown.hotkeys.prevent="submitForm" @keydown.f1.stop>
19 |         <button type="submit" class="form-control" @click.prevent="submitForm">Submit</button>
20 |       </form>
21 |     </div>
22 |     <div class="row" v-show="showHelp" @click="showHelp = false">
23 |       <div class="col-md-12 text-center">
24 |         <h2>Help Desk</h2>
25 |       </div>
26 |       <div class="col-md-offset-1 col-md-10">
27 |         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget odio vulputate, rhoncus metus a, condimentum tellus. Nullam commodo tempor dui, et sodales orci feugiat et. Nunc metus ligula, vulputate ac volutpat sed, vestibulum a massa. Sed lacinia efficitur tellus, a ultricies libero. Phasellus felis felis, convallis id elit eu, elementum lobortis erat. Nulla sollicitudin id erat eu varius. Aenean volutpat, lorem ut scelerisque interdum, felis mauris suscipit lacus, aliquam mollis augue diam eu nisl. Ut ut aliquam lectus. Sed consectetur rutrum lorem, id tempor mi lobortis placerat. Sed ut posuere nisl. Mauris tincidunt consectetur placerat. Aliquam ut lacus auctor, congue nibh non, tempus lacus. Vestibulum at velit viverra felis tempus viverra. Nullam a libero velit. Etiam feugiat nec tortor nec feugiat.
28 |       </div>
29 |     </div>
30 |   </div>
31 | </div>
32 | 
33 | <script src="../js/vue.js"></script>
34 | <script>
35 |   Vue.directive('on').keyCodes.f1 = 112
36 |   Vue.directive('on').keyCodes.hotkeys = [65, 66, 67, 68, 69]
37 | 
38 |   var vm = new Vue({
39 |     el: 'body',
40 |     data: {
41 |       msg: '',
42 |       showHelp: false
43 |     },
44 |     methods: {
45 |       submitForm: function (event) {
46 |         this.msg = 'sending request ...'
47 |       }
48 |     },
49 |     watch: {
50 |       msg: function (val) {
51 |         if (val) {
52 |           var self = this
53 |           setTimeout(function () {
54 |             self.msg = self.msg !== 'done!' ? 'done!' : ''
55 |           }, 1000)
56 |         }
57 |       },
58 |       showHelp: function (val) {
59 |         if (val) {
60 |           var self = this
61 |           setTimeout(function () {
62 |             self.showHelp = false
63 |           }, 1000)
64 |         }
65 |       }
66 |     }
67 |   })
68 | </script>
69 | </body>
70 | </html>
71 | 


--------------------------------------------------------------------------------
/Lesson3-1/ex_3.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <title>组件</title>
  7 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
  8 | </head>
  9 | 
 10 | <body>
 11 |   <div class="container" id="app">
 12 |     <h2>通过 props 传递数据到子组件</h2>
 13 |     <div class="row">We have an msg: {{parentMsg}}. </div>
 14 |     <div class="row">
 15 |       Edit msg:
 16 |       <input type="text" v-model="parentMsg">
 17 |     </div>
 18 |     <div class="row">
 19 |       And the array in parent component is: {{arrData | json}}
 20 |     </div>
 21 |     <my-component :msg="parentMsg" :prop-a="arrData" prop-b="12" :numbers='[1,2,3]' :number="13"></my-component>
 22 |     <my-component name="Another Component" :msg.sync="parentMsg" :prop-a="arrData" :prop-b="12" :my-number="myNumber"></my-component>
 23 |     <my-component name="Yet Another Component" :msg.once="parentMsg" :prop-a="arrData"></my-component>
 24 |   </div>
 25 | 
 26 |   <template id="tpl">
 27 |     <div style="border: 1px solid black; padding: 5px; display: inline-block;">
 28 |       <h3>{{name}}</h3>
 29 |       <div>
 30 |         Msg:
 31 |         <input type="text" v-model="msg" />
 32 |       </div>
 33 |       <div>The array in child component is: {{propA | json}}.</div>
 34 |       <div>The type of propB is : {{typeof propB}}</div>
 35 |       <button @click="changeElements">Click Me First</button>
 36 |       <button @click="sortElements">Then Click Me</button>
 37 |       <div v-if="number">The number is: {{number}}</div>
 38 |       <div v-else>The number is absent</div>
 39 |       <div>Other numbers: {{numbers | json}}</div>
 40 |       <div v-if="myNumber">Number object: {{myNumber | json}}</div>
 41 |       <div v-else>That's all.</div>
 42 |     </div>
 43 |   </template>
 44 |   <script src="../js/vue.js"></script>
 45 |   <script>
 46 |   function number() {
 47 |     this.name = 'number'
 48 |     this.value = 3
 49 |   }
 50 | 
 51 |   var myComponent = Vue.extend({
 52 |     props: {
 53 |       name: {
 54 |         type: String,
 55 |         default: 'Component'
 56 |       },
 57 |       msg: String,
 58 |       propA: {
 59 |         type: Array,
 60 |         required: true
 61 |       },
 62 |       propB: [String, Number],
 63 |       numbers: {
 64 |         type: Array,
 65 |         default: function() {
 66 |           return [1, 1, 2, 3, 5, 8, 13, 21]
 67 |         }
 68 |       },
 69 |       number: {
 70 |         type: Number,
 71 |         // twoWay: true,
 72 |         validator: function(value) {
 73 |           return value > 10
 74 |         // },
 75 |         // coerce: function(value) {
 76 |         //   return Number(value)
 77 |         }
 78 |       },
 79 |       myNumber: number
 80 |     },
 81 |     methods: {
 82 |       changeElements() {
 83 |         this.propA.push(Math.floor(Math.random() * 100))
 84 |       },
 85 |       sortElements() {
 86 |         this.propA = this.propA.sort((a, b) => a - b)
 87 |       }
 88 |     },
 89 |     template: '#tpl'
 90 |   })
 91 | 
 92 |   var vm = new Vue({
 93 |     el: '#app',
 94 |     data: {
 95 |       arrData: [4, 27, 3, 12, 5, 9],
 96 |       parentMsg: 'Hello, Vue.js!',
 97 |       myNumber: new number()
 98 |     },
 99 |     components: {
100 |       myComponent: myComponent
101 |     }
102 |   })
103 |   </script>
104 | </body>
105 | 
106 | </html>
107 | 


--------------------------------------------------------------------------------
/Lesson1-4/ex-1.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>数组元素遍历</title>
  6 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
  7 | </head>
  8 | <body>
  9 | <div class="container">
 10 |   <div class="row">
 11 |     <div class="col-md-7">
 12 |       <h2>乘客列表</h2>
 13 |       <div class="row clearfix visible-md-block visible-lg-block">
 14 |         <div class="col-md-2"><strong>姓名</strong></div>
 15 |         <div class="col-md-2"><strong>证件类型</strong></div>
 16 |         <div class="col-md-3"><strong>证件号码</strong></div>
 17 |         <div class="col-md-2"><strong>手机号码</strong></div>
 18 |         <div class="col-md-3"><strong>航班说明</strong></div>
 19 |       </div>
 20 |       <div class="row" v-for="pax in paxes">
 21 |         <div class="col-md-2">
 22 |           <span class="visible-xs-inline visible-sm-inline"><strong>姓名</strong>：</span>
 23 |           {{pax.name}}
 24 |         </div>
 25 |         <div class="col-md-2">
 26 |           <span class="visible-xs-inline visible-sm-inline"><strong>证件类型</strong>：</span>
 27 |           {{pax.idType}}
 28 |         </div>
 29 |         <div class="col-md-3">
 30 |           <span class="visible-xs-inline visible-sm-inline"><strong>证件号码</strong>：</span>
 31 |           {{pax.idNumber}}
 32 |         </div>
 33 |         <div class="col-md-2">
 34 |           <span class="visible-xs-inline visible-sm-inline"><strong>手机号码</strong>：</span>
 35 |           {{pax.mobile}}
 36 |         </div>
 37 |         <div class="col-md-3">
 38 |           <span class="visible-xs-inline visible-sm-inline"><strong>说明</strong>：</span>
 39 |           <i>{{flightSummary}}</i>
 40 |         </div>
 41 |         <div class="visible-xs visible-sm">
 42 |           <hr v-if="$index !== paxes.length - 1">
 43 |         </div>
 44 |       </div>
 45 |     </div>
 46 |     <div class="col-md-5">
 47 |       <h2>价格信息</h2>
 48 |       <table class="table table-condensed">
 49 |         <tbody>
 50 |         <template v-for="cost of costs">
 51 |           <tr class="info">
 52 |             <th class="text-success">{{$index + 1}}.{{cost.type}}</th>
 53 |             <td class="text-muted">{{cost.description}}</td>
 54 |           </tr>
 55 |           <tr>
 56 |             <td>&nbsp;</td>
 57 |             <td class="text-right">{{cost.price | currency '￥'}} &times; {{cost.count}}</td>
 58 |           </tr>
 59 |         </template>
 60 |         </tbody>
 61 |       </table>
 62 |     </div>
 63 |   </div>
 64 | </div>
 65 | 
 66 | <script src="../js/vue.js"></script>
 67 | <script>
 68 |   new Vue({
 69 |     el: 'body',
 70 |     data: {
 71 |       flightSummary: 'non-stop flight',
 72 |       paxes: [
 73 |         {
 74 |           name: '张萌萌',
 75 |           idType: '身份证',
 76 |           idNumber: '310104198508101022',
 77 |           mobile: '18988886666'
 78 |         }, {
 79 |           name: '马小虎',
 80 |           idType: '护照',
 81 |           idNumber: 'G87654321'
 82 |         }, {
 83 |           name: '李国强',
 84 |           idType: '军人证',
 85 |           idNumber: '1112223334',
 86 |           mobile: '13789012345'
 87 |         }
 88 |       ],
 89 |       costs: [
 90 |         {
 91 |           type: '成人票',
 92 |           description: '含民航发展基金和燃油税',
 93 |           price: 750,
 94 |           count: 2
 95 |         }, {
 96 |           type: '儿童票',
 97 |           description: '含民航发展基金和燃油税',
 98 |           price: 930,
 99 |           count: 1
100 |         }, {
101 |           type: '航意险（成人）',
102 |           description: '最高300万元意外保障，仅限成人购买',
103 |           price: 30,
104 |           count: 2
105 |         }
106 |       ]
107 |     }
108 |   })
109 | </script>
110 | </body>
111 | </html>
112 | 


--------------------------------------------------------------------------------
/Lesson2-2/ex_6.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>表单控件绑定</title>
  6 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
  7 | </head>
  8 | <body>
  9 | <div class="container">
 10 |   <h2>参数特性</h2>
 11 |   <!-- lazy & debounce attributes for text type only -->
 12 |   <div class="row">
 13 |     <div class="col-md-3 bg-info">
 14 |       msg: 
 15 |       <span class="text-success">
 16 |         {{ msg }}
 17 |       </span>
 18 |     </div>
 19 |     <div class="col-md-3">
 20 |       normal: <input type="text" v-model="msg">
 21 |     </div>
 22 |     <div class="col-md-3">
 23 |       lazy: <input type="text" v-model="msg" lazy>
 24 |     </div>
 25 |     <div class="col-md-3">
 26 |       debounce: <input type="text" v-model="msg" debounce="500">
 27 |     </div>
 28 |   </div>
 29 |   <hr>
 30 |   <!-- number attribute for text, radio, select types & checkbox type (wrong way) -->
 31 |   <div class="row">
 32 |     <div class="col-md-3 bg-info">
 33 |       age: 
 34 |       <span class="text-success">
 35 |         {{ age | JSON }}
 36 |       </span>
 37 |     </div>
 38 |     <div class="col-md-3">
 39 |       range: <input type="range" v-model="age" min="2" max="18" step="2">
 40 |     </div>
 41 |     <div class="col-md-3">
 42 |       Type="number": <input type="number" v-model="age">
 43 |     </div>
 44 |     <div class="col-md-3">
 45 |       number: <input type="text" v-model="age" number>
 46 |     </div>
 47 |   </div>
 48 |   <div class="row">
 49 |     <div class="col-md-3 bg-info">
 50 |       typeof age: 
 51 |       <span class="text-success">
 52 |         {{ typeof age }}
 53 |       </span>
 54 |     </div>
 55 |     <div class="col-md-3">
 56 |       <label>
 57 |         <input type="radio" v-model="age" value="14" number> 14 years old
 58 |       </label>
 59 |       <label>
 60 |         <input type="radio" v-model="age" value="8" number> 8 years old
 61 |       </label>
 62 |     </div>
 63 |     <div class="col-md-3">
 64 |       <select v-model="age" number>
 65 |         <option>2</option>
 66 |         <option>4</option>
 67 |         <option>6</option>
 68 |         <option>8</option>
 69 |         <option>10</option>
 70 |         <option>12</option>
 71 |         <option>14</option>
 72 |         <option>16</option>
 73 |         <option>18</option>
 74 |       </select>
 75 |     </div>
 76 |     <div class="col-md-3 text-danger bg-danger">
 77 |       <label>
 78 |         <input type="checkbox" v-model="age" value="6" number> 6 years old
 79 |       </label>      
 80 |     </div>
 81 |   </div>
 82 |   <hr>
 83 |   <!-- number attribute for checkbox type, correctly -->
 84 |   <div class="row">
 85 |     <div class="col-md-3 bg-info">
 86 |       voted: {{ voted | json }}
 87 |     </div>
 88 |     <div class="col-md-9">
 89 |       MVP vote (up to 2 players)
 90 |       <label>
 91 |         <input type="checkbox" v-model="voted" :disabled="voted.length * voted.indexOf(0) === -2" value="0" number> Player 0
 92 |       </label>
 93 |       <label>
 94 |         <input type="checkbox" v-model="voted" :disabled="voted.length * voted.indexOf(1) === -2" value="1" number> Player 1
 95 |       </label>
 96 |       <label>
 97 |         <input type="checkbox" v-model="voted" :disabled="voted.length * voted.indexOf(2) === -2" value="2" number> Player 2
 98 |       </label>
 99 |       <label>
100 |         <input type="checkbox" v-model="voted" :disabled="voted.length * voted.indexOf(3) === -2" value="3" number> Player 3
101 |       </label>
102 |     </div>
103 |   </div>
104 | </div>
105 | 
106 | <script src="../js/vue.js"></script>
107 | <script>
108 | var vm = new Vue({
109 |   el: 'body',
110 |   data: {
111 |     msg: 'Vue.js',
112 |     age: '12',
113 |     voted: []
114 |   },
115 |   watch: {
116 |     msg: function (val) {
117 |       console.log(val)
118 |     }
119 |   },
120 |   filters: {
121 |     JSON: function (val) {
122 |       return JSON.stringify(val)
123 |     }
124 |   }
125 | })
126 | </script>
127 | </body>
128 | </html>
129 | 


--------------------------------------------------------------------------------
/Lesson3-1/ex_4.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <title>组件</title>
  7 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
  8 | </head>
  9 | 
 10 | <body>
 11 |   <div class="container" id="app">
 12 |     <h2>父子组件通信</h2>
 13 |     <div class="row">
 14 |       <h3>Parent</h3>
 15 |       <div>
 16 |         <input v-model="msg">
 17 |         <button class="btn btn-primary" v-on:click="broadcast" :disabled="!msg">Broadcast Event</button>
 18 |         <p v-show="msgToTheChild">Message sent to the child: {{msgToTheChild}}</p>
 19 |         <child v-on:child-msg="handleChildMsg"></child>
 20 |       </div>
 21 |     </div>
 22 |   </div>
 23 |   <template id="child-template">
 24 |     <div>
 25 |       <h3>Child</h3>
 26 |       <div>
 27 |         Message received: {{msg}}
 28 |       </div>
 29 |       <div>
 30 |         <label>
 31 |           <input type="checkbox" v-model="propgation">
 32 |           继续传递
 33 |         </label>
 34 |       </div>
 35 |       <div>
 36 |         <button class="btn btn-success" @click="emit">Emit Event to Myself</button>
 37 |       </div>
 38 |       <div class="row">
 39 |         <grandchild class="col-md-4" v-for="i in 3" v-ref:grandchild-ref :i="i"></grandchild>
 40 |       </div>
 41 |       <grandchild v-ref:grandchild-single-ref></grandchild>
 42 |     </div>
 43 |   </template>
 44 |   <template id="grandchild-template">
 45 |     <div>
 46 |       <h3>Grandchild</h3>
 47 |       <div>
 48 |         Message received from parent: {{parentMsg}}
 49 |       </div>
 50 |       <input :value="msg" readonly>
 51 |       <div>
 52 |         <button class="btn btn-primary" v-on:click="dispatch" :disabled="!msg">Dispatch Event</button>
 53 |         <button class="btn btn-primary" v-on:click="emit" :disabled="!msg">Emit Event</button>
 54 |       </div>
 55 |     </div>
 56 |   </template>
 57 |   <script src="../js/vue.js"></script>
 58 |   <script>
 59 |   Vue.component('grandchild', {
 60 |     data: function() {
 61 |       return {
 62 |         parentMsg: ''
 63 |       }
 64 |     },
 65 |     computed: {
 66 |       msg: function() {
 67 |         return this.i !== undefined ? 'hello from grandchild ' + this.i : 'hello there'
 68 |       }
 69 |     },
 70 |     props: ['i'],
 71 |     template: '#grandchild-template',
 72 |     methods: {
 73 |       dispatch: function() {
 74 |         this.$dispatch('child-msg', this.msg)
 75 |       },
 76 |       emit: function() {
 77 |         this.$root.$emit('direct-msg', this.msg)
 78 |       }
 79 |     },
 80 |     events: {
 81 |       'parent-msg': function(msg) {
 82 |         this.parentMsg = msg
 83 |       }
 84 |     }
 85 |   })
 86 | 
 87 |   Vue.component('child', {
 88 |     template: '#child-template',
 89 |     data: function() {
 90 |       return {
 91 |         msg: '',
 92 |         propgation: false
 93 |       }
 94 |     },
 95 |     methods: {
 96 |       emit: function() {
 97 |         this.$emit('child-msg', 'Something happen to me.')
 98 |       }
 99 |     },
100 |     events: {
101 |       'parent-msg': function(msg) {
102 |         this.msg = msg
103 |         return this.propgation
104 |       },
105 |       'child-msg': function(msg) {
106 |         this.msg = msg
107 |         return this.propgation
108 |       },
109 |       'direct-msg': function(msg) {
110 |         this.msg = msg
111 |       }
112 | 
113 |     }
114 |   })
115 | 
116 |   var vm = new Vue({
117 |     el: '#app',
118 |     data: {
119 |       msg: 'Hi',
120 |       msgToTheChild: ''
121 |     },
122 |     methods: {
123 |       broadcast: function() {
124 |         this.$broadcast('parent-msg', this.msg)
125 |       },
126 |       handleChildMsg: function(msg) {
127 |         this.msgToTheChild = msg
128 |       }
129 |     },
130 |     events: {
131 |       'child-msg': function(msg) {
132 |         this.msg = msg
133 |       },
134 |       'direct-msg': function(msg) {
135 |         this.msg = msg
136 |       }
137 |     }
138 |   })
139 | 
140 |   vm.$children[0].$on('child-msg', function (msg) {
141 |     console.log(msg)
142 |   })
143 |   </script>
144 | </body>
145 | 
146 | </html>
147 | 


--------------------------------------------------------------------------------
/Lesson3-1/ex_2.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <title>组件</title>
  7 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
  8 |   <style>
  9 |     [v-cloak] {
 10 |       display: none;
 11 |     }
 12 |   </style>
 13 | </head>
 14 | 
 15 | <body>
 16 | 
 17 | <div class="container-fluid">
 18 |   <hr>
 19 |   <div class="col-xs-6 container-fluid" id="app1">
 20 |     <h2>HTML限制条件及注意事项</h2>
 21 |     <div>
 22 |       Select 控件：
 23 |       <my-select>
 24 |         <option value="1">One</option>
 25 |         <option value="2">Two</option>
 26 |         <option value="3">Three</option>
 27 |       </my-select>
 28 |     </div>
 29 |     <div>
 30 |       Select 控件：
 31 |       <select>
 32 |         <my-option value="1" text="One"></my-option>
 33 |         <my-option value="2" text="Two" selected></my-option>
 34 |         <my-option value="3" text="Three"></my-option>
 35 |       </select>
 36 |     </div>
 37 |     <hr>
 38 |     <table>
 39 |       <tr>
 40 |         <my-component prop-a="My component in a table"></my-component>
 41 |       </tr>
 42 |     </table>
 43 |     <hr>
 44 |     <table>
 45 |       <tbody>
 46 |         <tr>
 47 |           <td is="my-component"></td>
 48 |         </tr>
 49 |       </tbody>
 50 |     </table>
 51 |     <table class="table">
 52 |       <thead>
 53 |         <tr>
 54 |           <td>i</td>
 55 |           <td>i + 1</td>
 56 |         </tr>
 57 |         <tr class="bg-info">
 58 |           <td>
 59 |             &nbsp;
 60 |           </td>
 61 |           <td>
 62 |             &nbsp;
 63 |           </td>
 64 |         </tr>
 65 |       </thead>
 66 |       <template v-for="item in 4">
 67 |         <tr>
 68 |           <td>{{item}}</td>
 69 |           <td>{{item + 1}}</td>
 70 |         </tr>
 71 |         <tr class="bg-info">
 72 |           <td is="seperator"></td>
 73 |         </tr>
 74 |       </template>
 75 |     </table>
 76 |   </div>
 77 | 
 78 |   <div class="col-xs-6 container-fluid" id="app2">
 79 |     <h2>自定义标签条件渲染</h2>
 80 |     <div class="row">
 81 |       <my-component prop-a="This is my component" v-show="showMyComponent"></my-component>
 82 |       <your-component prop-a="This is your component" v-else></your-component>
 83 |     </div>
 84 |   </div>
 85 | 
 86 |   <div class="col-xs-6 container-fluid" id="app3">
 87 |     <h2>跟媒体相关的注意事项</h2>
 88 |     <div class="row">
 89 |       <h3>使用 v-cloak 指令</h3>
 90 |       <button @click="showIt = !showIt">切换图片</button>
 91 |       <div>
 92 |         <img class="img-responsive" :src="'http://s4.cn.bing.net/th?id=OJ.ChNbCnxdVjwb5Q&pid=MSNJVFeeds'" v-if="showIt"/>
 93 |       </div>
 94 |         <h3>视频自动播放</h3>
 95 |       <div>
 96 |         <button @click="playIt = !playIt">切换视频</button>
 97 |       </div>
 98 |       <video style="width: 100%;" autoplay loop controls src="http://www.waylens.com/videos/Waylens_Horizon_Product_Video_360p.m4v" v-if="playIt" v-cloak></video>
 99 |     </div>
100 |   </div>
101 | </div>
102 | 
103 | <script src="../js/vue.js"></script>
104 | <script>
105 | var mySelect = Vue.extend({
106 |   template: '<select><slot></slot></select>'
107 | })
108 | 
109 | var myOption = Vue.extend({
110 |   props: ['value', 'text'],
111 |   template: '<option :value="value">{{text}}</option>'
112 | })
113 | 
114 | var myComponent = Vue.extend({
115 |   data: function() {
116 |     return {
117 |       msg: 'Hello, Vue.js.',
118 |     }
119 |   },
120 |   props: ['propA'],
121 |   template: '<div><h3 style="text-transform: uppercase">{{propA}}</h3><div>{{msg}}</div><img :src="\'http://s4.cn.bing.net/th?id=OJ.ChNbCnxdVjwb5Q&pid=MSNJVFeeds\'" v-if="false"/></div>'
122 | })
123 | 
124 | var seperator = Vue.extend({
125 |   template: '<td>&nbsp;</td><td>&nbsp;</td>'
126 | })
127 | 
128 | var vm1 = new Vue({
129 |   el: '#app1',
130 |   components: {
131 |     mySelect: mySelect,
132 |     myOption: myOption,
133 |     myComponent: myComponent,
134 |     seperator: seperator
135 |   }
136 | })
137 | 
138 | var vm2 = new Vue({
139 |   el: '#app2',
140 |   data: {
141 |     newMsg: 'abcd',
142 |     showMyComponent: true
143 |   },
144 |   components: {
145 |     myComponent: myComponent,
146 |     yourComponent: myComponent
147 |   }
148 | })
149 | 
150 | var vm3 = new Vue({
151 |   el: '#app3',
152 |   data: {
153 |     showIt: false,
154 |     playIt: false
155 |   }
156 | })
157 | 
158 | </script>
159 | </body>
160 | 
161 | </html>
162 | 


--------------------------------------------------------------------------------
/Lesson3-1/ex_1.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <title>组件</title>
  7 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
  8 | </head>
  9 | 
 10 | <body>
 11 |   <div class="container">
 12 |     <div id="app1">
 13 |       <h1>Vue 扩展实例</h1>
 14 |       <div class="row">
 15 |         <div class="col-xs-3 text-right">
 16 |           扩展选项中的信息：
 17 |         </div>
 18 |         <div class="col-xs-3">
 19 |           {{ msg }}
 20 |         </div>
 21 |       </div>
 22 |       <div class="row">
 23 |         <div class="col-xs-3 text-right">
 24 |           实例选项中的信息：
 25 |         </div>
 26 |         <div class="col-xs-3">
 27 |           {{ newMsg }}
 28 |         </div>
 29 |       </div>
 30 |       <div class="row">
 31 |         <div class="col-xs-3 text-right">
 32 |           实例选项覆盖扩展选项内容：
 33 |         </div>
 34 |         <div class="col-xs-3">
 35 |           {{ i }}
 36 |         </div>
 37 |       </div>
 38 |       <div class="row">
 39 |         <div class="col-xs-3 text-right">
 40 |           实例选项与扩展选项内容合并：
 41 |         </div>
 42 |         <div class="col-xs-3">
 43 |           {{ obj | json }}
 44 |         </div>
 45 |       </div>
 46 |       <div class="row">
 47 |         <div class="col-xs-3 text-right">
 48 |           <button @click="add">add</button>
 49 |         </div>
 50 |         <div class="col-xs-3">
 51 |           <button @click="add2">add2</button>
 52 |         </div>
 53 |       </div>
 54 |       <h3>插入局部注册的组件</h3>
 55 |       <div class="row">
 56 |         <div class="col-xs-12 text-center bg-info">
 57 |           <your-vue></your-vue>
 58 |         </div>
 59 |         <div class="col-xs-12 text-center bg-warning">
 60 |           <y-o-u-r-v-u-e></y-o-u-r-v-u-e>
 61 |           <hr>
 62 |           <local-component></local-component>
 63 |         </div>
 64 |         <h3>插入全局注册的组件</h3>
 65 |         <div class="row">
 66 |           <div class="col-xs-12 text-center bg-warning">
 67 |             <global-component></global-component>
 68 |           </div>
 69 |         </div>
 70 |       </div>
 71 |     </div>
 72 | 
 73 |     <div class="container" id="app2">
 74 |       <h1>父子组件数据关系</h1>
 75 |       <div>
 76 |         父组件中的 msg 数据：{{msg}}
 77 |       </div>
 78 |       <div>
 79 |         <input v-model="msg">
 80 |       </div>
 81 |       <global-component></global-component>
 82 |     </div>
 83 |     <template id="global-template">
 84 |       <div>
 85 |         组件内部 msg 文本内容为 {{msg}}，和父组件无关！不信改改看：
 86 |         <input v-model="msg">
 87 |       </div>
 88 |     </template>
 89 |     <script src="../js/vue.js"></script>
 90 |     <script>
 91 |     Vue.component('global-component', {
 92 |       data: function () {
 93 |         return {
 94 |           msg: 'Hi, Vue.js'
 95 |         }
 96 |       },
 97 |       template: '#global-template'
 98 |     })
 99 | 
100 |     var localComponent = Vue.extend({
101 |       data: function() {
102 |         return {
103 |           msg: '这是组件内部信息',
104 |           i: 1
105 |         }
106 |       },
107 |       methods: {
108 |         add: function() {
109 |           this.i++
110 |         }
111 |       },
112 |       template: '<div>{{ msg }}</div><div>{{ i }}</div><button @click="add">组件内部数据操作</button>'
113 |     })
114 | 
115 |     var myVue = Vue.extend({
116 |       data: function() {
117 |         return {
118 |           msg: 'Hello, Vue.js!',
119 |           i: 1,
120 |           obj: {
121 |             a: 1,
122 |             b: 2
123 |           }
124 |         }
125 |       },
126 |       methods: {
127 |         add: function() {
128 |           this.i++
129 |         }
130 |       },
131 |       components: {
132 |         YOURVUE: localComponent,
133 |         'local-component': localComponent
134 |       }
135 |     })
136 | 
137 |     var vm1 = new myVue({
138 |       data: {
139 |         newMsg: 'Amazing Vue.js',
140 |         i: 100,
141 |         obj: {
142 |           b: 99,
143 |           c: 3,
144 |           d: 4
145 |         }
146 |       },
147 |       methods: {
148 |         add: function() {
149 |           this.i += 0.5
150 |         },
151 |         add2: function() {
152 |           this.i += 2
153 |         }
154 |       },
155 |       components: {
156 |         yourVue: localComponent
157 |       }
158 |     })
159 | 
160 |     vm1.$mount('#app1')
161 | 
162 |     var vm2 = new myVue({
163 |       el: '#app2'
164 |     })
165 |     </script>
166 | </body>
167 | 
168 | </html>
169 | 


--------------------------------------------------------------------------------
/Lesson3-2/ex_1.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <title>组件实战 - 模板与样式</title>
  7 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
  8 |   <link rel="stylesheet" href="../css/lesson3-2.css">
  9 | </head>
 10 | 
 11 | <body>
 12 |   <div class="container">
 13 |     <div class="row">
 14 |       <h2>单程直达机票航班信息展示</h2>
 15 |       <div class="col-md-7"></div>
 16 |       <div class="col-md-5">
 17 |         <direct-flight></direct-flight>
 18 |       </div>
 19 |     </div>
 20 |   </div>
 21 |   <template id="flight-code-title-template">
 22 |     <img :src="'../images/flight-companies/' + flightCompanyCode + '.png'" class="flight-image">{{ flightCompanyName }} {{ flightCode }}
 23 |   </template>
 24 |   <template id="direct-flight-template">
 25 |     <div class="text-center flight-info">
 26 |       <div class="supplier" @mouseover="showSupplier=true" @mouseout="showSupplier=false" v-if="supplier">
 27 |         <span class="glyphicon glyphicon-certificate glyphicon-supplier"></span>
 28 |         <span class="supplier-text"></span>
 29 |         <div class="hover-box" v-show="showSupplier">
 30 |           <strong>产品供应商：</strong>
 31 |           <br> 上海华程西南旅行社有限公司
 32 |           <br> 08309722
 33 |         </div>
 34 |       </div>
 35 |       <h3>
 36 |         10-13 周四 上海 <span class="glyphicon glyphicon-arrow-right"></span> 武汉
 37 |       </h3>
 38 |       <div class="flight-title flight-title-single" v-if="!sharedFlightCode">
 39 |         <flight-code-title flight-code="MU9345"></flight-code-title>
 40 |         波音737-800 {{ subclasses['Y'] }}
 41 |       </div>
 42 |       <div class="flight-title-group" v-else>
 43 |         <div class="flight-title">
 44 |           <flight-code-title flight-code="MU9345"></flight-code-title>
 45 |           波音737-800 {{ subclasses['Y'] }}
 46 |         </div>
 47 |         <div class="flight-title shared-flight-title">
 48 |           实际乘坐 <flight-code-title flight-code="FM9345"></flight-code-title>
 49 |         </div>
 50 |       </div>
 51 |       <div class="row flight-detail">
 52 |         <div class="col-xs-4 text-right flight-depart">
 53 |           <div class="flight-time">22:30</div>
 54 |           <div class="flight-airport">浦东国际机场T2</div>
 55 |         </div>
 56 |         <div class="col-xs-4 flight-arrow">
 57 |           <div class="cost-time">
 58 |             <span class="glyphicon glyphicon-time"></span> 2h05m
 59 |           </div>
 60 |           <div class="timeline">
 61 |             <span class="glyphicon glyphicon-plane"></span>
 62 |           </div>
 63 |         </div>
 64 |         <div class="col-xs-4 text-left flight-arrive">
 65 |           <div class="flight-time" v-if="!overMidNight">00:35</div>
 66 |           <div class="flight-time-with-overmidnight" v-else>
 67 |             <div class="flight-time">00:35</div>
 68 |             <div class="flight-time-overmidnight" @mouseover="showOverMidNightDetail=true" @mouseout="showOverMidNightDetail=false">
 69 |               <small class="overmidnight-text abbr"></small>
 70 |               <div class="hover-box" v-show="showOverMidNightDetail">
 71 |                 到达时间为第2天，2016年10月14日 00时35分
 72 |               </div>
 73 |             </div>
 74 |           </div>
 75 |           <div class="flight-airport">天河国际机场T2</div>
 76 |         </div>
 77 |       </div>
 78 |     </div>
 79 |   </template>
 80 |   <script src="../js/vue.js"></script>
 81 |   <script>
 82 |   var flightCompanies = {
 83 |     '3u': '四川航空',
 84 |     '9c': '春秋航空',
 85 |     'bk': '奥凯航空',
 86 |     'ca': '中国国航',
 87 |     'cz': '南方航空',
 88 |     'fm': '上海航空',
 89 |     'ho': '吉祥航空',
 90 |     'hu': '海南航空',
 91 |     'mu': '东方航空',
 92 |     'zh': '深圳航空'
 93 |   }
 94 |   var subclasses = {
 95 |     Y: '经济舱',
 96 |     C: '商务舱',
 97 |     F: '头等舱'
 98 |   }
 99 | 
100 |   var flightCodeTitle = Vue.extend({
101 |     template: '#flight-code-title-template',
102 |     props: {
103 |       flightCode: {
104 |         required: true,
105 |         type: String,
106 |         validator: function(val) {
107 |           return /^[0-9A-Z]{2}\d+$/.test(val)
108 |         },
109 |         coerce: function(val) {
110 |           return val.toUpperCase()
111 |         }
112 |       }
113 |     },
114 |     computed: {
115 |       flightCompanyCode: function() {
116 |         return this.flightCode.substr(0, 2).toLowerCase()
117 |       },
118 |       flightCompanyName: function() {
119 |         return flightCompanies[this.flightCompanyCode]
120 |       }
121 |     }
122 |   })
123 | 
124 |   var directFlight = Vue.extend({
125 |     template: '#direct-flight-template',
126 |     data: function() {
127 |       return {
128 |         sharedFlightCode: 'FM9345',
129 |         subclasses: subclasses,
130 |         supplier: true,
131 |         overMidNight: true,
132 |         showSupplier: false,
133 |         showOverMidNightDetail: false
134 |       }
135 |     },
136 |     components: {
137 |       flightCodeTitle: flightCodeTitle
138 |     }
139 |   })
140 | 
141 |   var vm = new Vue({
142 |     el: 'body',
143 |     components: {
144 |       directFlight: directFlight
145 |     }
146 |   })
147 |   </script>
148 | </body>
149 | 
150 | </html>
151 | 


--------------------------------------------------------------------------------
/Lesson3-2/ex_2.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <title>组件实战 - 使用 props 传入航班数据</title>
  7 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
  8 |   <link rel="stylesheet" href="../css/lesson3-2.css">
  9 | </head>
 10 | 
 11 | <body>
 12 |   <div class="container">
 13 |     <div class="row">
 14 |       <h2>单程直达机票航班信息展示</h2>
 15 |       <div class="col-md-7"></div>
 16 |       <div class="col-md-5">
 17 |         <direct-flight :flight-code="flightCode"
 18 |                        :shared-flight-code="sharedFlightCode"
 19 |                        :aircraft="aircraft"
 20 |                        :depart-info="departInfo"
 21 |                        :arrive-info="arriveInfo"
 22 |                        :subclass="subclass"
 23 |                        :supplier="supplier"></direct-flight>
 24 |       </div>
 25 |     </div>
 26 |   </div>
 27 |   <template id="flight-code-title-template">
 28 |     <img :src="'../images/flight-companies/' + flightCompanyCode + '.png'" class="flight-image">{{ flightCompanyName }} {{ flightCode }}
 29 |   </template>
 30 |   <template id="direct-flight-template">
 31 |     <div class="text-center flight-info">
 32 |       <div class="supplier" @mouseover="showSupplier=true" @mouseout="showSupplier=false" v-if="supplier">
 33 |         <span class="glyphicon glyphicon-certificate glyphicon-supplier"></span>
 34 |         <span class="supplier-text"></span>
 35 |         <div class="hover-box" v-show="showSupplier">
 36 |           <strong>产品供应商：</strong>
 37 |           <br> {{ supplier.name }}
 38 |           <br> {{ supplier.code }}
 39 |         </div>
 40 |       </div>
 41 |       <h3>
 42 |         10-13 周四 {{ departInfo.city }} <span class="glyphicon glyphicon-arrow-right"></span> {{ arriveInfo.city }}
 43 |       </h3>
 44 |       <div class="flight-title flight-title-single" v-if="!sharedFlightCode">
 45 |         <flight-code-title :flight-code="flightCode"></flight-code-title>
 46 |         {{ aircraft }} {{ subclasses[subclass] }}
 47 |       </div>
 48 |       <div class="flight-title-group" v-else>
 49 |         <div class="flight-title">
 50 |           <flight-code-title :flight-code="flightCode"></flight-code-title>
 51 |           {{ aircraft }} {{ subclasses[subclass] }}
 52 |         </div>
 53 |         <div class="flight-title shared-flight-title">
 54 |           实际乘坐 <flight-code-title :flight-code="sharedFlightCode"></flight-code-title>
 55 |         </div>
 56 |       </div>
 57 |       <div class="row flight-detail">
 58 |         <div class="col-xs-4 text-right flight-depart">
 59 |           <div class="flight-time">22:30</div>
 60 |           <div class="flight-airport">{{ departInfo.airport }}{{ departInfo.terminal }}</div>
 61 |         </div>
 62 |         <div class="col-xs-4 flight-arrow">
 63 |           <div class="cost-time">
 64 |             <span class="glyphicon glyphicon-time"></span> 2h05m
 65 |           </div>
 66 |           <div class="timeline">
 67 |             <span class="glyphicon glyphicon-plane"></span>
 68 |           </div>
 69 |         </div>
 70 |         <div class="col-xs-4 text-left flight-arrive">
 71 |           <div class="flight-time" v-if="!overMidNight">00:35</div>
 72 |           <div class="flight-time-with-overmidnight" v-else>
 73 |             <div class="flight-time">00:35</div>
 74 |             <div class="flight-time-overmidnight" @mouseover="showOverMidNightDetail=true" @mouseout="showOverMidNightDetail=false">
 75 |               <small class="overmidnight-text abbr"></small>
 76 |               <div class="hover-box" v-show="showOverMidNightDetail">
 77 |                 到达时间为第2天，2016年10月14日 00时35分
 78 |               </div>
 79 |             </div>
 80 |           </div>
 81 |           <div class="flight-airport">{{ arriveInfo.airport }}{{ arriveInfo.terminal }}</div>
 82 |         </div>
 83 |       </div>
 84 |     </div>
 85 |   </template>
 86 |   <script src="../js/vue.js"></script>
 87 |   <script>
 88 |   function isValidDate(dateString) {
 89 |     var d = new Date(dateString)
 90 |     return !isNaN(d.valueOf())
 91 |   }
 92 | 
 93 |   var flightCompanies = {
 94 |     '3u': '四川航空',
 95 |     '9c': '春秋航空',
 96 |     'bk': '奥凯航空',
 97 |     'ca': '中国国航',
 98 |     'cz': '南方航空',
 99 |     'fm': '上海航空',
100 |     'ho': '吉祥航空',
101 |     'hu': '海南航空',
102 |     'mu': '东方航空',
103 |     'zh': '深圳航空'
104 |   }
105 |   var subclasses = {
106 |     Y: '经济舱',
107 |     C: '商务舱',
108 |     F: '头等舱'
109 |   }
110 | 
111 |   var flightCodeTitle = Vue.extend({
112 |     template: '#flight-code-title-template',
113 |     props: {
114 |       flightCode: {
115 |         required: true,
116 |         type: String,
117 |         validator: function(val) {
118 |           return /^[0-9A-Z]{2}\d+$/.test(val)
119 |         },
120 |         coerce: function(val) {
121 |           return val.toUpperCase()
122 |         }
123 |       }
124 |     },
125 |     computed: {
126 |       flightCompanyCode: function() {
127 |         return this.flightCode.substr(0, 2).toLowerCase()
128 |       },
129 |       flightCompanyName: function() {
130 |         return flightCompanies[this.flightCompanyCode]
131 |       }
132 |     }
133 |   })
134 | 
135 |   var directFlight = Vue.extend({
136 |     template: '#direct-flight-template',
137 |     data: function() {
138 |       return {
139 |         subclasses: subclasses,
140 |         overMidNight: true,
141 |         showSupplier: false,
142 |         showOverMidNightDetail: false
143 |       }
144 |     },
145 |     props: {
146 |       flightCode: {
147 |         required: true,
148 |         type: String,
149 |         validator: function(val) {
150 |           return /^[0-9A-Z]{2}\d+$/.test(val)
151 |         },
152 |         coerce: function(val) {
153 |           return val.toUpperCase()
154 |         }
155 |       },
156 |       sharedFlightCode: {
157 |         required: false,
158 |         type: String,
159 |         validator: function(val) {
160 |           return /^[0-9A-Z]{2}\d+$/.test(val)
161 |         },
162 |         coerce: function(val) {
163 |           return val && val.toUpperCase()
164 |         }
165 |       },
166 |       aircraft: String,
167 |       departInfo: {
168 |         required: true,
169 |         type: Object,
170 |         validator: function (val) {
171 |           return isValidDate(val.time)
172 |         }
173 |       },
174 |       arriveInfo: {
175 |         required: true,
176 |         type: Object,
177 |         validator: function (val) {
178 |           return isValidDate(val.time)
179 |         }
180 |       },
181 |       subclass: {
182 |         requred: true,
183 |         type: String,
184 |         validator: function (val) {
185 |           return ['Y', 'C', 'F'].indexOf(val) > -1
186 |         }
187 |       },
188 |       supplier: Object
189 |     },
190 |     components: {
191 |       flightCodeTitle: flightCodeTitle
192 |     }
193 |   })
194 | 
195 |   var vm = new Vue({
196 |     el: 'body',
197 |     data: {
198 |       flightCode: 'MU9345',
199 |       sharedFlightCode: 'FM9345',
200 |       aircraft: '波音737-800',
201 |       departInfo: {
202 |         city: '上海',
203 |         airport: '浦东国际机场',
204 |         terminal: 'T2',
205 |         time: '2016-10-13 22:30'
206 |       },
207 |       arriveInfo: {
208 |         city: '武汉',
209 |         airport: '天河国际机场',
210 |         terminal: 'T2',
211 |         time: '2016-10-14 00:35'
212 |       },
213 |       subclass: 'Y',
214 |       supplier: {
215 |         name: '上海华程西南旅行社有限公司',
216 |         code: '08309722'
217 |       }
218 |     },
219 |     components: {
220 |       directFlight: directFlight
221 |     }
222 |   })
223 |   </script>
224 | </body>
225 | 
226 | </html>
227 | 


--------------------------------------------------------------------------------
/Lesson3-2/ex_3.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <title>组件实战 - 添加计算属性</title>
  7 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
  8 |   <link rel="stylesheet" href="../css/lesson3-2.css">
  9 | </head>
 10 | 
 11 | <body>
 12 |   <div class="container">
 13 |     <div class="row">
 14 |       <h2>单程直达机票航班信息展示</h2>
 15 |       <div class="col-md-7"></div>
 16 |       <div class="col-md-5">
 17 |         <direct-flight :flight-code="flightCode"
 18 |                        :shared-flight-code="sharedFlightCode"
 19 |                        :aircraft="aircraft"
 20 |                        :depart-info="departInfo"
 21 |                        :arrive-info="arriveInfo"
 22 |                        :subclass="subclass"
 23 |                        :supplier="supplier"></direct-flight>
 24 |       </div>
 25 |     </div>
 26 |   </div>
 27 |   <template id="flight-code-title-template">
 28 |     <img :src="'../images/flight-companies/' + flightCompanyCode + '.png'" class="flight-image">{{ flightCompanyName }} {{ flightCode }}
 29 |   </template>
 30 |   <template id="direct-flight-template">
 31 |     <div class="text-center flight-info">
 32 |       <div class="supplier" @mouseover="showSupplier=true" @mouseout="showSupplier=false" v-if="supplier">
 33 |         <span class="glyphicon glyphicon-certificate glyphicon-supplier"></span>
 34 |         <span class="supplier-text"></span>
 35 |         <div class="hover-box" v-show="showSupplier">
 36 |           <strong>产品供应商：</strong>
 37 |           <br> {{ supplier.name }}
 38 |           <br> {{ supplier.code }}
 39 |         </div>
 40 |       </div>
 41 |       <h3>
 42 |         {{ departDate }} {{ departInfo.city }} <span class="glyphicon glyphicon-arrow-right"></span> {{ arriveInfo.city }}
 43 |       </h3>
 44 |       <div class="flight-title flight-title-single" v-if="!sharedFlightCode">
 45 |         <flight-code-title :flight-code="flightCode"></flight-code-title>
 46 |         {{ aircraft }} {{ subclasses[subclass] }}
 47 |       </div>
 48 |       <div class="flight-title-group" v-else>
 49 |         <div class="flight-title">
 50 |           <flight-code-title :flight-code="flightCode"></flight-code-title>
 51 |           {{ aircraft }} {{ subclasses[subclass] }}
 52 |         </div>
 53 |         <div class="flight-title shared-flight-title">
 54 |           实际乘坐 <flight-code-title :flight-code="sharedFlightCode"></flight-code-title>
 55 |         </div>
 56 |       </div>
 57 |       <div class="row flight-detail">
 58 |         <div class="col-xs-4 text-right flight-depart">
 59 |           <div class="flight-time">{{ departTime }}</div>
 60 |           <div class="flight-airport">{{ departInfo.airport }}{{ departInfo.terminal }}</div>
 61 |         </div>
 62 |         <div class="col-xs-4 flight-arrow">
 63 |           <div class="cost-time">
 64 |             <span class="glyphicon glyphicon-time"></span> {{ costTime }}
 65 |           </div>
 66 |           <div class="timeline">
 67 |             <span class="glyphicon glyphicon-plane"></span>
 68 |           </div>
 69 |         </div>
 70 |         <div class="col-xs-4 text-left flight-arrive">
 71 |           <div class="flight-time" v-if="!overMidNight">{{ arriveTime }}</div>
 72 |           <div class="flight-time-with-overmidnight" v-else>
 73 |             <div class="flight-time">{{ arriveTime }}</div>
 74 |             <div class="flight-time-overmidnight" @mouseover="showOverMidNightDetail=true" @mouseout="showOverMidNightDetail=false">
 75 |               <small class="overmidnight-text abbr"></small>
 76 |               <div class="hover-box" v-show="showOverMidNightDetail">
 77 |                 到达时间为第2天，{{ arriveDateTimeStr }}
 78 |               </div>
 79 |             </div>
 80 |           </div>
 81 |           <div class="flight-airport">{{ arriveInfo.airport }}{{ arriveInfo.terminal }}</div>
 82 |         </div>
 83 |       </div>
 84 |     </div>
 85 |   </template>
 86 |   <script src="../js/vue.js"></script>
 87 |   <script>
 88 |   function isValidDate(dateString) {
 89 |     var d = new Date(dateString)
 90 |     return !isNaN(d.valueOf())
 91 |   }
 92 | 
 93 |   var flightCompanies = {
 94 |     '3u': '四川航空',
 95 |     '9c': '春秋航空',
 96 |     'bk': '奥凯航空',
 97 |     'ca': '中国国航',
 98 |     'cz': '南方航空',
 99 |     'fm': '上海航空',
100 |     'ho': '吉祥航空',
101 |     'hu': '海南航空',
102 |     'mu': '东方航空',
103 |     'zh': '深圳航空'
104 |   }
105 |   var subclasses = {
106 |     Y: '经济舱',
107 |     C: '商务舱',
108 |     F: '头等舱'
109 |   }
110 | 
111 |   var weekdays = '周日,周一,周二,周三,周四,周五,周六'.split(',')
112 | 
113 |   function addLeadingZero(val) {
114 |     return (100 + val).toString().substr(1)
115 |   }
116 | 
117 |   function getTime(dateTime) {
118 |     return addLeadingZero(dateTime.getHours()) + ':' + addLeadingZero(dateTime.getMinutes())
119 |   }
120 | 
121 |   var flightCodeTitle = Vue.extend({
122 |     template: '#flight-code-title-template',
123 |     props: {
124 |       flightCode: {
125 |         required: true,
126 |         type: String,
127 |         validator: function(val) {
128 |           return /^[0-9A-Z]{2}\d+$/.test(val)
129 |         },
130 |         coerce: function(val) {
131 |           return val.toUpperCase()
132 |         }
133 |       }
134 |     },
135 |     computed: {
136 |       flightCompanyCode: function() {
137 |         return this.flightCode.substr(0, 2).toLowerCase()
138 |       },
139 |       flightCompanyName: function() {
140 |         return flightCompanies[this.flightCompanyCode]
141 |       }
142 |     }
143 |   })
144 | 
145 |   var directFlight = Vue.extend({
146 |     template: '#direct-flight-template',
147 |     data: function() {
148 |       return {
149 |         subclasses: subclasses,
150 |         showSupplier: false,
151 |         showOverMidNightDetail: false
152 |       }
153 |     },
154 |     props: {
155 |       flightCode: {
156 |         required: true,
157 |         type: String,
158 |         validator: function(val) {
159 |           return /^[0-9A-Z]{2}\d+$/.test(val)
160 |         },
161 |         coerce: function(val) {
162 |           return val.toUpperCase()
163 |         }
164 |       },
165 |       sharedFlightCode: {
166 |         required: false,
167 |         type: String,
168 |         validator: function(val) {
169 |           return /^[0-9A-Z]{2}\d+$/.test(val)
170 |         },
171 |         coerce: function(val) {
172 |           return val && val.toUpperCase()
173 |         }
174 |       },
175 |       aircraft: String,
176 |       departInfo: {
177 |         required: true,
178 |         type: Object,
179 |         validator: function (val) {
180 |           return isValidDate(val.time)
181 |         }
182 |       },
183 |       arriveInfo: {
184 |         required: true,
185 |         type: Object,
186 |         validator: function (val) {
187 |           return isValidDate(val.time)
188 |         }
189 |       },
190 |       subclass: {
191 |         requred: true,
192 |         type: String,
193 |         validator: function (val) {
194 |           return ['Y', 'C', 'F'].indexOf(val) > -1
195 |         }
196 |       },
197 |       supplier: Object
198 |     },
199 |     computed: {
200 |       departDateTime: function() {
201 |         return new Date(this.departInfo.time)
202 |       },
203 |       departDate: function() {
204 |         return this.departDateTime.getMonth() + 1 + '-' + this.departDateTime.getDate() + ' ' + weekdays[this.departDateTime.getDay()]
205 |       },
206 |       departTime: function() {
207 |         return getTime(this.departDateTime)
208 |       },
209 |       arriveDateTime: function() {
210 |         return new Date(this.arriveInfo.time)
211 |       },
212 |       arriveTime: function() {
213 |         return getTime(this.arriveDateTime)
214 |       },
215 |       costTime: function() {
216 |         var costTime = (this.arriveDateTime - this.departDateTime) / 1000
217 |         var minutes = costTime / 60
218 |         var hours = Math.floor(minutes/60)
219 |         var minutes = minutes % 60
220 |         return hours + 'h' + addLeadingZero(minutes) + 'm'
221 |       },
222 |       overMidNight: function() {
223 |         return this.departDateTime.getDate() !== this.arriveDateTime.getDate()
224 |       },
225 |       arriveDateTimeStr: function () {
226 |         var dateTime = this.arriveDateTime
227 |         return dateTime.getFullYear() + '年' + (dateTime.getMonth() + 1) + '月' + dateTime.getDate() + '日 ' + this.arriveTime.replace(':', '时') + '分'
228 |       }
229 |     },
230 |     components: {
231 |       flightCodeTitle: flightCodeTitle
232 |     }
233 |   })
234 | 
235 |   var vm = new Vue({
236 |     el: 'body',
237 |     data: {
238 |       flightCode: 'MU9345',
239 |       sharedFlightCode: 'FM9345',
240 |       aircraft: '波音737-800',
241 |       departInfo: {
242 |         city: '上海',
243 |         airport: '浦东国际机场',
244 |         terminal: 'T2',
245 |         time: '2016-10-13 22:30'
246 |       },
247 |       arriveInfo: {
248 |         city: '武汉',
249 |         airport: '天河国际机场',
250 |         terminal: 'T2',
251 |         time: '2016-10-14 00:35'
252 |       },
253 |       subclass: 'Y',
254 |       supplier: {
255 |         name: '上海华程西南旅行社有限公司',
256 |         code: '08309722'
257 |       }
258 |     },
259 |     components: {
260 |       directFlight: directFlight
261 |     }
262 |   })
263 |   </script>
264 | </body>
265 | 
266 | </html>
267 | 


--------------------------------------------------------------------------------
/Lesson3-2/ex_4.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <title>组件实战 - 使用组件</title>
  7 |   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
  8 |   <link rel="stylesheet" href="../css/lesson3-2.css">
  9 | </head>
 10 | 
 11 | <body>
 12 |   <div class="container">
 13 |     <div class="row">
 14 |       <h2>单程直达机票航班信息展示</h2>
 15 |       <div class="col-md-7">
 16 |         <h3>可选航班数据设置</h3>
 17 |         <form class="form-horizontal">
 18 |           <div class="form-group">
 19 |             <div class="col-sm-2 control-label">
 20 |               供应商
 21 |             </div>
 22 |             <div class="col-sm-4 checkbox">
 23 |               <label>
 24 |                 <input type="checkbox" :true-value="{name: '上海华程西南旅行社有限公司', code: '08309722'}" :false-value="null" v-model="supplier"> 华程西南
 25 |               </label>
 26 |             </div>
 27 |           </div>
 28 |           <div class="form-group">
 29 |             <div class="col-sm-2 control-label">
 30 |               共享航班
 31 |             </div>
 32 |             <div class="col-sm-4">
 33 |               <select class="form-control" v-model="sharedFlightCode">
 34 |                 <option :value="undefined">非共享</option>
 35 |                 <option value="3U9345">四川航空 3U9345</option>
 36 |                 <option value="9C9345">春秋航空 9C9345</option>
 37 |                 <option value="BK9345">奥凯航空 BK9345</option>
 38 |                 <option value="CA9345">中国国航 CA9345</option>
 39 |                 <option value="CZ9345">南方航空 CZ9345</option>
 40 |                 <option value="FM9345">上海航空 FM9345</option>
 41 |                 <option value="HO9345">吉祥航空 HO9345</option>
 42 |                 <option value="HU9345">海南航空 HU9345</option>
 43 |                 <option value="ZH9345">深圳航空 ZH9345</option>
 44 |               </select>
 45 |             </div>
 46 |           </div>
 47 |           <div class="form-group">
 48 |             <label for="deaprtTime" class="col-sm-2 control-label">
 49 |               起飞时间
 50 |             </label>
 51 |             <div class="col-sm-4">
 52 |               <input id="deaprtTime" class="form-control" type="text" v-model="departInfo.time" lazy>
 53 |             </div>
 54 |           </div>
 55 |           <div class="form-group">
 56 |             <label for="arriveTime" class="col-sm-2 control-label">
 57 |               抵达时间
 58 |             </label>
 59 |             <div class="col-sm-4">
 60 |               <input id="arriveTime" class="form-control" type="text" v-model="arriveInfo.time" lazy>
 61 |             </div>
 62 |           </div>
 63 |         </form>
 64 |       </div>
 65 |       <div class="col-md-5">
 66 |         <direct-flight :flight-code="flightCode"
 67 |                        :shared-flight-code="sharedFlightCode"
 68 |                        :aircraft="aircraft"
 69 |                        :depart-info="departInfo"
 70 |                        :arrive-info="arriveInfo"
 71 |                        :subclass="subclass"
 72 |                        :supplier="supplier"></direct-flight>
 73 |       </div>
 74 |     </div>
 75 |   </div>
 76 |   <template id="flight-code-title-template">
 77 |     <img :src="'../images/flight-companies/' + flightCompanyCode + '.png'" class="flight-image">{{ flightCompanyName }} {{ flightCode }}
 78 |   </template>
 79 |   <template id="direct-flight-template">
 80 |     <div class="text-center flight-info">
 81 |       <div class="supplier" @mouseover="showSupplier=true" @mouseout="showSupplier=false" v-if="supplier">
 82 |         <span class="glyphicon glyphicon-certificate glyphicon-supplier"></span>
 83 |         <span class="supplier-text"></span>
 84 |         <div class="hover-box" v-show="showSupplier">
 85 |           <strong>产品供应商：</strong>
 86 |           <br> {{ supplier.name }}
 87 |           <br> {{ supplier.code }}
 88 |         </div>
 89 |       </div>
 90 |       <h3>
 91 |         {{ departDate }} {{ departInfo.city }} <span class="glyphicon glyphicon-arrow-right"></span> {{ arriveInfo.city }}
 92 |       </h3>
 93 |       <div class="flight-title flight-title-single" v-if="!sharedFlightCode">
 94 |         <flight-code-title :flight-code="flightCode"></flight-code-title>
 95 |         {{ aircraft }} {{ subclasses[subclass] }}
 96 |       </div>
 97 |       <div class="flight-title-group" v-else>
 98 |         <div class="flight-title">
 99 |           <flight-code-title :flight-code="flightCode"></flight-code-title>
100 |           {{ aircraft }} {{ subclasses[subclass] }}
101 |         </div>
102 |         <div class="flight-title shared-flight-title">
103 |           实际乘坐 <flight-code-title :flight-code="sharedFlightCode"></flight-code-title>
104 |         </div>
105 |       </div>
106 |       <div class="row flight-detail">
107 |         <div class="col-xs-4 text-right flight-depart">
108 |           <div class="flight-time">{{ departTime }}</div>
109 |           <div class="flight-airport">{{ departInfo.airport }}{{ departInfo.terminal }}</div>
110 |         </div>
111 |         <div class="col-xs-4 flight-arrow">
112 |           <div class="cost-time">
113 |             <span class="glyphicon glyphicon-time"></span> {{ costTime }}
114 |           </div>
115 |           <div class="timeline">
116 |             <span class="glyphicon glyphicon-plane"></span>
117 |           </div>
118 |         </div>
119 |         <div class="col-xs-4 text-left flight-arrive">
120 |           <div class="flight-time" v-if="!overMidNight">{{ arriveTime }}</div>
121 |           <div class="flight-time-with-overmidnight" v-else>
122 |             <div class="flight-time">{{ arriveTime }}</div>
123 |             <div class="flight-time-overmidnight" @mouseover="showOverMidNightDetail=true" @mouseout="showOverMidNightDetail=false">
124 |               <small class="overmidnight-text abbr"></small>
125 |               <div class="hover-box" v-show="showOverMidNightDetail">
126 |                 到达时间为第2天，{{ arriveDateTimeStr }}
127 |               </div>
128 |             </div>
129 |           </div>
130 |           <div class="flight-airport">{{ arriveInfo.airport }}{{ arriveInfo.terminal }}</div>
131 |         </div>
132 |       </div>
133 |     </div>
134 |   </template>
135 |   <script src="../js/vue.js"></script>
136 |   <script>
137 |   function isValidDate(dateString) {
138 |     var d = new Date(dateString)
139 |     return !isNaN(d.valueOf())
140 |   }
141 | 
142 |   var flightCompanies = {
143 |     '3u': '四川航空',
144 |     '9c': '春秋航空',
145 |     'bk': '奥凯航空',
146 |     'ca': '中国国航',
147 |     'cz': '南方航空',
148 |     'fm': '上海航空',
149 |     'ho': '吉祥航空',
150 |     'hu': '海南航空',
151 |     'mu': '东方航空',
152 |     'zh': '深圳航空'
153 |   }
154 |   var subclasses = {
155 |     Y: '经济舱',
156 |     C: '商务舱',
157 |     F: '头等舱'
158 |   }
159 | 
160 |   var weekdays = '周日,周一,周二,周三,周四,周五,周六'.split(',')
161 | 
162 |   function addLeadingZero(val) {
163 |     return (100 + val).toString().substr(1)
164 |   }
165 | 
166 |   function getTime(dateTime) {
167 |     return addLeadingZero(dateTime.getHours()) + ':' + addLeadingZero(dateTime.getMinutes())
168 |   }
169 | 
170 |   var flightCodeTitle = Vue.extend({
171 |     template: '#flight-code-title-template',
172 |     props: {
173 |       flightCode: {
174 |         required: true,
175 |         type: String,
176 |         validator: function(val) {
177 |           return /^[0-9A-Z]{2}\d+$/.test(val)
178 |         },
179 |         coerce: function(val) {
180 |           return val.toUpperCase()
181 |         }
182 |       }
183 |     },
184 |     computed: {
185 |       flightCompanyCode: function() {
186 |         return this.flightCode.substr(0, 2).toLowerCase()
187 |       },
188 |       flightCompanyName: function() {
189 |         return flightCompanies[this.flightCompanyCode]
190 |       }
191 |     }
192 |   })
193 | 
194 |   var directFlight = Vue.extend({
195 |     template: '#direct-flight-template',
196 |     data: function() {
197 |       return {
198 |         subclasses: subclasses,
199 |         showSupplier: false,
200 |         showOverMidNightDetail: false
201 |       }
202 |     },
203 |     props: {
204 |       flightCode: {
205 |         required: true,
206 |         type: String,
207 |         validator: function(val) {
208 |           return /^[0-9A-Z]{2}\d+$/.test(val)
209 |         },
210 |         coerce: function(val) {
211 |           return val.toUpperCase()
212 |         }
213 |       },
214 |       sharedFlightCode: {
215 |         required: false,
216 |         type: String,
217 |         validator: function(val) {
218 |           return /^[0-9A-Z]{2}\d+$/.test(val)
219 |         },
220 |         coerce: function(val) {
221 |           return val && val.toUpperCase()
222 |         }
223 |       },
224 |       aircraft: String,
225 |       departInfo: {
226 |         required: true,
227 |         type: Object,
228 |         validator: function (val) {
229 |           return isValidDate(val.time)
230 |         }
231 |       },
232 |       arriveInfo: {
233 |         required: true,
234 |         type: Object,
235 |         validator: function (val) {
236 |           return isValidDate(val.time)
237 |         }
238 |       },
239 |       subclass: {
240 |         requred: true,
241 |         type: String,
242 |         validator: function (val) {
243 |           return ['Y', 'C', 'F'].indexOf(val) > -1
244 |         }
245 |       },
246 |       supplier: Object
247 |     },
248 |     computed: {
249 |       departDateTime: function() {
250 |         return new Date(this.departInfo.time)
251 |       },
252 |       departDate: function() {
253 |         return this.departDateTime.getMonth() + 1 + '-' + this.departDateTime.getDate() + ' ' + weekdays[this.departDateTime.getDay()]
254 |       },
255 |       departTime: function() {
256 |         return getTime(this.departDateTime)
257 |       },
258 |       arriveDateTime: function() {
259 |         return new Date(this.arriveInfo.time)
260 |       },
261 |       arriveTime: function() {
262 |         return getTime(this.arriveDateTime)
263 |       },
264 |       costTime: function() {
265 |         var costTime = (this.arriveDateTime - this.departDateTime) / 1000
266 |         var minutes = costTime / 60
267 |         var hours = Math.floor(minutes/60)
268 |         var minutes = minutes % 60
269 |         return hours + 'h' + addLeadingZero(minutes) + 'm'
270 |       },
271 |       overMidNight: function() {
272 |         return this.departDateTime.getDate() !== this.arriveDateTime.getDate()
273 |       },
274 |       arriveDateTimeStr: function () {
275 |         var dateTime = this.arriveDateTime
276 |         return dateTime.getFullYear() + '年' + (dateTime.getMonth() + 1) + '月' + dateTime.getDate() + '日 ' + this.arriveTime.replace(':', '时') + '分'
277 |       }
278 |     },
279 |     components: {
280 |       flightCodeTitle: flightCodeTitle
281 |     }
282 |   })
283 | 
284 |   var vm = new Vue({
285 |     el: 'body',
286 |     data: {
287 |       flightCode: 'MU9345',
288 |       sharedFlightCode: 'FM9345',
289 |       aircraft: '波音737-800',
290 |       departInfo: {
291 |         city: '上海',
292 |         airport: '浦东国际机场',
293 |         terminal: 'T2',
294 |         time: '2016-10-13 22:30'
295 |       },
296 |       arriveInfo: {
297 |         city: '武汉',
298 |         airport: '天河国际机场',
299 |         terminal: 'T2',
300 |         time: '2016-10-14 00:35'
301 |       },
302 |       subclass: 'Y',
303 |       supplier: {
304 |         name: '上海华程西南旅行社有限公司',
305 |         code: '08309722'
306 |       }
307 |     },
308 |     components: {
309 |       directFlight: directFlight
310 |     }
311 |   })
312 |   </script>
313 | </body>
314 | 
315 | </html>
316 | 


--------------------------------------------------------------------------------