├── vue10
    └── demo
    │   ├── src
    │       ├── style.css
    │       ├── images
    │       │   └── image.png
    │       ├── title.vue
    │       ├── button.vue
    │       ├── app.vue
    │       └── index.js
    │   ├── .babelrc
    │   ├── index.html
    │   ├── index.ejs
    │   ├── package.json
    │   ├── webpack.prod.config.js
    │   └── webpack.config.js
├── vue11
    ├── router
    │   ├── src
    │   │   ├── style.css
    │   │   ├── images
    │   │   │   └── image.png
    │   │   ├── views
    │   │   │   ├── index.vue
    │   │   │   ├── user.vue
    │   │   │   └── about.vue
    │   │   ├── app.vue
    │   │   └── index.js
    │   ├── .babelrc
    │   ├── index.html
    │   ├── index.ejs
    │   ├── webpack.prod.config.js
    │   ├── package.json
    │   └── webpack.config.js
    ├── vue-bus
    │   ├── src
    │   │   ├── style.css
    │   │   ├── images
    │   │   │   └── image.png
    │   │   ├── app.vue
    │   │   ├── views
    │   │   │   ├── user.vue
    │   │   │   ├── about.vue
    │   │   │   ├── Counter.vue
    │   │   │   └── index.vue
    │   │   ├── moduleA.js
    │   │   ├── vue-bus.js
    │   │   └── index.js
    │   ├── .babelrc
    │   ├── index.html
    │   ├── index.ejs
    │   ├── webpack.prod.config.js
    │   ├── package.json
    │   └── webpack.config.js
    └── vuex
    │   ├── src
    │       ├── style.css
    │       ├── images
    │       │   └── image.png
    │       ├── app.vue
    │       ├── views
    │       │   ├── user.vue
    │       │   ├── about.vue
    │       │   └── index.vue
    │       ├── moduleA.js
    │       └── index.js
    │   ├── .babelrc
    │   ├── index.html
    │   ├── index.ejs
    │   ├── webpack.prod.config.js
    │   ├── package.json
    │   └── webpack.config.js
├── vue07
    ├── input_box
    │   ├── index.js
    │   ├── input-number.html
    │   └── input-number.js
    ├── vue7-02.html
    ├── vue7-26.html
    ├── vue7-07.html
    ├── vue7-04.html
    ├── label_page
    │   ├── pane.js
    │   ├── style.css
    │   ├── tabs.html
    │   └── tabs.js
    ├── vue7-01.html
    ├── vue7-09.html
    ├── vue7-11.html
    ├── vue7-03.html
    ├── vue7-05.html
    ├── vue7-06.html
    ├── vue7-18.html
    ├── vue7-10.html
    ├── vue7-23.html
    ├── vue7-29.html
    ├── vue7-27.html
    ├── vue7-20.html
    ├── vue7-08.html
    ├── vue7-24.html
    ├── vue7-30.html
    ├── vue7-16.html
    ├── vue7-17.html
    ├── vue7-25.html
    ├── vue7-19.html
    ├── vue7-14.html
    ├── vue7-21.html
    ├── vue7-15.html
    ├── vue7-28.html
    ├── vue7-22.html
    ├── vue7-13.html
    └── vue7-12.html
├── vue13
    ├── daily
    │   ├── .babelrc
    │   ├── src
    │   │   ├── images
    │   │   │   └── image.png
    │   │   ├── index.js
    │   │   ├── title.vue
    │   │   ├── components
    │   │   │   ├── item.vue
    │   │   │   └── daily-article.vue
    │   │   ├── button.vue
    │   │   ├── libs
    │   │   │   └── util.js
    │   │   ├── directives
    │   │   │   └── time.js
    │   │   ├── style.css
    │   │   └── app.vue
    │   ├── index.html
    │   ├── index.ejs
    │   ├── webpack.prod.config.js
    │   ├── package.json
    │   ├── proxy.js
    │   └── webpack.config.js
    └── README13.md
├── vue14
    └── shopping
    │   ├── .babelrc
    │   ├── src
    │       ├── images
    │       │   └── image.png
    │       ├── views
    │       │   ├── user.vue
    │       │   ├── about.vue
    │       │   ├── index.vue
    │       │   └── product.vue
    │       ├── router.js
    │       ├── app.vue
    │       ├── style.css
    │       ├── components
    │       │   └── product.vue
    │       ├── product.js
    │       └── index.js
    │   ├── index.html
    │   ├── index.ejs
    │   ├── webpack.prod.config.js
    │   ├── package.json
    │   └── webpack.config.js
├── vue08
    ├── v-time
    │   ├── index.js
    │   ├── index.html
    │   └── time.js
    ├── menu
    │   ├── index.js
    │   ├── index.html
    │   ├── style.css
    │   └── clickoutside.js
    └── vue8-01.html
├── vue05
    ├── shopping_trolley
    │   ├── shopping.css
    │   ├── shopping.js
    │   └── shopping.html
    ├── vue5-01.html
    ├── vue5-02.html
    ├── vue5-05.html
    ├── vue5-08.html
    ├── vue5-07.html
    ├── vue5-03.html
    ├── vue5-06.html
    ├── vue5-09.html
    ├── vue5-12.html
    ├── vue5-04.html
    ├── vue5-10.html
    └── vue5-11.html
├── vue02
    ├── vue2-07.html
    ├── vue2-10.html
    ├── vue2-01.html
    ├── vue2-04.html
    ├── vue2-08.html
    ├── vue2-05.html
    ├── vue2-02.html
    ├── vue2-03.html
    ├── vue2-09.html
    └── vue2-06.html
├── vue04
    ├── vue4-01.html
    ├── vue4-04.html
    ├── vue4-06.html
    ├── vue4-09.html
    ├── vue4-08.html
    ├── vue4-02.html
    ├── vue4-10.html
    ├── vue4-05.html
    ├── vue4-07.html
    └── vue4-03.html
├── vue01
    ├── vue1-01.html
    └── vue1-02.html
├── vue09
    ├── sort_form
    │   ├── index.html
    │   ├── style.css
    │   ├── index.js
    │   └── table.js
    ├── vue9-03.html
    ├── vue9-12.html
    ├── message_list
    │   ├── index.js
    │   ├── index.html
    │   ├── list.js
    │   ├── input.js
    │   └── style.css
    ├── vue9-08.html
    ├── vue9-07.html
    ├── vue9-02.html
    ├── vue9-04.html
    ├── vue9-09.html
    ├── vue9-10.html
    ├── vue9-05.html
    ├── vue9-11.html
    ├── vue9-01.html
    ├── vue9-06.html
    └── vue9-13.html
├── vue03
    ├── vue3-01.html
    ├── vue3-04.html
    ├── vue3-03.html
    └── vue3-02.html
├── vue15
    └── README15.md
├── vue06
    ├── vue6-03.html
    ├── vue6-01.html
    ├── vue6-06.html
    ├── vue6-08.html
    ├── vue6-05.html
    ├── vue6-02.html
    ├── vue6-07.html
    └── vue6-04.html
├── vue12
    └── README12.md
└── README.md


/vue10/demo/src/style.css:
--------------------------------------------------------------------------------
1 | #app{
2 | 	font-size: 24px;
3 | 	color:#f50;
4 | }
5 | 


--------------------------------------------------------------------------------
/vue11/router/src/style.css:
--------------------------------------------------------------------------------
1 | #app{
2 | 	font-size: 24px;
3 | 	color:#f50;
4 | }
5 | 


--------------------------------------------------------------------------------
/vue11/vue-bus/src/style.css:
--------------------------------------------------------------------------------
1 | #app{
2 | 	font-size: 24px;
3 | 	color:#f50;
4 | }
5 | 


--------------------------------------------------------------------------------
/vue11/vuex/src/style.css:
--------------------------------------------------------------------------------
1 | #app{
2 | 	font-size: 24px;
3 | 	color:#f50;
4 | }
5 | 


--------------------------------------------------------------------------------
/vue07/input_box/index.js:
--------------------------------------------------------------------------------
1 | var app = new Vue({
2 | 	el:'#app',
3 | 	data:{
4 | 		value:5
5 | 	}
6 | })


--------------------------------------------------------------------------------
/vue10/demo/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"presets":["env"], 
3 | 	"plugins":["transform-runtime"],
4 | 	"comments":false
5 | }


--------------------------------------------------------------------------------
/vue11/router/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"presets":["env"], 
3 | 	"plugins":["transform-runtime"],
4 | 	"comments":false
5 | }


--------------------------------------------------------------------------------
/vue11/vuex/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"presets":["env"], 
3 | 	"plugins":["transform-runtime"],
4 | 	"comments":false
5 | }


--------------------------------------------------------------------------------
/vue13/daily/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"presets":["env"], 
3 | 	"plugins":["transform-runtime"],
4 | 	"comments":false
5 | }


--------------------------------------------------------------------------------
/vue11/vue-bus/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"presets":["env"], 
3 | 	"plugins":["transform-runtime"],
4 | 	"comments":false
5 | }


--------------------------------------------------------------------------------
/vue14/shopping/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"presets":["env"], 
3 | 	"plugins":["transform-runtime"],
4 | 	"comments":false
5 | }


--------------------------------------------------------------------------------
/vue10/demo/src/images/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zyf711/vue-combat-book/HEAD/vue10/demo/src/images/image.png


--------------------------------------------------------------------------------
/vue11/vuex/src/images/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zyf711/vue-combat-book/HEAD/vue11/vuex/src/images/image.png


--------------------------------------------------------------------------------
/vue13/daily/src/images/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zyf711/vue-combat-book/HEAD/vue13/daily/src/images/image.png


--------------------------------------------------------------------------------
/vue11/router/src/images/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zyf711/vue-combat-book/HEAD/vue11/router/src/images/image.png


--------------------------------------------------------------------------------
/vue11/router/src/views/index.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 	<div>首页</div>
3 | </template>
4 | <script>
5 | 	export default{}
6 | </script>


--------------------------------------------------------------------------------
/vue11/vue-bus/src/images/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zyf711/vue-combat-book/HEAD/vue11/vue-bus/src/images/image.png


--------------------------------------------------------------------------------
/vue14/shopping/src/images/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zyf711/vue-combat-book/HEAD/vue14/shopping/src/images/image.png


--------------------------------------------------------------------------------
/vue08/v-time/index.js:
--------------------------------------------------------------------------------
1 | var app = new Vue({
2 | 	el:'#app',
3 | 	data:{
4 | 		timeNow : (new Date()).getTime(),
5 | 		timeBefore : 1488930695721
6 | 	}
7 | })


--------------------------------------------------------------------------------
/vue08/menu/index.js:
--------------------------------------------------------------------------------
 1 | var app = new Vue({
 2 | 	el:'#app',
 3 | 	data:{
 4 | 		show:false
 5 | 	},
 6 | 	methods:{
 7 | 		handleClose:function(){
 8 | 			this.show = false
 9 | 		}
10 | 	}
11 | })


--------------------------------------------------------------------------------
/vue13/daily/src/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import App from './app.vue';
 3 | import './style.css';
 4 | 
 5 | new Vue({
 6 |     el: '#app',
 7 |     render: h => {
 8 |         return h(App);
 9 |     }
10 | });
11 | 


--------------------------------------------------------------------------------
/vue14/shopping/src/views/user.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>{{ $route.params.id }}</div>
 3 | </template>
 4 | 
 5 | <script>
 6 | 	export default{
 7 | 		mounted(){
 8 | 			console.log(this.$route.params.id);
 9 | 		}
10 | 	}
11 | </script>


--------------------------------------------------------------------------------
/vue11/vuex/src/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<router-view></router-view>
 4 | 	</div>
 5 | 	
 6 | </template>
 7 | <script>
 8 | 	export default{
 9 | 
10 | 	}
11 | </script>
12 | 
13 | <style scoped>
14 | 	div{
15 | 		color:red;
16 | 		font-size: 24px;
17 | 	}
18 | </style>


--------------------------------------------------------------------------------
/vue11/router/src/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<router-view></router-view>
 4 | 	</div>
 5 | 	
 6 | </template>
 7 | <script>
 8 | 	export default{
 9 | 
10 | 	}
11 | </script>
12 | 
13 | <style scoped>
14 | 	div{
15 | 		color:red;
16 | 		font-size: 24px;
17 | 	}
18 | </style>


--------------------------------------------------------------------------------
/vue11/vue-bus/src/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<router-view></router-view>
 4 | 	</div>
 5 | 	
 6 | </template>
 7 | <script>
 8 | 	export default{
 9 | 
10 | 	}
11 | </script>
12 | 
13 | <style scoped>
14 | 	div{
15 | 		color:red;
16 | 		font-size: 24px;
17 | 	}
18 | </style>


--------------------------------------------------------------------------------
/vue11/router/src/views/user.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="abc">{{ $route.params.id }}</div>
 3 | </template>
 4 | <script>
 5 | 	export default{
 6 | 		mounted(){
 7 | 			console.log(this.$route)
 8 | 		}
 9 | 	}
10 | </script>
11 | <style scoped>
12 | 	.abc{
13 | 		color:green;
14 | 		font-size: 24px;
15 | 	}
16 | </style>


--------------------------------------------------------------------------------
/vue11/vuex/src/views/user.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="abc">{{ $route.params.id }}</div>
 3 | </template>
 4 | <script>
 5 | 	export default{
 6 | 		mounted(){
 7 | 			console.log(this.$route)
 8 | 		}
 9 | 	}
10 | </script>
11 | <style scoped>
12 | 	.abc{
13 | 		color:green;
14 | 		font-size: 24px;
15 | 	}
16 | </style>


--------------------------------------------------------------------------------
/vue14/shopping/src/views/about.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 	<p>介绍页</p>
 4 | 	<button @click="handleRouter">跳转到user</button>
 5 | 	</div>
 6 | </template>
 7 | <script>
 8 | 	export default{
 9 | 		methods:{
10 | 			handleRouter:function(){
11 | 				this.$router.push('/user/123')
12 | 			}
13 | 		}
14 | 	}
15 | </script>


--------------------------------------------------------------------------------
/vue10/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>webpack app</title>
 6 | 	<link rel="stylesheet" href="/dist/main.css">
 7 | </head>
 8 | <body>
 9 | 	<div id="app">
10 | 		Hello world
11 | 	</div>
12 | 	<script src="/dist/main.js"></script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/vue11/vue-bus/src/views/user.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="abc">{{ $route.params.id }}</div>
 3 | </template>
 4 | <script>
 5 | 	export default{
 6 | 		mounted(){
 7 | 			console.log(this.$route)
 8 | 		}
 9 | 	}
10 | </script>
11 | <style scoped>
12 | 	.abc{
13 | 		color:green;
14 | 		font-size: 24px;
15 | 	}
16 | </style>


--------------------------------------------------------------------------------
/vue11/vuex/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>webpack app</title>
 6 | 	<link rel="stylesheet" href="/dist/main.css">
 7 | </head>
 8 | <body>
 9 | 	<div id="app">
10 | 		Hello world
11 | 	</div>
12 | 	<script src="/dist/main.js"></script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/vue10/demo/src/title.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<h1><a :href="'#' + title">{{ title }}</a></h1>
 3 | </template>
 4 | <script>
 5 | 	export default{
 6 | 		props:{
 7 | 			title:{
 8 | 				type:String
 9 | 			}
10 | 		}
11 | 	}
12 | </script>
13 | <style scoped>
14 | 	h1 a{
15 | 		color:#3399ff;
16 | 		font-size: 24px;
17 | 	}
18 | </style>


--------------------------------------------------------------------------------
/vue11/router/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>webpack app</title>
 6 | 	<link rel="stylesheet" href="/dist/main.css">
 7 | </head>
 8 | <body>
 9 | 	<div id="app">
10 | 		Hello world
11 | 	</div>
12 | 	<script src="/dist/main.js"></script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/vue11/vue-bus/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>webpack app</title>
 6 | 	<link rel="stylesheet" href="/dist/main.css">
 7 | </head>
 8 | <body>
 9 | 	<div id="app">
10 | 		Hello world
11 | 	</div>
12 | 	<script src="/dist/main.js"></script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/vue13/daily/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>webpack app</title>
 6 | 	<link rel="stylesheet" href="/dist/main.css">
 7 | </head>
 8 | <body>
 9 | 	<div id="app">
10 | 		Hello world
11 | 	</div>
12 | 	<script src="/dist/main.js"></script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/vue13/daily/src/title.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<h1><a :href="'#' + title">{{ title }}</a></h1>
 3 | </template>
 4 | <script>
 5 | 	export default{
 6 | 		props:{
 7 | 			title:{
 8 | 				type:String
 9 | 			}
10 | 		}
11 | 	}
12 | </script>
13 | <style scoped>
14 | 	h1 a{
15 | 		color:#3399ff;
16 | 		font-size: 24px;
17 | 	}
18 | </style>


--------------------------------------------------------------------------------
/vue14/shopping/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>webpack app</title>
 6 | 	<link rel="stylesheet" href="/dist/main.css">
 7 | </head>
 8 | <body>
 9 | 	<div id="app">
10 | 		Hello world
11 | 	</div>
12 | 	<script src="/dist/main.js"></script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/vue11/vue-bus/src/moduleA.js:
--------------------------------------------------------------------------------
 1 | const state = {
 2 |   useName: "sam", // 模块内部的state是局部的，所以任何组件通过this.$store.state.moduleA.useName读取
 3 |   count:10
 4 | };
 5 | const getters ={ //模块内部getter、mutation和action，仍然注册在全局命名空间内
 6 | 	sumCount(state,getters,rootState){
 7 | 		return state.count + rootState.count
 8 | 	}
 9 | }
10 | export default {
11 | 	state,
12 | 	getters
13 | }


--------------------------------------------------------------------------------
/vue11/vuex/src/moduleA.js:
--------------------------------------------------------------------------------
 1 | const state = {
 2 |   useName: "sam", // 模块内部的state是局部的，所以任何组件通过this.$store.state.moduleA.useName读取
 3 |   count:10
 4 | };
 5 | const getters ={ //模块内部getter、mutation和action，仍然注册在全局命名空间内
 6 | 	sumCount(state,getters,rootState){
 7 | 		return state.count + rootState.count
 8 | 	}
 9 | }
10 | export default {
11 | 	state,
12 | 	getters
13 | }


--------------------------------------------------------------------------------
/vue05/shopping_trolley/shopping.css:
--------------------------------------------------------------------------------
 1 | [v-cloak]{display: none;}
 2 | table{
 3 | 	border: 1px solid #e9e9e9;
 4 | 	border-spacing: 0;
 5 | 	empty-cells: show;
 6 | }
 7 | th,td{
 8 | 	padding: 8px 16px;
 9 | 	text-align: left;
10 | 	border: 1px solid #e9e9e9;
11 | }
12 | th{
13 | 	background: #f7f7f7;
14 | 	color:#5c6b77;
15 | 	font-weight: 600;
16 | 	white-space: nowrap;
17 | }


--------------------------------------------------------------------------------
/vue10/demo/index.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Webpack App</title>
 6 |     <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>">
 7 | </head>
 8 | <body>
 9 |     <div id="app"></div>
10 |     <script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[0] %>"></script>
11 | </body>
12 | </html> 


--------------------------------------------------------------------------------
/vue11/router/index.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Webpack App</title>
 6 |     <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>">
 7 | </head>
 8 | <body>
 9 |     <div id="app"></div>
10 |     <script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[0] %>"></script>
11 | </body>
12 | </html> 


--------------------------------------------------------------------------------
/vue11/vuex/index.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Webpack App</title>
 6 |     <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>">
 7 | </head>
 8 | <body>
 9 |     <div id="app"></div>
10 |     <script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[0] %>"></script>
11 | </body>
12 | </html> 


--------------------------------------------------------------------------------
/vue13/daily/index.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Webpack App</title>
 6 |     <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>">
 7 | </head>
 8 | <body>
 9 |     <div id="app"></div>
10 |     <script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[0] %>"></script>
11 | </body>
12 | </html> 


--------------------------------------------------------------------------------
/vue11/vue-bus/index.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Webpack App</title>
 6 |     <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>">
 7 | </head>
 8 | <body>
 9 |     <div id="app"></div>
10 |     <script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[0] %>"></script>
11 | </body>
12 | </html> 


--------------------------------------------------------------------------------
/vue14/shopping/index.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Webpack App</title>
 6 |     <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>">
 7 | </head>
 8 | <body>
 9 |     <div id="app"></div>
10 |     <script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[0] %>"></script>
11 | </body>
12 | </html> 


--------------------------------------------------------------------------------
/vue11/vue-bus/src/vue-bus.js:
--------------------------------------------------------------------------------
 1 | const install = function(Vue){
 2 | 	const Bus = new Vue({
 3 | 		methods:{
 4 | 			emit(event, ...args){
 5 | 				this.$emit(event, ...args);
 6 | 			},
 7 | 			on(event,callback){
 8 | 				this.$on(event,callback);
 9 | 			},
10 | 			off(event,callback){
11 | 				this.$off(event,callback);
12 | 			}
13 | 		}
14 | 	});		
15 | 	Vue.prototype.$bus = Bus;
16 | };
17 | 
18 | export default install;


--------------------------------------------------------------------------------
/vue11/router/src/views/about.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 	<div class="abc">介绍页</div>
 4 | 	<button @click="handleRouter">跳转到user123456</button>
 5 | 	</div>
 6 | </template>
 7 | <script>
 8 | 	export default{
 9 | 		methods:{
10 | 			handleRouter:function(){
11 | 				this.$router.push('/user/123456')
12 | 			}
13 | 		}
14 | 	}
15 | </script>
16 | <style scoped>
17 | 	.abc{
18 | 		color:yellow;
19 | 		font-size: 24px;
20 | 	}
21 | </style>


--------------------------------------------------------------------------------
/vue11/vue-bus/src/views/about.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 	<div class="abc">介绍页</div>
 4 | 	<button @click="handleRouter">跳转到user123456</button>
 5 | 	</div>
 6 | </template>
 7 | <script>
 8 | 	export default{
 9 | 		methods:{
10 | 			handleRouter:function(){
11 | 				this.$router.push('/user/123456')
12 | 			}
13 | 		}
14 | 	}
15 | </script>
16 | <style scoped>
17 | 	.abc{
18 | 		color:yellow;
19 | 		font-size: 24px;
20 | 	}
21 | </style>


--------------------------------------------------------------------------------
/vue11/vuex/src/views/about.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 	<div class="abc">介绍页</div>
 4 | 	<button @click="handleRouter">跳转到user123456</button>
 5 | 	</div>
 6 | </template>
 7 | <script>
 8 | 	export default{
 9 | 		methods:{
10 | 			handleRouter:function(){
11 | 				this.$router.push('/user/123456')
12 | 			}
13 | 		}
14 | 	}
15 | </script>
16 | <style scoped>
17 | 	.abc{
18 | 		color:yellow;
19 | 		font-size: 24px;
20 | 	}
21 | </style>


--------------------------------------------------------------------------------
/vue11/vue-bus/src/views/Counter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		{{ numbe }}
 4 | 		<button @click="handleAddRandom">随机增加</button>
 5 | 	</div>
 6 | </template>
 7 | <script>
 8 | 	export default {
 9 | 		props:{
10 | 			numbe:{
11 | 				type:Number
12 | 			}
13 | 		},
14 | 		methods:{
15 | 			handleAddRandom(){
16 | 				const num = Math.floor(Math.random() * 100 + 1);
17 | 				this.$bus.emit('add',num);
18 | 			}
19 | 		}
20 | 	}
21 | </script>


--------------------------------------------------------------------------------
/vue02/vue2-07.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue2-07</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<p v-if="show">显示这段文本</p>
10 | 	</div>
11 | 
12 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
13 | 	<script>
14 | 		var app = new Vue({
15 | 			el:'#app',
16 | 			data:{
17 | 				show:true
18 | 			}
19 | 		})	
20 | 	</script>
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/vue08/v-time/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>开发实时时间转换v-time</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<div v-time="timeNow"></div>
10 | 		<div v-time="timeBefore"></div>
11 | 	</div>
12 | 	
13 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
14 | 	<script src="time.js"></script>
15 | 	<script src="index.js"></script>
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/vue07/input_box/input-number.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>数字输入框组件</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<input-number :max="100" :min="0" :step="2" v-model="value"></input-number>
10 | 		<!-- 大多数的表单组件都应该有一个v-model -->
11 | 	</div>
12 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
13 | 	<script src="input-number.js"></script>
14 | 	<script src="index.js"></script>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/vue04/vue4-01.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue4-01</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<div :class="{'active':isActive}"></div>
10 | 		<!-- 类名active依赖于数据isActive为true时才会显示 -->
11 | 	</div>
12 | 
13 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
14 | 	<script>
15 | 		var app = new Vue({
16 | 			el:'#app',
17 | 			data:{
18 | 				isActive:true
19 | 			}
20 | 		})
21 | 	</script>
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/vue04/vue4-04.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue4-04</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<div :class="[activeCls,errorCls]"></div>
10 | 		<!-- 当要应用多class时，可以用数组语法 -->
11 | 	</div>
12 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
13 | 	<script>
14 | 		var app = new Vue({
15 | 			el:'#app',
16 | 			data:{
17 | 				activeCls:'active',
18 | 				errorCls:'error'
19 | 			}
20 | 		})
21 | 	</script>
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/vue04/vue4-06.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue4-06</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<div :class="[{'active':isAcitve},errorCls]"></div>
10 | 		<!-- 可以在数组语法里使用对象语法 -->
11 | 	</div>
12 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
13 | 	<script>
14 | 		var app = new Vue({
15 | 			el:'#app',
16 | 			data:{
17 | 				isAcitve:true,
18 | 				errorCls:'error'
19 | 			}
20 | 		})
21 | 	</script>
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/vue13/daily/src/components/item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<a class="daily-item">
 3 | 		<div class="daily-img" v-if="data.images">
 4 | 			<img :src="imgPath + data.images[0]">
 5 | 		</div>
 6 | 		<div class="daily-title" :class="{ noImg: !data.images}">{{ data.title }}</div>
 7 | 	</a>
 8 | </template>
 9 | <script>
10 | 	import $ from '../libs/util';
11 | 	export default {
12 | 		props: {
13 | 			data: { 
14 | 				type: Object
15 | 			}
16 | 		},
17 | 		data () {
18 | 			return {
19 | 				imgPath:$.imgPath
20 | 			}
21 | 		}
22 | 	}
23 | </script>


--------------------------------------------------------------------------------
/vue04/vue4-09.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue4-09</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<div :style="styles">文本</div>
10 | 	</div>
11 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
12 | 	<script>
13 | 		var app = new Vue({
14 | 			el:'#app',
15 | 			data:{
16 | 				styles:{
17 | 					color:'red',
18 | 					fontSize:14 + 'px'
19 | 					// 'font-size':14+'px' 
20 | 				}
21 | 			}
22 | 		})
23 | 	</script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/vue04/vue4-08.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue4-08</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<!-- v-bind绑定内联样式 -->
10 | 		<div :style="{ 'color':color,'font-size':font-size + 'px' }">文本</div>
11 | 	</div>
12 | 
13 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
14 | 	<script>
15 | 		var app = new Vue({
16 | 			el:'#app',
17 | 			data:{
18 | 				color:'red',
19 | 				'font-size':14
20 | 			}
21 | 		})
22 | 	</script>
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/vue05/vue5-01.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue5-01</title>
 6 | 	<style>
 7 | 		[v-cloak]{display: none;}
 8 | 	</style>
 9 | </head>
10 | <body>
11 | 	<!-- v-cloak配合上边css解决网速慢闪烁{{}} -->
12 | 	<div id="app" v-cloak>
13 | 		{{message}}
14 | 	</div>
15 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
16 | 	<script>
17 | 		var app = new Vue({
18 | 			el:'#app',
19 | 			data:{
20 | 				message:'工具化后将不需要v-cloak'
21 | 			}
22 | 		})
23 | 	</script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/vue02/vue2-10.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue2-10</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app"></div>
 9 | 	
10 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
11 | 	<script>
12 | 		var app = new Vue({
13 | 			el:'#app',
14 | 			methods:{
15 | 				init:function(text){
16 | 					console.log(text)
17 | 				}
18 | 			},
19 | 			mounted:function(){
20 | 				this.init('在初始化时调用')
21 | 			}
22 | 		})
23 | 		app.init('在vue实例外部调用')
24 | 	</script>
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/vue02/vue2-01.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue2-01</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<input type="text" v-model="name" placeholder="你的名字">
10 | 		<h1>你好, {{ name }}</h1>
11 | 		<!-- {{}} 文本插值，自动将双向绑定的数据实时显示出来 -->
12 | 	</div>
13 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
14 | 	<script>
15 | 		var app = new Vue({
16 | 			el:"#app",
17 | 			data:{ //v-model的值对应data选项中的name字段
18 | 				name:''
19 | 			}
20 | 		})
21 | 	</script>
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/vue04/vue4-02.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue4-02</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<div :class="{ 'active':isActive,'error':isError }" class="static"></div>
10 | 		<!-- 对象中可以传入多个属性来动态切换class。另外:claaa也可以和普通class共存 -->
11 | 	</div>
12 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
13 | 	<script>
14 | 		var app = new Vue({
15 | 			el:'#app',
16 | 			data:{
17 | 				isActive:true,
18 | 				isError:false
19 | 			}
20 | 		})
21 | 	</script>
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/vue05/vue5-02.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue5-02</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<!-- v-once不需要表达式的指令，作用是定义他的只渲染一次 包括子节点-->
10 | 		<span v-once> {{message}}</span>
11 | 		<div v-once>
12 | 			<span>{{message}}</span>
13 | 		</div>
14 | 	</div>
15 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
16 | 	<script>
17 | 		var app = new Vue({
18 | 			el:'#app',
19 | 			data:{
20 | 				message:'这是一段文本'
21 | 			}	
22 | 		})
23 | 	</script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/vue02/vue2-04.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue2-04</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<span v-html="link"></span>  <!-- v-html 输出html -->
10 | 		<span v-pre>{{这里的内容不会被编辑}}</span> <!-- 如果想显示{{}}，可以用到v-pre -->
11 | 	</div>
12 | 
13 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
14 | 	<script>
15 | 		var app = new Vue({
16 | 			el:'#app',
17 | 			data:{
18 | 				link:'<a href="https://baidu.com">百度一下</a>'
19 | 			}
20 | 		})	
21 | 	</script>
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/vue04/vue4-10.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue4-10</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<my-component :class="{ 'active':isActive }"></my-component>
10 | 	</div>
11 | 
12 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
13 | 	<script>
14 | 		Vue.component('my-component',{
15 | 			template:'<div class="article">一些文本</div>'
16 | 		})
17 | 		var app = new Vue({
18 | 			el:'#app',
19 | 			data:{
20 | 				isActive:true
21 | 			}
22 | 		})
23 | 	</script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-02.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-02</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<my-component></my-component>
10 | 	</div>
11 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
12 | 	<script>
13 | 		var Child = {
14 | 			template : '<div>局部注册组件内容</div>'
15 | 		}
16 | 
17 | 		var app = new Vue({
18 | 			el:'#app',
19 | 			components:{ //vue实例中，用components可以局部注册组件。只在该实例作用域下有效。
20 | 				'my-component' : Child
21 | 			}
22 | 		})
23 | 	</script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/vue01/vue1-01.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue1-01</title>
 6 | </head>
 7 | <body>
 8 | 		<div id="app">
 9 | 			<button	v-if="showBtn" v-on:click="handleClick">点我</button>
10 | 		</div>
11 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
12 | 	<script>
13 | 		var app = new Vue({
14 | 			el:'#app',
15 | 			data:{
16 | 				showBtn:true
17 | 			},
18 | 			methods:{
19 | 				handleClick:function(){
20 | 					console.log('Clicked!')
21 | 				}
22 | 			}
23 | 		})
24 | 	</script>
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/vue01/vue1-02.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue1-02</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<ul>
10 | 			<li v-for="book in books">{{book.name}}</li>
11 | 		</ul>
12 | 	</div>
13 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
14 | 	<script>
15 | 		new Vue({
16 | 			el:'#app',
17 | 			data:{
18 | 				books:[
19 | 					{name:'《Vue.js实战》'},
20 | 					{name:'《javascript语言精粹》'},
21 | 					{name:'《javascript高级程序设计》'}
22 | 				]
23 | 			}
24 | 		})
25 | 	</script>
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/vue04/vue4-05.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue4-05</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<div :class="[isActive ? activeCls : '',errorCls]"></div>
10 | 		<!-- 使用三元表达式条件切换class  这里errorCls始终会应用成error -->
11 | 	</div>
12 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
13 | 	<script>
14 | 		var app = new Vue({
15 | 			el:'#app',
16 | 			data:{
17 | 				isActive:true,
18 | 				activeCls:'active',
19 | 				errorCls:'error'
20 | 			}
21 | 		})
22 | 	</script>
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-26.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-26</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<!-- 动态改变currentView的值就可以动态挂载组件了，也可以直接绑定在组件对象上 -->
10 | 		<component :is="currentView"></component>
11 | 	</div>
12 | 
13 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
14 | 	<script>
15 | 		var home = { template:'<p>welcome home</p>' };
16 | 
17 | 		var app = new Vue({
18 | 			el:'#app',
19 | 			data:{
20 | 				currentView:home
21 | 			},
22 | 		})
23 | 	</script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/vue09/sort_form/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>可排序的表格组件</title>
 6 | 	<link rel="stylesheet" href="style.css">
 7 | </head>
 8 | <body>
 9 | 	<div id="app" v-cloak>
10 | 		<!-- :data="data" :columns="columns" 把数据传递给子组件 -->
11 | 		<v-table :data="data" :columns="columns"></v-table>
12 | 		<button @click="handleAddData">添加数据</button>
13 | 	</div>
14 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
15 | 	<script src="table.js"></script>
16 | 	<script src="index.js"></script>
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/vue05/vue5-05.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue5-05</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<p v-show="status === 1">当status为1时显示该行</p> 
10 | 		<!-- v-show改变元素css的display属性。v-show只是css属性切换，无论条件真与否都会被编译 template上不能用v-show -->
11 | 		<!-- v-if更适合不经常改变的场景。v-show适合频繁切换条件。  -->
12 | 	</div>
13 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
14 | 	<script>
15 | 		var app = new Vue({
16 | 			el:'#app',
17 | 			data:{
18 | 				status:1
19 | 			}
20 | 		})
21 | 	</script>
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/vue03/vue3-01.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue3-01</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		{{ reversedText }}
10 | 	</div>
11 | 
12 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
13 | 	<script>
14 | 		var app = new Vue({
15 | 			el:'#app',
16 | 			data:{
17 | 				text:'123,456'
18 | 			},
19 | 			computed:{ //所有计算属性都以函数形式写在computed选项内
20 | 				reversedText:function(){
21 | 					return this.text.split(',').reverse().join(',')
22 | 				}
23 | 			}
24 | 		})
25 | 	</script>
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-07.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-07</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<!-- 由于html不分大小写，当用DOM模板时，驼峰命名的props名称要转为短横分隔命名 -->
10 | 		<my-component warning-text="来自父组件的数据"></my-component>
11 | 	</div>
12 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
13 | 	<script>
14 | 		Vue.component('my-component',{
15 | 			props:['warningText'], 
16 | 			template:'<div>{{ warningText }}</div>'
17 | 		})
18 | 
19 | 		var app = new Vue({
20 | 			el:'#app'
21 | 		})
22 | 	</script>
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/vue08/vue8-01.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue8-01</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<input type="text" v-focus>
10 | 	</div>
11 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
12 | 	<script>
13 | 		// directive自定义指令，全局注册
14 | 		Vue.directive('focus',{
15 | 			//inserted: 被绑定元素插入父节点时调用。（父节点存在即可调用，不必存在与document中）
16 | 			inserted:function(el){ 
17 | 				el.focus() //el是指令所绑定的元素，可直接操作DOM
18 | 			}
19 | 		})
20 | 		var app = new Vue({
21 | 			el:'#app'
22 | 		})
23 | 	</script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-04.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-04</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<my-component></my-component>
10 | 	</div>
11 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
12 | 	<script>
13 | 		Vue.component('my-component',{
14 | 			template:'<div>{{ message }}</div>',
15 | 			data:function(){  //组件里使用data选项时，data必须是函数，然后将数据return出去
16 | 				return {
17 | 					message:'组件内容'
18 | 				}
19 | 			}
20 | 		})
21 | 
22 | 		var app = new Vue({
23 | 			el:'#app'
24 | 		})
25 | 	</script>
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/vue07/label_page/pane.js:
--------------------------------------------------------------------------------
 1 | Vue.component('pane',{
 2 | 	name:'pane', //为getTabs()遍历所有name为pane的子组件做准备，所以这里起个name
 3 | 	template:'<div class="pane" v-show="sw">\
 4 | 	<slot></slot>\
 5 | 	</div>',//上边的slot是为了能显示<pane></pane>标签里边的内容。
 6 | 	data:function(){ 
 7 | 		return { sw:true }
 8 | 	},
 9 | 	props:{
10 | 		name:{ //pane的标识
11 | 			type:String
12 | 		},
13 | 		label:{ //标签页标题
14 | 			type:String,
15 | 			default:'as'
16 | 		}
17 | 	},
18 | 	methods:{
19 | 		updateNav(){
20 | 			this.$parent.updateNav();
21 | 		}
22 | 	},
23 | 	watch:{
24 | 		label(){
25 | 			this.updateNav();
26 | 		}
27 | 	},
28 | 	mounted(){
29 | 		this.updateNav();
30 | 	}
31 | })


--------------------------------------------------------------------------------
/vue08/menu/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>从外部关闭的下拉菜单</title>
 6 | 	<link rel="stylesheet" href="style.css">
 7 | </head>
 8 | <body>
 9 | 	<div id="app" v-cloak>
10 | 		<div class="main" v-clickoutside="handleClose">
11 | 			<button @click="show = !show">点击显示下拉菜单</button>
12 | 			<div class="dropdown" v-show="show" v-cloak>
13 | 				<p>下拉菜单内容，点击外面区域可以关闭</p>
14 | 			</div>
15 | 		</div>
16 | 	</div>
17 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
18 | 	<script src="clickoutside.js"></script>
19 | 	<script src="index.js"></script>
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-01.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-01</title>
 6 | </head>
 7 | <body>
 8 | 	<!-- props传递数据,events触发事件和slot内容分发，就构成了vue组件的三个api来源。再复杂的组件也是由这三部分组成的。 -->
 9 | 	<div id="app">
10 | 		<my-component></my-component>
11 | 	</div>
12 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
13 | 	<script>
14 | 		// 要在父实例中使用这个组件，必须要在实例创建前注册
15 | 		Vue.component('my-component',{
16 | 			template:'<div>这里是组件的内容</div>'
17 | 			// template的DOM结构必须被一个元素包含，比如上边不带div不行
18 | 		})
19 | 
20 | 		var app = new Vue({
21 | 			el:'#app'
22 | 		})
23 | 	</script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/vue09/sort_form/style.css:
--------------------------------------------------------------------------------
 1 | [v-cloak]{
 2 | 	display: none;
 3 | }
 4 | table{
 5 | 	width: 100%;
 6 | 	margin-bottom: 24px;
 7 | 	border-collapse: collapse;
 8 | 	border-spacing: 0;
 9 | 	empty-cells: show;
10 | 	border:1px solid #e9e9e9;
11 | }
12 | table th{
13 | 	background: #f7f7f7;
14 | 	color: #5c6b77;
15 | 	font-weight: 600;
16 | 	white-space: nowrap;
17 | }
18 | table td,table th{
19 | 	padding:8px 16px;
20 | 	border: 1px solid #e9e9e9;
21 | 	text-align:left;
22 | }
23 | table th a{
24 | 	display: inline-block;
25 | 	margin: 0 4px;
26 | 	cursor: pointer;
27 | }
28 | table th a.on{
29 | 	color: #3399ff;
30 | }
31 | table th a:hover{
32 | 	color: #3399ff;
33 | }


--------------------------------------------------------------------------------
/vue07/vue7-09.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-09</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<!-- 如果直接传递数字，布尔值，数组，对象，而且不使用v-bind，那传递的仅仅是字符串 -->
10 | 		<my-component message="[1,2,3]"></my-component>
11 | 		<my-component :message="[1,2,3]"></my-component>
12 | 	</div>
13 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
14 | 	<script>
15 | 		Vue.component('my-component',{
16 | 			props:['message'], 
17 | 			template:'<div>{{ message.length }}</div>'
18 | 		})
19 | 
20 | 		var app = new Vue({
21 | 			el:'#app'
22 | 		})
23 | 	</script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/vue03/vue3-04.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue3-04</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app1"></div>
 9 | 	<div id="app2">{{ reversedText }}</div>
10 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
11 | 	<script>
12 | 		var app1 = new Vue({
13 | 			el:'#app1',
14 | 			data:{
15 | 				text:'123,456'
16 | 			}
17 | 		})
18 | 		var app2 = new Vue({
19 | 			el:'#app2',
20 | 			computed:{
21 | 				reversedText:function(){
22 | 					return app1.text.split(',').reverse().join(',')
23 | 					// 计算属性可以依赖其他计算属性，也可依赖其他实例的数据
24 | 				}
25 | 			}
26 | 		})
27 | 	</script>
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/vue09/vue9-03.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue9-03</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<ele></ele>
10 | 	</div>
11 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
12 | 	<script>
13 | 		Vue.component('ele',{
14 | 			template:'<div id="element" :class="{show:show}" @click="handleClick">文本内容</div>',
15 | 			data:function(){
16 | 				return { show:true }
17 | 			},
18 | 			methods:{
19 | 				handleClick:function(){
20 | 					console.log('clickde!')
21 | 				}
22 | 			}
23 | 		})
24 | 
25 | 		var app = new Vue({
26 | 			el:'#app'
27 | 		})
28 | 	</script>
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/vue09/vue9-12.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue9-12</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<ele></ele>
10 | 		<ele><p>slot的内容</p></ele>
11 | 	</div>
12 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
13 | 	<script>
14 | 		Vue.component('ele',{
15 | 			render:function(createElement){
16 | 				if( this.$slots.default === undefined ){
17 | 					return createElement('p','没有使用slot时显示的文本')
18 | 				}else{
19 | 					return createElement('div',this.$slots.default)
20 | 				}
21 | 			}
22 | 		})
23 | 		var app = new Vue({
24 | 			el:'#app'
25 | 		})
26 | 	</script>
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/vue02/vue2-08.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue2-08</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<a :href="href">百度一下</a>
10 | 		<img :src="imgUrl">
11 | 		<!-- v-bind: 动态更新html元素上的属性  可省略v-bind只要:   -->
12 | 	</div>
13 | 
14 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
15 | 	<script>
16 | 		var app = new Vue({
17 | 			el:'#app',
18 | 			data:{
19 | 				href:'http://baidu.com',
20 | 				imgUrl:'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3732963493,4007690255&fm=173&app=25&f=JPEG?w=218&h=146&s=F67019C4001A09DC14E0E49203004083'
21 | 			}
22 | 		})
23 | 	</script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-11.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-11</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<my-component :font-size="24"></my-component>
10 | 	</div>
11 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
12 | 	<script>
13 | 		Vue.component('my-component',{
14 | 			props:['fontSize'], //props作为要被转变的原始值传入
15 | 			template:'<div :style="style">组件内容</div>',
16 | 			computed:{
17 | 				style:function(){
18 | 					return {
19 | 						fontSize:this.fontSize + 'px'
20 | 					}
21 | 				}
22 | 			}
23 | 		})
24 | 
25 | 		var app = new Vue({
26 | 			el:'#app'
27 | 		})
28 | 	</script>
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/vue02/vue2-05.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue2-05</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		{{ number / 10 }}
10 | 		{{ isOK ? '确定' : '取消' }}
11 | 		{{ text.split(',').reverse().join(',') }}
12 | 	<!-- 
13 | 		Vue.js只支持单个表达式，不支持语句和流控制
14 | 		这是语句，不是表达式：
15 | 		{{var book = 'vue'}}
16 | 		这是流控制，要用三元运算:
17 | 		{{ if(ok){ return msg} }} 
18 | 	-->
19 | 	</div>
20 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
21 | 	<script>
22 | 		var app = new Vue({
23 | 			el:'#app',
24 | 			data:{
25 | 				number:10,
26 | 				isOK:false,
27 | 				text:'123,456'
28 | 			}
29 | 		})
30 | 	</script>
31 | </body>
32 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-03.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-03</title>
 6 | </head>
 7 | <body>
 8 | <!-- vue组件的模板在某些情况下会受到html的限制，比如table内规定只允许tr，td等表格元素。 -->
 9 | <!-- 常见的限制元素还有ul，ol，select -->
10 | <!-- 如果使用的是字符串模板，比如.vue文件是不受限制的 -->
11 | 	<div id="app">
12 | 		<table>
13 | 			<tbody is="my-component"></tbody>  <!-- 用is属性来挂载组件，tbody在渲染时会被替换成组件内容 -->			
14 | 		</table>
15 | 	</div>
16 | 	
17 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
18 | 	<script>
19 | 		Vue.component('my-component',{
20 | 			template:'<div>这里是组件的内容</div>'
21 | 		})
22 | 
23 | 		var app = new Vue({
24 | 			el:'#app'
25 | 		})
26 | 	</script>
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/vue10/demo/src/button.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<button @click="handleClick" :style="styles">
 3 | 		<slot></slot>
 4 | 	</button>
 5 | </template>
 6 | <script>
 7 | 	export default{
 8 | 		props:{
 9 | 			color:{
10 | 				type:String,
11 | 				default:'#00cc66'
12 | 			}
13 | 		},
14 | 		computed:{
15 | 			styles(){
16 | 				return{
17 | 					background:this.color
18 | 				}
19 | 			}
20 | 		},
21 | 		methods:{
22 | 			handleClick(e){
23 | 				this.$emit('click',e)
24 | 			}
25 | 		}
26 | 	}
27 | </script>
28 | <style scoped>
29 | 	button{
30 | 		border:0;
31 | 		outline: none;
32 | 		color:#fff;
33 | 		padding:4px 8px;
34 | 	}
35 | 	button:active{
36 | 		position: relative;
37 | 		top: 1px;
38 | 		left:1px;
39 | 	}
40 | </style>


--------------------------------------------------------------------------------
/vue13/daily/src/button.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<button @click="handleClick" :style="styles">
 3 | 		<slot></slot>
 4 | 	</button>
 5 | </template>
 6 | <script>
 7 | 	export default{
 8 | 		props:{
 9 | 			color:{
10 | 				type:String,
11 | 				default:'#00cc66'
12 | 			}
13 | 		},
14 | 		computed:{
15 | 			styles(){
16 | 				return{
17 | 					background:this.color
18 | 				}
19 | 			}
20 | 		},
21 | 		methods:{
22 | 			handleClick(e){
23 | 				this.$emit('click',e)
24 | 			}
25 | 		}
26 | 	}
27 | </script>
28 | <style scoped>
29 | 	button{
30 | 		border:0;
31 | 		outline: none;
32 | 		color:#fff;
33 | 		padding:4px 8px;
34 | 	}
35 | 	button:active{
36 | 		position: relative;
37 | 		top: 1px;
38 | 		left:1px;
39 | 	}
40 | </style>


--------------------------------------------------------------------------------
/vue02/vue2-02.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue2-02</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app"></div>
 9 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
10 | 	<script>
11 | 		var app = new Vue({
12 | 			el:document.getElementById('app'), //el用于指定一个页面中已存在的DOM元素来挂载Vue实例，可以是HTMLElement，也可以是css选择器
13 | 			data:{
14 | 				a:2
15 | 			},
16 | 			created:function(){ //实例创建完成后调用,此阶段完成了数据的观测，但未挂载，$el不可用。初始化处理一些数据时比较有用
17 | 				console.log(this.a); //this指向调用它的Vue实例
18 | 			},
19 | 			mounted:function(){ //el挂载到实例上后调用 2
20 | 				console.log(this.$el); //<div id="app"></div>
21 | 			}
22 | 		})
23 | 	</script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/vue02/vue2-03.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue2-03</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">{{date}}</div>
 9 | 
10 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
11 | 	<script>
12 | 		var app = new Vue({
13 | 			el:'#app',
14 | 			data:{
15 | 				date:new Date()
16 | 			},
17 | 			mounted:function(){ //一般第一个业务逻辑在这里开始
18 | 				this.timer = setInterval(() =>{
19 | 					this.date = new Date()
20 | 				},1000)
21 | 			},
22 | 			beforeDestroy:function(){ //实例销毁前调用。主要解绑使用addEventListener监听的事件等。
23 | 				if(this.timer){
24 | 					clearInterval(this.timer)
25 | 				}
26 | 			}
27 | 		})
28 | 	</script>
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/vue08/menu/style.css:
--------------------------------------------------------------------------------
 1 | [v-cloak]{
 2 | 	display: none;
 3 | }
 4 | .main{
 5 | 	width: 125px;
 6 | }
 7 | button{
 8 | 	display: block;
 9 | 	width: 100%;
10 | 	color:#fff;
11 | 	background-color: #39f;
12 | 	border: 0;
13 | 	padding: 6px;
14 | 	text-align:center;
15 | 	font-size: 12px;
16 | 	border-radius: 4px;
17 | 	cursor: pointer;
18 | 	outline:none;
19 | 	position:relative;
20 | }
21 | button:active{
22 | 	top: 1px;
23 | 	left:1px;
24 | }
25 | .dropdown{
26 | 	width:100%;
27 | 	height: 150px;
28 | 	margin: 5px 0;
29 | 	font-size: 12px;
30 | 	background-color: #fff;
31 | 	border-radius: 4px;
32 | 	box-shadow: 0 1px 6px rgba(0,0,0,.2);
33 | 	/*display: none;*/
34 | }
35 | .dropdown p{
36 | 	display: inline-block;
37 | 	padding: 6px;
38 | }


--------------------------------------------------------------------------------
/vue07/vue7-05.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-05</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<my-component></my-component>
10 | 		<my-component></my-component>
11 | 		<my-component></my-component>
12 | 	</div>
13 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
14 | 	<script>
15 | 		Vue.component('my-component',{
16 | 			template:'<button @click="counter++">{{ counter }}</button>',
17 | 			data:function(){ 
18 | 				return { //js对象是引用关系，所以如果return出的对象引用了外部的一个对象，那这个对象就是共享的，任何修改都会同步。
19 | 					counter: 0
20 | 				}
21 | 			}
22 | 		})
23 | 
24 | 		var app = new Vue({
25 | 			el:'#app'
26 | 		})
27 | 	</script>
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/vue14/shopping/src/router.js:
--------------------------------------------------------------------------------
 1 | const routers = [
 2 |     {
 3 |         path: '/list',
 4 |         meta: {
 5 |             title: '商品列表'
 6 |         },
 7 |         component: (resolve) => require(['./views/list.vue'], resolve)
 8 |     },
 9 |     {
10 |         path: '/product/:id',
11 |         meta: {
12 |             title: '商品详情'
13 |         },
14 |         component: (resolve) => require(['./views/product.vue'], resolve)
15 |     },
16 |     {
17 |         path: '/cart',
18 |         meta: {
19 |             title: '购物车'
20 |         },
21 |         component: (resolve) => require(['./views/cart.vue'], resolve)
22 |     },
23 |     {
24 |         path: '*',
25 |         redirect: '/list'
26 |     }
27 | ];
28 | export default routers;


--------------------------------------------------------------------------------
/vue15/README15.md:
--------------------------------------------------------------------------------
 1 | # 相关开源项目介绍   
 2 | 
 3 | ### 服务端渲染与Nuxt.js
 4 | Vue.js2支持服务端渲染。   
 5 | 服务端渲染（SSR）：指的是渲染内容。打开页面，查看源代码。文字都在源代码里面，就是SSR。或chrome的network面板查看有没有相关异步请求来调取内容来判断。  
 6 | 
 7 | 很多网站之所以用SSR，主要目的是做SEO。另一个目的是客户端的网络可能不稳定，通过SSR减少请求量和客户端渲染。可以相对快速看到内容。  
 8 | 
 9 | Nuxt.js:基于Vue.js的通用应用框架。为Node.js做Vue的服务端渲染提供了各种配置。快速搭建一套SSR框架。
10 | Nuxt.js构建的代码，UI在服务端渲染。查看代码所有模板内容直接渲染在其中。   
11 | [Vue.js服务端渲染](https://ssr.vuejs.org/)   
12 | [Nuxt.js文档](https://nuxtjs.org/)  
13 | 
14 | ### HTTP库axios
15 | [项目地址](https://github.com/mzabriskie/axios)  
16 | axios是一个基于Promise，同时支持浏览器端和Node.js的HTTP库。常用语Ajax请求。  
17 | 
18 | ### 多语言插件 vue-i18n  
19 | [项目地址](https://gitbub.com/kazupon/vue-i18n)  
20 | vue-i18n是一个vue.js插件。提供了都语言解决方案。如果你的项目有多国语言的需求，可以使用它很快地实现。
21 | 


--------------------------------------------------------------------------------
/vue04/vue4-07.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue4-07</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<button :class="classes"></button>
10 | 	</div>
11 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
12 | 	<script>
13 | 		var app = new Vue({
14 | 			el:'#app',
15 | 			data:{
16 | 				size:'large',
17 | 				disabled:true
18 | 			},
19 | 			computed:{
20 | 				classes:function(){
21 | 					return [
22 | 						'btn',
23 | 						{
24 | 							[ 'btn-' + this.size ] : this.size !== '', //this.size不为空，执行:前边的
25 | 							[ 'btn-disabled' ] : this.disabled
26 | 						}
27 | 					];
28 | 				}
29 | 			}
30 | 		})
31 | 	</script>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/vue06/vue6-03.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue6-03</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<!-- 单独一个单选不需要v-model，直接v-bind绑定一个布尔类型的值 -->
10 | 		<input type="radio" name="" id="" :checked="picked">
11 | 		<label for="">单选按钮</label>
12 | 		
13 | 		<!-- 单独一个复选框也需要v-model -->
14 | 		<input type="checkbox" name="" id="checked" v-model="checked">
15 | 		<label for="checked">选择状态：{{ checked }}</label>
16 | 	</div>
17 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
18 | 	<script>
19 | 		var app = new Vue({
20 | 			el:'#app',
21 | 			data:{
22 | 				picked:true,
23 | 				checked:false
24 | 			}
25 | 		})
26 | 	</script>
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/vue14/shopping/src/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <div class="header">
 4 |             <router-link to="/list" class="header-title">电商网站示例</router-link>
 5 |             <div class="header-menu">
 6 |                 <router-link to="/cart" class="header-menu-cart">
 7 |                     购物车
 8 |                     <span v-if="cartList.length">{{ cartList.length }}</span>
 9 |                 </router-link>
10 |             </div>
11 |         </div>
12 |         <router-view></router-view>
13 |     </div>
14 | </template>
15 | <script>
16 |     export default {
17 |         computed: {
18 |             cartList () {
19 |                 return this.$store.state.cartList;
20 |             }
21 |         }
22 |     }
23 | </script>


--------------------------------------------------------------------------------
/vue05/vue5-08.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue5-08</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<span v-for="value in user">{{value}}</span>
10 | 		<ul>
11 | 			<li v-for="(value,key,index) in user">{{ index }} - {{ key }} : {{ value }}</li>
12 | 			<!-- v-for遍历对象有两个可选参数，键名和索引 -->
13 | 		</ul>
14 | 		<span v-for="n in 10">{{n}}</span>
15 | 		<!-- v-for可以迭代整数 -->
16 | 	</div>
17 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
18 | 	<script>
19 | 		var app = new Vue({
20 | 			el:'#app',
21 | 			data:{
22 | 				user:{
23 | 					name:'aresn',
24 | 				    gender:'男',
25 | 				    age:26
26 | 				}
27 | 			}
28 | 		})
29 | 	</script>
30 | </body>
31 | </html>


--------------------------------------------------------------------------------
/vue09/message_list/index.js:
--------------------------------------------------------------------------------
 1 | var app = new Vue({
 2 | 	el:'#app',
 3 | 	data:{
 4 | 		username:'',
 5 | 		message:'',
 6 | 		list:[]
 7 | 	},
 8 | 	methods:{
 9 | 		// 给list添加一条留言数据
10 | 		handleSend:function(){
11 | 			if( this.username === '' ){ window.alert('请输入昵称'); return }
12 | 			if( this.message === '' ){ window.alert('请输入留言内容'); return }
13 | 			this.list.push({
14 | 				name:this.username,
15 | 				message:this.message
16 | 			});
17 | 			this.message = '';
18 | 		},
19 | 		handleReply:function(index){
20 | 			var name = this.list[index].name;
21 | 			this.message = '@回复' + name + ':';
22 | 			// $refs不是响应式的，不应该用它绑定数据。只是方便取和操作DOM
23 | 			// $refs讲解  https://www.cnblogs.com/xumqfaith/p/7743387.html
24 | 			this.$refs.message.focus();
25 | 		}
26 | 	}
27 | })


--------------------------------------------------------------------------------
/vue02/vue2-09.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue2-09</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<p v-if="show">这是一段文本</p>
10 | 		<button v-on:click="handleClose">点击隐藏</button>
11 | 		<!-- v-on:绑定事件监听器。可简写成@  表达式可以是一个方法名，都写在实例的methods属性内-->
12 | 		<!-- 表达式除了方法名也可以是内联语句 -->
13 | 		<!-- <button v-on:click="show = false">点击隐藏</button> -->
14 | 	</div>
15 | 
16 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
17 | 	<script>
18 | 		var app = new Vue({
19 | 			el:'#app',
20 | 			data:{
21 | 				show:true
22 | 			},
23 | 			methods:{ 
24 | 				handleClose:function(){
25 | 					this.show = false;
26 | 				}
27 | 			}
28 | 		})
29 | 	</script>
30 | </body>
31 | </html>


--------------------------------------------------------------------------------
/vue04/vue4-03.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue4-03</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<div :class="classes"></div>
10 | 		<!-- 当:class的表达式过长或者逻辑复杂时，可以绑定一个计算属性 -->
11 | 	</div>
12 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
13 | 	<script>
14 | 		var app = new Vue({
15 | 			el:'#app',
16 | 			data:{
17 | 				isActive:true,
18 | 				error: null
19 | 			},
20 | 			computed:{
21 | 				classes:function(){
22 | 					return {
23 | 						active: this.isActive && !this.error,
24 | 						'text-fail': this.error && this.error.type === 'fail' 
25 | 						//'text-fail'这里有-所以要加引号
26 | 					}
27 | 				}
28 | 			}
29 | 		})
30 | 	</script>
31 | </body>
32 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-06.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-06</title>
 6 | </head>
 7 | <body>
 8 | 	<!-- 父组件向子组件通信，用props -->
 9 | 
10 | 	<!-- props中声明的数据与组件data函数return的数据主要区别就是:
11 | 		props的来自父级！而data中的是组件自己的数据，作用域是组件本身。 -->
12 | 
13 | 	<div id="app">
14 | 		<!-- 在父组件的自定义标签上直接写该props的名称 -->
15 | 		<my-component message="来自父组件的数据"></my-component>
16 | 	</div>
17 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
18 | 	<script>
19 | 		Vue.component('my-component',{
20 | 			props:['message'], //在子组件用props声明需要从父级接收的数据。props的值一种是字符串数组，一种是对象
21 | 			template:'<div>{{ message }}</div>'
22 | 		})
23 | 
24 | 		var app = new Vue({
25 | 			el:'#app'
26 | 		})
27 | 	</script>
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-18.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-18</title>
 6 | </head>
 7 | <body>
 8 | 	<!-- 当需要让组件组合使用，混合父组件的内容与子组件的模板时，就会用slot。这个过程叫内容分发。 -->
 9 | 	<div id="app">
10 | 		<child-component>
11 | 			<!-- 在父组件模板里，插入子组件标签内的所有内容（就是下边两个p里边的）将替代子组件的<slot>标签及它的内容 -->
12 | 			<p>分发的内容</p>
13 | 			<p>更多分发的内容</p>
14 | 		</child-component>
15 | 	</div>
16 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
17 | 	<script>
18 | 		Vue.component('child-component',{
19 | 			// 在子组件内使用特殊的<slot>元素就可以为这个子组件开启一个slot（插槽）
20 | 			template:'<div><slot><p>如果父组件没有插入内容，我将作为默认出现。</p></slot></div>'
21 | 		});
22 | 
23 | 		var app = new Vue({
24 | 			el:'#app'
25 | 		})
26 | 	</script>
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/vue05/vue5-07.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue5-07</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<ul>
10 | 			<template v-for=" book in books ">
11 | 				<li>书名：{{ book.name }}</li>
12 | 				<li>作者：{{ book.author }}</li>
13 | 			</template>
14 | 		</ul>
15 | 	</div>
16 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
17 | 	<script>
18 | 		var app = new Vue({
19 | 			el:'#app',
20 | 			data:{
21 | 				books:[
22 | 					{
23 | 						name:'第1本书',
24 | 						author:'作者1'
25 | 					},{
26 | 						name:'第2本书',
27 | 						author:'作者2'
28 | 					},{
29 | 						name:'第3本书',
30 | 						author:'作者3'
31 | 					}
32 | 				]
33 | 			}
34 | 		})
35 | 	</script>
36 | </body>
37 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-10.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-10</title>
 6 | </head>
 7 | <body>
 8 | 	<!-- js中对象和数组是引用类型，指向同一个内存空间，所以props是对象和数组时，在子组件内改变是会影响父组件的 -->
 9 | 	<div id="app">
10 | 		<my-component :init-count="1"></my-component>
11 | 	</div>
12 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
13 | 	<script>
14 | 		Vue.component('my-component',{
15 | 			props:['initCount'], 
16 | 			template:'<div>{{ count }}</div>',
17 | 			data:function(){
18 | 				return {
19 | 					count : this.initCount + 1
20 | 					// 组件data内声明数据count，初始化获取来自父组件的ininCount，避免直接操作ininCount
21 | 				}
22 | 			}
23 | 		})
24 | 
25 | 		var app = new Vue({
26 | 			el:'#app'
27 | 		})
28 | 	</script>
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-23.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-23</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<child-component :count="1"></child-component>
10 | 	</div>
11 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
12 | 	<script>
13 | 		Vue.component('child-component',{
14 | 			// 组件在它的模板内递归调用自己，只要给组件设置name即可
15 | 			name:'child-component',
16 | 			props:{
17 | 				count:{
18 | 					type:Number,
19 | 					default:1
20 | 				}
21 | 			},
22 | 			// 必须给个条件限制递归数量，否则会抛出错误
23 | 			template:'<div class="child"><child-component :count="count+1" v-if="count<6"></child-component></div>'
24 | 		})
25 | 
26 | 		var app = new Vue({
27 | 			el:'#app'
28 | 		})
29 | 	</script>
30 | </body>
31 | </html>


--------------------------------------------------------------------------------
/vue14/shopping/src/style.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin: 0;
 3 |     padding: 0;
 4 | }
 5 | a{
 6 |     text-decoration: none;
 7 | }
 8 | body{
 9 |     background: #f8f8f9;
10 | }
11 | .header{
12 |     height: 48px;
13 |     line-height: 48px;
14 |     background: rgba(0,0,0,.8);
15 |     color: #fff;
16 | }
17 | .header-title{
18 |     padding: 0 32px;
19 |     float: left;
20 |     color: #fff;
21 | }
22 | .header-menu{
23 |     float: right;
24 |     margin-right: 32px;
25 | }
26 | .header-menu-cart{
27 |     color: #fff;
28 | }
29 | .header-menu-cart span{
30 |     display: inline-block;
31 |     width: 16px;
32 |     height: 16px;
33 |     line-height: 16px;
34 |     text-align: center;
35 |     border-radius: 50%;
36 |     background: #ff5500;
37 |     color: #fff;
38 |     font-size: 12px;
39 | }


--------------------------------------------------------------------------------
/vue05/vue5-03.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue5-03</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<!-- v-else-if要紧跟v-if,v-else要紧跟v-if或v-else-if -->
10 | 		<p v-if="status === 1">当status全等于1显示该行</p>
11 | 		<p v-else-if="status === 2">当status全等于2显示该行</p>
12 | 		<p v-else>否则显示该行</p>
13 | 
14 | 		<!-- 如果一次判断多个元素，可用内置的template元素上使用指令，最终渲染结果不会包含该元素。 -->
15 | 		<template v-if="state === 1">
16 | 			<p>这是一段文本</p>
17 | 			<p>这是一段文本</p>
18 | 			<p>这是一段文本</p>
19 | 		</template>
20 | 	</div>
21 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
22 | 	<script>
23 | 		var app = new Vue({
24 | 			el:'#app',
25 | 			data:{
26 | 				status:1,
27 | 				state:1
28 | 			}
29 | 		})
30 | 	</script>
31 | </body>
32 | </html>


--------------------------------------------------------------------------------
/vue09/message_list/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>留言列表</title>
 6 | 	<link rel="stylesheet" href="style.css">
 7 | </head>
 8 | <body>
 9 | 	<div id="app" v-cloak style="width: 500px;margin: 0 auto;">
10 | 		<div class="message">
11 | 			<!-- 使用v-model将username和message双向绑定 -->
12 | 			<v-input v-model="username"></v-input>
13 | 			<v-textarea v-model="message" ref="message"></v-textarea>
14 | 			<button @click="handleSend">发布</button>
15 | 		</div>
16 | 		<list :list="list" @reply="handleReply"></list>
17 | 	</div>
18 | 
19 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
20 | 	<script src="input.js"></script>
21 | 	<script src="list.js"></script>
22 | 	<script src="index.js"></script>
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/vue12/README12.md:
--------------------------------------------------------------------------------
 1 | # iView经典组件剖析   
 2 | 
 3 | + iView：是一套基于Vue2的开源UI组件库。主要服务于PC界面的中后台产品。   
 4 | + 官网：https://www.iviewui.com/   
 5 | + github：https://github.com/iview/iview   
 6 | 
 7 | 独立组件与业务组件最大的不同是，业务组件往往针对数据的获取、整理、可视化，逻辑清 晰简单，可以使用vuex：而独立组件的复杂度更多集中在细节、交互、性能优化、 API 设计上， 对原生 JavaScript 有一定考验。在使用过程中，可能会有新功能的不断添加，也会发现隐藏的 bug, 所以独立组件一开始逻辑和代码量并不复杂，多次选代后会越来越冗长，当然功能也更丰富，使用更稳定。万事开头难，组件 API 的设计和可扩展性决定了组件迭代的复杂性。一开始不可能考虑到所有的细节，但是整体架构要清晰可扩展，否则很有可能重构。  
 8 | 
 9 | https://github.com/iview/iview/blob/2.0/src/components里有他的组件源码   
10 | 
11 | 组件间通信可以通过$emit bus vuex来实现。但iView作为独立组件无法使用bus vuex，为了实现跨组件通讯，模拟了vue1的dispatch和broadcast 
12 | 
13 | 级联选择组件Cascader就是用了几个组件在一起实现：   
14 | cascader.vue   
15 | casitem.vue   
16 | caspanel.vue   
17 | 
18 | iView内置工具函数，比如:findComponentUpward findComponentDownward findComponentsDownward


--------------------------------------------------------------------------------
/vue07/vue7-29.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-29</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<child-component></child-component>
10 | 		<!-- 在script标签里使用type="text/x-template" 并且指定一个id，将这个id赋给template。在script标签里就可以写html不考虑换行等问题了 -->
11 | 		<script type="text/x-template" id="com">
12 | 			<div>
13 | 				<div>这里是组件内容</div>
14 | 				<div>这里是组件内容</div>
15 | 				<div>这里是组件内容</div>
16 | 			</div>
17 | 		</script>
18 | 	</div>
19 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
20 | 	<script>
21 | 		Vue.component('child-component',{
22 | 			template:'#com'
23 | 		})
24 | 
25 | 		var app = new Vue({
26 | 			el:'#app'
27 | 		})
28 | 
29 | 		// vue初衷并不是滥用它，因为它将模板和组件的其他定义隔离了。
30 | 	</script>
31 | </body>
32 | </html>


--------------------------------------------------------------------------------
/vue06/vue6-01.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue6-01</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<input type="text" v-model="message" placeholder="输入内容">
10 | 		<!-- 中文输入法输入，拼音阶段更新数据方法如下： -->
11 | 		<!-- <input v-on:input="message = $event.target.value" /> -->
12 | 		<p>输入的内容是: {{ message }}</p>
13 | 		<textarea name="" id="" cols="30" rows="10" v-model="text" placeholder="输入内容"></textarea>
14 | 		<!-- 使用v-model后，表单空控件显示的值只依赖所绑定的数据。不在关心初始化的value -->
15 | 		<p>输入的内容是：{{ text }}</p>
16 | 	</div>
17 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
18 | 	<script>
19 | 		var app = new Vue({
20 | 			el:'#app',
21 | 			data:{
22 | 				message:'',
23 | 				text:''
24 | 			}
25 | 		})
26 | 	</script>
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-27.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-27</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<child-component></child-component>
10 | 	</div>
11 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
12 | 	<script>
13 | 		//将组件定义为一个工厂函数，动态解析组件。vuejs只在组件需要渲染时触发工厂函数并把结果缓存起来。
14 | 		//工厂函数接收一个resolve回调，在收到从服务器下载的组件定义时调用。也可以调用reject(reason)指示加载失败。
15 | 		Vue.component('child-component',function(resolve,reject){ 
16 | 			//这里setTimeout指示演示异步，具体的下载逻辑自己定。比如把组件配置写成一个对象配置，通过ajax来请求，然后调用resolve传入配置
17 | 			window.setTimeout(function(){ 
18 | 				resolve({
19 | 					template:'<div>我是异步渲染的</div>'
20 | 				})
21 | 			},6000)
22 | 		})
23 | 
24 | 		var app = new Vue({
25 | 			el:'#app',
26 | 		})
27 | 	</script>
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-20.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-20</title>
 6 | </head>
 7 | <body>
 8 | 	<!-- 作用域插槽是一种特殊的slot，使用一个可以重复的模板替换已渲染元素 相当于父组件访问子组件数据的一种方法。-->
 9 | 
10 | 	<div id="app">
11 | 		<child-component>
12 | 			<!-- 这里的props只是起的一个临时变量名。template内可以通过props访问来自子组件插槽的自定义名字的数据msg。
13 | 				vue2.5+用slot-scope代替了scope -->
14 | 			<template slot-scope="props">
15 | 			<p>来自父组件的内容</p>
16 | 			<p>{{ props.msg }}</p>	
17 | 			</template>
18 | 		</child-component>
19 | 	</div>
20 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
21 | 	<script>
22 | 		Vue.component('child-component',{
23 | 			template:'<div class="container"><slot msg="来自子组件的内容"></slot></div>'
24 | 		});
25 | 
26 | 		var app = new Vue({
27 | 			el:'#app'
28 | 		})
29 | 	</script>
30 | </body>
31 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-08.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue-7-08</title>
 6 | </head>
 7 | <body>
 8 | 	<!-- v-model绑定父级数据，v-bind动态绑定props的值，通过输入框输入内容，子组件接收到的props 也会实时响应更新模板 -->
 9 | 	<div id="app">
10 | 		<!-- v-model绑定父级data数据parentMessage -->
11 | 		<input type="text" v-model="parentMessage">
12 | 		<my-component :message="parentMessage"></my-component>
13 | 		<!-- 父组件自定义message传自己data的parentMessage数据 v-bind绑定message的值 -->
14 | 	</div>
15 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
16 | 	<script>
17 | 		Vue.component('my-component',{
18 | 			props:['message'],
19 | 			template:'<div>{{ message }}</div>'
20 | 		});
21 | 
22 | 		var app = new Vue({
23 | 			el:'#app',
24 | 			data:{
25 | 				parentMessage:''
26 | 			}
27 | 		})
28 | 	</script>
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-24.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-24</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<!-- 给组件标签使用inline-template特性，组件就会把它的内容当做模板，而不是内容分发，这时作用域是子组件的 -->
10 | 		<child-component inline-template :message="message">
11 | 			<div>
12 | 				<h2>在父组件中定义子组件的模板</h2>
13 | 				<p>{{ message }}</p>
14 | 				<p>{{ msg }}</p>
15 | 			</div>
16 | 		</child-component>
17 | 	</div>
18 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
19 | 	<script>
20 | 		Vue.component('child-component',{
21 | 			props:['message'],			
22 | 			data:function(){
23 | 				return { 
24 | 					msg:'在子组件声明的数据' 
25 | 				}
26 | 			}
27 | 		})
28 | 
29 | 		var app = new Vue({
30 | 			el:'#app',
31 | 			data:{ message:'在父组件声明的数据' }
32 | 		})
33 | 	</script>
34 | </body>
35 | </html>


--------------------------------------------------------------------------------
/vue07/label_page/style.css:
--------------------------------------------------------------------------------
 1 | [v-cloak]:{
 2 | 	display: none;
 3 | }
 4 | .tabs{
 5 | 	font-size: 14px;
 6 | 	color: #657180;
 7 | }
 8 | /*.tabs-bar:after{
 9 | 	content: '';
10 | 	display: block;;
11 | 	width:100%;
12 | 	height: 1px;
13 | 	background: #d7dde4;
14 | 	margin-top: -1px;
15 | }*/
16 | .-tabs-tab{
17 | 	display: inline-block;;
18 | 	padding: 4px 16px;
19 | 	margin-right: 6px;
20 | 	background: #fff;
21 | 	border: 1px solid #d7dde4;
22 | 	cursor: pointer;
23 | 	position: relative;
24 | }
25 | .tabs-tab-active{
26 | 	color: #3399ff;
27 | 	border-top: 1px solid #3399ff;
28 | 	border-bottom: 1px solid #fff;
29 | }
30 | /*.tabs-tab-active:before{
31 | 	content: '';
32 | 	display: block;;
33 | 	height: 1px;
34 | 	background: #3399ff;
35 | 	position: absolute;
36 | 	top: 0;
37 | 	left: 0;
38 | 	right: 0;
39 | }*/
40 | .tabs-content{
41 | 	padding: 8px 0;
42 | }


--------------------------------------------------------------------------------
/vue10/demo/src/app.vue:
--------------------------------------------------------------------------------
 1 | <!-- 可以用jade写 <template lang="jade"></template> -->
 2 | <template>
 3 | 	<div>
 4 | 		<v-title title="Vue组件化"></v-title>
 5 | 		<v-button @click="handleClick">点击按钮</v-button>
 6 | 		<p>
 7 | 			<img src="./images/image.png" style="width:200px;" alt="">
 8 | 		</p>
 9 | 	</div>
10 | 	
11 | </template>
12 | <script>
13 | 	// 导入组件
14 | 	import vTitle from './title.vue';
15 | 	import vButton from './button.vue';
16 | 
17 | 	export default{
18 | 		components:{
19 | 			vTitle,
20 | 			vButton
21 | 		},
22 | 		methods:{
23 | 			handleClick(e){
24 | 				console.log(e);
25 | 			}
26 | 		}
27 | 	}
28 | </script>
29 | <!-- scoped表示当前css只在这个组件里有效 在chrome调试工具会看到元素上有一窜串内容，就是因为有scoped-->
30 | <!-- 可结合预编译一起使用，比如less -->
31 | <!-- <style lang="less"></style> -->
32 | <style scoped>
33 | 	div{
34 | 		color:red;
35 | 		font-size: 24px;
36 | 	}
37 | </style>


--------------------------------------------------------------------------------
/vue06/vue6-06.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue6-06</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<!-- option用v-for动态输出 -->
10 | 		<select name="" id="" v-model="selected">
11 | 			<option v-for="option in options" :value="option.value">{{ option.text }}</option>
12 | 		</select>
13 | 		<p>选择的是：{{ selected }}</p>
14 | 
15 | 	</div>
16 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
17 | 	<script>
18 | 		var app = new Vue({
19 | 			el:'#app',
20 | 			data:{
21 | 				selected:'html',
22 | 				options:[
23 | 					{
24 | 						text:'html',
25 | 						value:'html'
26 | 					},{
27 | 						text:'css',
28 | 						value:'css'
29 | 					},{
30 | 						text:'js',
31 | 						value:'js'
32 | 					}
33 | 				]
34 | 			}
35 | 		})
36 | 	</script>
37 | </body>
38 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-30.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-30</title>
 6 | </head>
 7 | <body>
 8 | 	<!-- 手动挂载实例 -->
 9 | 	<div id="mount-div"></div>
10 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
11 | 	<script>
12 | 		var MyComponent = Vue.extend({ //Vue.extend是基础构造器，参数是一个包含组件选项的对象
13 | 			template:'<div>hello:{{ name }}</div>',
14 | 			// 没el:'' 表示没挂载
15 | 			data:function(){
16 | 				return { name : 'Aresn'}
17 | 			}
18 | 		})
19 | 
20 | 		new MyComponent().$mount('#mount-div')  //用$mount()手动挂载一个未挂载的实例
21 | 		// 还可以这么写：
22 | 		// new MyComponent({
23 | 		// 	el:'#mount-div'
24 | 		// })
25 | 
26 | 		// 或者在文档之外渲染并且随后挂载
27 | 		// var com = new MyComponent().$mount();
28 | 		// document.getElementById('mount-div').appendChild(com.$el)
29 | 
30 | 	</script>
31 | </body>
32 | </html>


--------------------------------------------------------------------------------
/vue09/vue9-08.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue9-08</title>
 6 | </head>
 7 | <body>
 8 | 	<!-- 使用js代替模板功能 -->
 9 | 	<div id="app">
10 | 		<ele :list="list"></ele>
11 | 	</div>
12 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
13 | 	<script>
14 | 		Vue.component('ele',{
15 | 			render:function(createElement){
16 | 				var nodes = [];
17 | 				for( var i=0;i<this.list.length;i++ ){
18 | 					nodes.push( createElement('p',this.list[i]) )
19 | 				}
20 | 				return createElement('div',nodes)
21 | 			},
22 | 			props:{
23 | 				list:{
24 | 					type:Array
25 | 				}
26 | 			}
27 | 		})
28 | 		var app = new Vue({
29 | 			el:'#app',
30 | 			data:{
31 | 				list:[
32 | 					'第一行',
33 | 					'第二行',
34 | 					'第三行'
35 | 				]
36 | 			}
37 | 		})
38 | 	</script>
39 | </body>
40 | </html>


--------------------------------------------------------------------------------
/vue08/menu/clickoutside.js:
--------------------------------------------------------------------------------
 1 | Vue.directive('clickoutside',{
 2 | 	//bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
 3 | 	bind:function( el,binding,vnode ){ 
 4 | 		function documentHandler(e){
 5 | 			// 判断点击的区域是否在指令所载元素内部，是就跳出。el是指令所绑定的元素
 6 | 			if( el.contains(e.target) ){ //contains方法用来判断A是否包含B，包含返回true
 7 | 				return false;
 8 | 			}
 9 | 			if( binding.expression ){ //判断当前指令v-clickoutside有没有写表达式
10 | 				binding.value(e); //执行当前上下文methods中指定的函数handleClose
11 | 			}
12 | 		}
13 | 		//__vueClickOutside__ 是自己随便起的，el.__vueClickOutside__ 引用了documentHandler,这样就可以再后边移除监听事件
14 | 		el.__vueClickOutside__ = documentHandler; 
15 | 		document.addEventListener('click',documentHandler);	
16 | 	},
17 | 	unbind:function( el,binding ){
18 | 		document.removeEventListener('click',el.__vueClickOutside__)
19 | 		// 移除document的click事件监听。
20 | 		delete el.__vueClickOutside__;
21 | 	}
22 | 
23 | })


--------------------------------------------------------------------------------
/vue06/vue6-08.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue6-08</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<!-- 使用修饰符.lazy会转变为在change事件中同步输入框的数据。 （失去焦点或按回车才更新） -->
10 | 		<input type="text" v-model.lazy="message1">
11 | 		<p>{{ message1 }}</p>
12 | 
13 | 		<!-- 使用修饰符.number可以将输入转换为Number类型，否则虽然输入的是数字，但他类型其实是String -->
14 | 		<input type="text" v-model.number="message2">
15 | 		<p>{{ typeof message2 }}</p>
16 | 
17 | 		<!-- 使用修饰符.trim可以自动过滤输入的首尾空格 -->
18 | 		<input type="text" v-model.trim="message3">
19 | 		<p>{{ message3 }}</p>
20 | 	</div>
21 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
22 | 	<script>
23 | 		var app = new Vue({
24 | 			el:'#app',
25 | 			data:{
26 | 				message1:'',
27 | 				message2:'',
28 | 				message3:''
29 | 			}
30 | 		})
31 | 	</script>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-16.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-16</title>
 6 | </head>
 7 | <body>
 8 | 	<!-- 在子组件中，使用this.$parent可直接访问该组件的父实例或组件。父组件也可以通过this.$children访问它的所有子组件。但不提倡这样做。 -->
 9 | 	<!-- 父子组件最好还是通过props和$emit来通信。 -->
10 | 	<div id="app">
11 | 		{{ message }}
12 | 		<component-a></component-a>
13 | 	</div>
14 | 
15 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
16 | 	<script>
17 | 
18 | 		Vue.component('component-a',{
19 | 			template:'<button @click="handleEvent">通过this.$parent直接修改父组件内容</button>',
20 | 			methods:{
21 | 				handleEvent:function(){
22 | 					// 访问到父链可以做任何操作，比如直接修改数据
23 | 					this.$parent.message = '来自组件component-a的内容'
24 | 				}
25 | 			}
26 | 		})
27 | 
28 | 		var app = new Vue({
29 | 			el:'#app',
30 | 			data:{
31 | 				message:''
32 | 			}
33 | 		})
34 | 	</script>
35 | </body>
36 | </html>


--------------------------------------------------------------------------------
/vue05/vue5-06.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue5-06</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<ul>
10 | 			<li v-for="book in books">{{ book.name }}</li>
11 | 			<!-- 数组遍历或枚举一个对象循环显示时用 v-for（需要结合in） -->
12 | 			<!-- 在此，列表渲染也可用of来代替in  -->
13 | 		</ul>
14 | 		<ul>
15 | 			<li v-for="(food,index) in foods">{{ index }} - {{ food.name }}</li>
16 | 			<!-- v-for支持一个可选参数作为当前项的索引 -->
17 | 		</ul>
18 | 	</div>
19 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
20 | 	<script>
21 | 		var app = new Vue({
22 | 			el:'#app',
23 | 			data:{
24 | 				books:[
25 | 					{name:'vue实战1'},
26 | 					{name:'vue实战2'},
27 | 					{name:'vue实战3'}
28 | 				],
29 | 				foods:[
30 | 					{name:'rice1'},
31 | 					{name:'rice2'},
32 | 					{name:'rice3'}
33 | 				]
34 | 			}
35 | 		})
36 | 	</script>
37 | </body>
38 | </html>


--------------------------------------------------------------------------------
/vue09/vue9-07.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue9-07</title>
 6 | </head>
 7 | <body>
 8 | 	<!-- 使用js代替模板功能 -->
 9 | 	<!-- 在Render函数中，无法使用Vue内置指令，如v-if v-for等 无论实现什么功能，可以用原生js-->
10 | 	<div id="app">
11 | 		<ele :show="show"></ele>
12 | 		<button @click="show = !show">切换</button>
13 | 	</div>
14 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
15 | 	<script>
16 | 		Vue.component('ele',{
17 | 			render:function(createElement){
18 | 				if( this.show ){
19 | 					return createElement('p','show的值为true')
20 | 				}else{
21 | 					return createElement('p','show的值为false')
22 | 				}
23 | 			},
24 | 			props:{
25 | 				show:{
26 | 					type:Boolean,
27 | 					default:false
28 | 				}
29 | 			}
30 | 		})
31 | 		var app = new Vue({
32 | 			el:'#app',
33 | 			data:{
34 | 				show:false
35 | 			}
36 | 		})
37 | 	</script>
38 | </body>
39 | </html>


--------------------------------------------------------------------------------
/vue03/vue3-03.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue3-03</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		姓名:{{ fullName }}
10 | 	</div>
11 | 
12 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
13 | 	<script>
14 | 		var app = new Vue({
15 | 			el:'#app',
16 | 			data:{
17 | 				fristName:'Jack',
18 | 				lastName:'chen'
19 | 			},
20 | 			computed:{
21 | 				fullName:{
22 | 					// getter,用于读取
23 | 					get:function(){
24 | 						return this.fristName + ' ' + this.lastName 
25 | 					},
26 | 					// setter,写入时触发
27 | 					set:function(newValue){
28 | 						var names = newValue.split(',');
29 | 						this.fristName = names[0];
30 | 						this.lastName = names[names.length - 1];
31 | 					}
32 | 				}
33 | 			}
34 | 		})
35 | 
36 | 		// 当执行 app.fullName = 'john Doe' 时，setter就会被调用，数据视图都会更新
37 | 
38 | 	</script>
39 | </body>
40 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-17.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-17</title>
 6 | </head>
 7 | <body>
 8 | 	<!-- 子组件索引 -->
 9 | 	<div id="app">
10 | 		<button @click="handleRef">通过ref获取子组件实例</button>
11 | 		<!-- 在父组件模板中，子组件标签上使用ref指定一个名称，并在父组件内通过this.$refs来访问子组件 -->
12 | 		<component-a ref="comA"></component-a> 
13 | 	</div>
14 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
15 | 	<script>
16 | 		Vue.component('component-a',{
17 | 			template:'<div>子组件</div>',
18 | 			data:function(){
19 | 				return{ message:'子组件内容' }
20 | 			}
21 | 		});
22 | 
23 | 		var app = new Vue({
24 | 			el:'#app',
25 | 			methods:{
26 | 				handleRef:function(){
27 | 					// 通过$refs来访问指定实例
28 | 					var msg = this.$refs.comA.message;
29 | 					console.log(msg)
30 | 				}
31 | 			}
32 | 		})
33 | 
34 | 		// $refs只在组件渲染完成后才填充，并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案，应避免在模板或计算属性中使用
35 | 	</script>
36 | </body>
37 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-25.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-25</title>
 6 | </head>
 7 | <body>
 8 | 	<!-- <component>元素用来动态挂载不同组件，使用is特性选择要挂载的组件 -->
 9 | 	<div id="app">
10 | 		<component :is="currentView"></component>
11 | 		<button @click="handleChangeView('A')">切换到A</button>
12 | 		<button @click="handleChangeView('B')">切换到B</button>
13 | 		<button @click="handleChangeView('C')">切换到C</button>
14 | 	</div>
15 | 
16 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
17 | 	<script>
18 | 
19 | 		var app = new Vue({
20 | 			el:'#app',
21 | 		components:{
22 | 			comA:{template:'<div>组件A</div>'},
23 | 			comB:{template:'<div>组件B</div>'},
24 | 			comC:{template:'<div>组件C</div>'}
25 | 		},
26 | 		data:{
27 | 			currentView:'comA'
28 | 		},
29 | 		methods:{
30 | 			handleChangeView:function(com){
31 | 				this.currentView = 'com' + com
32 | 			}
33 | 		}
34 | 		})
35 | 	</script>
36 | </body>
37 | </html>


--------------------------------------------------------------------------------
/vue06/vue6-05.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue6-05</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<!-- v-model优先匹配value值，如果没有就直接匹配option的text -->
10 | 		<select name="" id="" v-model="selected">
11 | 			<option>html</option>
12 | 			<option value="js">javascript</option>
13 | 			<option>css</option>
14 | 		</select>
15 | 		<p>选择的是：{{ selected }}</p>
16 | 
17 | 		<!-- select添加multiple就可以多选了,v-model绑定的是一个数组 -->
18 | 		<select name="" id="" v-model="mul" multiple>
19 | 			<option>football</option>
20 | 			<option>basketball</option>
21 | 			<option>volleyball</option>
22 | 		</select>
23 | 		<p>选择的是：{{ mul }}</p>
24 | 
25 | 	</div>
26 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
27 | 	<script>
28 | 		var app = new Vue({
29 | 			el:'#app',
30 | 			data:{
31 | 				selected:'js',
32 | 				mul:['football','volleyball']
33 | 			}
34 | 		})
35 | 	</script>
36 | </body>
37 | </html>


--------------------------------------------------------------------------------
/vue05/vue5-09.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue5-09</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<ul>
10 | 			<template v-for="book in books">
11 | 				<li>书名：{{ book.name }}</li>
12 | 				<li>作者：{{ book.author }}</li>
13 | 			</template>
14 | 		</ul>
15 | 	</div>
16 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
17 | 	<script>
18 | 		var app = new Vue({
19 | 			el:'#app',
20 | 			data:{
21 | 				books:[
22 | 					{
23 | 						name:'第1本书',
24 | 						author:'第1作者'
25 | 					},{
26 | 						name:'第2本书javascript',
27 | 						author:'第2作者'
28 | 					},{
29 | 						name:'第3本书javascript',
30 | 						author:'第3作者'
31 | 					}
32 | 				]
33 | 			}
34 | 		})
35 | 
36 | 		// vue最大化复用DOM元素，不必担心在这里新数组覆盖旧数组有性能问题
37 | 		app.books = app.books.filter(function(item){ //filter(),concat(),slice()都返回新数组。
38 | 			return item.name.match(/javascript/)
39 | 		})
40 | 	</script>
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/vue05/vue5-12.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue5-12</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		点击次数：{{ counter }}
10 | 		<!-- @click的表达式可以使用js语句 -->
11 | 		<div @click="counter++">点击增加1</div> 
12 | 
13 | 		 <!-- @click的表达式也可以是一个在vue实例中methods内的函数名。 @click调用的方法名后，如果不需要参数的话可以不跟括号 -->
14 | 		<div @click="add">点击增加1</div>
15 | 		<div @click="handleAdd(10)">点击增加10</div> 
16 | 	</div>
17 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
18 | 	<script>
19 | 		new Vue({
20 | 			el:'#app',
21 | 			data:{
22 | 				counter:0
23 | 			},
24 | 			methods:{
25 | 				// handleAdd:function(count){
26 | 				// 	count = count || 1;
27 | 				// 	this.counter += count;
28 | 				// },
29 | 				add:function(){
30 | 					this.counter++
31 | 				},
32 | 				handleAdd(count){
33 | 					count = count || 1;
34 | 					this.counter += count;
35 | 				}
36 | 			}
37 | 		})
38 | 	</script>
39 | </body>
40 | </html>


--------------------------------------------------------------------------------
/vue05/shopping_trolley/shopping.js:
--------------------------------------------------------------------------------
 1 | var app = new Vue({
 2 | 	el:'#app',
 3 | 	data:{
 4 | 		list:[
 5 | 			{
 6 | 				id:1,
 7 | 				name:'iphone',
 8 | 				price:6000,
 9 | 				count:1			
10 | 			},{
11 | 				id:2,
12 | 				name:'ipad',
13 | 				price:2000,
14 | 				count:2	
15 | 			},{
16 | 				id:3,
17 | 				name:'macbook',
18 | 				price:18888,
19 | 				count:1	
20 | 			}
21 | 		]
22 | 	},
23 | 	computed:{
24 | 		totalPrice:function(){
25 | 			var total = 0;
26 | 			for (var i = 0; i < this.list.length; i++) {
27 | 				var item = this.list[i]
28 | 				total += item.price * item.count
29 | 			}
30 | 			return total.toString().replace(/\B(?=(\d{3})+$)/g,',') //每三位数逗号隔开
31 | 		}
32 | 	},
33 | 	methods:{
34 | 		handleReduce:function(index){
35 | 			if (this.list[index].count === 1) { return }
36 | 			this.list[index].count --
37 | 		},
38 | 		handleAdd:function(index){
39 | 			this.list[index].count ++
40 | 		},
41 | 		handleRemove:function(index){
42 | 			this.list.splice(index,1)
43 | 		}
44 | 	}
45 | })


--------------------------------------------------------------------------------
/vue07/vue7-19.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-19</title>
 6 | </head>
 7 | <body>
 8 | 	<!-- 给<slot>元素指定一个name后可以分发多个内容，具名slot可以与单个slot共存 -->
 9 | 	<div id="app">
10 | 		<child-component>
11 | 			<h2 slot="header">标题</h2>
12 | 			<div slot="footer">底部信息</div>
13 | 			<p>内容正文</p>
14 | 			<p>更多内容正文</p>
15 | 		</child-component>
16 | 	</div>
17 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
18 | 	<script>
19 | 		Vue.component('child-component',{
20 | 			// 下边的main里slot没有使用name特性，它将作为默认slot出现，父组件没有使用slot特性的元素与内容都出现在这里
21 | 			// 如果没指定默认匿名slot，父组件内多余的内容片断都将被抛弃
22 | 			template:'\
23 | 			<div class="container">\
24 | 			<div class="header"><slot name="header"></slot></div>\
25 | 			<div class="main"><slot></slot></div>\
26 | 			<div class="footer"><slot name="footer"></slot></div>\
27 | 			</div>'
28 | 		});
29 | 
30 | 		var app = new Vue({
31 | 			el:'#app'
32 | 		})
33 | 	</script>
34 | </body>
35 | </html>


--------------------------------------------------------------------------------
/vue06/vue6-02.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue6-02</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<!-- 中文输入法输入，拼音阶段也能更新数据 -->
10 | 		<!-- 带括号的是函数调用，直接立即执行函数；不带括号的是绑定事件，事件触发再执行。 -->
11 | 		<input type="text" @input="handleInput" placeholder="输入"> 
12 | 		<p>输入的内容是：{{ message }}</p>
13 | 	</div>
14 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
15 | 	<script>
16 | 		var app = new Vue({
17 | 			el:'#app',
18 | 			data:{
19 | 				message:''
20 | 			},
21 | 			methods:{
22 | 				handleInput:function(e){
23 | 					this.message = e.target.value
24 | 				}
25 | 			}
26 | 		})
27 | 	</script>
28 | 
29 | <!-- 
30 | 	<input type="text" id="myInput" oninput="myFunction()">
31 | 	<p id="demo"></p>
32 | 
33 | 	<script>
34 | 		function myFunction() {
35 | 			var x = document.getElementById("myInput").value;
36 | 			document.getElementById("demo").innerHTML = "你输入的是: " + x;
37 | 		}
38 | 	</script> 
39 | -->
40 | </body>
41 | </html>


--------------------------------------------------------------------------------
/vue09/vue9-02.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue9-02</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<anchor :level="3" title="特性">特性</anchor>
10 | 	</div>
11 | 
12 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
13 | 	<script>
14 | 		Vue.component('anchor',{
15 | 			props:{
16 | 				level:{
17 | 					type:Number,
18 | 					required:true
19 | 				},
20 | 				title:{
21 | 					type:String,
22 | 					default:''
23 | 				}
24 | 			},
25 | 			render:function(createElement){ //通过createElement参数创建Virtual Dom
26 | 				return createElement(
27 | 						'h' + this.level,
28 | 						[
29 | 							createElement(
30 | 									'a',
31 | 									{
32 | 										domProps:{
33 | 											href:'#'+this.title
34 | 										}
35 | 									},
36 | 									this.$slots.default
37 | 								)
38 | 						]
39 | 					)
40 | 			}
41 | 		})
42 | 
43 | 		var app = new Vue({
44 | 			el:'#app'
45 | 		})
46 | 	</script>
47 | </body>
48 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-14.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-14</title>
 6 | </head>
 7 | <body>
 8 | 	<!-- v-model创建自定义表单输入组件，进行数据双向绑定 -->
 9 | 	<!-- 实现具有双向绑定的v-model组件要满足下面两个条件：
10 | 	接收一个value属性
11 | 	在有新的value时触发input事件 -->
12 | 	<div id="app">
13 | 		<p>总数：{{ total }}</p>
14 | 		<my-component v-model="total"></my-component>
15 | 		<button @click="handleReduce">-1</button>
16 | 	</div>
17 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
18 | 	<script>
19 | 		Vue.component('my-component',{
20 | 			template:'<input type="text" :value="value" @input="updateValue"/>',
21 | 			props:['value'],
22 | 			methods:{
23 | 				updateValue:function(event){
24 | 					this.$emit('input',event.target.value)
25 | 				}
26 | 			}
27 | 		});
28 | 		var app = new Vue({
29 | 			el:'#app',
30 | 			data:{
31 | 				total:10
32 | 			},
33 | 			methods:{
34 | 				handleReduce:function(){
35 | 					this.total--
36 | 				}
37 | 			}
38 | 		})
39 | 	</script>
40 | </body>
41 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-21.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-21</title>
 6 | </head>
 7 | <body>
 8 | 
 9 | 	<div id="app">
10 | 		<child-component :books="bk">
11 | 			<!-- 作用域插槽也可以是具名的slot -->
12 | 			<template slot="sn" slot-scope="props">
13 | 				<li>{{ props.bookName }}</li>
14 | 			</template>
15 | 		</child-component>
16 | 	</div>
17 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
18 | 	<script>
19 | 		Vue.component('child-component',{
20 | 			props:{
21 | 				books:{ //如果是数组或对象，默认值必须是一个函数来返回。这里是数组bk
22 | 					type:Array,
23 | 					default:function(){
24 | 						return [];
25 | 					}
26 | 				}
27 | 			},
28 | 			// 或者props:['books']
29 | 			template:'<ul><slot name="sn" v-for="b in books" :book-name="b.name"></slot></ul>'
30 | 		});
31 | 
32 | 		var app = new Vue({
33 | 			el:'#app',
34 | 			data:{
35 | 				bk:[
36 | 					{name:'《Vue.js实战》'},
37 | 					{name:'javascript高级程序设计'},
38 | 					{name:'javascrip语言精粹'}
39 | 				]
40 | 			}
41 | 		})
42 | 	</script>
43 | </body>
44 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-15.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-15</title>
 6 | </head>
 7 | <body>
 8 | 	<!-- 中央事件总线bus -->
 9 | 	<div id="app">
10 | 		{{ message }}
11 | 		<component-a></component-a>
12 | 	</div>
13 | 
14 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
15 | 	<script>
16 | 		var bus = new Vue(); //创建一个空的vue实例，作为中央事件总线bus
17 | 
18 | 		Vue.component('component-a',{
19 | 			template:'<button @click="handleEvent">事件传递</button>',
20 | 			methods:{
21 | 				handleEvent:function(){
22 | 					// 点击按钮，通过bus把事件on-message发出去
23 | 					bus.$emit('on-message','来自组件component-a的内容') //子组件用$emit()来触发事件
24 | 				}
25 | 			}
26 | 		})
27 | 
28 | 		var app = new Vue({
29 | 			el:'#app',
30 | 			data:{
31 | 				message:''
32 | 			},
33 | 			mounted:function(){  //el挂载到实例app上时调用mounted
34 | 				var _this = this;
35 | 				// 在实例初始化时，监听来自bus实例的事件on-message 进而在回调里完成业务
36 | 				bus.$on('on-message',function(msg){ //父组件用$on来监听子组件
37 | 					_this.message = msg;
38 | 				})
39 | 			}
40 | 		})
41 | 	</script>
42 | </body>
43 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-28.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-28</title>
 6 | </head>
 7 | <body>
 8 | 	<!-- vue在观察到数据变化时并不是直接更新DOM。而是开启一个列队，缓冲在同一事件循环中发生的所有数据改变，去除重复数据。
 9 | 	避免不必要的计算和DOM操作。然后在下一个事件循环tick中，刷新了队列并执行实际操作。 -->
10 | 	<div id="app">
11 | 		<div id="div" v-if="showDiv">这是一段文本</div>
12 | 		<button @click="getText">获取div内容</button>
13 | 	</div>
14 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
15 | 	<script>
16 | 		var app = new Vue({
17 | 			el:'#app',
18 | 			data:{ showDiv:false },
19 | 			methods:{
20 | 				getText:function(){
21 | 					this.showDiv = true; //执行这里时vue扔没创建div
22 | 					// console.log(document.getElementById('div').innerHTML)
23 | 					this.$nextTick(function(){ //$nextTick用来知道什么时候DOM更新完成的
24 | 						var text = document.getElementById('div').innerHTML;
25 | 						console.log(text);
26 | 					})
27 | 				}
28 | 			}
29 | 		})
30 | 		// Vue核心思想就是数据驱动DOM，但很多业务里，避免不了使用第三方库，比如popper.js,swiper等。
31 | 		// 这些基于原生js的库都有创建和更新及销毁的完整生命周期，与Vue配合使用时，就要利用好$nextTick
32 | 	</script>
33 | </body>
34 | </html>


--------------------------------------------------------------------------------
/vue09/vue9-04.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue9-04</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<ele></ele>
10 | 	</div>
11 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
12 | 	<script>
13 | 		Vue.component('ele',{
14 | 			render:function(createElement){
15 | 				return createElement(
16 | 					// { String | Object | Function }
17 | 					// 一个html标签，组件选项，或一个函数
18 | 					// 必须return上述其一
19 | 						'div',
20 | 					// { Object }
21 | 					// 一个对应属性的数据对象，可选
22 | 					// 可在template中使用
23 | 						{
24 | 							class:{ 'show':this.show },
25 | 							arrts:{ id:'element' },
26 | 							on:{ click:this.handleClick }
27 | 						},
28 | 						'文本内容'
29 | 					// { String | Array }
30 | 					// 子节点(vNodes),可选
31 | 					)
32 | 			},
33 | 			data:function(){
34 | 				return { show:true }
35 | 			},
36 | 			methods:{
37 | 				handleClick:function(){
38 | 					console.log('clickde!')
39 | 				}
40 | 			}
41 | 		})
42 | 
43 | 		var app = new Vue({
44 | 			el:'#app'
45 | 		})
46 | 	</script>
47 | </body>
48 | </html>


--------------------------------------------------------------------------------
/vue09/sort_form/index.js:
--------------------------------------------------------------------------------
 1 | var app = new Vue({
 2 | 	el:'#app',
 3 | 	data:{ //key用来对应data中列内容的字段名
 4 | 		columns:[
 5 | 			{
 6 | 				title:'姓名',
 7 | 				key:'name'
 8 | 			},
 9 | 			{
10 | 				title:'年龄',
11 | 				key:'age',
12 | 				sortable:true
13 | 			},
14 | 			{
15 | 				title:'出生日期',
16 | 				key:'birthday',
17 | 				sortable:true
18 | 			},
19 | 			{
20 | 				title:'地址',
21 | 				key:'address'
22 | 			}
23 | 		],
24 | 		data:[
25 | 			{
26 | 				name:'王小明',
27 | 				age:19,
28 | 				birthday:'1999-02-21',
29 | 				address:'北京市朝阳区芍药居'
30 | 			},
31 | 			{
32 | 				name:'张小刚',
33 | 				age:26,
34 | 				birthday:'1992-01-23',
35 | 				address:'北京市海淀区西二旗'
36 | 			},
37 | 			{
38 | 				name:'李小红',
39 | 				age:31,
40 | 				birthday:'1987-05-21',
41 | 				address:'北京市石景山区苹果园'
42 | 			},
43 | 			{
44 | 				name:'周小伟',
45 | 				age:27,
46 | 				birthday:'1991-10-10',
47 | 				address:'北京市丰台区王佐镇'
48 | 			}
49 | 		]
50 | 	},
51 | 	methods:{
52 | 		handleAddData:function(){
53 | 			this.data.push({
54 | 				name:'刘小天',
55 | 				age:20,
56 | 				birthday:'1998-05-30',
57 | 				address:'北京市东城区东直门'
58 | 			})
59 | 		}
60 | 	}
61 | })


--------------------------------------------------------------------------------
/vue06/vue6-07.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue6-07</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<!-- v-model绑定动态数据，用v-bind绑定value实现 -->
10 | 		<input type="radio" name="" id="radio" v-model="picked" :value="value">
11 | 		<label for="radio">单选按钮</label>
12 | 		<p>{{ picked }}</p>
13 | 		<p>{{ value }}</p>
14 | 
15 | 		<input type="checkbox" name="" id="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
16 | 		<label for="checkbox">复选框</label>
17 | 		<p>{{ toggle }}</p>
18 | 		<p>{{ value1 }}</p>
19 | 		<p>{{ value2 }}</p>
20 | 
21 | 		<select name="" id="" v-model="selected">
22 | 			<option :value=" {number:123} ">123</option>
23 | 		</select>
24 | 		{{ selected.number }}
25 | 		
26 | 	</div>
27 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
28 | 	<script>
29 | 		var app = new Vue({
30 | 			el:'#app',
31 | 			data:{
32 | 				picked:true,
33 | 				value:123,
34 | 				toggle:false,
35 | 				value1:'a',
36 | 				value2:'b',
37 | 				selected:''
38 | 			}
39 | 		})
40 | 	</script>
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/vue09/vue9-09.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue9-09</title>
 6 | </head>
 7 | <body>
 8 | 	<!-- 使用js代替模板功能 -->
 9 | 	<!-- if...else语句 map方法 render配合渲染一个列表 -->
10 | 	<div id="app">
11 | 		<ele :list="list"></ele>
12 | 		<button @click="handleClick">显示列表</button>
13 | 	</div>
14 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
15 | 	<script>
16 | 		Vue.component('ele',{
17 | 			render:function(createElement){
18 | 				if( this.list.length ){
19 | 					return createElement('ul',this.list.map(function(item){
20 | 						return createElement('li',item)
21 | 					}))
22 | 				}else{
23 | 					return createElement('p','列表为空')
24 | 				}
25 | 			},
26 | 			props:{
27 | 				list:{
28 | 					type:Array,
29 | 					default:function(){ return [] }
30 | 				}
31 | 			}
32 | 		})
33 | 
34 | 		var app = new Vue({
35 | 			el:'#app',
36 | 			data:{
37 | 				list:[]
38 | 			},
39 | 			methods:{
40 | 				handleClick:function(){
41 | 					this.list = [
42 | 					'第一行',
43 | 					'第二行',
44 | 					'第三行'
45 | 					]
46 | 				}
47 | 			}
48 | 		})
49 | 	</script>
50 | </body>
51 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-22.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue7-22</title>
 6 | </head>
 7 | <body>
 8 | 	<!-- 访问slot -->
 9 | 	<!-- vue1.x想获取某个slot比较麻烦，需要用v-el间接获取，vue2.x提供用来访问被slot分发的内容的方法$slots -->
10 | 
11 | 	<div id="app">
12 | 		<child-component>
13 | 			<h2 slot="header">标题</h2>
14 | 			<p>内容正文</p>
15 | 			<p>更多内容正文</p>
16 | 			<div slot="footer">底部信息</div>
17 | 		</child-component>
18 | 	</div>
19 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
20 | 	<script>
21 | 		Vue.component('child-component',{
22 | 			template:'\
23 | 			<div class="container">\
24 | 			<div class="header"><slot name="header"></slot></div>\
25 | 			<div class="main"><slot></slot></div>\
26 | 			<div class="footer"><slot name="footer"></slot></div>\
27 | 			</div>',
28 | 			mounted:function(){
29 | 				var header = this.$slots.header;
30 | 				var main = this.$slots.default;
31 | 				var footer = this.$slots.footer;
32 | 				console.log(header);
33 | 				console.log(footer[0].elm.innerHTML)
34 | 			}
35 | 		});
36 | 
37 | 		var app = new Vue({
38 | 			el:'#app'
39 | 		})
40 | 	</script>
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/vue05/vue5-04.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue5-04</title>
 6 | </head>
 7 | <body>
 8 | 	<!-- 出于效率考虑，vue渲染元素时会尽可能复用已有元素。 -->
 9 | 	<!-- 下例键入内容虽然DOM变了，但之前输入内容没变，只替换了placeholder内容，说明input被复用了。 
10 | 	vue提供key属性，可以让你自己决定时否要复用元素。key值是唯一的。 -->
11 | 	<div id="app">
12 | 		<template v-if="type === 'name'">
13 | 			<label for="">用户名：</label>
14 | 			<!-- <input type="text" placeholder="输入用户名"> -->
15 | 			<input type="text" placeholder="输入用户名" key="name-input">
16 | 		</template>
17 | 		<template v-else>
18 | 			<label for="">邮箱：</label>
19 | 			<!-- <input type="text" placeholder="输入邮箱"> -->
20 | 			<input type="text" placeholder="输入邮箱" key="mail-input">
21 | 		</template>
22 | 		<button @click="handleToggleClick">切换输入类型</button>
23 | 	</div>
24 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
25 | 	<script>
26 | 		var app = new Vue({
27 | 			el:'#app',
28 | 			data:{
29 | 				type:'name'
30 | 			},
31 | 			methods:{
32 | 				handleToggleClick:function(){
33 | 					this.type = this.type === 'name' ? 'mail' : 'name'
34 | 				}
35 | 			}
36 | 		})
37 | 	</script>
38 | </body>
39 | </html>


--------------------------------------------------------------------------------
/vue13/daily/src/libs/util.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | // 基本配置
 3 | const Util = {
 4 | 	imgPath:'http://127.0.0.1:8011/img/',
 5 | 	apiPath:'http://127.0.0.1:8010/'
 6 | }
 7 | 
 8 | // ajax通用配置
 9 | Util.ajax = axios.create({ //自定义配置新建一个 axios 实例
10 | 	baseURL:Util.apiPath
11 | })
12 | 
13 | // 添加响应拦截器 在响应被 then 或 catch 处理前拦截它们。
14 | Util.ajax.interceptors.response.use(res=>{
15 | 	return res.data;
16 | });
17 | 
18 | // 获取今天的时间戳
19 | Util.getTodayTime = function () {
20 |     const date = new Date();
21 |     date.setHours(0);
22 |     date.setMinutes(0);
23 |     date.setSeconds(0);
24 |     date.setMilliseconds(0);
25 |     return date.getTime();
26 | };
27 | 
28 | //获取今天日期 。但在推荐列表api里日期要比真实日期多一天。所以获取今天就要加86400000
29 | Util.prevDay = function (timestamp = (new Date()).getTime()) {
30 |     const date = new Date(timestamp);
31 |     const year = date.getFullYear();
32 |     const month = date.getMonth() + 1 < 10
33 |         ? '0' + (date.getMonth() + 1)
34 |         : date.getMonth() + 1;
35 |     const day = date.getDate() < 10
36 |         ? '0' + date.getDate()
37 |         : date.getDate();
38 |     return year + '' + month + '' + day;
39 | };
40 | 
41 | export default Util;


--------------------------------------------------------------------------------
/vue14/shopping/src/views/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<h1>首页</h1>
 4 | 		<div>{{ count }}</div>
 5 | 		<button @click="handleIncrement">+10</button>
 6 | 		<button @click="handleDecrease">-1</button>
 7 | 		<div>{{ list }}</div>
 8 | 		<div>{{ listCount }}</div>
 9 | 		<button @click="handleAsyncIncrement">async +10</button>
10 | 	</div>
11 | </template>
12 | <script>
13 | 	export default{
14 | 		computed:{
15 | 			count(){
16 | 				return this.$store.state.count;
17 | 			},
18 | 			list(){
19 | 				return this.$store.getters.filteredList;
20 | 			},
21 | 			listCount(){
22 | 				return this.$store.getters.listCount;
23 | 			}
24 | 		},
25 | 		methods:{
26 | 			handleIncrement(){
27 | 				// 通过this.$store.commit方法来执行main.js里vuex对应的mutations完成逻辑业务
28 | 				this.$store.commit('increment')
29 | 			},
30 | 			handleDecrease(){
31 | 				this.$store.commit('decrease')
32 | 				// mutation的另一种方式是直接使用包含type属性的对象，如：
33 | 				// this.$store.commit({type:'decrease'})
34 | 			},
35 | 			handleAsyncIncrement(){
36 | 				this.$store.dispatch('asyncIncrement').then(()=>{ //actions在组件内通过$store.dispatch触发
37 | 					console.log(this.$store.state.count)
38 | 				})
39 | 			}
40 | 		}
41 | 	}
42 | </script>


--------------------------------------------------------------------------------
/vue05/shopping_trolley/shopping.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>shopping</title>
 6 | 	<link rel="stylesheet" href="shopping.css">
 7 | </head>
 8 | <body>
 9 | 	<div id="app" v-cloak>
10 | 		<template v-if="list.length">
11 | 			<table>
12 | 				<thead>
13 | 					<tr>
14 | 						<th></th>
15 | 						<th>商品名称</th>
16 | 						<th>商品单价</th>
17 | 						<th>购买数量</th>
18 | 						<th>操作</th>
19 | 					</tr>
20 | 				</thead>
21 | 				<tbody>
22 | 					<tr v-for="(item,index) in list">
23 | 						<td>{{ index }}</td>
24 | 						<td>{{ item.name }}</td>
25 | 						<td>{{ item.price }}</td>
26 | 						<td>
27 | 							<button @click="handleReduce(index)" :disabled="item.count === 1">-</button>
28 | 							{{item.count}}
29 | 							<button @click="handleAdd(index)">+</button>
30 | 						</td>
31 | 						<td><button @click="handleRemove(index)">移除</button></td>
32 | 					</tr>
33 | 				</tbody>
34 | 			</table>
35 | 			<div>总价：¥ {{ totalPrice }}</div>
36 | 		</template>
37 | 		<div v-else>购物车为空</div>
38 | 	</div>
39 | 
40 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
41 | 	<script src=shopping.js></script>
42 | </body>
43 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-13.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>vue7-13</title>
 6 | </head>
 7 | <body>
 8 |     <!-- 子组件向父组件通信 -->
 9 | 
10 |     <!-- vue2.0可以在自定义组件上使用v-model指令 -->
11 |     <div id="app">
12 |         <p>总数:{{ total }}</p>
13 |         <my-component v-model="total"></my-component>
14 |     </div>
15 |     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
16 |     <script>
17 |         Vue.component('my-component',{
18 |             template:'<div><button @click="handleIncrease">+1</button></div>',
19 |             data:function(){
20 |                 return { counter:0 }
21 |             },
22 |             methods:{
23 |                 handleIncrease:function(){
24 |                     this.counter++
25 |                     // 通过$emit()第一个参数事件名是特殊的input，并没有在父级上使用@input，而是直接用了v-model绑定total。这里v-model也是一个语法糖。
26 |                     this.$emit( 'input',this.counter )
27 |                 }
28 |             }
29 |         });
30 | 
31 |         var app = new Vue({
32 |             el:'#app',
33 |             data:{
34 |                 total:0
35 |             }
36 |         })
37 |     </script>
38 | </body>
39 | </html>


--------------------------------------------------------------------------------
/vue09/message_list/list.js:
--------------------------------------------------------------------------------
 1 | Vue.component('list',{
 2 | 	props:{
 3 | 		list:{
 4 | 			type:Array,
 5 | 			default:function(){
 6 | 				return []
 7 | 			}
 8 | 		}
 9 | 	},
10 | 	render:function(h){
11 | 		var _this = this;
12 | 		var list = [];
13 | 		this.list.forEach(function( msg,index ){
14 | 			var node = h('div',{
15 | 				attrs:{
16 | 					class:'list-item'
17 | 				}
18 | 			},[
19 | 				h('span',msg.name + ':'),
20 | 				h('div',{
21 | 					attrs:{
22 | 						class:'list-msg'
23 | 					}
24 | 				},[
25 | 					h('p',msg.message),
26 | 					h('a',{
27 | 						attrs:{
28 | 							class:'list-reply'
29 | 						},
30 | 						on:{
31 | 							click:function(){
32 | 								_this.handleReply(index)
33 | 							}
34 | 						}
35 | 					},'回复')
36 | 				])
37 | 			])
38 | 			list.push(node);
39 | 		});
40 | 
41 | 		if( this.list.length ){
42 | 			return h('div',{
43 | 				attrs:{
44 | 					class:'list'
45 | 				}
46 | 			},list);
47 | 		}else{
48 | 			return h('div',{
49 | 				attrs:{
50 | 					class:'list-nothing'
51 | 				}
52 | 			},'留言列表为空')
53 | 		}
54 | 	},
55 | 	methods:{
56 | 		// 直接向父组件(app)派发一个事件reply，父组件接收后，将当前list-item的昵称提取，并设置到v-textarea内
57 | 		handleReply:function(index){
58 | 			this.$emit('reply',index)
59 | 		}
60 | 	}
61 | })


--------------------------------------------------------------------------------
/vue07/label_page/tabs.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>标签页组件</title>
 6 | 	<link rel="stylesheet" href="style.css">
 7 | </head>
 8 | <body>
 9 | 	<!-- 技术点： -->
10 | 	<!-- 使用组件嵌套的方式，将一系列pane组件作为tabs组件的slot -->
11 | 	<!-- tabs组件pane组件通信上用$parent和$children的方法访问父链和子链 -->
12 | 	<!-- 定义了prop: value和data: currentValue, 使用$emit('input')来实现v-model的用法 -->
13 | 	
14 | 	<div id="app" v-cloak>
15 | 		<tabs v-model="activeKey">
16 | 			<pane label="标签一" name="a">
17 | 				<p>标签一的内容</p>
18 | 				<p>标签一的内容</p>
19 | 				<p>标签一的内容</p>
20 | 			</pane>
21 | 			<pane label="标签二" name="b">标签二的内容</pane>
22 | 			<pane label="标签三" name="c">标签三的内容</pane>
23 | 		</tabs>
24 | 		<tabs v-model="activeKey1">
25 | 			<pane label="标签一" name="1">标签1的内容</pane>
26 | 			<pane label="标签二" name="2">标签2的内容</pane>
27 | 			<pane label="标签三" name="3">标签3的内容</pane>
28 | 		</tabs>
29 | 	</div>
30 |     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
31 | 	<script src="pane.js"></script>
32 | 	<script src="tabs.js"></script>
33 | 	<script>
34 | 		var app = new Vue({
35 | 			el:'#app',
36 | 			data:{
37 | 				activeKey:"b",
38 | 				activeKey1:""
39 | 			}
40 | 		})
41 | 	</script>
42 | </body>
43 | </html>


--------------------------------------------------------------------------------
/vue10/demo/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "demo",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "dev": "webpack-dev-server --mode development --open --config webpack.config.js",
 8 |     "build": "webpack --progress --mode production --hide-modules --config webpack.prod.config.js"
 9 |   },
10 |   "author": "",
11 |   "license": "ISC",
12 |   "devDependencies": {
13 |     "babel": "^6.23.0",
14 |     "babel-cli": "^6.26.0",
15 |     "babel-core": "^6.26.3",
16 |     "babel-loader": "^7.1.5",
17 |     "babel-plugin-transform-runtime": "^6.23.0",
18 |     "babel-preset-env": "^1.7.0",
19 |     "babel-runtime": "^6.26.0",
20 |     "css-loader": "^1.0.0",
21 |     "file-loader": "^2.0.0",
22 |     "html-webpack-plugin": "^3.2.0",
23 |     "mini-css-extract-plugin": "^0.4.2",
24 |     "style-loader": "^0.22.1",
25 |     "url-loader": "^1.1.1",
26 |     "vue-hot-reload-api": "^2.3.0",
27 |     "vue-loader": "^15.4.0",
28 |     "vue-style-loader": "^4.1.2",
29 |     "vue-template-compiler": "^2.5.17",
30 |     "webpack": "^4.17.1",
31 |     "webpack-cli": "^3.1.0",
32 |     "webpack-dev-server": "^3.1.5",
33 |     "webpack-merge": "^4.1.4"
34 |   },
35 |   "dependencies": {
36 |     "vue": "^2.5.17"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/vue09/vue9-10.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue9-10</title>
 6 | </head>
 7 | <body>
 8 | 	<!-- 使用js代替模板功能 -->
 9 | 	<!-- render函数里也没有与v-model对应的API。需要自己来实现逻辑 -->
10 | 	<!-- v-model就是prop:value和event:input组合使用的一个语法糖 -->
11 | 	<div id="app">
12 | 		<ele></ele>
13 | 	</div>
14 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
15 | 	<script>
16 | 		Vue.component('ele',{
17 | 			render:function(createElement){
18 | 				// var _this = this;
19 | 				return createElement('div',[// 子节点(vNodes),可选
20 | 						createElement('input',{
21 | 							domProps:{ //DOM属性，例如innerHTML:'baz'
22 | 								value:this.value
23 | 							},
24 | 							on:{
25 | 								// input:function(event){
26 | 								input:(event) =>{
27 | 									// _this.value = event.target.value
28 | 									this.value = event.target.value
29 | 								}
30 | 							}
31 | 						}),
32 | 						createElement('p','value:' + this.value)
33 | 					])
34 | 			},
35 | 			data:function(){
36 | 				return { value:'' }
37 | 			}
38 | 		})
39 | 		var app = new Vue({
40 | 			el:'#app'
41 | 		})
42 | 
43 | 		// Render函数对应template写法：
44 | 		// <div><input v-model="value"/><p>value:{{value}}</p></div>
45 | 	</script>
46 | </body>
47 | </html>


--------------------------------------------------------------------------------
/vue09/message_list/input.js:
--------------------------------------------------------------------------------
 1 | Vue.component('vInput',{
 2 | 	props:{
 3 | 		value:{
 4 | 			type:[String,Number],
 5 | 			default:''
 6 | 		}
 7 | 	},
 8 | 	render:function(h){
 9 | 		var _this = this;
10 | 		return h('div',[
11 | 				h('span','昵称:'),
12 | 				h('input',{
13 | 					attrs:{
14 | 						type:'text'
15 | 					},
16 | 					domProps:{
17 | 						value:this.value
18 | 					},
19 | 					on:{
20 | 						input:function(event){
21 | 							_this.value = event.target.value;
22 | 							_this.$emit('input',event.target.value);
23 | 						}
24 | 					}
25 | 				})
26 | 			])
27 | 	}
28 | });
29 | 
30 | Vue.component('vTextarea',{
31 | 	props:{
32 | 		value:{
33 | 			type:String,
34 | 			default:''
35 | 		}
36 | 	},
37 | 	render:function(h){
38 | 		var _this = this;
39 | 		return h('div',[
40 | 				h('span','留言内容'),
41 | 				h('textarea',{
42 | 					attrs:{
43 | 						placeholder:'请输入留言内容'
44 | 					},
45 | 					domProps:{
46 | 						value:this.value
47 | 					},
48 | 					ref:'message',
49 | 					on:{
50 | 						input:function(event){
51 | 							_this.value = event.target.value;
52 | 							_this.$emit('input',event.target.value);
53 | 						}
54 | 					}
55 | 				})
56 | 			])
57 | 	},
58 | 	methods:{
59 | 		focus:function(){
60 | 			this.$refs.message.focus();
61 | 		}
62 | 	}
63 | })


--------------------------------------------------------------------------------
/vue05/vue5-10.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue5-10</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<ul>
10 | 			<template v-for="book in books">
11 | 				<li>书名：{{ book.name }}</li>
12 | 				<li>作者：{{ book.author }}</li>
13 | 			</template>
14 | 		</ul>
15 | 	</div>
16 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
17 | 	<script>
18 | 		var app = new Vue({
19 | 			el:'#app',
20 | 			data:{
21 | 				books:[
22 | 					{
23 | 						name:'第1本书',
24 | 						author:'第1作者'
25 | 					},{
26 | 						name:'第2本书javascript',
27 | 						author:'第2作者'
28 | 					},{
29 | 						name:'第3本书javascript',
30 | 						author:'第3作者'
31 | 					}
32 | 				]
33 | 			}
34 | 		})
35 | 
36 | 		// array.splice(index,howmany,item1,...itemX)
37 | 		// index 必需。规定从何处添加/删除元素。
38 | 		// howmany必需。规定应该删除多少元素。必须是数字，但可以是 "0"
39 | 		// item1,...itemX要添加到数组的新元素
40 | 
41 | 		app.books.splice(3,0,{
42 | 			name:'最后一本书',
43 | 			author:'最后一本书作者'
44 | 		})	
45 | 
46 | 		var a = app.books.splice(1) // splice()如果删除了元素，则返回的是含有被删除的元素的数组。
47 | 
48 | 
49 | 		// 在以下变动数组中，vue是不能检测到的也不会触发视图更新，可以用splice()解决或vue内置set方法
50 | 		// 通过索引直接设置： app.books[3] = {...}
51 | 		// 修改数组长度:app.books.length = 1
52 | 	</script>
53 | </body>
54 | </html>


--------------------------------------------------------------------------------
/vue11/router/webpack.prod.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | // const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
 5 | const { VueLoaderPlugin } = require('vue-loader');
 6 | const merge = require('webpack-merge');
 7 | const webpackBaseConfig = require('./webpack.config.js');
 8 | 
 9 | webpackBaseConfig.plugins = [];
10 | 
11 | module.exports = merge(webpackBaseConfig,{
12 | 	output:{
13 | 		publicPath:'/dist/',
14 | 		filename:'[name].[hash].js'
15 | 	},
16 | 	plugins:[
17 | 		new ExtractTextPlugin({
18 | 			filename:'[name].[hash].css', 
19 | 			allChunks:true
20 | 		}),
21 | 		// new MiniCssExtractPlugin({
22 | 		// 	filename:'[name].[hash].css'
23 | 		// }),
24 | 		new webpack.DefinePlugin({
25 | 			'process.env':{
26 | 				NODE_ENV:'"production"'
27 | 			}
28 | 		}),
29 | 		// 压缩已经不用写UglifyJsPlugin
30 | 		// new webpack.optimize.UglifyJsPlugin({
31 | 		// 	compress:{
32 | 		// 		warnings:false
33 | 		// 	}
34 | 		// }),
35 | 		new HtmlWebpackPlugin({
36 | 			filename:'../index_prod.html',
37 | 			template:'./index.ejs',
38 | 			inject:false
39 | 		}),
40 | 		new VueLoaderPlugin() //vue-loader，15的版本需要再添加plugin的配置
41 | 	]
42 | });


--------------------------------------------------------------------------------
/vue11/vuex/webpack.prod.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | // const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
 5 | const { VueLoaderPlugin } = require('vue-loader');
 6 | const merge = require('webpack-merge');
 7 | const webpackBaseConfig = require('./webpack.config.js');
 8 | 
 9 | webpackBaseConfig.plugins = [];
10 | 
11 | module.exports = merge(webpackBaseConfig,{
12 | 	output:{
13 | 		publicPath:'/dist/',
14 | 		filename:'[name].[hash].js'
15 | 	},
16 | 	plugins:[
17 | 		new ExtractTextPlugin({
18 | 			filename:'[name].[hash].css', 
19 | 			allChunks:true
20 | 		}),
21 | 		// new MiniCssExtractPlugin({
22 | 		// 	filename:'[name].[hash].css'
23 | 		// }),
24 | 		new webpack.DefinePlugin({
25 | 			'process.env':{
26 | 				NODE_ENV:'"production"'
27 | 			}
28 | 		}),
29 | 		// 压缩已经不用写UglifyJsPlugin
30 | 		// new webpack.optimize.UglifyJsPlugin({
31 | 		// 	compress:{
32 | 		// 		warnings:false
33 | 		// 	}
34 | 		// }),
35 | 		new HtmlWebpackPlugin({
36 | 			filename:'../index_prod.html',
37 | 			template:'./index.ejs',
38 | 			inject:false
39 | 		}),
40 | 		new VueLoaderPlugin() //vue-loader，15的版本需要再添加plugin的配置
41 | 	]
42 | });


--------------------------------------------------------------------------------
/vue11/vue-bus/webpack.prod.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | // const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
 5 | const { VueLoaderPlugin } = require('vue-loader');
 6 | const merge = require('webpack-merge');
 7 | const webpackBaseConfig = require('./webpack.config.js');
 8 | 
 9 | webpackBaseConfig.plugins = [];
10 | 
11 | module.exports = merge(webpackBaseConfig,{
12 | 	output:{
13 | 		publicPath:'/dist/',
14 | 		filename:'[name].[hash].js'
15 | 	},
16 | 	plugins:[
17 | 		new ExtractTextPlugin({
18 | 			filename:'[name].[hash].css', 
19 | 			allChunks:true
20 | 		}),
21 | 		// new MiniCssExtractPlugin({
22 | 		// 	filename:'[name].[hash].css'
23 | 		// }),
24 | 		new webpack.DefinePlugin({
25 | 			'process.env':{
26 | 				NODE_ENV:'"production"'
27 | 			}
28 | 		}),
29 | 		// 压缩已经不用写UglifyJsPlugin
30 | 		// new webpack.optimize.UglifyJsPlugin({
31 | 		// 	compress:{
32 | 		// 		warnings:false
33 | 		// 	}
34 | 		// }),
35 | 		new HtmlWebpackPlugin({
36 | 			filename:'../index_prod.html',
37 | 			template:'./index.ejs',
38 | 			inject:false
39 | 		}),
40 | 		new VueLoaderPlugin() //vue-loader，15的版本需要再添加plugin的配置
41 | 	]
42 | });


--------------------------------------------------------------------------------
/vue13/daily/webpack.prod.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 4 | // const ExtractTextPlugin = require('extract-text-webpack-plugin');
 5 | const { VueLoaderPlugin } = require('vue-loader');
 6 | const merge = require('webpack-merge');
 7 | const webpackBaseConfig = require('./webpack.config.js');
 8 | 
 9 | webpackBaseConfig.plugins = [];
10 | 
11 | module.exports = merge(webpackBaseConfig,{
12 | 	output:{
13 | 		publicPath:'/dist/',
14 | 		filename:'[name].[hash].js'
15 | 	},
16 | 	plugins:[
17 | 		// new ExtractTextPlugin({
18 | 		// 	filename:'[name].[hash].css', 
19 | 		// 	allChunks:true
20 | 		// }),
21 | 		new MiniCssExtractPlugin({
22 | 			filename:'[name].[hash].css'
23 | 		}),
24 | 		new webpack.DefinePlugin({
25 | 			'process.env':{
26 | 				NODE_ENV:'"production"'
27 | 			}
28 | 		}),
29 | 		// 压缩已经不用写UglifyJsPlugin
30 | 		// new webpack.optimize.UglifyJsPlugin({
31 | 		// 	compress:{
32 | 		// 		warnings:false
33 | 		// 	}
34 | 		// }),
35 | 		new HtmlWebpackPlugin({
36 | 			filename:'../index_prod.html',
37 | 			template:'./index.ejs',
38 | 			inject:false
39 | 		}),
40 | 		new VueLoaderPlugin() //vue-loader，15的版本需要再添加plugin的配置
41 | 	]
42 | });


--------------------------------------------------------------------------------
/vue14/shopping/webpack.prod.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 4 | // const ExtractTextPlugin = require('extract-text-webpack-plugin');
 5 | const { VueLoaderPlugin } = require('vue-loader');
 6 | const merge = require('webpack-merge');
 7 | const webpackBaseConfig = require('./webpack.config.js');
 8 | 
 9 | webpackBaseConfig.plugins = [];
10 | 
11 | module.exports = merge(webpackBaseConfig,{
12 | 	output:{
13 | 		publicPath:'/dist/',
14 | 		filename:'[name].[hash].js'
15 | 	},
16 | 	plugins:[
17 | 		// new ExtractTextPlugin({
18 | 		// 	filename:'[name].[hash].css', 
19 | 		// 	allChunks:true
20 | 		// }),
21 | 		new MiniCssExtractPlugin({
22 | 			filename:'[name].[hash].css'
23 | 		}),
24 | 		new webpack.DefinePlugin({
25 | 			'process.env':{
26 | 				NODE_ENV:'"production"'
27 | 			}
28 | 		}),
29 | 		// 压缩已经不用写UglifyJsPlugin
30 | 		// new webpack.optimize.UglifyJsPlugin({
31 | 		// 	compress:{
32 | 		// 		warnings:false
33 | 		// 	}
34 | 		// }),
35 | 		new HtmlWebpackPlugin({
36 | 			filename:'../index_prod.html',
37 | 			template:'./index.ejs',
38 | 			inject:false
39 | 		}),
40 | 		new VueLoaderPlugin() //vue-loader，15的版本需要再添加plugin的配置
41 | 	]
42 | });


--------------------------------------------------------------------------------
/vue10/demo/webpack.prod.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 4 | // const ExtractTextPlugin = require('extract-text-webpack-plugin');
 5 | const { VueLoaderPlugin } = require('vue-loader');
 6 | const merge = require('webpack-merge');
 7 | const webpackBaseConfig = require('./webpack.config.js');
 8 | 
 9 | webpackBaseConfig.plugins = [];
10 | 
11 | module.exports = merge(webpackBaseConfig,{
12 | 	output:{
13 | 		publicPath:'/dist/',
14 | 		filename:'[name].[chunkhash].js'
15 | 	},
16 | 	plugins:[
17 | 		// new ExtractTextPlugin({
18 | 		// 	filename:'[name].[hash].css', 
19 | 		// 	allChunks:true
20 | 		// }),
21 | 		new MiniCssExtractPlugin({
22 | 			filename:'[name].[chunkhash].css'
23 | 		}),
24 | 		new webpack.DefinePlugin({
25 | 			'process.env':{
26 | 				NODE_ENV:'"production"'
27 | 			}
28 | 		}),
29 | 		// 压缩已经不用写UglifyJsPlugin
30 | 		// new webpack.optimize.UglifyJsPlugin({
31 | 		// 	compress:{
32 | 		// 		warnings:false
33 | 		// 	}
34 | 		// }),
35 | 		new HtmlWebpackPlugin({
36 | 			filename:'../index_prod.html',
37 | 			template:'./index.ejs',
38 | 			inject:false
39 | 		}),
40 | 		new VueLoaderPlugin() //vue-loader，15的版本需要再添加plugin的配置
41 | 	]
42 | });


--------------------------------------------------------------------------------
/vue11/router/src/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'; //导入vue框架
 2 | import VueRouter from 'vue-router';
 3 | import App from './app.vue'; //导入app.vue组件
 4 | 
 5 | Vue.use(VueRouter)
 6 | 
 7 | const Routers = [
 8 | 		//resolve在请求页面时，才去加载这个页面的js。异步实现懒加载。 使用了异步路由后，编译出的每个页面的js都叫chunk(块)
 9 | 		//如要一次性加载，可以： component:require('.views/index.vue')
10 | 	{
11 | 		path:'/index',
12 | 		meta:{
13 | 			title:'首页'
14 | 		},
15 | 		component:(resolve) => require(['./views/index.vue'],resolve)
16 | 	},
17 | 	{
18 | 		path:'/about',
19 | 		meta:{
20 | 			title:'关于'
21 | 		},
22 | 		component:(resolve) => require(['./views/about.vue'],resolve)
23 | 	},
24 | 	{
25 | 		path:'/user/:id',
26 | 		meta:{
27 | 			title:'个人主页'
28 | 		},
29 | 		component:(resolve) => require(['./views/user.vue'],resolve)
30 | 	},
31 | 	// 当访问的路径不存在，重新定向到首页
32 | 	{
33 | 		path:'*',
34 | 		redirect:'/index'
35 | 	}
36 | ];
37 | 
38 | const router = new VueRouter({
39 | 	//使用html的History路由模式
40 | 	mode:'history',
41 | 	routes: Routers
42 | });
43 | 
44 | 
45 | router.beforeEach((to,from,next)=>{
46 | 	//参数：即将要进入的目标的路由对象，当前导航即将要离开的路由对象，调用该方法后才能进入下一个钩子。
47 | 	window.document.title = to.meta.title;
48 | 	next(); //调用该方法才能进入下一个钩子
49 | })
50 | 
51 | new Vue({
52 |     el: '#app',
53 |     router:router,
54 |     render: h => {
55 |         return h(App);
56 |     }
57 | });
58 | 


--------------------------------------------------------------------------------
/vue09/vue9-05.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue9-05</title>
 6 | </head>
 7 | <body>
 8 | 	<!-- 所有组件树中，如果vNode是组件或含有组件slot，那么vNode必须唯一 -->
 9 | 	<!-- 重复渲染多个组件或元素 -->
10 | 
11 | 	<div id="app">
12 | 		<ele></ele>
13 | 	</div>
14 | 
15 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
16 | 	<script>
17 | 		// 局部声明组件
18 | 		var Child = {
19 | 			render:function(createElement){
20 | 				return createElement( 'p','text' )
21 | 			}
22 | 		}
23 | 		Vue.component('ele',{
24 | 			render:function(createElement){
25 | 				return createElement(
26 | 					'div',
27 | 					// Array.apply(null,array)要求第二个参数是一个数组，Array.apply(null,[1,2,3])返回[1,2,3]
28 | 					// 当第二个参数为一个带有length属性的对象时，则会当做一个数组来使用。
29 | 					// 所以Array.apply(null,{length:5})返回的结果为[undefined,undefined,undefined,undefined,undefined]
30 | 					//相当于创建数组里边五个undefined 
31 | 					// 	[undefined,undefined,undefined,undefined,undefined].map(function(){
32 | 					// 	return createElement( Child )
33 | 					// })
34 | 					Array.apply( null,{
35 | 						length:5
36 | 					}).map(function(){
37 | 						// map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
38 | 						return createElement( Child )
39 | 					})
40 | 				)
41 | 			}
42 | 		})
43 | 		var app = new Vue({
44 | 			el:'#app'
45 | 		})
46 | 	</script>
47 | </body>
48 | </html>


--------------------------------------------------------------------------------
/vue09/vue9-11.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue9-11</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<ele></ele>
10 | 	</div>
11 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
12 | 	<script>
13 | 		Vue.component('ele',{
14 | 			render:function(createElement){
15 | 				var _this = this;
16 | 				// 渲染聊天内容列表
17 | 				if( this.list.length ){
18 | 					return createElement('ul',this.list.map(function(item){
19 | 						return createElement('li',item)
20 | 					}))
21 | 				}else{
22 | 					var listNode = createElement('p','暂时无聊天内容')
23 | 				}
24 | 				return createElement('div',[
25 | 						listNode,
26 | 						createElement('input',{
27 | 							attrs:{ placeholder:'输入内容，按回车键发送' }, //attrs 正常的html特性
28 | 							style:{ width:'200px' },
29 | 							on:{ keyup:function(event){
30 | 								// 如果不是回车键，不发送数据
31 | 								if( event.keyCode !== 13 ) return;
32 | 								// 添加输入内容到聊天列表
33 | 								_this.list.push( event.target.value );
34 | 								// 发送后清空输入框
35 | 								event.target.value = ''
36 | 							} }
37 | 						})
38 | 					])
39 | 			},
40 | 			data:function(){
41 | 				return { 
42 | 					value:'',
43 | 					list:[] 
44 | 				}
45 | 			}
46 | 		})
47 | 		var app = new Vue({
48 | 			el:'#app'
49 | 		})
50 | 	</script>
51 | </body>
52 | </html>


--------------------------------------------------------------------------------
/vue03/vue3-02.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue3-02</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		总价：{{ prices }}
10 | 	</div>
11 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
12 | 	<script>
13 | 		var app = new Vue({
14 | 			el:'#app',
15 | 			data:{
16 | 				package1:[
17 | 					{
18 | 						name:'iphonex',
19 | 						price:2000,
20 | 						count:2
21 | 					},
22 | 					{
23 | 						name:'ipad',
24 | 						price:1800,
25 | 						count:1
26 | 					}
27 | 				],
28 | 				package2:[
29 | 					{
30 | 						name:'apple',
31 | 						price:3,
32 | 						count:5
33 | 					},
34 | 					{
35 | 						name:'banana',
36 | 						price:5,
37 | 						count:10
38 | 					}
39 | 				]
40 | 			},
41 | 			//计算属性computed是给予他的依赖缓存的，计算属性所依赖的数据发生变化，他才会重新取值，遍历大数组和做大量计算时当用计算属性。
42 | 			//methods则不同，只要重新渲染，就会被调用，函数就会被执行。    
43 | 			computed:{ 
44 | 				prices:function(){
45 | 					var prices = 0;
46 | 					for (var i = 0; i < this.package1.length; i++) {
47 | 						prices += this.package1[i].price * this.package1[i].count;
48 | 					}
49 | 					for (var i = 0; i < this.package2.length; i++) {
50 | 						prices += this.package2[i].price * this.package2[i].count;
51 | 					}
52 | 					return prices;
53 | 				}
54 | 			}
55 | 		})
56 | 	</script>
57 | </body>
58 | </html>


--------------------------------------------------------------------------------
/vue14/shopping/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "demo",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "dev": "webpack-dev-server --mode development --history-api-fallback --open --config webpack.config.js",
 8 |     "build": "webpack --progress --mode production --hide-modules --config webpack.prod.config.js"
 9 |   },
10 |   "author": "",
11 |   "license": "ISC",
12 |   "devDependencies": {
13 |     "babel": "^6.23.0",
14 |     "babel-cli": "^6.26.0",
15 |     "babel-core": "^6.26.3",
16 |     "babel-loader": "^7.1.5",
17 |     "babel-plugin-transform-runtime": "^6.23.0",
18 |     "babel-preset-env": "^1.7.0",
19 |     "babel-runtime": "^6.26.0",
20 |     "css-loader": "^1.0.0",
21 |     "file-loader": "^2.0.0",
22 |     "html-webpack-plugin": "^3.2.0",
23 |     "mini-css-extract-plugin": "^0.4.2",
24 |     "style-loader": "^0.22.1",
25 |     "url-loader": "^1.1.1",
26 |     "vue-hot-reload-api": "^2.3.0",
27 |     "vue-loader": "^15.4.0",
28 |     "vue-style-loader": "^4.1.2",
29 |     "vue-template-compiler": "^2.5.17",
30 |     "webpack": "^4.17.1",
31 |     "webpack-cli": "^3.1.0",
32 |     "webpack-dev-server": "^3.1.5",
33 |     "webpack-merge": "^4.1.4"
34 |   },
35 |   "dependencies": {
36 |     "vue": "^2.5.17",
37 |     "vue-router": "^3.0.1",
38 |     "vuex": "^3.0.1"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/vue10/demo/src/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'; //导入vue框架
 2 | import VueRouter from 'vue-router';
 3 | import App from './app.vue'; //导入app.vue组件
 4 | 
 5 | Vue.use(VueRouter)
 6 | 
 7 | const Routers = [
 8 | 		//resolve在请求页面时，才去加载这个页面的js。异步实现懒加载。 使用了异步路由后，编译出的每个页面的js都叫chunk(块).如要一次性加载，可以：
 9 | 		//import index from "./views/index.vue";
10 | 		// component:index
11 | 		//其他两个路由模仿上边的写法
12 | 	{
13 | 		path:'/index',
14 | 		meta:{
15 | 			title:'首页'
16 | 		},
17 | 		component:(resolve) => require(['./views/index.vue'],resolve)
18 | 	},
19 | 	{
20 | 		path:'/about',
21 | 		meta:{
22 | 			title:'关于'
23 | 		},
24 | 		component:(resolve) => require(['./views/about.vue'],resolve)
25 | 	},
26 | 	{
27 | 		path:'/user/:id',
28 | 		meta:{
29 | 			title:'个人主页'
30 | 		},
31 | 		component:(resolve) => require(['./views/user.vue'],resolve)
32 | 	},
33 | 	// 当访问的路径不存在，重新定向到首页
34 | 	{
35 | 		path:'*',
36 | 		redirect:'/index'
37 | 	}
38 | ];
39 | 
40 | const router = new VueRouter({
41 | 	//使用html的History路由模式
42 | 	mode:'history',
43 | 	routes: Routers
44 | });
45 | 
46 | 
47 | router.beforeEach((to,from,next)=>{
48 | 	//参数：即将要进入的目标的路由对象，当前导航即将要离开的路由对象，调用该方法后才能进入下一个钩子。
49 | 	window.document.title = to.meta.title;
50 | 	next(); //调用该方法才能进入下一个钩子
51 | })
52 | 
53 | new Vue({
54 |     el: '#app',
55 |     router:router,
56 |     render: h => {
57 |         return h(App);
58 |     }
59 | });
60 | 


--------------------------------------------------------------------------------
/vue11/router/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "demo",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "dev": "webpack-dev-server --host 192.168.10.122 --mode development --history-api-fallback --open --config webpack.config.js",
 8 |     "build": "webpack --progress --mode production --hide-modules --config webpack.prod.config.js"
 9 |   },
10 |   "author": "",
11 |   "license": "ISC",
12 |   "devDependencies": {
13 |     "babel": "^6.23.0",
14 |     "babel-cli": "^6.26.0",
15 |     "babel-core": "^6.26.3",
16 |     "babel-loader": "^7.1.5",
17 |     "babel-plugin-transform-runtime": "^6.23.0",
18 |     "babel-preset-env": "^1.7.0",
19 |     "babel-runtime": "^6.26.0",
20 |     "css-loader": "^1.0.0",
21 |     "extract-text-webpack-plugin": "^4.0.0-beta.0",
22 |     "file-loader": "^2.0.0",
23 |     "html-webpack-plugin": "^3.2.0",
24 |     "mini-css-extract-plugin": "^0.4.2",
25 |     "style-loader": "^0.22.1",
26 |     "url-loader": "^1.1.1",
27 |     "vue-hot-reload-api": "^2.3.0",
28 |     "vue-loader": "^15.4.0",
29 |     "vue-style-loader": "^4.1.2",
30 |     "vue-template-compiler": "^2.5.17",
31 |     "webpack": "^4.17.1",
32 |     "webpack-cli": "^3.1.0",
33 |     "webpack-dev-server": "^3.1.5",
34 |     "webpack-merge": "^4.1.4"
35 |   },
36 |   "dependencies": {
37 |     "vue": "^2.5.17",
38 |     "vue-router": "^3.0.1"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/vue05/vue5-11.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue5-11</title>
 6 | </head>
 7 | <body>
 8 | 	<!-- 当不想改变原数组，想通过一个数组的副本来做过滤或排序的显示时，可以用计算属性来返回过滤或排序后的数组 -->
 9 | 	<div id="app">
10 | 		<ul>
11 | 			<template v-for=" book in filterBooks ">
12 | 				<li>书名：{{ book.name }}</li>
13 | 				<li>作者：{{ book.author }}</li>
14 | 			</template>
15 | 		</ul>
16 | 		<ul>
17 | 			<template v-for=" book in sortedBooks ">
18 | 				<li>书名：{{ book.name }}</li>
19 | 				<li>作者：{{ book.author }}</li>
20 | 			</template>
21 | 		</ul>
22 | 	</div>
23 | 
24 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
25 | 	<script>
26 | 		var app = new Vue({
27 | 			el:'#app',
28 | 			data:{
29 | 				books:[
30 | 					{
31 | 						name:'第1本书',
32 | 						author:'第1作者'
33 | 					},{
34 | 						name:'第2本书javascript高级程序设计',
35 | 						author:'第2作者'
36 | 					},{
37 | 						name:'第3本书javascript',
38 | 						author:'第3作者'
39 | 					}
40 | 				]
41 | 			},
42 | 			computed:{
43 | 				//计算属性依赖books，但不会修改books
44 | 				filterBooks:function(){ 
45 | 					return this.books.filter(function(book){
46 | 						return book.name.match(/javascript/)
47 | 					})
48 | 				},
49 | 				sortedBooks:function(){
50 | 					return this.books.sort(function(a,b){
51 | 						return a.name.length < b.name.length
52 | 					})
53 | 				}
54 | 			}
55 | 		})
56 | 	</script>
57 | </body>
58 | </html>


--------------------------------------------------------------------------------
/vue06/vue6-04.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue6-04</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<!-- 组合单选或者组合多选，都需要用v-model配合value使用。 -->
10 | 		<!-- 数据data里的picked值与单选的value值一致时，就会选中该项 -->
11 | 		<input type="radio" name="a" id="html" v-model="picked" value="html">
12 | 		<label for="html">html</label>
13 | 
14 | 		<input type="radio" name="a" id="css" v-model="picked" value="css">
15 | 		<label for="css">css</label>
16 | 
17 | 		<input type="radio" name="a" id="js" v-model="picked" value="js">
18 | 		<label for="js">js</label>
19 | 
20 | 		<!-- 多个勾选框都绑定到同一个数组类型的数据，value值在数组中是双向的。 -->
21 | 		<!-- 数据data里的checked数组中有value的值，就会选中这项 -->
22 | 		<input type="checkbox" name="" id="football" value="football" v-model="checked">
23 | 		<label for="football">football</label>
24 | 
25 | 		<input type="checkbox" name="" id="basketball" value="basketball" v-model="checked">
26 | 		<label for="basketball">basketball</label>
27 | 		
28 | 		<input type="checkbox" name="" id="volleyball" value="volleyball" v-model="checked">
29 | 		<label for="volleyball">volleyball</label>
30 | 	</div>
31 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
32 | 	<script>
33 | 		var app = new Vue({
34 | 			el:'#app',
35 | 			data:{
36 | 				picked:'js',
37 | 				checked:['football','volleyball']
38 | 			}
39 | 		})
40 | 	</script>
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/vue11/vuex/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "demo",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "dev": "webpack-dev-server --host 192.168.10.122 --mode development --history-api-fallback --open --config webpack.config.js",
 8 |     "build": "webpack --progress --mode production --hide-modules --config webpack.prod.config.js"
 9 |   },
10 |   "author": "",
11 |   "license": "ISC",
12 |   "devDependencies": {
13 |     "babel": "^6.23.0",
14 |     "babel-cli": "^6.26.0",
15 |     "babel-core": "^6.26.3",
16 |     "babel-loader": "^7.1.5",
17 |     "babel-plugin-transform-runtime": "^6.23.0",
18 |     "babel-preset-env": "^1.7.0",
19 |     "babel-runtime": "^6.26.0",
20 |     "css-loader": "^1.0.0",
21 |     "extract-text-webpack-plugin": "^4.0.0-beta.0",
22 |     "file-loader": "^2.0.0",
23 |     "html-webpack-plugin": "^3.2.0",
24 |     "mini-css-extract-plugin": "^0.4.2",
25 |     "style-loader": "^0.22.1",
26 |     "url-loader": "^1.1.1",
27 |     "vue-hot-reload-api": "^2.3.0",
28 |     "vue-loader": "^15.4.0",
29 |     "vue-style-loader": "^4.1.2",
30 |     "vue-template-compiler": "^2.5.17",
31 |     "webpack": "^4.17.1",
32 |     "webpack-cli": "^3.1.0",
33 |     "webpack-dev-server": "^3.1.5",
34 |     "webpack-merge": "^4.1.4"
35 |   },
36 |   "dependencies": {
37 |     "vue": "^2.5.17",
38 |     "vue-router": "^3.0.1",
39 |     "vuex": "^3.0.1"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/vue11/vue-bus/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "demo",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "dev": "webpack-dev-server --host 192.168.10.122 --mode development --history-api-fallback --open --config webpack.config.js",
 8 |     "build": "webpack --progress --mode production --hide-modules --config webpack.prod.config.js"
 9 |   },
10 |   "author": "",
11 |   "license": "ISC",
12 |   "devDependencies": {
13 |     "babel": "^6.23.0",
14 |     "babel-cli": "^6.26.0",
15 |     "babel-core": "^6.26.3",
16 |     "babel-loader": "^7.1.5",
17 |     "babel-plugin-transform-runtime": "^6.23.0",
18 |     "babel-preset-env": "^1.7.0",
19 |     "babel-runtime": "^6.26.0",
20 |     "css-loader": "^1.0.0",
21 |     "extract-text-webpack-plugin": "^4.0.0-beta.0",
22 |     "file-loader": "^2.0.0",
23 |     "html-webpack-plugin": "^3.2.0",
24 |     "mini-css-extract-plugin": "^0.4.2",
25 |     "style-loader": "^0.22.1",
26 |     "url-loader": "^1.1.1",
27 |     "vue-hot-reload-api": "^2.3.0",
28 |     "vue-loader": "^15.4.0",
29 |     "vue-style-loader": "^4.1.2",
30 |     "vue-template-compiler": "^2.5.17",
31 |     "webpack": "^4.17.1",
32 |     "webpack-cli": "^3.1.0",
33 |     "webpack-dev-server": "^3.1.5",
34 |     "webpack-merge": "^4.1.4"
35 |   },
36 |   "dependencies": {
37 |     "vue": "^2.5.17",
38 |     "vue-router": "^3.0.1",
39 |     "vuex": "^3.0.1"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/vue13/daily/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "demo",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "dev": "webpack-dev-server --mode development --open --config webpack.config.js",
 8 |     "build": "webpack --progress --mode production --hide-modules --config webpack.prod.config.js",
 9 |     "start": "concurrently \"npm run dev\" \"node proxy.js\""
10 |   },
11 |   "author": "",
12 |   "license": "ISC",
13 |   "devDependencies": {
14 |     "babel": "^6.23.0",
15 |     "babel-cli": "^6.26.0",
16 |     "babel-core": "^6.26.3",
17 |     "babel-loader": "^7.1.5",
18 |     "babel-plugin-transform-runtime": "^6.23.0",
19 |     "babel-preset-env": "^1.7.0",
20 |     "babel-runtime": "^6.26.0",
21 |     "concurrently": "^4.0.1",
22 |     "css-loader": "^1.0.0",
23 |     "file-loader": "^2.0.0",
24 |     "html-webpack-plugin": "^3.2.0",
25 |     "mini-css-extract-plugin": "^0.4.2",
26 |     "request": "^2.88.0",
27 |     "style-loader": "^0.22.1",
28 |     "url-loader": "^1.1.1",
29 |     "vue-hot-reload-api": "^2.3.0",
30 |     "vue-loader": "^15.4.0",
31 |     "vue-style-loader": "^4.1.2",
32 |     "vue-template-compiler": "^2.5.17",
33 |     "webpack": "^4.17.1",
34 |     "webpack-cli": "^3.1.0",
35 |     "webpack-dev-server": "^3.1.5",
36 |     "webpack-merge": "^4.1.4"
37 |   },
38 |   "dependencies": {
39 |     "axios": "^0.18.0",
40 |     "vue": "^2.5.17"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/vue09/vue9-01.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue9-01</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		<anchor :level="2" title="特性">特性</anchor>
10 | 		<script type="text/x-template" id="anchor">
11 | 			<div>
12 | 				<h1 v-if="level === 1">
13 | 					<a :href="'#' + title">
14 | 						<slot></slot>
15 | 					</a>
16 | 				</h1>
17 | 				<h2 v-if="level === 2">
18 | 					<a :href="'#' + title">
19 | 						<slot></slot>
20 | 					</a>
21 | 				</h2>
22 | 				<h3 v-if="level === 3">
23 | 					<a :href="'#' + title">
24 | 						<slot></slot>
25 | 					</a>
26 | 				</h3>
27 | 				<h4 v-if="level === 4">
28 | 					<a :href="'#' + title">
29 | 						<slot></slot>
30 | 					</a>
31 | 				</h4>
32 | 				<h5 v-if="level === 5">
33 | 					<a :href="'#' + title">
34 | 						<slot></slot>
35 | 					</a>
36 | 				</h5>
37 | 				<h6 v-if="level === 6">
38 | 					<a :href="'#' + title">
39 | 						<slot></slot>
40 | 					</a>
41 | 				</h6>
42 | 			</div>
43 | 		</script>
44 | 	</div>
45 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
46 | 	<script>
47 | 		Vue.component('anchor',{
48 | 			template:'#anchor',
49 | 			props:{
50 | 				level:{
51 | 					type:Number,
52 | 					required:true
53 | 				},
54 | 				title:{
55 | 					type:String,
56 | 					default:''
57 | 				}
58 | 				
59 | 			}
60 | 		})
61 | 
62 | 		var app = new Vue({
63 | 			el:'#app'
64 | 		})
65 | 	</script>
66 | </body>
67 | </html>


--------------------------------------------------------------------------------
/vue09/message_list/style.css:
--------------------------------------------------------------------------------
 1 | *{margin: 0;padding: 0}
 2 | [v-cloak]{
 3 | 	display: none;
 4 | }
 5 | .message{
 6 | 	width: 450px;
 7 | 	text-align: right;
 8 | }
 9 | .message div{
10 | 	margin-bottom: 12px;
11 | }
12 | .message span{
13 | 	display: inline-block;
14 | 	width:100px;
15 | 	vertical-align: top;
16 | }
17 | .message input,.message textarea{
18 | 	width: 300px;
19 | 	height: 32px;
20 | 	padding: 0 6px;
21 | 	color:#657180;
22 | 	border:1px solid #d7dde4;
23 | 	border-radius: 4px;
24 | 	cursor:text;
25 | 	outline: none;
26 | }
27 | .message input:focus, .message textarea:focus{
28 | 	border: 1px solid #3399ff;
29 | }
30 | .message textarea{
31 | 	height: 60px;
32 | 	padding: 4px 6px;
33 | }
34 | .message button{
35 | 	display: inline-block;
36 | 	padding: 6px 15px;
37 | 	border: 1px solid #39f;
38 | 	border-radius:4px;
39 | 	color:#fff;
40 | 	background-color: #39f;
41 | 	cursor: pointer;
42 | 	outline:none;
43 | }
44 | .list{
45 | 	margin-top: 50px;
46 | }
47 | .list-item{
48 | 	padding: 10px;
49 | 	border-bottom: 1px solid #e3e8ee;
50 | 	overflow: hidden;
51 | }
52 | .list-item span{
53 | 	display: block;
54 | 	width: 70px;
55 | 	float:left;
56 | 	color: #39f;
57 | }
58 | .list-msg{
59 | 	display:block;
60 | 	margin-left: 60px;
61 | 	text-align: justify;
62 | }
63 | .list-msg a{
64 | 	color: #9ea7b4;
65 | 	cursor: pointer;
66 | 	float:right;
67 | }
68 | .list-msg a:hover{
69 | 	color:#39f;
70 | }
71 | .list-nothing{
72 | 	text-align: center;
73 | 	color:#9ea7b4;
74 | 	padding: 20px;
75 | }


--------------------------------------------------------------------------------
/vue11/vuex/src/views/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<div>首页</div>
 4 | 		{{ count }}
 5 | 		<button @click="handleIncrement">+1</button>
 6 | 		<button @click="handleDecrease">-10</button>
 7 | 		<button @click="handleCustom">组件自己定的加多少,这里是+10</button>
 8 | 		<button @click="handleAsyncIncrement">随机数大于0.5才会2秒后 +1</button>
 9 | 		<div>{{ list }}</div>
10 | 		<div>{{ listCount }}</div>
11 | 		<div>通过this.$store.state.moduleA.useName 获取的module.js文件中的数据{{ username }}</div>
12 | 		<div>sumCount里count为10，加上count默认是0。初始是10+0的结果：{{ samCount }}</div>
13 | 	</div>
14 | </template>
15 | <script>
16 | 	export default{
17 | 		computed:{
18 | 			count(){
19 | 				return this.$store.state.count;
20 | 			},
21 | 			list(){
22 | 				return this.$store.getters.filteredList //提交对应getters里的事件名
23 | 			},
24 | 			listCount(){
25 | 				return this.$store.getters.listCount
26 | 			},
27 | 			username(){
28 | 				return this.$store.state.moduleA.useName
29 | 			},
30 | 			samCount(){
31 | 				return this.$store.getters.sumCount
32 | 			}
33 | 		},
34 | 		methods:{
35 | 			handleIncrement(){
36 | 				this.$store.commit('increment'); //提交对应mutations里的事件名
37 | 			},
38 | 			handleDecrease(){
39 | 				this.$store.commit('decrease');
40 | 			},
41 | 			handleCustom(){
42 | 				this.$store.commit({
43 | 					type:'custom', //提交另一种mutations的方式，使用包含type属性的对象
44 | 					count:10
45 | 				})
46 | 			},
47 | 			handleAsyncIncrement(){
48 | 				this.$store.dispatch('asyncIncrement').then(()=>{
49 | 					console.log(this.$store.state.count);
50 | 				})
51 | 			}
52 | 		}
53 | 	}
54 | </script>


--------------------------------------------------------------------------------
/vue02/vue2-06.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue2-06</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app">
 9 | 		{{ date | formatDate }} <!-- | 管道符，用于格式化文本，比如字母全部大写，货币千位使用逗号分隔符。 通过给实例添加filters来设置-->
10 | 	<!-- 
11 | 		过滤器可以串联也可有参数
12 | 		{{ message | filterA | filterB }}
13 | 		{{ message | filterA( 'arg2','arg3' ) }} 第二个和第三个参数，因为第一个是数据本身  
14 | 		过滤器应该处理简单文本转换，复杂数据变换应用计算属性
15 | 	--> 
16 | 	</div>
17 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
18 | 	<script>
19 | 		var padDate = function(value){
20 | 			return value < 10 ? '0' + value : value;
21 | 		}
22 | 		var app = new Vue({
23 | 			el:'#app',
24 | 			data:{
25 | 				date:new Date()
26 | 			},
27 | 			filters:{
28 | 				formatDate:function(value){ //value就是需要过滤的数据date
29 | 					var date = new Date(value);
30 | 					var year = date.getFullYear();
31 | 					var month = padDate(date.getMonth() + 1);
32 | 					var day = padDate(date.getDate());
33 | 					var hours = padDate(date.getHours());
34 | 					var minutes = padDate(date.getMinutes());
35 | 					var seconds = padDate(date.getSeconds());
36 | 					return year + '-' + month + '-' + day + '-' + hours + '-' + minutes + '-' + seconds;
37 | 				}
38 | 			},
39 | 			mounted:function(){
40 | 				var _this = this;
41 | 				this.timer = setInterval(function(){
42 | 					_this.date = new Date();
43 | 				},1000)
44 | 			},
45 | 			beforeDestroy:function(){
46 | 				if ( this.timer ) {
47 | 					clearInterval( this.timer );
48 | 				}
49 | 			}
50 | 		})
51 | 	</script>
52 | </body>
53 | </html>


--------------------------------------------------------------------------------
/vue07/vue7-12.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>vue7-12</title>
 6 | </head>
 7 | <body>
 8 |     <!-- 子组件向父组件通信 -->
 9 |     
10 |     <!-- 子组件用$emit()触发事件，父组件用$on()监听子组件事件 -->
11 |     <div id="app">
12 |         <p>总数:{{ total }}</p>
13 |         <!-- 父组件直接在子组件的自定义标签上使用v-on监听子组件触发的自定义事件 -->
14 |         <my-component  @increase="handleGetTotal" @reduce="handleGetTotal"></my-component>
15 |     </div>
16 |     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
17 |     <script>
18 |         Vue.component('my-component',{
19 |             template:'<div><button @click="handleIncrease">+1</button><button @click="handleReduce">-1</button></div>',
20 |             data:function(){
21 |                 return { counter:0 }
22 |             },
23 |             methods:{
24 |                 handleIncrease:function(){
25 |                     this.counter++
26 |                     // 通过$emit()传递给父组件，第一个参数是自定义事件的名称，第二个是要传递的数据，可以不填或填多个
27 |                     this.$emit( 'increase',this.counter )
28 |                 },
29 |                 handleReduce:function(){
30 |                     this.counter--
31 |                     this.$emit( 'reduce',this.counter )
32 |                 }
33 |             }
34 |         });
35 | 
36 |         var app = new Vue({
37 |             el:'#app',
38 |             data:{
39 |                 total:0
40 |             },
41 |             methods:{
42 |                 handleGetTotal:function(t){
43 |                     this.total = t;
44 |                 }
45 |             }
46 |         })
47 |     </script>
48 | </body>
49 | </html>


--------------------------------------------------------------------------------
/vue09/vue9-06.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>vue9-06</title>
 6 | </head>
 7 | <body>
 8 | 	<!-- 对含有组件的slot进行复用，需要将slot的每个子节点都克隆一份 -->
 9 | 	<div id="app">
10 | 		<ele>
11 | 			<div>
12 | 				<Child></Child>
13 | 			</div>
14 | 		</ele>
15 | 	</div>
16 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
17 | 	<script>
18 | 		// 全局注册组件
19 | 		Vue.component('Child',{
20 | 			render:function(createElement){
21 | 				return createElement('p','text')
22 | 			}
23 | 		})
24 | 
25 | 		Vue.component('ele',{
26 | 			render:function(createElement){
27 | 				// 克隆slot节点的方法
28 | 				function cloneVNode(vnode){
29 | 					// 递归遍历所有子节点，并克隆
30 | 					var clonedChildren = vnode.children && vnode.children.map(function(vnode){
31 | 						return cloneVNode(vnode)
32 | 					});
33 | 					// 对VNoded的关键属性进行复制
34 | 					var cloned = createElement(
35 | 							vnode.tag,
36 | 							vnode.data,
37 | 							clonedChildren
38 | 						);
39 | 					cloned.text = vnode.text;
40 | 					cloned.isComment = vnode.isComment; 
41 | 					cloned.componentOptions = vnode.componentOptions; 
42 | 					cloned.elm = vnode.elm; 
43 | 					cloned.context = vnode.context; 
44 | 					cloned.ns = vnode.ns; 
45 | 					cloned.isStatic = vnode.isStatic; 
46 | 					cloned.key = vnode.key; 
47 | 					return cloned; 
48 | 				}
49 | 
50 | 				var vNodes = this.$slots.default;
51 | 				var clonedVNodes = vNodes.map(function(vnode){
52 | 					return cloneVNode(vnode);
53 | 				})
54 | 
55 | 				return createElement('div',[vNodes,clonedVNodes])
56 | 			}
57 | 		})
58 | 
59 | 		var app = new Vue({
60 | 			el:'#app'
61 | 		})
62 | 	</script>
63 | </body>
64 | </html>


--------------------------------------------------------------------------------
/vue13/daily/proxy.js:
--------------------------------------------------------------------------------
 1 | const http = require('http');
 2 | const request = require('request');
 3 | 
 4 | const hostname = '127.0.0.1';
 5 | const port = 8010;
 6 | const imgPort = 8011;
 7 | 
 8 | // 创建一个API 代理服务器
 9 | const apiServer = http.createServer((req, res) => {
10 |     const url = 'http://news-at.zhihu.com/api/4' + req.url;
11 |     const options = {
12 |         url: url
13 |     };
14 | 
15 |     function callback (error, response, body) {
16 |         if (!error && response.statusCode === 200) {
17 |             // 设置编码类型，否则中文会显示为乱码
18 |             res.setHeader('Content-Type', 'text/plain;charset=UTF-8');
19 |             // 设置所有域允许跨域
20 |             res.setHeader('Access-Control-Allow-Origin', '*');
21 |             // 返回代理后的内容
22 |             res.end(body);
23 |         }
24 |     }
25 | 	request.get(options, callback);
26 | });
27 | 
28 | // 监听8010端口
29 | apiServer.listen(port, hostname, () => {
30 |     console.log(`接口代理运行在 http://${hostname}:${port}/`);
31 | });
32 | 
33 | // 创建一个图片代理服务
34 | const imgServer = http.createServer((req, res) => {
35 |     const url = req.url.split('/img/')[1];
36 |     const options = {
37 |         url: url,
38 |         encoding: null
39 |     };
40 | 
41 |     function callback (error, response, body) {
42 |         if (!error && response.statusCode === 200) {
43 |             const contentType = response.headers['content-type'];
44 |             res.setHeader('Content-Type', contentType);
45 |             res.setHeader('Access-Control-Allow-Origin', '*');
46 |             res.end(body);
47 |         }
48 |     }
49 |     request.get(options, callback);
50 | });
51 | 
52 | // 监听8011端口
53 | imgServer.listen(imgPort,hostname,()=>{
54 | 	console.log(`图片代理运行在http://${hostname}:${imgPort}/`);
55 | })


--------------------------------------------------------------------------------
/vue13/daily/src/components/daily-article.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="daily-article">
 3 | 		<div class="daily-article-title">{{ data.title }}</div>
 4 | 		<div class="daily-article-content" v-html="data.body"></div>
 5 | 		<div class="daily-comments" v-show="comments.length">
 6 | 			<span>评论 ({{ comments.length }}) </span>
 7 | 			<div class="daily-comment" v-for="comment in comments">
 8 | 				<div class="daily-comment-avatar">
 9 | 					<img :src="comment.avatar">
10 | 				</div>
11 | 				<div class="daily-comment-content">
12 | 					<div class="daily-comment-name">{{ comment.author }}</div>
13 | 					<div class="daily-comment-time" v-time="comment.time"></div>
14 | 					<div class="daily-comment-text">{{ comment.content }}</div>
15 | 				</div>
16 | 			</div>
17 | 		</div>
18 | 	</div>
19 | </template>
20 | <script>
21 | 	import Time from '../directives/time';
22 | 	import $ from '../libs/util';
23 | 	export default {
24 | 		directives:{Time},
25 | 		props:{
26 | 			id:{
27 | 				type:Number,
28 | 				default:0
29 | 			}
30 | 		},
31 | 		data(){
32 | 			return {
33 | 				data:{},
34 | 				comments:[]
35 | 			}
36 | 		},
37 | 		methods:{
38 | 			getArticle(){
39 | 				$.ajax.get('news/' + this.id).then(res=>{
40 | 					res.body = res.body
41 | 					.replace(/src="http/g,'src="' + $.imgPath + 'http');
42 | 					res.body = res.body
43 | 					.replace(/src="https/g,'src="' + $.imgPath + 'https');
44 | 					this.data = res;
45 | 					window.scrollTo(0,0);
46 | 					this.getComments();
47 | 				})
48 | 			},
49 | 			getComments(){
50 | 				this.comments = [];
51 | 				$.ajax.get('story/' + this.id + '/short-comments').then(res=>{
52 | 					this.comments = res.comments.map(comment=>{
53 | 						comment.avatar = $.imgPath + comment.avatar;
54 | 						return comment;
55 | 					})
56 | 				})
57 | 			}
58 | 		},
59 | 		watch:{
60 | 			id(val){
61 | 				if(val){this.getArticle()};
62 | 			}
63 | 		}
64 | 	}
65 | </script>


--------------------------------------------------------------------------------
/vue11/vue-bus/src/views/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<div>首页</div>
 4 | 		{{ count }}
 5 | 		<button @click="handleIncrement">+1</button>
 6 | 		<button @click="handleDecrease">-10</button>
 7 | 		<button @click="handleCustom">组件自己定的加多少,这里是+10</button>
 8 | 		<button @click="handleAsyncIncrement">随机数大于0.5才会2秒后 +1</button>
 9 | 		<div>{{ list }}</div>
10 | 		<div>{{ listCount }}</div>
11 | 		<div>通过this.$store.state.moduleA.useName 获取的module.js文件中的数据{{ username }}</div>
12 | 		<div>sumCount里count为10，加上count默认是0。初始是10+0的结果：{{ samCount }}</div>
13 | 		<div>
14 | 			<Counter :numbe="number"></Counter>
15 | 		</div>
16 | 	</div>
17 | </template>
18 | <script>
19 | 	import Counter from './Counter.vue'
20 | 	export default{
21 | 		components:{
22 | 			Counter
23 | 		},
24 | 		data(){
25 | 			return {
26 | 				number:0
27 | 			}
28 | 		},
29 | 		computed:{
30 | 			count(){
31 | 				return this.$store.state.count;
32 | 			},
33 | 			list(){
34 | 				return this.$store.getters.filteredList //提交对应getters里的事件名
35 | 			},
36 | 			listCount(){
37 | 				return this.$store.getters.listCount
38 | 			},
39 | 			username(){
40 | 				return this.$store.state.moduleA.useName
41 | 			},
42 | 			samCount(){
43 | 				return this.$store.getters.sumCount
44 | 			}
45 | 		},
46 | 		methods:{
47 | 			handleIncrement(){
48 | 				this.$store.commit('increment'); //提交对应mutations里的事件名
49 | 			},
50 | 			handleDecrease(){
51 | 				this.$store.commit('decrease');
52 | 			},
53 | 			handleCustom(){
54 | 				this.$store.commit({
55 | 					type:'custom', //提交另一种mutations的方式，使用包含type属性的对象
56 | 					count:10
57 | 				})
58 | 			},
59 | 			handleAsyncIncrement(){
60 | 				this.$store.dispatch('asyncIncrement').then(()=>{
61 | 					console.log(this.$store.state.count);
62 | 				})
63 | 			},
64 | 			handleAddRandom(num){
65 | 				this.number += num;
66 | 			}
67 | 		},
68 | 		created(){
69 | 			this.$bus.on('add',this.handleAddRandom);
70 | 		},
71 | 		beforeDestroy(){
72 | 			this.$bus.off('add',this.handleAddRandom);
73 | 		}
74 | 	}
75 | </script>


--------------------------------------------------------------------------------
/vue08/v-time/time.js:
--------------------------------------------------------------------------------
 1 | var Time = {
 2 | 	// 获取当前时间戳
 3 | 	getUnix:function(){
 4 | 		var date = new Date();
 5 | 		return date.getTime();
 6 | 	},
 7 | 	// 获取今天0点0分0秒的时间戳
 8 | 	getTodayUnix:function(){
 9 | 		var date = new Date();
10 | 		date.setHours(0); //设置指定时间的小时字段
11 | 		date.setMinutes(0);
12 | 		date.setSeconds(0);
13 | 		date.setMilliseconds(0);
14 | 		return date.getTime();
15 | 	},
16 | 	// 获取今年1月1日0点0分0秒的时间戳
17 | 	getYearUnix:function(){
18 | 		var date = new Date();
19 | 		date.setMonth(0)
20 | 		date.setDate(1);
21 | 		date.setHours(0);
22 | 		date.setMinutes(0);
23 | 		date.setSeconds(0);
24 | 		date.setMilliseconds(0);
25 | 		return date.getTime();		
26 | 	},
27 | 	// 获取标准年月日
28 | 	getLastDate:function(time){
29 | 		var date = new Date(time);
30 | 		var month = date.getMonth() + 1 < 10 ? '0' + ( date.getMonth() + 1 ) : date.getMonth() + 1;
31 | 		var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
32 | 		return date.getFullYear() + '-' + month + '-' + day
33 | 	},
34 | 	// 转换时间
35 | 	getFormatTime:function(timestamp){
36 | 		var now = this.getUnix(); //当前时间戳
37 | 		var today = this.getTodayUnix(); //今天0点时间戳
38 | 		var year = this.getYearUnix(); //今年0点时间戳
39 | 		var timer = ( now - timestamp ) / 1000; //转化为秒级时间戳
40 | 		var tip = '';
41 | 
42 | 		// 1分钟以前，显示“刚刚”。
43 | 		// 1分钟~1小时之间，显示“xx分钟前”。
44 | 		// 1小时~1天之间，显示“xx小时前”。
45 | 		// 1天~1个月（31天）之间，显示“xx天前”。
46 | 		// 大于1个月，显示“xx年xx月xx日”。
47 | 
48 | 		if( timer <= 0 ){
49 | 			tip = '刚刚';
50 | 		}else if( Math.floor( timer / 60 ) <= 0 ){
51 | 			tip = '刚刚'
52 | 		}else if( timer < 3600 ){
53 | 			tip = Math.floor( timer / 60 ) + '分钟前';
54 | 		}else if( timer >= 3600 && ( timestamp - today >= 0 ) ){
55 | 			tip = Math.floor( timer/3600 ) + '小时前'
56 | 		}else if( timer/86400 <=31 ){
57 | 			tip = Math.ceil( timer/86400 ) + '天前'
58 | 		}else{
59 | 			tip = this.getLastDate(timestamp);
60 | 		}
61 | 		return tip;
62 | 	}
63 | }
64 | 
65 | Vue.directive('time',{
66 | 	bind:function( el,binding ){
67 | 		el.innerHTML = Time.getFormatTime( binding.value );
68 | 		el.__timeout__ = setInterval(function(){
69 | 			el.innerHTML = Time.getFormatTime( binding.value );
70 | 		},60000)
71 | 	},
72 | 	unbind:function(el){
73 | 		clearInterval( el.__timeout__ );
74 | 		delete el.__timeout__;
75 | 	}
76 | })


--------------------------------------------------------------------------------
/vue10/demo/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 3 | const { VueLoaderPlugin } = require('vue-loader'); //vue-loader，15的版本需要再添加plugin的配置
 4 | // var ExtractTextPlugin = require('extract-text-webpack-plugin');
 5 | 
 6 | const config = {
 7 | 	//配置的单入口，webpack从index.js开始工作,webpack4默认entry 路径./src/index.js
 8 | 	// 所以下边的entry可以不写
 9 | 	// entry:{
10 | 	// 	main:'./src/index'
11 | 	// },
12 | 	output:{//打包后的文件会存储为demo/dist/main.js 在html中引用它就可以了
13 | 		path:path.join(__dirname,'./dist'), //打包后文件的输出目录
14 | 		publicPath:'/dist/', //指定资源文件引用目录，可以是CDN
15 | 		filename:'main.js' //输出文件的名称
16 | 	},
17 | 	module:{
18 | 		rules:[
19 | 			{
20 | 				test:/\.vue$/,
21 | 				loader:'vue-loader',
22 | 				options:{
23 | 					loaders:{
24 | 						css:[
25 | 							'vue-style-loader',
26 | 							'mini-css-extract-plugin',
27 | 							'css-loader'
28 | 						]
29 | 					}
30 | 				}
31 | 			},
32 | 			{
33 | 				test: /\.css$/,
34 | 				use:[ //数组形式的话，编译是从后往前。
35 | 					MiniCssExtractPlugin.loader,
36 |         　　 　　 	'css-loader'
37 | 				]
38 | 			},
39 | 			// {
40 | 			// 	test:/\.vue$/,
41 | 			// 	loader:'vue-loader',
42 | 			// 	options:{
43 | 			// 		loaders:{
44 | 			// 			css:ExtractTextPlugin.extract({
45 | 			// 				use:'css-loader',
46 | 			// 				fallback:'vue-style-loader'
47 | 			// 			})
48 | 			// 		}
49 | 			// 	}
50 | 			// },
51 |    //          {
52 |    //              test: /\.css$/,
53 |    //              use: ExtractTextPlugin.extract({
54 |    //                  use: 'css-loader',
55 |    //                  fallback: 'style-loader'
56 |    //              })
57 |    //          },
58 |    			// 除非您要自定义 entry point(入口点) ，否则无需指定babel-loader。
59 | 			// {
60 | 			// 	test:/\.js$/,
61 | 			// 	loader:'babel-loader',
62 | 			// 	exclude:/node_modules/
63 | 			// },
64 |             {
65 |             	test:/\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
66 |             	loader:'url-loader?limit=1024' //文件小于1k就以base64形式加载
67 |             }
68 | 		]
69 | 	},
70 | 	plugins:[
71 | 		// new ExtractTextPlugin({
72 | 		// 	filename:'main.css',//重命名提取后的css文件
73 | 		// 	allChunks: true //有了chunk，需要在此配置
74 | 		// }), 
75 | 		new MiniCssExtractPlugin('main.css'),
76 | 		// new ExtractTextPlugin("main.css"), 
77 | 		new VueLoaderPlugin() //vue-loader，15的版本需要再添加plugin的配置
78 | 	]
79 | };
80 | module.exports = config
81 | //ES6: export default config


--------------------------------------------------------------------------------
/vue13/daily/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 3 | const { VueLoaderPlugin } = require('vue-loader'); //vue-loader，15的版本需要再添加plugin的配置
 4 | // var ExtractTextPlugin = require('extract-text-webpack-plugin');
 5 | 
 6 | const config = {
 7 | 	//配置的单入口，webpack从index.js开始工作,webpack4默认entry 路径./src/index.js
 8 | 	// 所以下边的entry可以不写
 9 | 	// entry:{
10 | 	// 	main:'./src/index'
11 | 	// },
12 | 	output:{//打包后的文件会存储为demo/dist/main.js 在html中引用它就可以了
13 | 		path:path.join(__dirname,'./dist'), //打包后文件的输出目录
14 | 		publicPath:'/dist/', //指定资源文件引用目录，可以是CDN
15 | 		filename:'main.js' //输出文件的名称
16 | 	},
17 | 	module:{
18 | 		rules:[
19 | 			{
20 | 				test:/\.vue$/,
21 | 				loader:'vue-loader',
22 | 				options:{
23 | 					loaders:{
24 | 						css:[
25 | 							'vue-style-loader',
26 | 							'mini-css-extract-plugin',
27 | 							'css-loader'
28 | 						]
29 | 					}
30 | 				}
31 | 			},
32 | 			{
33 | 				test: /\.css$/,
34 | 				use:[ //数组形式的话，编译是从后往前。
35 | 					MiniCssExtractPlugin.loader,
36 |         　　 　　 	'css-loader'
37 | 				]
38 | 			},
39 | 			// {
40 | 			// 	test:/\.vue$/,
41 | 			// 	loader:'vue-loader',
42 | 			// 	options:{
43 | 			// 		loaders:{
44 | 			// 			css:ExtractTextPlugin.extract({
45 | 			// 				use:'css-loader',
46 | 			// 				fallback:'vue-style-loader'
47 | 			// 			})
48 | 			// 		}
49 | 			// 	}
50 | 			// },
51 |    //          {
52 |    //              test: /\.css$/,
53 |    //              use: ExtractTextPlugin.extract({
54 |    //                  use: 'css-loader',
55 |    //                  fallback: 'style-loader'
56 |    //              })
57 |    //          },
58 |    			// 除非您要自定义 entry point(入口点) ，否则无需指定babel-loader。
59 | 			// {
60 | 			// 	test:/\.js$/,
61 | 			// 	loader:'babel-loader',
62 | 			// 	exclude:/node_modules/
63 | 			// },
64 |             {
65 |             	test:/\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
66 |             	loader:'url-loader?limit=1024' //文件小于1k就以base64形式加载
67 |             }
68 | 		]
69 | 	},
70 | 	plugins:[
71 | 		// new ExtractTextPlugin({
72 | 		// 	filename:'main.css',//重命名提取后的css文件
73 | 		// 	allChunks: true //有了chunk，需要在此配置
74 | 		// }), 
75 | 		new MiniCssExtractPlugin('main.css'),
76 | 		// new ExtractTextPlugin("main.css"), 
77 | 		new VueLoaderPlugin() //vue-loader，15的版本需要再添加plugin的配置
78 | 	]
79 | };
80 | module.exports = config
81 | //ES6: export default config


--------------------------------------------------------------------------------
/vue14/shopping/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 3 | const { VueLoaderPlugin } = require('vue-loader'); //vue-loader，15的版本需要再添加plugin的配置
 4 | // var ExtractTextPlugin = require('extract-text-webpack-plugin');
 5 | 
 6 | const config = {
 7 | 	//配置的单入口，webpack从index.js开始工作,webpack4默认entry 路径./src/index.js
 8 | 	// 所以下边的entry可以不写
 9 | 	// entry:{
10 | 	// 	main:'./src/index'
11 | 	// },
12 | 	output:{//打包后的文件会存储为demo/dist/main.js 在html中引用它就可以了
13 | 		path:path.join(__dirname,'./dist'), //打包后文件的输出目录
14 | 		publicPath:'/dist/', //指定资源文件引用目录，可以是CDN
15 | 		filename:'main.js' //输出文件的名称
16 | 	},
17 | 	module:{
18 | 		rules:[
19 | 			{
20 | 				test:/\.vue$/,
21 | 				loader:'vue-loader',
22 | 				options:{
23 | 					loaders:{
24 | 						css:[
25 | 							'vue-style-loader',
26 | 							'mini-css-extract-plugin',
27 | 							'css-loader'
28 | 						]
29 | 					}
30 | 				}
31 | 			},
32 | 			{
33 | 				test: /\.css$/,
34 | 				use:[ //数组形式的话，编译是从后往前。
35 | 					MiniCssExtractPlugin.loader,
36 |         　　 　　 	'css-loader'
37 | 				]
38 | 			},
39 | 			// {
40 | 			// 	test:/\.vue$/,
41 | 			// 	loader:'vue-loader',
42 | 			// 	options:{
43 | 			// 		loaders:{
44 | 			// 			css:ExtractTextPlugin.extract({
45 | 			// 				use:'css-loader',
46 | 			// 				fallback:'vue-style-loader'
47 | 			// 			})
48 | 			// 		}
49 | 			// 	}
50 | 			// },
51 |    //          {
52 |    //              test: /\.css$/,
53 |    //              use: ExtractTextPlugin.extract({
54 |    //                  use: 'css-loader',
55 |    //                  fallback: 'style-loader'
56 |    //              })
57 |    //          },
58 |    			// 除非您要自定义 entry point(入口点) ，否则无需指定babel-loader。
59 | 			// {
60 | 			// 	test:/\.js$/,
61 | 			// 	loader:'babel-loader',
62 | 			// 	exclude:/node_modules/
63 | 			// },
64 |             {
65 |             	test:/\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
66 |             	loader:'url-loader?limit=1024' //文件小于1k就以base64形式加载
67 |             }
68 | 		]
69 | 	},
70 | 	plugins:[
71 | 		// new ExtractTextPlugin({
72 | 		// 	filename:'main.css',//重命名提取后的css文件
73 | 		// 	allChunks: true //有了chunk，需要在此配置
74 | 		// }), 
75 | 		new MiniCssExtractPlugin('main.css'),
76 | 		// new ExtractTextPlugin("main.css"), 
77 | 		new VueLoaderPlugin() //vue-loader，15的版本需要再添加plugin的配置
78 | 	]
79 | };
80 | module.exports = config
81 | //ES6: export default config


--------------------------------------------------------------------------------
/vue13/daily/src/directives/time.js:
--------------------------------------------------------------------------------
 1 | var Time = {
 2 |     // 获取当前时间戳
 3 |     getUnix: function () {
 4 |         var date = new Date();
 5 |         return date.getTime();
 6 |     },
 7 |     // 获取今天0点0分0秒的时间戳
 8 |     getTodayUnix: function () {
 9 |         var date = new Date();
10 |         date.setHours(0);
11 |         date.setMinutes(0);
12 |         date.setSeconds(0);
13 |         date.setMilliseconds(0);
14 |         return date.getTime();
15 |     },
16 |     // 获取今年1月1日0点0分0秒的时间戳
17 |     getYearUnix: function () {
18 |         var date = new Date();
19 |         date.setMonth(0);
20 |         date.setDate(1);
21 |         date.setHours(0);
22 |         date.setMinutes(0);
23 |         date.setSeconds(0);
24 |         date.setMilliseconds(0);
25 |         return date.getTime();
26 |     },
27 |     // 获取标准年月日
28 |     getLastDate: function(time) {
29 |         var date = new Date(time);
30 |         var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
31 |         var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
32 |         return date.getFullYear() + '-' + month + "-" + day;
33 |     },
34 |     // 转换时间
35 |     getFormatTime: function(timestamp) {
36 |         var now = this.getUnix();    //当前时间戳
37 |         var today = this.getTodayUnix(); //今天0点时间戳
38 |         var year = this.getYearUnix();   //今年0点时间戳
39 |         var timer = (now - timestamp) / 1000;   // 转换为秒级时间戳
40 |         var tip = '';
41 | 
42 |         if (timer <= 0) {
43 |             tip = '刚刚';
44 |         } else if (Math.floor(timer/60) <= 0) {
45 |             tip = '刚刚';
46 |         } else if (timer < 3600) {
47 |             tip = Math.floor(timer/60) + '分钟前';
48 |         } else if (timer >= 3600 && (timestamp - today >= 0) ) {
49 |             tip = Math.floor(timer/3600) + '小时前';
50 |         } else if (timer/86400 <= 31) {
51 |             tip = Math.ceil(timer/86400) + '天前';
52 |         } else {
53 |             tip = this.getLastDate(timestamp);
54 |         }
55 |         return tip;
56 |     }
57 | };
58 | 
59 | export default {
60 |     bind: function (el, binding) {
61 |         el.innerHTML = Time.getFormatTime(binding.value * 1000);
62 |         el.__timeout__ = setInterval(function() {
63 |             el.innerHTML = Time.getFormatTime(binding.value * 1000);
64 |         }, 60000);
65 |     },
66 |     unbind: function (el) {
67 |         clearInterval(el.__timeout__);
68 |         delete el.__timeout__;
69 |     }
70 | }


--------------------------------------------------------------------------------
/vue11/vuex/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | // const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 3 | const { VueLoaderPlugin } = require('vue-loader'); //vue-loader，15的版本需要再添加plugin的配置
 4 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 5 | 
 6 | module.exports = {
 7 | 	//配置的单入口，webpack从index.js开始工作,webpack4默认entry 路径./src/index.js
 8 | 	// 所以下边的entry可以不写
 9 | 	// entry:{
10 | 	// 	main:'./src/index'
11 | 	// },
12 | 	output:{//打包后的文件会存储为demo/dist/main.js 在html中引用它就可以了
13 | 		path:path.join(__dirname,'./dist'), //打包后文件的输出目录
14 | 		publicPath:'/dist/', //指定资源文件引用目录，可以是CDN
15 | 		filename:'main.js' //输出文件的名称
16 | 	},
17 | 	// optimization: {
18 | 	//     splitChunks: {
19 | 	//       cacheGroups: {
20 | 	//         styles: {            
21 | 	//           name: 'main',
22 | 	//           test: /\.css$/,
23 | 	//           chunks: 'all',    // merge all the css chunk to one file
24 | 	//           enforce: true
25 | 	//         }
26 | 	//       }
27 | 	//     }
28 | 	//   },
29 | 	plugins:[
30 | 		new ExtractTextPlugin({
31 | 			filename:'main.css',//重命名提取后的css文件
32 | 			allChunks: true //有了chunk，需要在此配置
33 | 		}), 
34 | 		// new MiniCssExtractPlugin({
35 | 		// 	filename:'main.css',
36 | 		// }),
37 | 		new VueLoaderPlugin() //vue-loader，15的版本需要再添加plugin的配置
38 | 	],
39 | 	module:{
40 | 		rules:[
41 | 			// {
42 | 			// 	test:/\.vue$/,
43 | 			// 	loader:'vue-loader',
44 | 			// 	options:{
45 | 			// 		loaders:{
46 | 			// 			css:[
47 | 			// 				'vue-style-loader',
48 | 			// 				'mini-css-extract-plugin',
49 | 			// 				'css-loader'
50 | 			// 			]
51 | 			// 		}
52 | 			// 	}
53 | 			// },
54 | 			// {
55 | 			// 	test: /\.css$/,
56 | 			// 	use:[ //数组形式的话，编译是从后往前。
57 | 			// 		MiniCssExtractPlugin.loader,
58 |    //      　　 　　 	'css-loader'
59 | 			// 	]
60 | 			// },
61 | 			{
62 | 				test:/\.vue$/,
63 | 				loader:'vue-loader',
64 | 				options:{
65 | 					loaders:{
66 | 						css:ExtractTextPlugin.extract({
67 | 							use:'css-loader',
68 | 							fallback:'vue-style-loader'
69 | 						})
70 | 					}
71 | 				}
72 | 			},
73 |             {
74 |                 test: /\.css$/,
75 |                 use: ExtractTextPlugin.extract({
76 |                     use: 'css-loader',
77 |                     fallback: 'style-loader'
78 |                 })
79 |             },
80 |             {
81 |             	test:/\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
82 |             	loader:'url-loader?limit=1024' 
83 |             }
84 | 		]
85 | 	}
86 | 
87 | };
88 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 《Vue.js实战》 笔记   
 2 | 
 3 | ## 项目起源   
 4 |    最近有时间研读了Aresn的《Vue.js实战》一书，收获颇丰。感觉是学习Vue的书籍里比较好的一本书了。在此做些笔记备忘。   
 5 | 
 6 | 关于本书 中有说明，示例代码已经存放在了[github](https://github.com/icarusion/vue-book)上,里边有购买途径和已知勘误。但进去发现代码是从"实战篇"开始有的。"基础篇"和"晋级篇"的代码并没有。  
 7 | 大胆猜测没有的原因一个是因为前期并没有结合前端工程化，代码还比较简单。另一个就是作者希望我们能自己敲一遍代码，加深对Vue的学习。 但对于Vue新手，甚至是前端新手，有时可能还是需要全部代码的。所以在笔记中加入了书中几乎所有代码供有需要的参考。另随着时间的迁移，或许有些技术点会发生改变，书中以webpack2为例。笔记项目中采用webpack4可直接npm install 跑通后几章代码。但毕竟一人精力和能力有限。所以有了这个GitHub项目。我们可以通过协作的方式来共同维护这个项目。Git的历史记录也可以见证前端行业的一些变迁。
 8 | 
 9 | ## 项目目录结构     
10 |  + vue-combat-book ----- Vue.js实战   
11 |     + vue01 ----- 初识vue.js    
12 |     + vue02 ----- 数据绑定
13 |     + vue03 ----- 计算属性
14 |     + vue04 ----- v-bind及class与style绑定
15 |     + vue05 ----- 基本指令    
16 |         + shopping_trolley ----- 开发购物车小功能
17 |     + vue06 ----- 表单域v-model
18 |     + vue07 ----- 组件详解
19 |         + label_page ----- 标签页组件  
20 |         + input_box ----- 数字输入框组件
21 |     + vue08 ----- 自定义指令
22 |         + menu ----- 从外部关闭的下拉菜单
23 |         + v-time ----- 开发实时时间转换v-time
24 |     + vue09 ----- render函数   
25 |         + sort_form ----- 可排序表格组件
26 |         + message_list ----- 留言列表
27 |     + vue10 ----- 使用webpack
28 |         + demo ----- demo代码
29 |         + README10 ----- 第十章笔记
30 |     + vue11 ----- 插件
31 |         + router ----- router代码
32 |         + vuex ----- vuex代码
33 |         + vue-bus ----- vue-bus代码
34 |         + README11 ----- 第十一章笔记
35 |     + vue12 ----- iView经典组件剖析
36 |         + README12 ----- 第十二章笔记
37 |     + vue13 ----- 知乎日报项目开发
38 |         + daily ----- daily代码
39 |         + README13 ----- 第十三章笔记
40 |     + vue14 ----- 电商网站项目开发
41 |         + shopping ----- shopping代码  
42 |     + vue15 ----- 相关开源项目介绍   
43 |         +README15 ----- 第十五章笔记
44 |     + README ----- 项目介绍   
45 | 
46 | ## 项目文件百度网盘   
47 | 
48 | ~~[项目代码 + 《Vue.js实战》电子版zip](https://pan.baidu.com/s/1tSWJceedc27EnfET5IX_xg)~~         
49 | 书籍电子版已删除，[项目代码](https://pan.baidu.com/s/1tSWJceedc27EnfET5IX_xg)                                           
50 | PS:强烈建议购买正版书阅读，另外对着屏幕总是比看书费眼睛吧。   
51 | 
52 | 2018/11.01更新：     
53 | 修改vue01-vue10部分文件代码            
54 | [新增vue-devtools工具](https://pan.baidu.com/s/1tSWJceedc27EnfET5IX_xg),如何安装有人写的文章很清楚了,[戳这里](https://segmentfault.com/a/1190000009682735)     
55 | [新增简单的在webpack4.23.1下对vue2.5.17的搭建](https://github.com/zyf711/webpack-quick)       
56 | 
57 | 2018/11.13更新：            
58 | [新增vue+vue-router+vuex做的移动端小答题页面](https://github.com/zyf711/vue2-answer)           
59 | 
60 | 
61 | 
62 | 
63 | 
64 | 
65 | 
66 | 
67 | 
68 | 
69 | 
70 | 
71 | 
72 | 
73 | 
74 | 
75 | 
76 | 
77 | 
78 | 
79 | 
80 | 


--------------------------------------------------------------------------------
/vue14/shopping/src/components/product.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="product">
 3 |         <router-link :to="'/product/' + info.id" class="product-main">
 4 |             <img :src="info.image">
 5 |             <h4>{{ info.name }}</h4>
 6 |             <h4>销量：{{ info.sales }}</h4>
 7 |             <div class="product-color" :style="{ background: colors[info.color]}"></div>
 8 |             <div class="product-cost">¥ {{ info.cost }}</div>
 9 |             <div class="product-add-cart" @click.prevent="handleCart">加入购物车</div>
10 |         </router-link>
11 |     </div>
12 | </template>
13 | <script>
14 |     export default {
15 |         props: {
16 |             info: Object
17 |         },
18 |         data () {
19 |             return {
20 |                 colors: {
21 |                     '白色': '#ffffff',
22 |                     '金色': '#dac272',
23 |                     '蓝色': '#233472',
24 |                     '红色': '#f2352e'
25 |                 }
26 |             }
27 |         },
28 |         methods: {
29 |             handleCart () {
30 |                 this.$store.commit('addCart', this.info.id);
31 |             }
32 |         }
33 |     };
34 | </script>
35 | <style scoped>
36 |     .product{
37 |         width: 25%;
38 |         float: left;
39 |     }
40 |     .product-main{
41 |         display: block;
42 |         margin: 16px;
43 |         padding: 16px;
44 |         border: 1px solid #dddee1;
45 |         border-radius: 6px;
46 |         overflow: hidden;
47 |         background: #fff;
48 |         text-align: center;
49 |         position: relative;
50 |     }
51 |     .product-main img{
52 |         width: 100%;
53 |     }
54 |     h4{
55 |         color: #222;
56 |         overflow: hidden;
57 |         text-overflow: ellipsis;
58 |         white-space: nowrap;
59 |     }
60 |     .product-main:hover h4{
61 |         color: #0070c9;
62 |     }
63 |     .product-color{
64 |         display: block;
65 |         width: 16px;
66 |         height: 16px;
67 |         border: 1px solid #dddee1;
68 |         border-radius: 50%;
69 |         margin: 6px auto;
70 |     }
71 |     .product-cost{
72 |         color: #de4037;
73 |         margin-top: 6px;
74 |     }
75 |     .product-add-cart{
76 |         display: none;
77 |         padding: 4px 8px;
78 |         background: #2d8cf0;
79 |         color: #fff;
80 |         font-size: 12px;
81 |         border-radius: 3px;
82 |         cursor: pointer;
83 |         position: absolute;
84 |         top: 5px;
85 |         right: 5px;
86 |     }
87 |     .product-main:hover .product-add-cart{
88 |         display: inline-block;
89 |     }
90 | </style>


--------------------------------------------------------------------------------
/vue14/shopping/src/product.js:
--------------------------------------------------------------------------------
 1 | export default [
 2 |     {
 3 |         id: 1,
 4 |         name: 'AirPods',
 5 |         brand: 'Apple',
 6 |         image: 'http://ordfm6aah.bkt.clouddn.com/shop/1.jpeg',
 7 |         sales: 10000,
 8 |         cost: 1288,
 9 |         color: '白色'
10 |     },
11 |     {
12 |         id: 2,
13 |         name: 'BeatsX 入耳式耳机',
14 |         brand: 'Beats',
15 |         image: 'http://ordfm6aah.bkt.clouddn.com/shop/2.jpeg',
16 |         sales: 11000,
17 |         cost: 1188,
18 |         color: '白色'
19 |     },
20 |     {
21 |         id: 3,
22 |         name: 'Beats Solo3 Wireless 头戴式式耳机',
23 |         brand: 'Beats',
24 |         image: 'http://ordfm6aah.bkt.clouddn.com/shop/3.jpeg',
25 |         sales: 5000,
26 |         cost: 2288,
27 |         color: '金色'
28 |     },
29 |     {
30 |         id: 4,
31 |         name: 'Beats Pill+ 便携式扬声器',
32 |         brand: 'Beats',
33 |         image: 'http://ordfm6aah.bkt.clouddn.com/shop/4.jpeg',
34 |         sales: 3000,
35 |         cost: 1888,
36 |         color: '红色'
37 |     },
38 |     {
39 |         id: 5,
40 |         name: 'Sonos PLAY:1 无线扬声器',
41 |         brand: 'Sonos',
42 |         image: 'http://ordfm6aah.bkt.clouddn.com/shop/5.jpeg',
43 |         sales: 8000,
44 |         cost: 1578,
45 |         color: '白色'
46 |     },
47 |     {
48 |         id: 6,
49 |         name: 'Powerbeats3 by Dr. Dre Wireless 入耳式耳机',
50 |         brand: 'Beats',
51 |         image: 'http://ordfm6aah.bkt.clouddn.com/shop/6.jpeg',
52 |         sales: 12000,
53 |         cost: 1488,
54 |         color: '金色'
55 |     },
56 |     {
57 |         id: 7,
58 |         name: 'Beats EP 头戴式耳机',
59 |         brand: 'Beats',
60 |         image: 'http://ordfm6aah.bkt.clouddn.com/shop/7.jpeg',
61 |         sales: 25000,
62 |         cost: 788,
63 |         color: '蓝色'
64 |     },
65 |     {
66 |         id: 8,
67 |         name: 'B&O PLAY BeoPlay A1 便携式蓝牙扬声器',
68 |         brand: 'B&O',
69 |         image: 'http://ordfm6aah.bkt.clouddn.com/shop/8.jpeg',
70 |         sales: 15000,
71 |         cost: 1898,
72 |         color: '金色'
73 |     },
74 |     {
75 |         id: 9,
76 |         name: 'Bose® QuietComfort® 35 无线耳机',
77 |         brand: 'Bose',
78 |         image: 'http://ordfm6aah.bkt.clouddn.com/shop/9.jpeg',
79 |         sales: 14000,
80 |         cost: 2878,
81 |         color: '蓝色'
82 |     },
83 |     {
84 |         id: 10,
85 |         name: 'B&O PLAY Beoplay H4 无线头戴式耳机',
86 |         brand: 'B&O',
87 |         image: 'http://ordfm6aah.bkt.clouddn.com/shop/10.jpeg',
88 |         sales: 9000,
89 |         cost: 2298,
90 |         color: '金色'
91 |     }
92 | ]


--------------------------------------------------------------------------------
/vue11/vuex/src/index.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'; 
  2 | import VueRouter from 'vue-router';
  3 | import Vuex from 'vuex';
  4 | import App from './app.vue';
  5 | import moduleA from './moduleA' //vuex中modules分割出的模块
  6 | 
  7 | Vue.use(VueRouter)
  8 | Vue.use(Vuex)
  9 | 
 10 | const Routers = [
 11 | 	{
 12 | 		path:'/index',
 13 | 		meta:{
 14 | 			title:'首页'
 15 | 		},
 16 | 		component:(resolve) => require(['./views/index.vue'],resolve)
 17 | 	},
 18 | 	{
 19 | 		path:'/about',
 20 | 		meta:{
 21 | 			title:'关于'
 22 | 		},
 23 | 		component:(resolve) => require(['./views/about.vue'],resolve)
 24 | 	},
 25 | 	{
 26 | 		path:'/user/:id',
 27 | 		meta:{
 28 | 			title:'个人主页'
 29 | 		},
 30 | 		component:(resolve) => require(['./views/user.vue'],resolve)
 31 | 	},
 32 | 	{
 33 | 		path:'*',
 34 | 		redirect:'/index'
 35 | 	}
 36 | ];
 37 | 
 38 | const router = new VueRouter({
 39 | 	mode:'history',
 40 | 	routes: Routers
 41 | });
 42 | 
 43 | 
 44 | router.beforeEach((to,from,next)=>{
 45 | 	window.document.title = to.meta.title;
 46 | 	next();
 47 | })
 48 | 
 49 | const store = new Vuex.Store({
 50 | 	modules:{ moduleA:moduleA }, // 项目足够大，store内容过多时，modules把store里内容写到不同文件中
 51 | 	state:{ //数据保存在state字段内
 52 | 		count:0, //任何组件通过this.$store.state.count读取
 53 | 		list:[1,5,8,10,30,50]
 54 | 	},
 55 | 	mutations:{ //mutations改变state字段数据唯一途径
 56 | 		increment(state){
 57 | 			state.count ++ ; //任何组件通过this.$store.commit('increment')提交事件名
 58 | 		},
 59 | 		decrease(state,n=10){// mutations可以接受第二个参数，数字，字符串或对象等类型
 60 | 			state.count -= n;
 61 | 		},
 62 | 		custom(state,params){
 63 | 			state.count += params.count;
 64 | 		}
 65 | 	},
 66 | 	actions:{ //actions提交的是mutations
 67 | 		//涉及改变数据的就用mutations，存在业务逻辑的就用actions,actions可以异步操作业务逻辑。
 68 | 		asyncIncrement(context){  //任何组件this.$store.dispatch('asyncIncrement')触发
 69 | 			return new Promise((resolve,reject) => { //Promise在2秒后提交mutations
 70 | 				setTimeout(()=>{
 71 | 					const random = Math.random();
 72 | 					if( random >.5 ){
 73 | 						context.commit('increment');
 74 | 						console.log(random)
 75 | 						resolve();
 76 | 					}else{
 77 | 						reject(random)
 78 | 					}
 79 | 				},2000)
 80 | 			});
 81 | 		}
 82 | 	},
 83 | 	getters:{
 84 | 		filteredList:state => {
 85 | 			return state.list.filter(item => item < 10); //任何组件通过this.$store.getters.filteredList提交事件名
 86 | 		},
 87 | 		listCount:(state,getters) => {
 88 | 			return getters.filteredList.length;
 89 | 		}
 90 | 	}
 91 | })
 92 | 
 93 | new Vue({
 94 |     el: '#app',
 95 |     router:router,
 96 |     store:store,
 97 |     render: h => {
 98 |         return h(App);
 99 |     }
100 | });


--------------------------------------------------------------------------------
/vue07/label_page/tabs.js:
--------------------------------------------------------------------------------
 1 | Vue.component('tabs',{
 2 | 	template:'<div class="tabs">\
 3 | 	<div class="tabs-bar">\
 4 | 	<div :class="tabCls(item)" v-for="(item,index) in navList" @click="handleChange(index)">{{item.label}}</div>\
 5 | 	</div>\
 6 | 	<div class="tabs-content">\
 7 | 	<slot></slot>\
 8 | 	</div>\
 9 | 	</div>',  //上边的slot是嵌套的pane
10 | 	props:{
11 | 		// 这里value为了可以使用v-model
12 | 		value:{
13 | 			type:[String,Number]
14 | 		}
15 | 	},
16 | 	data:function(){
17 | 		return {			
18 | 			currentValue:this.value, // 因为不能修改value，所以复制一份自己维护
19 | 			navList:[] //用于渲染tabs的标题
20 | 		}
21 | 	},
22 | 	methods:{
23 | 		tabCls:function(item){
24 | 			return [
25 | 				'tabs-tab',
26 | 				{
27 | 					// 给当前选中的tab,也就是item.name === this.currentValue为true的加一个class
28 | 					// 运算优先级=== 高于 条件: 
29 | 					// 运算符优先级https://www.cnblogs.com/yy-hh/p/4624792.html
30 | 					'tabs-tab-active':item.name === this.currentValue
31 | 				}
32 | 			]
33 | 		},
34 | 		getTabs(){ // 通过遍历子组件，得到所有的pane组件	
35 | 			return this.$children.filter(function(item){
36 | 				return item.$options.name === 'pane'
37 | 			});
38 | 		},
39 | 		updateNav(){ //更新标题
40 | 			this.navList = [];
41 | 			var _this = this;
42 | 			// 把pane的label和name提取出来，构成一个object并添加到数组navList里，后面会在template里用到
43 | 			this.getTabs().forEach(function( pane,index ){ 
44 | 				_this.navList.push({
45 | 					label:pane.label,
46 | 					name:pane.name || index
47 | 				});
48 | 				// 如果没给pane设置name，(比如没给activeKey1设置初始选中哪个)默认设置它的索引
49 | 				if( !pane.name ) pane.name = index;
50 | 					// 设置当前选中的tab的索引，在此就是默认第一个显示
51 | 					if( index === 0 ){
52 | 						if( !_this.currentValue ){
53 | 							_this.currentValue = pane.name || index;
54 | 						}
55 | 					}
56 | 			});
57 | 			this.updateStatus()
58 | 		},
59 | 		updateStatus(){ // 显示当前选中的tab对应的pane组件，隐藏没选中的		
60 | 			var tabs = this.getTabs();
61 | 			var _this = this;
62 | 			tabs.forEach(function (tab){
63 | 				// 这里是对所有pane里边的sw判断是true还是false
64 | 				// 运算优先级=== 高于=  先判断tab.name === _this.currentValue 是true还是false，再赋值给tab.sw
65 | 				return tab.sw = tab.name === _this.currentValue; 
66 | 			})
67 | 		},
68 | 		handleChange:function(index){ //点击tab标题时触发
69 | 			var nav = this.navList[index];
70 | 			var name = nav.name;
71 | 			// 改变当前选中的tab，并触发下面的watch
72 | 			this.currentValue = name;
73 | 			// 更新value
74 | 			this.$emit('input',name);
75 | 			// 触发一个自定义事件，供父级使用
76 | 			this.$emit('on-click',name);
77 | 		}
78 | 		},
79 | 		watch:{
80 | 			value:function(val){
81 | 				this.currentValue = val;
82 | 			},
83 | 			currentValue:function(){
84 | 				// 在当前选中的tab发生变化时，更新pane的显示状态
85 | 				this.updateStatus()
86 | 			}
87 | 		}
88 | })


--------------------------------------------------------------------------------
/vue11/router/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | // const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 3 | const { VueLoaderPlugin } = require('vue-loader'); //vue-loader，15的版本需要再添加plugin的配置
 4 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 5 | 
 6 | module.exports = {
 7 | 	//配置的单入口，webpack从index.js开始工作,webpack4默认entry 路径./src/index.js
 8 | 	// 所以下边的entry可以不写
 9 | 	// entry:{
10 | 	// 	main:'./src/index'
11 | 	// },
12 | 	output:{//打包后的文件会存储为demo/dist/main.js 在html中引用它就可以了
13 | 		path:path.join(__dirname,'./dist'), //打包后文件的输出目录
14 | 		publicPath:'/dist/', //指定资源文件引用目录，可以是CDN
15 | 		filename:'main.js' //输出文件的名称
16 | 	},
17 | 	// optimization: {
18 | 	//     splitChunks: {
19 | 	//       cacheGroups: {
20 | 	//         styles: {            
21 | 	//           name: 'main',
22 | 	//           test: /\.css$/,
23 | 	//           chunks: 'all',    // merge all the css chunk to one file
24 | 	//           enforce: true
25 | 	//         }
26 | 	//       }
27 | 	//     }
28 | 	//   },
29 | 	plugins:[
30 | 		new ExtractTextPlugin({
31 | 			filename:'main.css',//重命名提取后的css文件
32 | 			allChunks: true //有了chunk，需要在此配置
33 | 		}), 
34 | 		// new MiniCssExtractPlugin({
35 | 		// 	filename:'main.css',
36 | 		// }),
37 | 		new VueLoaderPlugin() //vue-loader，15的版本需要再添加plugin的配置
38 | 	],
39 | 	module:{
40 | 		rules:[
41 | 			// {
42 | 			// 	test:/\.vue$/,
43 | 			// 	loader:'vue-loader',
44 | 			// 	options:{
45 | 			// 		loaders:{
46 | 			// 			css:[
47 | 			// 				'vue-style-loader',
48 | 			// 				'mini-css-extract-plugin',
49 | 			// 				'css-loader'
50 | 			// 			]
51 | 			// 		}
52 | 			// 	}
53 | 			// },
54 | 			// {
55 | 			// 	test: /\.css$/,
56 | 			// 	use:[ //数组形式的话，编译是从后往前。
57 | 			// 		MiniCssExtractPlugin.loader,
58 |    //      　　 　　 	'css-loader'
59 | 			// 	]
60 | 			// },
61 | 			{
62 | 				test:/\.vue$/,
63 | 				loader:'vue-loader',
64 | 				options:{
65 | 					loaders:{
66 | 						css:ExtractTextPlugin.extract({
67 | 							use:'css-loader',
68 | 							fallback:'vue-style-loader'
69 | 						})
70 | 					}
71 | 				}
72 | 			},
73 |             {
74 |                 test: /\.css$/,
75 |                 use: ExtractTextPlugin.extract({
76 |                     use: 'css-loader',
77 |                     fallback: 'style-loader'
78 |                 })
79 |             },
80 | 			// {
81 | 			// 	test:/\.js$/,
82 | 			// 	loader:'babel-loader',
83 | 			// 	exclude:/node_modules/
84 | 			// },
85 |             {
86 |             	test:/\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
87 |             	loader:'url-loader?limit=1024'
88 |             }
89 | 		]
90 | 	}
91 | 
92 | };


--------------------------------------------------------------------------------
/vue11/vue-bus/src/index.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'; 
  2 | import VueRouter from 'vue-router';
  3 | import Vuex from 'vuex';
  4 | import App from './app.vue';
  5 | import moduleA from './moduleA' //vuex中modules分割出的模块
  6 | import VueBus from './vue-bus';
  7 | 
  8 | Vue.use(VueRouter);
  9 | Vue.use(Vuex);
 10 | Vue.use(VueBus);
 11 | 
 12 | const Routers = [
 13 | 	{
 14 | 		path:'/index',
 15 | 		meta:{
 16 | 			title:'首页'
 17 | 		},
 18 | 		component:(resolve) => require(['./views/index.vue'],resolve)
 19 | 	},
 20 | 	{
 21 | 		path:'/about',
 22 | 		meta:{
 23 | 			title:'关于'
 24 | 		},
 25 | 		component:(resolve) => require(['./views/about.vue'],resolve)
 26 | 	},
 27 | 	{
 28 | 		path:'/user/:id',
 29 | 		meta:{
 30 | 			title:'个人主页'
 31 | 		},
 32 | 		component:(resolve) => require(['./views/user.vue'],resolve)
 33 | 	},
 34 | 	{
 35 | 		path:'*',
 36 | 		redirect:'/index'
 37 | 	}
 38 | ];
 39 | 
 40 | const router = new VueRouter({
 41 | 	mode:'history',
 42 | 	routes: Routers
 43 | });
 44 | 
 45 | 
 46 | router.beforeEach((to,from,next)=>{
 47 | 	window.document.title = to.meta.title;
 48 | 	next();
 49 | })
 50 | 
 51 | const store = new Vuex.Store({
 52 | 	modules:{ moduleA:moduleA }, // 项目足够大，store内容过多时，modules把store里内容写到不同文件中
 53 | 	state:{ //数据保存在state字段内
 54 | 		count:0, //任何组件通过this.$store.state.count读取
 55 | 		list:[1,5,8,10,30,50]
 56 | 	},
 57 | 	mutations:{ //mutations改变state字段数据唯一途径
 58 | 		increment(state){
 59 | 			state.count ++ ; //任何组件通过this.$store.commit('increment')提交事件名
 60 | 		},
 61 | 		decrease(state,n=10){// mutations可以接受第二个参数，数字，字符串或对象等类型
 62 | 			state.count -= n;
 63 | 		},
 64 | 		custom(state,params){
 65 | 			state.count += params.count;
 66 | 		}
 67 | 	},
 68 | 	actions:{ //actions提交的是mutations
 69 | 		//涉及改变数据的就用mutations，存在业务逻辑的就用actions,actions可以异步操作业务逻辑。
 70 | 		asyncIncrement(context){  //任何组件this.$store.dispatch('asyncIncrement')触发
 71 | 			return new Promise((resolve,reject) => { //Promise在2秒后提交mutations
 72 | 				setTimeout(()=>{
 73 | 					const random = Math.random();
 74 | 					if( random >.5 ){
 75 | 						context.commit('increment');
 76 | 						console.log(random)
 77 | 						resolve();
 78 | 					}else{
 79 | 						reject(random)
 80 | 					}
 81 | 				},2000)
 82 | 			});
 83 | 		}
 84 | 	},
 85 | 	getters:{
 86 | 		filteredList:state => {
 87 | 			return state.list.filter(item => item < 10); //任何组件通过this.$store.getters.filteredList提交事件名
 88 | 		},
 89 | 		listCount:(state,getters) => {
 90 | 			return getters.filteredList.length;
 91 | 		}
 92 | 	}
 93 | })
 94 | 
 95 | new Vue({
 96 |     el: '#app',
 97 |     router:router,
 98 |     store:store,
 99 |     render: h => {
100 |         return h(App);
101 |     }
102 | });


--------------------------------------------------------------------------------
/vue11/vue-bus/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | // const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 3 | const { VueLoaderPlugin } = require('vue-loader'); //vue-loader，15的版本需要再添加plugin的配置
 4 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 5 | 
 6 | module.exports = {
 7 | 	//配置的单入口，webpack从index.js开始工作,webpack4默认entry 路径./src/index.js
 8 | 	// 所以下边的entry可以不写
 9 | 	// entry:{
10 | 	// 	main:'./src/index'
11 | 	// },
12 | 	output:{//打包后的文件会存储为demo/dist/main.js 在html中引用它就可以了
13 | 		path:path.join(__dirname,'./dist'), //打包后文件的输出目录
14 | 		publicPath:'/dist/', //指定资源文件引用目录，可以是CDN
15 | 		filename:'main.js' //输出文件的名称
16 | 	},
17 | 	// optimization: {
18 | 	//     splitChunks: {
19 | 	//       cacheGroups: {
20 | 	//         styles: {            
21 | 	//           name: 'main',
22 | 	//           test: /\.css$/,
23 | 	//           chunks: 'all',    // merge all the css chunk to one file
24 | 	//           enforce: true
25 | 	//         }
26 | 	//       }
27 | 	//     }
28 | 	//   },
29 | 	plugins:[
30 | 		new ExtractTextPlugin({
31 | 			filename:'main.css',//重命名提取后的css文件
32 | 			allChunks: true //有了chunk，需要在此配置
33 | 		}), 
34 | 		// new MiniCssExtractPlugin({
35 | 		// 	filename:'main.css',
36 | 		// }),
37 | 		new VueLoaderPlugin() //vue-loader，15的版本需要再添加plugin的配置
38 | 	],
39 | 	module:{
40 | 		rules:[
41 | 			// {
42 | 			// 	test:/\.vue$/,
43 | 			// 	loader:'vue-loader',
44 | 			// 	options:{
45 | 			// 		loaders:{
46 | 			// 			css:[
47 | 			// 				'vue-style-loader',
48 | 			// 				'mini-css-extract-plugin',
49 | 			// 				'css-loader'
50 | 			// 			]
51 | 			// 		}
52 | 			// 	}
53 | 			// },
54 | 			// {
55 | 			// 	test: /\.css$/,
56 | 			// 	use:[ //数组形式的话，编译是从后往前。
57 | 			// 		MiniCssExtractPlugin.loader,
58 |    //      　　 　　 	'css-loader'
59 | 			// 	]
60 | 			// },
61 | 			{
62 | 				test:/\.vue$/,
63 | 				loader:'vue-loader',
64 | 				options:{
65 | 					loaders:{
66 | 						css:ExtractTextPlugin.extract({
67 | 							use:'css-loader',
68 | 							fallback:'vue-style-loader'
69 | 						})
70 | 					}
71 | 				}
72 | 			},
73 |             {
74 |                 test: /\.css$/,
75 |                 use: ExtractTextPlugin.extract({
76 |                     use: 'css-loader',
77 |                     fallback: 'style-loader'
78 |                 })
79 |             },
80 |    // 			除非您要自定义 entry point(入口点) ，否则无需指定babel-loader。
81 | 			// {
82 | 			// 	test:/\.js$/,
83 | 			// 	loader:'babel-loader',
84 | 			// 	exclude:/node_modules/
85 | 			// },
86 |             {
87 |             	test:/\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
88 |             	loader:'url-loader?limit=1024' //文件小于1k就以base64形式加载
89 |             }
90 | 		]
91 | 	}
92 | 
93 | };
94 | // module.exports = config
95 | //ES6: export default config


--------------------------------------------------------------------------------
/vue07/input_box/input-number.js:
--------------------------------------------------------------------------------
 1 | function isValueNumber(value){
 2 | 	return ( /(^-?[0-9]+\.{1}\d+$) | (^-?[1-9][0-9]*$) | (^-?0{1}$)/ ).test(value+'');
 3 | }
 4 | 
 5 | Vue.component('input-number',{
 6 | 	template:'<div class="input-number">\
 7 | 	<input type="text" :value="currentValue" @change="handleChange" @keydown="handleKeydown"/>\
 8 | 	<button @click="handleDown" :disabled="currentValue<=min">-</button>\
 9 | 	<button @click="handleUp" :disabled="currentValue>=max">+</button>\
10 | 	</div>',	
11 | 	props:{ //因为是独立组件，所以应该对每个prop进行效验
12 | 		max:{
13 | 			type:Number,
14 | 			default:Infinity
15 | 		},
16 | 		min:{
17 | 			type:Number,
18 | 			default:-Infinity
19 | 		},
20 | 		value:{
21 | 			type:Number,
22 | 			default:0
23 | 		},
24 | 		step:{
25 | 			type:Number,
26 | 			default:1
27 | 		}
28 | 	},
29 | 	data:function(){
30 | 		// var val = this.value;
31 | 		// if( val > this.max ) val = this.max;
32 | 		// if( val < this.min ) val = this.min;
33 | 		// return{ currentValue : val }
34 | 		return {
35 | 			// Vue组件是单向数据流，无法从组件内部直接修改prop，value值。解决办法：给组件声明一个data。默认引用value的值。
36 | 			//使得可以从组件内部直接修改prop和value的值。就解决了引用父组件value的问题。
37 | 			currentValue:this.value
38 | 		}
39 | 	},
40 | 	watch:{ //用来监听某个prop或data的改变,改变时就会触发里边的函数
41 | 		currentValue:function(val){
42 | 			this.$emit('input',val); //在使用v-model时改变value的
43 | 			this.$emit('on-change',val); //触发自定义事件on-change告知父组件数字输入框的值有所改变，例子中没用到
44 | 		},
45 | 		value:function(val){
46 | 			this.updateValue(val)
47 | 		}
48 | 	},
49 | 	methods:{
50 | 		updateValue:function(val){ //过滤出一个正确的currentValue
51 | 			if( val > this.max ) val = this.max;
52 | 			if( val < this.min ) val = this.min;
53 | 			this.currentValue = val
54 | 		},
55 | 		handleDown:function(){
56 | 			if( this.currentValue <= this.min ) return;
57 | 			this.currentValue -= this.step
58 | 		},
59 | 		handleUp:function(){
60 | 			if( this.currentValue >= this.max ) return;
61 | 			this.currentValue += this.step
62 | 		},
63 | 		handleKeydown:function(event){
64 | 			if(event.keyCode==38){
65 |                 this.handleUp();
66 |             }
67 |             if(event.keyCode==40){
68 |                 this.handleDown() ;
69 |             }
70 | 		},
71 | 		handleChange:function(event){ //handleChange绑在了上边的原生change事件上。判断当前输入的是否是数字。
72 | 			var val = event.target.value.trim();
73 | 
74 | 			var max = this.max;
75 | 			var min = this.min;
76 | 			
77 | 			if( isValueNumber(val) ){			
78 | 				val = Number(val);
79 | 				this.currentValue = val;
80 | 
81 | 				if( val > max ){
82 | 					this.currentValue = max;
83 | 				}else if( val < min ){
84 | 					this.currentValue = min;
85 | 				}
86 | 			}else{
87 | 					event.target.value = this.currentValue;
88 | 				}
89 | 		}
90 | 	},
91 | 	mounted:function(){ 
92 | 	//在mounted钩子里调用updateValue()方法是因为第一次初始化时，也对value进行了过滤。
93 | 	// 还有种写法，在data选项里返回对象前进行过滤。参照data里的注释。
94 | 		this.updateValue(this.value)
95 | 	}
96 | })


--------------------------------------------------------------------------------
/vue14/shopping/src/views/product.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-if="product">
 3 |         <div class="product">
 4 |             <div class="product-image">
 5 |                 <img :src="product.image">
 6 |             </div>
 7 |             <div class="product-info">
 8 |                 <h1 class="product-name">{{ product.name }}</h1>
 9 |                 <div class="product-cost">¥ {{ product.cost }}</div>
10 |                 <div class="product-add-cart" @click="handleAddToCart">加入购物车</div>
11 |             </div>
12 |         </div>
13 |         <div class="product-desc">
14 |             <h2>产品介绍</h2>
15 |             <img v-for="n in 10" :src="'http://ordfm6aah.bkt.clouddn.com/shop/' + n + '.jpeg'">
16 |         </div>
17 |     </div>
18 | </template>
19 | <script>
20 |     import product_data from '../product.js';
21 |     export default {
22 |         data () {
23 |             return {
24 |                 // 获取路由中的参数
25 |                 id: parseInt(this.$route.params.id),
26 |                 product: null
27 |             }
28 |         },
29 |         methods: {
30 |             getProduct () {
31 |                 // 真实环境通过 ajax 获取，这里用异步模拟
32 |                 setTimeout(() => {
33 |                     this.product = product_data.find(item => item.id === this.id);
34 |                 }, 500);
35 |             },
36 |             // 加入购物车
37 |             handleAddToCart () {
38 |                 this.$store.commit('addCart', this.id);
39 |             }
40 |         },
41 |         mounted () {
42 |             this.getProduct();
43 |         }
44 |     }
45 | </script>
46 | <style scoped>
47 |     .product{
48 |         margin: 32px;
49 |         padding: 32px;
50 |         background: #fff;
51 |         border: 1px solid #dddee1;
52 |         border-radius: 10px;
53 |         overflow: hidden;
54 |     }
55 |     .product-image{
56 |         width: 50%;
57 |         height: 550px;
58 |         float: left;
59 |         text-align: center;
60 |     }
61 |     .product-image img{
62 |         height: 100%;
63 |     }
64 |     .product-info{
65 |         width: 50%;
66 |         padding: 150px 0 250px;
67 |         height: 150px;
68 |         float: left;
69 |         text-align: center;
70 |     }
71 |     .product-cost{
72 |         color: #f2352e;
73 |         margin: 8px 0;
74 |     }
75 |     .product-add-cart{
76 |         display: inline-block;
77 |         padding: 8px 64px;
78 |         margin: 8px 0;
79 |         background: #2d8cf0;
80 |         color: #fff;
81 |         border-radius: 4px;
82 |         cursor: pointer;
83 |     }
84 |     .product-desc{
85 |         background: #fff;
86 |         margin: 32px;
87 |         padding: 32px;
88 |         border: 1px solid #dddee1;
89 |         border-radius: 10px;
90 |         text-align: center;
91 |     }
92 |     .product-desc img{
93 |         display: block;
94 |         width: 50%;
95 |         margin: 32px auto;
96 |         padding: 32px;
97 |         border-bottom: 1px solid #dddee1;
98 |     }
99 | </style>


--------------------------------------------------------------------------------
/vue13/daily/src/style.css:
--------------------------------------------------------------------------------
  1 | html, body{
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     height: 100%;
  5 |     color: #657180;
  6 |     font-size: 16px;
  7 | }
  8 | .daily-menu{
  9 |     width: 150px;
 10 |     position: fixed;
 11 |     top: 0;
 12 |     bottom: 0;
 13 |     left: 0;
 14 |     overflow: auto;
 15 |     background: #f5f7f9;
 16 | }
 17 | .daily-menu-item{
 18 |     font-size: 18px;
 19 |     text-align: center;
 20 |     margin: 5px 0;
 21 |     padding: 10px 0;
 22 |     cursor: pointer;
 23 |     border-right: 2px solid transparent;
 24 |     transition: all .3s ease-in-out;
 25 | }
 26 | .daily-menu-item:hover{
 27 |     background: #e3e8ee;
 28 | }
 29 | .daily-menu-item.on{
 30 |     border-right: 2px solid #3399ff;
 31 | }
 32 | 
 33 | .daily-menu ul{
 34 |     list-style: none;
 35 | }
 36 | .daily-menu ul li a{
 37 |     display: block;
 38 |     color: inherit;
 39 |     text-decoration: none;
 40 |     padding: 5px 0;
 41 |     margin: 5px 0;
 42 |     cursor: pointer;
 43 | }
 44 | .daily-menu ul li a:hover, .daily-menu ul li a.on{
 45 |     color: #3399ff;
 46 | }
 47 | 
 48 | .daily-list{
 49 |     width: 300px;
 50 |     position: fixed;
 51 |     top: 0;
 52 |     bottom: 0;
 53 |     left: 150px;
 54 |     overflow: auto;
 55 |     border-right: 1px solid #d7dde4;
 56 | }
 57 | .daily-date{
 58 |     text-align: center;
 59 |     margin: 10px 0;
 60 | }
 61 | .daily-item{
 62 |     display: block;
 63 |     color: inherit;
 64 |     text-decoration: none;
 65 |     padding: 16px;
 66 |     overflow: hidden;
 67 |     cursor: pointer;
 68 |     transition: all .3s ease-in-out;
 69 | }
 70 | .daily-item:hover{
 71 |     background: #e3e8ee;
 72 | }
 73 | .daily-img{
 74 |     width: 80px;
 75 |     height: 80px;
 76 |     float: left;
 77 | }
 78 | .daily-img img{
 79 |     width: 100%;
 80 |     height: 100%;
 81 |     border-radius: 3px;
 82 | }
 83 | .daily-title{
 84 |     padding: 10px 5px 10px 90px;
 85 | }
 86 | .daily-title.noImg{
 87 |     padding-left: 5px;
 88 | }
 89 | .daily-article{
 90 |     margin-left: 450px;
 91 |     padding: 20px;
 92 | }
 93 | .daily-article-title{
 94 |     font-size: 28px;
 95 |     font-weight: bold;
 96 |     color: #222;
 97 |     padding: 10px 0;
 98 | }
 99 | 
100 | .view-more a{
101 |     display: block;
102 |     cursor: pointer;
103 |     background: #f5f7f9;
104 |     text-align: center;
105 |     color: inherit;
106 |     text-decoration: none;
107 |     padding: 4px 0;
108 |     border-radius: 3px;
109 | }
110 | 
111 | .daily-comments{
112 |     margin: 10px 0;
113 | }
114 | .daily-comments span{
115 |     display: block;
116 |     margin: 10px 0;
117 |     font-size: 20px;
118 | }
119 | .daily-comment{
120 |     overflow: hidden;
121 |     margin-bottom: 20px;
122 |     padding-bottom: 20px;
123 |     border-bottom: 1px dashed #e3e8ee;
124 | }
125 | .daily-comment-avatar{
126 |     width: 50px;
127 |     height: 50px;
128 |     float: left;
129 | }
130 | .daily-comment-avatar img{
131 |     width: 100%;
132 |     height: 100%;
133 |     border-radius: 3px;
134 | }
135 | .daily-comment-content{
136 |     margin-left: 65px;
137 | }
138 | .daily-comment-name{
139 | 
140 | }
141 | .daily-comment-time{
142 |     color: #9ea7b4;
143 |     font-size: 14px;
144 |     margin-top: 5px;
145 | }
146 | .daily-comment-text{
147 |     margin-top: 10px;
148 | }


--------------------------------------------------------------------------------
/vue09/vue9-13.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<title>vue9-13</title>
  6 | </head>
  7 | <body>
  8 | 	<div id="app">
  9 | 		<smart-item :data="data"></smart-item>
 10 | 		<button @click="change('img')">切换为图片组件</button>
 11 | 		<button @click="change('video')">切换为视频组件</button>
 12 | 		<button @click="change('text')">切换为文本组件</button>
 13 | 	</div>
 14 | 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
 15 | 	<script>
 16 | 		// 函数组件化 functional为true，使组件无data和this上下文，这样用render函数返回虚拟节点更容易渲染。函数化组件只是一个函数，渲染开销要小很多
 17 | 		
 18 | 		// 图片组件选项
 19 | 		var ImgItem = {
 20 | 			props:['data'],
 21 | 			render:function(createElement){
 22 | 				return  createElement('div',[
 23 | 						createElement('p','图片组件'),
 24 | 						createElement('img',{
 25 | 							attrs:{ src:this.data.url }
 26 | 						})
 27 | 					])
 28 | 			}
 29 | 		}
 30 | 		// 视频组件选项
 31 | 		var VideoItem = {
 32 | 			props:['data'],
 33 | 			render:function(createElement){
 34 | 				return  createElement('div',[
 35 | 						createElement('p','视频组件'),
 36 | 						createElement('video',{
 37 | 							attrs:{ 
 38 | 									src:this.data.url,
 39 | 									controls:'controls',
 40 | 									autoplay:'autoplay'	
 41 | 								 }
 42 | 						})
 43 | 					])
 44 | 			}
 45 | 		}
 46 | 		// 纯文本组件选项
 47 | 		var TextItem = {
 48 | 			props:['data'],
 49 | 			render:function(createElement){
 50 | 				return  createElement('div',[
 51 | 						createElement('p','纯文本组件'),
 52 | 						createElement('p',this.data.content)
 53 | 					])
 54 | 			}
 55 | 		}
 56 | 
 57 | 		Vue.component('smart-item',{
 58 | 			functional:true,  //设为组件无状态无实例，也就是没data和this。这样render函数返回虚拟节点更易渲染
 59 | 			render:function(createElement,context){ //context参数提供临时上下文
 60 | 				//根据传入的数据，判断显示哪种组件
 61 | 				function getComponent(){
 62 | 					var data = context.props.data //context.props.data相当于this.data
 63 | 					if(data.type === 'img') return ImgItem;
 64 | 					if(data.type === 'video') return VideoItem;
 65 | 					return TextItem;
 66 | 				}
 67 | 				return createElement(
 68 | 						getComponent(),
 69 | 							{
 70 | 								props:{
 71 | 										// 把smart-item的data传到选择的组件里的prop:data
 72 | 										// 相当于template里边给标签:data="data"
 73 | 										data:context.props.data
 74 | 								    }
 75 | 							},
 76 | 							context.children //相当于不是函数组件化里边的this.$solts.default
 77 | 					)
 78 | 			},
 79 | 			props:{
 80 | 				data:{
 81 | 					type:Object,
 82 | 					required:true
 83 | 				}
 84 | 			}
 85 | 		})
 86 | 
 87 | 		var app = new Vue({
 88 | 			el:'#app',
 89 | 			data:{
 90 | 				data:{}
 91 | 			},
 92 | 			methods:{
 93 | 				// 切换不同类型组件的数据
 94 | 				change:function(type){
 95 | 					if( type === 'img' ){
 96 | 						this.data = {
 97 | 							type:'img',
 98 | 							url:'https://raw.githubusercontent.com/iview/iview/master/assets/logo.png'
 99 | 						}
100 | 					}else if( type === 'video' ){
101 | 						this.data = {
102 | 							type:'video',
103 | 							url:'http://vjs.zencdn.net/v/oceans.mp4'
104 | 						}
105 | 					}else if( type === 'text' ){
106 | 						this.data = {
107 | 							type:'text',
108 | 							content:'这是一段纯文本'
109 | 						}
110 | 					}
111 | 				} 
112 | 			},
113 | 			created:function(){
114 | 				this.change('img')
115 | 			}
116 | 		})
117 | 	</script>
118 | </body>
119 | </html>


--------------------------------------------------------------------------------
/vue14/shopping/src/index.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue';
  2 | import VueRouter from 'vue-router';
  3 | import Routers from './router';
  4 | import Vuex from 'vuex';
  5 | import App from './app.vue';
  6 | import './style.css';
  7 | 
  8 | import product_data from './product';
  9 | 
 10 | Vue.use(VueRouter);
 11 | Vue.use(Vuex);
 12 | 
 13 | // 路由配置
 14 | const RouterConfig = {
 15 |     // 使用 HTML5 的 History 路由模式
 16 |     mode: 'history',
 17 |     routes: Routers
 18 | };
 19 | const router = new VueRouter(RouterConfig);
 20 | 
 21 | router.beforeEach((to, from, next) => {
 22 |     window.document.title = to.meta.title;
 23 |     next();
 24 | });
 25 | 
 26 | router.afterEach((to, from, next) => {
 27 |     window.scrollTo(0, 0);
 28 | });
 29 | 
 30 | // 数组排重
 31 | function getFilterArray (array) {
 32 |     const res = [];
 33 |     const json = {};
 34 |     for (let i = 0; i < array.length; i++){
 35 |         const _self = array[i];
 36 |         if(!json[_self]){
 37 |             res.push(_self);
 38 |             json[_self] = 1;
 39 |         }
 40 |     }
 41 |     return res;
 42 | }
 43 | 
 44 | const store = new Vuex.Store({
 45 |     state: {
 46 |         productList: [],
 47 |         cartList: []
 48 |     },
 49 |     getters: {
 50 |         brands: state => {
 51 |             const brands = state.productList.map(item => item.brand);
 52 |             return getFilterArray(brands);
 53 |         },
 54 |         colors: state => {
 55 |             const colors = state.productList.map(item => item.color);
 56 |             return getFilterArray(colors);
 57 |         }
 58 |     },
 59 |     mutations: {
 60 |         // 添加商品列表
 61 |         setProductList (state, data) {
 62 |             state.productList = data;
 63 |         },
 64 |         // 添加到购物车
 65 |         addCart (state, id) {
 66 |             // 先判断购物车是否已有，如果有，数量+1
 67 |             const isAdded = state.cartList.find(item => item.id === id);
 68 |             if (isAdded) {
 69 |                 isAdded.count ++;
 70 |             } else {
 71 |                 state.cartList.push({
 72 |                     id: id,
 73 |                     count: 1
 74 |                 })
 75 |             }
 76 |         },
 77 |         // 修改商品数量
 78 |         editCartCount (state, payload) {
 79 |             const product = state.cartList.find(item => item.id === payload.id);
 80 |             product.count += payload.count;
 81 |         },
 82 |         // 删除商品 findIndex返回数组中满足提供的测试函数的第一个元素的索引
 83 |         deleteCart (state, id) {
 84 |             const index = state.cartList.findIndex(item => item.id === id);
 85 |             state.cartList.splice(index, 1);
 86 |         },
 87 |         // 清空购物车
 88 |         emptyCart (state) {
 89 |             state.cartList = [];
 90 |         }
 91 |     },
 92 |     actions: {
 93 |         // 请求商品列表
 94 |         getProductList (context) {
 95 |             // 真实环境通过 ajax 获取，这里用异步模拟
 96 |             setTimeout(() => {
 97 |                 context.commit('setProductList', product_data);
 98 |             }, 500);
 99 |         },
100 |         // 购买
101 |         buy (context) {
102 |             // 真实环境应通过 ajax 提交购买请求后再清空购物列表
103 |             return new Promise(resolve=> {
104 |                 setTimeout(() => {
105 |                     context.commit('emptyCart');
106 |                     resolve();
107 |                 }, 500)
108 |             });
109 |         }
110 |     }
111 | });
112 | 
113 | new Vue({
114 |     el: '#app',
115 |     router: router,
116 |     store: store,
117 |     render: h => {
118 |         return h(App)
119 |     }
120 | });


--------------------------------------------------------------------------------
/vue13/README13.md:
--------------------------------------------------------------------------------
  1 | # 实战：知乎日报项目开发   
  2 | 
  3 | 日报项目以单页面呈现，基本覆盖了vue和webpack的核心功能，包括：   
  4 | + vue的单文件组件用法   
  5 | + vue的基本指令，自定义指令   
  6 | + 数据的获取，整理，可视化   
  7 | + prop，事件，子组件索引   
  8 | + es6模块   
  9 | 
 10 | *注意：写vue的时候a标签里不要再有href了，不然会出现意想不到的问题。*   
 11 | 
 12 | 跨域问题：   
 13 | 使用基于nodejs的request库来做代理      
 14 |             
 15 | `npm install request --save-dev`            
 16 |           
 17 | request 是一个用来简化 HTTP 请求操作的模块   
 18 | daily目录下新建proxy.js内容：       
 19 | 
 20 | ```
 21 | const http = require('http');
 22 | const request = require('request');
 23 | 
 24 | const hostname = '192.168.10.122';
 25 | const port = 8010;
 26 | const imgPort = 8011;
 27 | 
 28 | // 创建一个API 代理服务器
 29 | const apiServer = http.createServer((req, res) => {
 30 |     const url = 'http://news-at.zhihu.com/api/4' + req.url;
 31 |     const options = {
 32 |         url: url
 33 |     };
 34 | 
 35 |     function callback (error, response, body) {
 36 |         if (!error && response.statusCode === 200) {
 37 |             // 设置编码类型，否则中文会显示为乱码
 38 |             res.setHeader('Content-Type', 'text/plain;charset=UTF-8');
 39 |             // 设置所有域允许跨域
 40 |             res.setHeader('Access-Control-Allow-Origin', '*');
 41 |             // 返回代理后的内容
 42 |             res.end(body);
 43 |         }
 44 |     }
 45 |   request.get(options, callback);
 46 | });
 47 | 
 48 | // 监听8010端口
 49 | apiServer.listen(port, hostname, () => {
 50 |     console.log(`接口代理运行在 http://${hostname}:${port}/`);
 51 | });
 52 | 
 53 | // 创建一个图片代理服务
 54 | const imgServer = http.createServer((req, res) => {
 55 |     const url = req.url.split('/img/')[1];
 56 |     const options = {
 57 |         url: url,
 58 |         encoding: null
 59 |     };
 60 | 
 61 |     function callback (error, response, body) {
 62 |         if (!error && response.statusCode === 200) {
 63 |             const contentType = response.headers['content-type'];
 64 |             res.setHeader('Content-Type', contentType);
 65 |             res.setHeader('Access-Control-Allow-Origin', '*');
 66 |             res.end(body);
 67 |         }
 68 |     }
 69 |     request.get(options, callback);
 70 | });
 71 | 
 72 | // 监听8011端口
 73 | imgServer.listen(imgPort,hostname,()=>{
 74 |   console.log(`图片代理运行在http://${hostname}:${imgPort}/`);
 75 | })
 76 | ```       
 77 | 
 78 | Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。        
 79 | 
 80 | `npm install axios --save`       
 81 | 
 82 | daily\src\libs下新建util.js内容：       
 83 | 
 84 | ```
 85 | import axios from 'axios';
 86 | // 基本配置
 87 | const Util = {
 88 |   imgPath:'http://192.168.10.122:8011/img/';
 89 |   apiPath:'http://192.168.10.122:8010/'
 90 | }
 91 | 
 92 | // ajax通用配置
 93 | Util.ajax = axios.create({ //自定义配置新建一个 axios 实例
 94 |   baseURL:Util.apiPath
 95 | })
 96 | 
 97 | // 添加响应拦截器 在响应被 then 或 catch 处理前拦截它们。
 98 | Util.ajax.interceptors.response.use(res=>{
 99 |   return res.data;
100 | });
101 | 
102 | export default Util;   
103 | ```  
104 | 比如在daily\src\app.vue中使用：   
105 | ```
106 | import $ from './libs/util';
107 | 
108 | methods:{
109 | getThemes(){
110 |     //axios发起get请求
111 |     $.ajax.get('themes').then(res =>{
112 |         this.themes = res.others;
113 |     })
114 | }
115 | }
116 | ```
117 | 
118 | 使用concurrent 模块实现同时监听执行两条命令        
119 | 
120 | `npm install concurrently --save-dev`      
121 | 
122 | 然后在package.json里面的 "script" 里面的 "start"写入同时执行语句        
123 | 
124 | ```
125 | "scripts": {
126 |     "dev": "webpack-dev-server --mode development --open --config webpack.config.js",
127 |     "build": "webpack --progress --mode production --hide-modules --config webpack.prod.config.js",
128 |     "start": "concurrently \"npm run dev\" \"node proxy.js\""
129 |   },
130 |   ```   
131 | 
132 | 
133 | 


--------------------------------------------------------------------------------
/vue13/daily/src/app.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="daily">
  3 | 		<div class="daily-menu">
  4 | 			<div class="daily-menu-item" 
  5 | 				 @click="handleToRecommend"
  6 | 				 :class="{ on: type === 'recommend' }">每日推荐</div> 
  7 | 			<div class="daily-menu-item" 
  8 | 				 :class="{ on: type === 'daily' }" 
  9 | 				 @click="showThemes = !showThemes">主题日报</div>
 10 | 			<ul v-show="showThemes">
 11 | 				<li v-for="item in themes">
 12 | 					<a
 13 | 					 	:class="{ on: item.id === themeId && type === 'daily' }"
 14 | 					 	@click="handleToTheme(item.id)">{{ item.name }}</a>
 15 | 				</li>
 16 | 			</ul>
 17 | 		</div>
 18 | 		<div class="daily-list" ref="list" @scroll="handleScroll">
 19 | 			<template v-if="type === 'recommend'">
 20 | 				<div v-for="list in recommendList">
 21 | 					<div class="daily-date">{{ formatDay(list.date) }}</div>
 22 | 					<Item 
 23 | 						v-for="item in list.stories" 
 24 | 						:data="item" 
 25 | 						:key="item.id" 
 26 | 						@click.native="handleClick(item.id)"></Item>
 27 | 				</div>
 28 | 			</template>
 29 | 			<template v-if="type === 'daily'">
 30 | 				<Item 
 31 | 					v-for="item in list" 
 32 | 					:data="item" 
 33 | 					:key="item.id" 
 34 | 					@click.native="handleClick(item.id)"></Item>
 35 | 			</template>
 36 | 		</div>
 37 | 		<daily-article :id="articleId"></daily-article>
 38 | 	</div>
 39 | </template>
 40 | 
 41 | <script>
 42 | 	import Item from './components/item.vue';
 43 | 	import dailyArticle from './components/daily-article.vue';
 44 | 	import $ from './libs/util';
 45 | 	export default {
 46 | 		components:{ Item,dailyArticle },
 47 | 		data(){
 48 | 			return {
 49 | 				themes:[],
 50 | 				showThemes:false,
 51 | 				type:'recommend',
 52 | 				recommendList:[], //推荐文章列表数据
 53 | 				dailyTime: $.getTodayTime(),
 54 | 				list:[],//主题文章列表数据
 55 | 				themeId:0,
 56 | 				articleId:0,
 57 | 				isLoading:false
 58 | 			}
 59 | 		},
 60 | 		methods:{
 61 | 			getThemes(){
 62 | 				//axios发起get请求
 63 | 				$.ajax.get('themes').then(res =>{
 64 | 					this.themes = res.others;
 65 | 				})
 66 | 			},
 67 | 			handleToTheme(id){
 68 | 				// 改变菜单分类
 69 | 				this.type = 'daily';
 70 | 				// 设置当前点击子类的主题日报id
 71 | 				this.themeId = id;
 72 | 				// 清空中间栏的数据
 73 | 				this.list = [];
 74 | 				$.ajax.get('theme/' + id).then(res =>{// 过滤掉类型为1的文章，该类型下的文章为空
 75 | 					this.list = res.stories
 76 | 					.filter(item => item.type !== 1);
 77 | 				})
 78 | 			},
 79 | 			handleToRecommend(){
 80 | 				this.type = 'recommend';
 81 | 				this.recommendList = [];
 82 | 				this.dailyTime = $.getTodayTime();
 83 | 				this.getRecommendList();
 84 | 			},
 85 | 			getRecommendList(){
 86 | 				// 加载时设置为true，加载完成后设置为false
 87 | 				this.isLoading = true;
 88 | 				const prevDay = $.prevDay(this.dailyTime + 86400000);
 89 | 				$.ajax.get('news/before/' + prevDay).then(res =>{
 90 | 					this.recommendList.push(res);
 91 | 					this.isLoading = false;
 92 | 				})
 93 | 			},
 94 | 			formatDay(date){
 95 | 				let month = date.substr(4,2);
 96 | 				let day = date.substr(6,2);
 97 | 				if(month.substr(0,1) === '0') month = month.substr(1,1);
 98 | 				if(day.substr(0,1) === '0') day = day.substr(1,1);
 99 | 				// return '${month} 月 ${day} 日';
100 | 				return `${month} 月 ${day} 日`;
101 | 			},
102 | 			handleScroll(){//自动加载更多
103 | 				const $list = this.$refs.list;
104 | 				if(this.type === 'daily' || this.isLoading) {return};
105 | 				// 已经滚动的距离+页面的高度=整个内容区域高度时，视为接触底部
106 | 				if($list.scrollTop + document.body.clientHeight >= $list.scrollHeight){
107 | 					this.dailyTime -= 86400000;
108 | 					this.getRecommendList();
109 | 				}
110 | 			},
111 | 			handleClick(id){
112 | 				this.articleId = id;
113 | 			}
114 | 		},
115 | 		mounted(){
116 | 			this.getThemes();
117 | 			this.getRecommendList();
118 | 		}
119 | 	}
120 | </script>
121 | 


--------------------------------------------------------------------------------
/vue09/sort_form/table.js:
--------------------------------------------------------------------------------
  1 | Vue.component('vTable',{
  2 | 	props:{
  3 | 		columns:{ //描述每列的信息，并渲染在表头<thead>内
  4 | 			type:Array,
  5 | 			default:function(){
  6 | 				return []
  7 | 			}
  8 | 		},
  9 | 		data:{ //每一行的数据，由columns决定每一行里的各列排序。
 10 | 			type:Array,
 11 | 			default:function(){
 12 | 				return []
 13 | 			}
 14 | 		}
 15 | 	},
 16 | 	// 为了排序后不影响原始数组，data里添加两个对应数据，组件操作在对应数据。不对原始数据做处理
 17 | 	data:function(){
 18 | 		return {
 19 | 			currentColumns:[],
 20 | 			currentData:[]
 21 | 		}
 22 | 	},
 23 | 		// 用render构造虚拟DOM
 24 | 		// 表格最外层<table>元素，里面包含<thead>表头和<tbody>表格主体。
 25 | 		// thead是一行多列(一个tr多个th)。 tbody是多行多列(多个tr多个td)
 26 | 	render:function(h){ //h就是createElement,只是换了个名称
 27 | 		var _this = this;
 28 | 		var ths = [];
 29 | 		this.currentColumns.forEach(function(col,index){
 30 | 			if( col.sortable ){
 31 | 				ths.push(h('th',[
 32 | 						h('span',col.title),
 33 | 						// 升序
 34 | 						h('a',{
 35 | 							class:{
 36 | 								on:col._sortType === 'asc'
 37 | 							},
 38 | 							on:{
 39 | 								click:function(){
 40 | 									_this.handleSortByAsc(index)
 41 | 								}
 42 | 							}
 43 | 						},'↑'),
 44 | 						// 降序
 45 | 						h('a',{
 46 | 							class:{
 47 | 								on:col._sortType === 'desc'
 48 | 							},
 49 | 							on:{
 50 | 								click:function(){
 51 | 									_this.handleSortByDesc(index)
 52 | 								}
 53 | 							}
 54 | 						},'↓')
 55 | 					]))
 56 | 			}else{
 57 | 				ths.push(h('th',col.title))
 58 | 			}
 59 | 		});
 60 | 
 61 | 		var trs = [];
 62 | 		// 先遍历所有行，然后在每一行内再遍历各列
 63 | 		this.currentData.forEach(function(row){
 64 | 			var tds = [];
 65 | 			_this.currentColumns.forEach(function(cell){
 66 | 				tds.push(h('td',row[cell.key]));
 67 | 			});
 68 | 			trs.push(h('tr',tds));
 69 | 		});
 70 | 
 71 | 		return h('table',[
 72 | 				h('thead',[
 73 | 						h('tr',ths)
 74 | 					]),
 75 | 				h('tbody',trs)
 76 | 			])
 77 | 	},
 78 | 	methods:{
 79 | 		// 把columns赋值给currentColumns
 80 | 		makeColumns:function(){
 81 | 			this.currentColumns = this.columns.map(function( col,index ){
 82 | 				// 添加一个字段标识当前列排序的状态,赋值normal表示默认排序，就是不排序。
 83 | 				col._sortType = 'normal';
 84 | 				// 添加一个字段标识当前列在数组中的索引
 85 | 				col._index = index;
 86 | 				return col;
 87 | 			})
 88 | 		},
 89 | 		// 把data赋值给currentData
 90 | 		makeData:function(){
 91 | 			this.currentData = this.data.map(function( row,index ){
 92 | 				// 添加一个字段标识当前行在数组中的索引
 93 | 				row._index = index;
 94 | 				return row;
 95 | 			})
 96 | 		},
 97 | 		// 升序操作 由小到大
 98 | 		handleSortByAsc:function(index){
 99 | 			var key = this.currentColumns[index].key;
100 | 			//排序前先将所有列的排序状态重置为normal
101 | 			this.currentColumns.forEach(function(col){
102 | 				col._sortType = 'normal'; 
103 | 			});
104 | 			// 设置当前列的排序状态为asc，对应到<a>元素的class名称on
105 | 			this.currentColumns[index]._sortType = 'asc';
106 | 			this.currentData.sort(function(a,b){
107 | 				return a[key] > b[key] ? 1 : -1;
108 | 				// return a[key] - b[key]
109 | 			});
110 | 		},
111 | 		// 降序操作 由大到小
112 | 		handleSortByDesc:function(index){
113 | 			var key = this.currentColumns[index].key;
114 | 			this.currentColumns.forEach(function(col){
115 | 				col._sortType = 'normal';
116 | 			});
117 | 			this.currentColumns[index]._sortType = 'desc';
118 | 			this.currentData.sort(function(a,b){
119 | 				return a[key] < b[key] ? 1 : -1;
120 | 				// return b[key] - a[key]
121 | 			});
122 | 		}
123 | 	},
124 | 	//渲染完表格后，父级修改了data数据，比如增加，v-table的currentData也应该更新
125 | 	//如果某列已存在排序，应该直接处理一次排序。
126 | 	watch:{
127 | 		data:function(){
128 | 			this.makeData();
129 | 			var sortedColumn = this.currentColumns.filter(function(col){
130 | 				return col._sortType !== 'normal'; //返回排序的数组
131 | 			});
132 | 			if( sortedColumn.length ){ //如果有进行过排序
133 | 				if( sortedColumn[0]._sortType === 'asc' ){
134 | 					this.handleSortByAsc(sortedColumn[0]._index);
135 | 				}else{
136 | 					this.handleSortByDesc(sortedColumn[0]._index);
137 | 				}
138 | 			}
139 | 		}
140 | 	},
141 | 	mounted(){
142 | 		//v-table初始化时调用
143 | 		this.makeColumns();
144 | 		this.makeData();
145 | 	}
146 | })


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