├── .gitignore
├── README.MD
├── element-ui-study
    └── element1.html
├── vue-cli-pro
    └── Pro
    │   ├── .babelrc
    │   ├── .editorconfig
    │   ├── .eslintignore
    │   ├── .eslintrc.js
    │   ├── .gitignore
    │   ├── .postcssrc.js
    │   ├── README.md
    │   ├── config
    │       ├── dev.env.js
    │       ├── index.js
    │       ├── prod.env.js
    │       └── test.env.js
    │   ├── index.html
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── src
    │       ├── App.vue
    │       ├── assets
    │       │   └── logo.png
    │       ├── components
    │       │   └── HelloWorld.vue
    │       ├── main.js
    │       └── router
    │       │   └── index.js
    │   ├── static
    │       └── .gitkeep
    │   └── test
    │       ├── e2e
    │           ├── custom-assertions
    │           │   └── elementCount.js
    │           ├── nightwatch.conf.js
    │           ├── runner.js
    │           └── specs
    │           │   └── test.js
    │       └── unit
    │           ├── .eslintrc
    │           ├── jest.conf.js
    │           ├── setup.js
    │           └── specs
    │               └── HelloWorld.spec.js
├── vue-components
    ├── component1.html
    ├── component10.html
    ├── component11.html
    ├── component12.html
    ├── component13.html
    ├── component14.html
    ├── component15.html
    ├── component16.html
    ├── component2.html
    ├── component3.html
    ├── component4.html
    ├── component5.html
    ├── component6.html
    ├── component7.html
    ├── component8.html
    ├── component9.html
    └── test.html
├── vue-demo
    ├── demo1.html
    ├── demo2.html
    ├── demo3.html
    ├── demo4.html
    ├── demo5.html
    ├── demo6.html
    ├── demo7.html
    ├── demo7_2.html
    └── demo8.html
├── vue-router
    ├── router1.html
    └── router2.html
└── vuex-demo
    ├── vuex1.html
    └── vuex2.html


/.gitignore:
--------------------------------------------------------------------------------
 1 | # OSX
 2 | #
 3 | .DS_Store
 4 | 
 5 | # Xcode
 6 | #
 7 | build/
 8 | *.pbxuser
 9 | !default.pbxuser
10 | *.mode1v3
11 | !default.mode1v3
12 | *.mode2v3
13 | !default.mode2v3
14 | *.perspectivev3
15 | !default.perspectivev3
16 | xcuserdata
17 | *.xccheckout
18 | *.moved-aside
19 | DerivedData
20 | *.hmap
21 | *.ipa
22 | *.xcuserstate
23 | project.xcworkspace
24 | 
25 | # Android/IntelliJ
26 | #
27 | build/
28 | .idea
29 | .gradle
30 | local.properties
31 | *.iml
32 | 
33 | # node.js
34 | #
35 | node_modules/
36 | npm-debug.log
37 | yarn-error.log
38 | 
39 | # BUCK
40 | buck-out/
41 | \.buckd/
42 | *.keystore
43 | 
44 | # fastlane
45 | #
46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
47 | # screenshots whenever they are needed.
48 | # For more information about the recommended setup visit:
49 | # https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md
50 | 
51 | fastlane/report.xml
52 | fastlane/Preview.html
53 | fastlane/screenshots
54 | 


--------------------------------------------------------------------------------
/README.MD:
--------------------------------------------------------------------------------
 1 | ## Vue学习示例
 2 | 
 3 | ### vue-demo部分
 4 | 
 5 | 使用8个demo练习Vue的基础
 6 |     
 7 | 这8个基础的demo分别有 hello world、v-bind 属性绑定、 v-if 的条件渲染、v-for 的列表渲染、 组件component、 动画transition等的简单使用
 8 |     
 9 |     
10 | ### vue-components部分
11 | 专门使用示例来描述 Vue 的组件component的具体使用
12 | 
13 | ###### component1是一个组件的全局注册的示例。
14 | 
15 | ###### component2是一个组件的局部注册的示例。
16 |     
17 | ###### component3是一个组件的data表示的正确方式
18 | 
19 | ###### component4是一个使用props传递数据的组件示例。
20 | 
21 | ###### component5是一个驼峰式命名以及短横线分割式命名在props中的使用示例。
22 | 
23 | ###### component6是一个动态props绑定属性的demo。
24 | 
25 | ###### component7是一个动态props传递一个对象属性的方法。（能够把对象中的每一项当做属性传递下去）
26 | 
27 | ###### component8是一个props验证的示例
28 |     
29 | ###### component9是一个非props特性的示例，父组件的class覆盖、合并子组件的class
30 | 
31 | ###### component10是一个自定义事件的示例，子组件向父组件传值。
32 | 
33 | ###### component11是一个父元素和子元素（通过.sync）双向绑定的示例。
34 | 
35 | ###### component12是一个v-model的本质演示。（v-model的本质是v-bind和v-on的语法糖）。
36 | 
37 | ###### component13
38 | 
39 | ###### component14是一个组件通信的示例，两个非父子组件相互之间通信。
40 | 
41 | ###### component15是一个组件使用插槽分发内容的示例
42 |     
43 |     
44 | ### vue-router部分
45 | 
46 | 专门使用一个个的 vue-router 的实例来讲解路由
47 | 
48 | ###### router1，一个最简单的路由示例
49 | 
50 | ###### router2，
51 | 
52 | 
53 | ### vuex部分
54 | 
55 | 这个是专门学习vuex数据管理的demo
56 | 
57 | ###### vuex1，一个最简单的vuex示例
58 | 
59 | ### ElementUi部分
60 | 
61 | ###### element1，一个简单的element-ui的使用示例
62 | 
63 | ### vue-cli-pro
64 | 这是一个专门使用vue的脚手架搭建的项目
65 | 
66 | 
67 | 
68 | 


--------------------------------------------------------------------------------
/element-ui-study/element1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>element-ui</title>
 6 |     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |     <el-button @click="visible = true">按钮</el-button>
11 |     <el-dialog :visible.sync="visible" title="Hello world">
12 |         <p>欢迎使用 Element</p>
13 |     </el-dialog>
14 | </div>
15 | </body>
16 | <!-- 先引入 Vue -->
17 | <script src="https://unpkg.com/vue/dist/vue.js"></script>
18 | <!-- 引入组件库 -->
19 | <script src="https://unpkg.com/element-ui/lib/index.js"></script>
20 | <script>
21 |     new Vue({
22 |         el: '#app',
23 |         data: function() {
24 |             return { visible: false }
25 |         }
26 |     })
27 | </script>
28 | </html>


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-vue-jsx", "transform-runtime"],
12 |   "env": {
13 |     "test": {
14 |       "presets": ["env", "stage-2"],
15 |       "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
16 |     }
17 |   }
18 | }
19 | 


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


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/.eslintignore:
--------------------------------------------------------------------------------
1 | /build/
2 | /config/
3 | /dist/
4 | /*.js
5 | /test/unit/coverage/
6 | 


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | // https://eslint.org/docs/user-guide/configuring
 2 | 
 3 | module.exports = {
 4 |   root: true,
 5 |   parser: 'babel-eslint',
 6 |   parserOptions: {
 7 |     sourceType: 'module'
 8 |   },
 9 |   env: {
10 |     browser: true,
11 |   },
12 |   // https://github.com/standard/standard/blob/master/docs/RULES-en.md
13 |   extends: 'standard',
14 |   // required to lint *.vue files
15 |   plugins: [
16 |     'html'
17 |   ],
18 |   // add your custom rules here
19 |   rules: {
20 |     // allow async-await
21 |     'generator-star-spacing': 'off',
22 |     // allow debugger during development
23 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | /test/unit/coverage/
 8 | /test/e2e/reports/
 9 | selenium-debug.log
10 | 
11 | # Editor directories and files
12 | .idea
13 | .vscode
14 | *.suo
15 | *.ntvs*
16 | *.njsproj
17 | *.sln
18 | 


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/.postcssrc.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/michael-ciniawsky/postcss-load-config
 2 | 
 3 | module.exports = {
 4 |   "plugins": {
 5 |     "postcss-import": {},
 6 |     "postcss-url": {},
 7 |     // to edit target browsers: use "browserslist" field in package.json
 8 |     "autoprefixer": {}
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/README.md:
--------------------------------------------------------------------------------
 1 | # pro
 2 | 
 3 | > A Vue.js project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm install
10 | 
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 | 
14 | # build for production with minification
15 | npm run build
16 | 
17 | # build for production and view the bundle analyzer report
18 | npm run build --report
19 | 
20 | # run unit tests
21 | npm run unit
22 | 
23 | # run e2e tests
24 | npm run e2e
25 | 
26 | # run all tests
27 | npm test
28 | 
29 | vue-router文档
30 | https://router.vuejs.org/zh-cn/
31 | 
32 | ElementUi
33 | http://element-cn.eleme.io/#/zh-CN
34 | 
35 | axio中文使用文档
36 | https://www.kancloud.cn/yunye/axios/234845
37 | 
38 | moment中文文档
39 | http://momentjs.cn/docs/
40 | ```
41 | 
42 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
43 | 


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 | 
5 | module.exports = merge(prodEnv, {
6 |   NODE_ENV: '"development"'
7 | })
8 | 


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.2.8
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | 
 7 | module.exports = {
 8 |   dev: {
 9 | 
10 |     // Paths
11 |     assetsSubDirectory: 'static',
12 |     assetsPublicPath: '/',
13 |     proxyTable: {},
14 | 
15 |     // Various Dev Server settings
16 |     host: 'localhost', // can be overwritten by process.env.HOST
17 |     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 |     autoOpenBrowser: false,
19 |     errorOverlay: true,
20 |     notifyOnErrors: true,
21 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 | 
23 |     // Use Eslint Loader?
24 |     // If true, your code will be linted during bundling and
25 |     // linting errors and warnings will be shown in the console.
26 |     useEslint: false,
27 |     // If true, eslint errors and warnings will also be shown in the error overlay
28 |     // in the browser.
29 |     showEslintErrorsInOverlay: false,
30 | 
31 |     /**
32 |      * Source Maps
33 |      */
34 | 
35 |     // https://webpack.js.org/configuration/devtool/#development
36 |     devtool: 'cheap-module-eval-source-map',
37 | 
38 |     // If you have problems debugging vue-files in devtools,
39 |     // set this to false - it *may* help
40 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
41 |     cacheBusting: true,
42 | 
43 |     cssSourceMap: true,
44 |   },
45 | 
46 |   build: {
47 |     // Template for index.html
48 |     index: path.resolve(__dirname, '../dist/index.html'),
49 | 
50 |     // Paths
51 |     assetsRoot: path.resolve(__dirname, '../dist'),
52 |     assetsSubDirectory: 'static',
53 |     assetsPublicPath: '/',
54 | 
55 |     /**
56 |      * Source Maps
57 |      */
58 | 
59 |     productionSourceMap: true,
60 |     // https://webpack.js.org/configuration/devtool/#production
61 |     devtool: '#source-map',
62 | 
63 |     // Gzip off by default as many popular static hosts such as
64 |     // Surge or Netlify already gzip all static assets for you.
65 |     // Before setting to `true`, make sure to:
66 |     // npm install --save-dev compression-webpack-plugin
67 |     productionGzip: false,
68 |     productionGzipExtensions: ['js', 'css'],
69 | 
70 |     // Run the build command with an extra argument to
71 |     // View the bundle analyzer report after build finishes:
72 |     // `npm run build --report`
73 |     // Set to `true` or `false` to always turn it on or off
74 |     bundleAnalyzerReport: process.env.npm_config_report
75 |   }
76 | }
77 | 


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 |   NODE_ENV: '"production"'
4 | }
5 | 


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/config/test.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const devEnv = require('./dev.env')
4 | 
5 | module.exports = merge(devEnv, {
6 |   NODE_ENV: '"testing"'
7 | })
8 | 


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <title>pro</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <!-- built files will be auto injected -->
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "pro",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "liwd <liwd@mapbar.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9 |     "start": "npm run dev",
10 |     "unit": "jest --config test/unit/jest.conf.js --coverage",
11 |     "e2e": "node test/e2e/runner.js",
12 |     "test": "npm run unit && npm run e2e",
13 |     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
14 |     "build": "node build/build.js"
15 |   },
16 |   "dependencies": {
17 |     "vue": "^2.5.2",
18 |     "vue-router": "^3.0.1"
19 |   },
20 |   "devDependencies": {
21 |     "autoprefixer": "^7.1.2",
22 |     "babel-core": "^6.22.1",
23 |     "babel-eslint": "^7.1.1",
24 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
25 |     "babel-jest": "^21.0.2",
26 |     "babel-loader": "^7.1.1",
27 |     "babel-plugin-dynamic-import-node": "^1.2.0",
28 |     "babel-plugin-syntax-jsx": "^6.18.0",
29 |     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
30 |     "babel-plugin-transform-runtime": "^6.22.0",
31 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
32 |     "babel-preset-env": "^1.3.2",
33 |     "babel-preset-stage-2": "^6.22.0",
34 |     "babel-register": "^6.22.0",
35 |     "chalk": "^2.0.1",
36 |     "chromedriver": "^2.27.2",
37 |     "copy-webpack-plugin": "^4.0.1",
38 |     "cross-spawn": "^5.0.1",
39 |     "css-loader": "^0.28.0",
40 |     "eslint": "^3.19.0",
41 |     "eslint-config-standard": "^10.2.1",
42 |     "eslint-friendly-formatter": "^3.0.0",
43 |     "eslint-loader": "^1.7.1",
44 |     "eslint-plugin-html": "^3.0.0",
45 |     "eslint-plugin-import": "^2.7.0",
46 |     "eslint-plugin-node": "^5.2.0",
47 |     "eslint-plugin-promise": "^3.4.0",
48 |     "eslint-plugin-standard": "^3.0.1",
49 |     "extract-text-webpack-plugin": "^3.0.0",
50 |     "file-loader": "^1.1.4",
51 |     "friendly-errors-webpack-plugin": "^1.6.1",
52 |     "html-webpack-plugin": "^2.30.1",
53 |     "jest": "^21.2.0",
54 |     "jest-serializer-vue": "^0.3.0",
55 |     "nightwatch": "^0.9.12",
56 |     "node-notifier": "^5.1.2",
57 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
58 |     "ora": "^1.2.0",
59 |     "portfinder": "^1.0.13",
60 |     "postcss-import": "^11.0.0",
61 |     "postcss-loader": "^2.0.8",
62 |     "postcss-url": "^7.2.1",
63 |     "rimraf": "^2.6.0",
64 |     "selenium-server": "^3.0.1",
65 |     "semver": "^5.3.0",
66 |     "shelljs": "^0.7.6",
67 |     "uglifyjs-webpack-plugin": "^1.1.1",
68 |     "url-loader": "^0.5.8",
69 |     "vue-jest": "^1.0.2",
70 |     "vue-loader": "^13.3.0",
71 |     "vue-style-loader": "^3.0.1",
72 |     "vue-template-compiler": "^2.5.2",
73 |     "webpack": "^3.6.0",
74 |     "webpack-bundle-analyzer": "^2.9.0",
75 |     "webpack-dev-server": "^2.9.1",
76 |     "webpack-merge": "^4.1.0"
77 |   },
78 |   "engines": {
79 |     "node": ">= 6.0.0",
80 |     "npm": ">= 3.0.0"
81 |   },
82 |   "browserslist": [
83 |     "> 1%",
84 |     "last 2 versions",
85 |     "not ie <= 8"
86 |   ]
87 | }
88 | 


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <img src="./assets/logo.png">
 4 |     <router-view/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'app'
11 | }
12 | </script>
13 | 
14 | <style>
15 | #app {
16 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
17 |   -webkit-font-smoothing: antialiased;
18 |   -moz-osx-font-smoothing: grayscale;
19 |   text-align: center;
20 |   color: #2c3e50;
21 |   margin-top: 60px;
22 | }
23 | </style>
24 | 


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liwudi/Vue/8295d3d9720e2efacb452b5970a486ea4380625f/vue-cli-pro/Pro/src/assets/logo.png


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <h2>Essential Links</h2>
 5 |     <ul>
 6 |       <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
 7 |       <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
 8 |       <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
 9 |       <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
10 |       <br>
11 |       <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
12 |     </ul>
13 |     <h2>Ecosystem</h2>
14 |     <ul>
15 |       <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
16 |       <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
17 |       <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
18 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
19 |     </ul>
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | export default {
25 |   name: 'HelloWorld',
26 |   data () {
27 |     return {
28 |       msg: 'Welcome to Your Vue.js App'
29 |     }
30 |   }
31 | }
32 | </script>
33 | 
34 | <!-- Add "scoped" attribute to limit CSS to this component only -->
35 | <style scoped>
36 | h1, h2 {
37 |   font-weight: normal;
38 | }
39 | ul {
40 |   list-style-type: none;
41 |   padding: 0;
42 | }
43 | li {
44 |   display: inline-block;
45 |   margin: 0 10px;
46 | }
47 | a {
48 |   color: #42b983;
49 | }
50 | </style>
51 | 


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import App from './App'
 5 | import router from './router'
 6 | 
 7 | Vue.config.productionTip = false
 8 | 
 9 | /* eslint-disable no-new */
10 | new Vue({
11 |   el: '#app',
12 |   router,
13 |   template: '<App/>',
14 |   components: { App }
15 | })
16 | 


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import HelloWorld from '@/components/HelloWorld'
 4 | 
 5 | Vue.use(Router)
 6 | 
 7 | export default new Router({
 8 |   routes: [
 9 |     {
10 |       path: '/',
11 |       name: 'HelloWorld',
12 |       component: HelloWorld
13 |     }
14 |   ]
15 | })
16 | 


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liwudi/Vue/8295d3d9720e2efacb452b5970a486ea4380625f/vue-cli-pro/Pro/static/.gitkeep


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/test/e2e/custom-assertions/elementCount.js:
--------------------------------------------------------------------------------
 1 | // A custom Nightwatch assertion.
 2 | // The assertion name is the filename.
 3 | // Example usage:
 4 | //
 5 | //   browser.assert.elementCount(selector, count)
 6 | //
 7 | // For more information on custom assertions see:
 8 | // http://nightwatchjs.org/guide#writing-custom-assertions
 9 | 
10 | exports.assertion = function (selector, count) {
11 |   this.message = 'Testing if element <' + selector + '> has count: ' + count
12 |   this.expected = count
13 |   this.pass = function (val) {
14 |     return val === this.expected
15 |   }
16 |   this.value = function (res) {
17 |     return res.value
18 |   }
19 |   this.command = function (cb) {
20 |     var self = this
21 |     return this.api.execute(function (selector) {
22 |       return document.querySelectorAll(selector).length
23 |     }, [selector], function (res) {
24 |       cb.call(self, res)
25 |     })
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/test/e2e/nightwatch.conf.js:
--------------------------------------------------------------------------------
 1 | require('babel-register')
 2 | var config = require('../../config')
 3 | 
 4 | // http://nightwatchjs.org/gettingstarted#settings-file
 5 | module.exports = {
 6 |   src_folders: ['test/e2e/specs'],
 7 |   output_folder: 'test/e2e/reports',
 8 |   custom_assertions_path: ['test/e2e/custom-assertions'],
 9 | 
10 |   selenium: {
11 |     start_process: true,
12 |     server_path: require('selenium-server').path,
13 |     host: '127.0.0.1',
14 |     port: 4444,
15 |     cli_args: {
16 |       'webdriver.chrome.driver': require('chromedriver').path
17 |     }
18 |   },
19 | 
20 |   test_settings: {
21 |     default: {
22 |       selenium_port: 4444,
23 |       selenium_host: 'localhost',
24 |       silent: true,
25 |       globals: {
26 |         devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
27 |       }
28 |     },
29 | 
30 |     chrome: {
31 |       desiredCapabilities: {
32 |         browserName: 'chrome',
33 |         javascriptEnabled: true,
34 |         acceptSslCerts: true
35 |       }
36 |     },
37 | 
38 |     firefox: {
39 |       desiredCapabilities: {
40 |         browserName: 'firefox',
41 |         javascriptEnabled: true,
42 |         acceptSslCerts: true
43 |       }
44 |     }
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/test/e2e/runner.js:
--------------------------------------------------------------------------------
 1 | // 1. start the dev server using production config
 2 | process.env.NODE_ENV = 'testing'
 3 | 
 4 | const webpack = require('webpack')
 5 | const DevServer = require('webpack-dev-server')
 6 | 
 7 | const webpackConfig = require('../../build/webpack.prod.conf')
 8 | const devConfigPromise = require('../../build/webpack.dev.conf')
 9 | 
10 | let server
11 | 
12 | devConfigPromise.then(devConfig => {
13 |   const devServerOptions = devConfig.devServer
14 |   const compiler = webpack(webpackConfig)
15 |   server = new DevServer(compiler, devServerOptions)
16 |   const port = devServerOptions.port
17 |   const host = devServerOptions.host
18 |   return server.listen(port, host)
19 | })
20 | .then(() => {
21 |   // 2. run the nightwatch test suite against it
22 |   // to run in additional browsers:
23 |   //    1. add an entry in test/e2e/nightwatch.conf.json under "test_settings"
24 |   //    2. add it to the --env flag below
25 |   // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
26 |   // For more information on Nightwatch's config file, see
27 |   // http://nightwatchjs.org/guide#settings-file
28 |   let opts = process.argv.slice(2)
29 |   if (opts.indexOf('--config') === -1) {
30 |     opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js'])
31 |   }
32 |   if (opts.indexOf('--env') === -1) {
33 |     opts = opts.concat(['--env', 'chrome'])
34 |   }
35 | 
36 |   const spawn = require('cross-spawn')
37 |   const runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })
38 | 
39 |   runner.on('exit', function (code) {
40 |     server.close()
41 |     process.exit(code)
42 |   })
43 | 
44 |   runner.on('error', function (err) {
45 |     server.close()
46 |     throw err
47 |   })
48 | })
49 | 


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/test/e2e/specs/test.js:
--------------------------------------------------------------------------------
 1 | // For authoring Nightwatch tests, see
 2 | // http://nightwatchjs.org/guide#usage
 3 | 
 4 | module.exports = {
 5 |   'default e2e tests': function (browser) {
 6 |     // automatically uses dev Server port from /config.index.js
 7 |     // default: http://localhost:8080
 8 |     // see nightwatch.conf.js
 9 |     const devServer = browser.globals.devServerURL
10 | 
11 |     browser
12 |       .url(devServer)
13 |       .waitForElementVisible('#app', 5000)
14 |       .assert.elementPresent('.hello')
15 |       .assert.containsText('h1', 'Welcome to Your Vue.js App')
16 |       .assert.elementCount('img', 1)
17 |       .end()
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/test/unit/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "env": { 
3 |     "jest": true
4 |   },
5 |   "globals": { 
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/test/unit/jest.conf.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | 
 3 | module.exports = {
 4 |   rootDir: path.resolve(__dirname, '../../'),
 5 |   moduleFileExtensions: [
 6 |     'js',
 7 |     'json',
 8 |     'vue'
 9 |   ],
10 |   moduleNameMapper: {
11 |     '^@/(.*)$': '<rootDir>/src/$1'
12 |   },
13 |   transform: {
14 |     '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
15 |     '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
16 |   },
17 |   testPathIgnorePatterns: [
18 |     '<rootDir>/test/e2e'
19 |   ],
20 |   snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
21 |   setupFiles: ['<rootDir>/test/unit/setup'],
22 |   mapCoverage: true,
23 |   coverageDirectory: '<rootDir>/test/unit/coverage',
24 |   collectCoverageFrom: [
25 |     'src/**/*.{js,vue}',
26 |     '!src/main.js',
27 |     '!src/router/index.js',
28 |     '!**/node_modules/**'
29 |   ]
30 | }
31 | 


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/test/unit/setup.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | 
3 | Vue.config.productionTip = false
4 | 


--------------------------------------------------------------------------------
/vue-cli-pro/Pro/test/unit/specs/HelloWorld.spec.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import HelloWorld from '@/components/HelloWorld'
 3 | 
 4 | describe('HelloWorld.vue', () => {
 5 |   it('should render correct contents', () => {
 6 |     const Constructor = Vue.extend(HelloWorld)
 7 |     const vm = new Constructor().$mount()
 8 |     expect(vm.$el.querySelector('.hello h1').textContent)
 9 |     .toEqual('Welcome to Your Vue.js App')
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------
/vue-components/component1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue-demo</title>
 6 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |     <ol>
11 |         <!--使用组件-->
12 |         <todo-item
13 |                 v-for="item in todoList"
14 |                 v-bind:todo="item"
15 |         ></todo-item>
16 |     </ol>
17 | 
18 | </div>
19 | <script>
20 |     //定义一个最简单的组件
21 |     Vue.component('todo-item',{
22 |         props:['todo'],
23 |         template:'<li>name:{{todo.name}},age:{{todo.age}}</li>'
24 |     });
25 |     new Vue({
26 |         el:'#app',
27 |         data:{
28 |             todoList:[{name:'张三',age:23},{name:'李四',age:24},{name:'王五',age:25}]
29 |         }
30 |     });
31 | </script>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/vue-components/component10.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue-demo</title>
 6 |     <style>
 7 |         .color1{
 8 |             color: red;
 9 |         }
10 |         .color2{
11 |             color: green;
12 |         }
13 |     </style>
14 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
15 | </head>
16 | <body>
17 | <div id="app">
18 |     <button-com v-on:parent="myEvent"></button-com>
19 | </div>
20 | <script>
21 |     var Child = {
22 |         template:'<button v-on:click="childEvent"> {{ num }} </button>',
23 |         data: function () {
24 |             return {
25 |                 num: 0
26 |             }
27 |         },
28 |         methods:{
29 |             childEvent: function () {
30 |                 this.num += 1;
31 |                 this.$emit("parent",this.num);
32 |             }
33 |         }
34 |     };
35 |     var vm = new Vue({
36 |         el:'#app',
37 |         data:{
38 |             total: 0
39 |         },
40 |         components: {
41 |             'button-com': Child
42 |         },
43 |         methods: {
44 |             myEvent: function (data) {
45 |                 console.log(data);
46 |             }
47 |         }
48 |     })
49 | </script>
50 | </body>
51 | </html>


--------------------------------------------------------------------------------
/vue-components/component11.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue-demo</title>
 6 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |     <div>{{bar}}</div>
11 |     <my-comp :foo.sync="bar"></my-comp>
12 | </div>
13 | <script>
14 |     Vue.component('my-comp', {
15 |         template: '<div @click="increment">{{copyFoo}}点我+1</div>',
16 |         data: function() {
17 |             return {copyFoo: this.foo}
18 |         },
19 |         props: ['foo'],
20 |         methods: {
21 |             increment: function() {
22 |                 this.$emit('update:foo', ++this.copyFoo);
23 |             }
24 |         }
25 |     });
26 |     new Vue({
27 |         el: '#app',
28 |         data: {bar: 0}
29 |     });
30 | </script>
31 | </body>
32 | </html>


--------------------------------------------------------------------------------
/vue-components/component12.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue-demo</title>
 6 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |     <input type="text" v-model="something">
11 |     <p>{{something}}</p>
12 | 
13 |     <hr/>
14 | 
15 |     <input
16 |             type="text"
17 |             :value="something2"
18 |             @input="something2=$event.target.value"
19 |     >
20 |     <p>{{something2}}</p>
21 | </div>
22 | <script>
23 |     new Vue({
24 |         el:'#app',
25 |         data: {
26 |             something:'hello world!',
27 |             something2:'hello world2!'
28 |         }
29 |     })
30 | </script>
31 | </body>
32 | </html>


--------------------------------------------------------------------------------
/vue-components/component13.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue-demo</title>
 6 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |     <my-com
11 |             v-bind:value="something"
12 |             v-on:input="inputEvent">
13 |     ></my-com>
14 | </div>
15 | <script>
16 |     Vue.component('my-com',{
17 |         template:'<input  />',
18 |         created: function () {
19 |             console.log('111',this)
20 |         }
21 |     });
22 |     new Vue({
23 |         el:'#app',
24 |         data: {
25 |             something: 'hello world'
26 |         },
27 |         methods: {
28 |             inputEvent: function () {
29 | 
30 |             }
31 |         }
32 |     })
33 | </script>
34 | </body>
35 | </html>


--------------------------------------------------------------------------------
/vue-components/component14.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue-demo</title>
 6 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |     <app-header></app-header>
11 |     <app-footer></app-footer>
12 | </div>
13 | <script>
14 |     var bus = new Vue();
15 |     Vue.component('app-header',{
16 |         template: '<p v-on:click="clickEvent">我是header</p>',
17 |         methods: {
18 |             clickEvent: function () {
19 |                 bus.$emit('id-selected', 1);
20 |             }
21 |         }
22 |     });
23 |     Vue.component('app-footer',{
24 |         template:'<p>我是footer,{{message}}</p>',
25 |         methods: {
26 | 
27 |         },
28 |         data: function () {
29 |             return {
30 |                 message: "hello! 我是组件footer"
31 |             }
32 |         },
33 |         created: function () {
34 |             bus.$on('id-selected', function (id) {
35 |                 console.log(id);
36 |                 this.message = id;
37 |             }.bind(this))
38 |         }
39 |     });
40 | 
41 |     new Vue({
42 |         el: '#app',
43 |         data: {message: 'hello1'}
44 |     });
45 | 
46 | </script>
47 | </body>
48 | </html>


--------------------------------------------------------------------------------
/vue-components/component15.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue-demo</title>
 6 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |     <child-component>
11 |         {{message}}
12 |     </child-component>
13 | 
14 | </div>
15 | <script>
16 |     Vue.component('child-component',{
17 |         template: "<div>" +
18 |         "<h2>我是子组件的标题</h2>" +
19 |         "<slot>" +
20 |         "只有在没有要分发的内容时才会显示。" +
21 |         "</slot>" +
22 |         "</div>"
23 |     });
24 | 
25 |     new Vue({
26 |         el: '#app',
27 |         data: {message: 'hello1'}
28 |     });
29 | 
30 | </script>
31 | </body>
32 | </html>


--------------------------------------------------------------------------------
/vue-components/component16.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue-demo</title>
 6 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |     <child-component>
11 |         {{message}}
12 |     </child-component>
13 | 
14 | </div>
15 | <script>
16 |     Vue.component('child-component',{
17 |         template: "<div>" +
18 |         "<h2>我是子组件的标题</h2>" +
19 |         "<slot>" +
20 |         "只有在没有要分发的内容时才会显示。" +
21 |         "</slot>" +
22 |         "</div>"
23 |     });
24 | 
25 |     new Vue({
26 |         el: '#app',
27 |         data: {message: 'hello1'}
28 |     });
29 | 
30 |     function A(name){
31 |         this.name = name;
32 |     }
33 |     function B(name){
34 |         A.call(B);
35 |     }
36 |     //现在B继承A的name属性：
37 |     var objB = new B("liwudi");
38 |     console.log(objB);//‘liwudi’
39 | </script>
40 | </body>
41 | </html>


--------------------------------------------------------------------------------
/vue-components/component2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue-demo</title>
 6 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 | 
11 |     <todo-item></todo-item>
12 | </div>
13 | <script>
14 |     var Child = {
15 |         template: '<div>A custom component!</div>'
16 |     };
17 |     new Vue({
18 |         el:'#app',
19 |         components:{
20 |             'todo-item': Child
21 |         }
22 |     });
23 | </script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/vue-components/component3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue-demo</title>
 6 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |     <my-com></my-com>
11 |     <my-com></my-com>
12 |     <my-com></my-com>
13 | </div>
14 | <script>
15 |     Vue.component('my-com',{
16 |         template:'<span>{{message}}</span>',
17 |         data: function () {
18 |             return {
19 |                 message: 1
20 |             }
21 |         }
22 |     })
23 |     new Vue({
24 |         el:'#app'
25 |     });
26 | </script>
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/vue-components/component4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue-demo</title>
 6 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |     <ol>
11 |         <!--使用组件-->
12 |         <my-com
13 |                 v-bind:todo="message"
14 |         ></my-com>
15 |     </ol>
16 | 
17 | </div>
18 | <script>
19 |     //定义一个最简单的组件
20 |     Vue.component('my-com',{
21 |         props:['todo'],
22 |         template:'<h3>{{todo}}</h3>'
23 |     });
24 |     new Vue({
25 |         el:'#app',
26 |         data:{
27 |             message:'hello!'
28 |         }
29 |     });
30 | </script>
31 | </body>
32 | </html>


--------------------------------------------------------------------------------
/vue-components/component5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue-demo</title>
 6 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |     <ol>
11 |         <!--使用组件-->
12 |         <todo-item
13 |                 my-todo="hello"
14 |         ></todo-item>
15 |     </ol>
16 | 
17 | </div>
18 | <script>
19 |     //定义一个最简单的组件
20 |     Vue.component('todo-item',{
21 |         props:['myTodo'],
22 |         template:'<h2>{{myTodo}}</h2>'
23 |     });
24 |     new Vue({
25 |         el:'#app'
26 |     });
27 | </script>
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/vue-components/component6.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue-demo</title>
 6 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 | 
11 |     <!--使用组件-->
12 |     <todo-item
13 |             v-bind:my-todo="message"
14 |     ></todo-item>
15 | 
16 | </div>
17 | <script>
18 |     //定义一个最简单的组件
19 |     Vue.component('todo-item',{
20 |         props:['myTodo'],
21 |         template:'<h2>{{myTodo}}</h2>'
22 |     });
23 |     new Vue({
24 |         el:'#app',
25 |         data:{
26 |             message:'hello world'
27 |         }
28 |     });
29 | </script>
30 | </body>
31 | </html>


--------------------------------------------------------------------------------
/vue-components/component7.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue-demo</title>
 6 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 | 
11 |     <todo-com v-bind="todo"></todo-com>
12 | </div>
13 | <script>
14 |     //定义一个最简单的组件
15 |     Vue.component('todo-com',{
16 |         props:['text','isComplete'],
17 |         template:'<h2>I has {{isComplete ? "completed ":"not completed "}}{{text}}</h2>'
18 |     });
19 |     new Vue({
20 |         el:'#app',
21 |         data: {
22 |             todo:{
23 |                 text: 'Learn Vue',
24 |                 isComplete: false
25 |             }
26 |         }
27 |     });
28 | </script>
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/vue-components/component8.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue-demo</title>
 6 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |     <foo-component v-bind:foo-message="fooMessage"></foo-component>
11 | </div>
12 | <script>
13 |     var fooComponent = {
14 |         props: {
15 |             fooMessage: Number
16 |         },
17 |         template: '<div> {{ fooMessage }} </div>'
18 |     };
19 | 
20 |      var vm = new Vue({
21 |          components: {
22 |             'foo-component': fooComponent
23 |          },
24 |          el: '#app',
25 |          data: {
26 |              fooMessage: 'str'
27 |          }
28 |      });
29 | </script>
30 | </body>
31 | </html>


--------------------------------------------------------------------------------
/vue-components/component9.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue-demo</title>
 6 |     <style>
 7 |         .color1{
 8 |             color: red;
 9 |         }
10 |         .color2{
11 |             color: green;
12 |         }
13 |     </style>
14 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
15 | </head>
16 | <body>
17 | <div id="app">
18 |     <foo-component class="color2" v-bind:foo-message="fooMessage"></foo-component>
19 | </div>
20 | <script>
21 |     var fooComponent = {
22 |         props: ['fooMessage'],
23 |         template: '<div class="color1"> {{ fooMessage }} </div>'
24 |     };
25 | 
26 |      var vm = new Vue({
27 |          components: {
28 |             'foo-component': fooComponent
29 |          },
30 |          el: '#app',
31 |          data: {
32 |              fooMessage: 12345
33 |          }
34 |      });
35 | </script>
36 | </body>
37 | </html>


--------------------------------------------------------------------------------
/vue-components/test.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue-demo</title>
 6 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 | 
11 | 
12 | </div>
13 | <script>
14 |     function FunA(name){
15 |         this.name = name;
16 |     }
17 |     FunA.prototype.getName = function () {
18 |         console.log(this.name);
19 |     }
20 |     function FunB(name){
21 |         FunA.call(this,name);
22 |     }
23 |     FunB.prototype = FunA.prototype;
24 |     //现在B继承A的name属性：
25 |     var objB = new FunB("liwudi");
26 |     console.log(objB.name);//‘liwudi’
27 |     objB.getName();
28 | </script>
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/vue-demo/demo1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue-demo</title>
 6 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">{{message}}</div>
10 | <script>
11 |     new Vue({
12 |         el:'#app',
13 |         data:{
14 |             message:'hello world!'
15 |         }
16 |     });
17 | </script>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/vue-demo/demo2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Title</title>
 6 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app" v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</div>
10 | <script>
11 |     new Vue({
12 |         el:'#app',
13 |         data:{
14 |             message:'页面加载于 ' + new Date().toLocaleString()
15 |         }
16 |     });
17 | </script>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/vue-demo/demo3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue-demo</title>
 6 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |     <p v-if="message">message为true</p>
11 |     <p v-if="!message">message为false</p>
12 | </div>
13 | <script>
14 |     new Vue({
15 |         el:'#app',
16 |         data:{
17 |             message:true
18 |         }
19 |     });
20 | </script>
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/vue-demo/demo4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue-demo</title>
 6 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |     <ul>
11 |         <li v-for="item in message">姓名：{{item.name}},年龄：{{item.age}}</li>
12 |     </ul>
13 | </div>
14 | <script>
15 |     new Vue({
16 |         el:'#app',
17 |         data:{
18 |             message:[{name:'张三',age:23},{name:'李四',age:24},{name:'王五',age:25}]
19 |         }
20 |     });
21 | </script>
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/vue-demo/demo5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue-demo</title>
 6 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |     <input v-model="message" type="text"/>
11 |     <p>用户输入的值：{{message}}</p>
12 | </div>
13 | <script>
14 |     new Vue({
15 |         el:'#app',
16 |         data:{
17 |             message:'hello'
18 |         }
19 |     });
20 | </script>
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/vue-demo/demo6.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue-demo</title>
 6 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |     <button v-on:click="clickEvent">点击我</button>
11 | </div>
12 | <script>
13 |     new Vue({
14 |         el:'#app',
15 |         data:{
16 |             message:'hello'
17 |         },
18 |         methods:{
19 |             clickEvent: function () {
20 |                 alert('触发了事件');
21 |             }
22 |         }
23 |     });
24 | </script>
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/vue-demo/demo7.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue-demo</title>
 6 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |     <ol>
11 |         <!--使用组件-->
12 |         <todo-item></todo-item>
13 |     </ol>
14 | 
15 | </div>
16 | <script>
17 |     //定义一个最简单的组件
18 |     Vue.component('todo-item',{
19 |         template:'<li>这是一个组件</li>'
20 |     });
21 |     new Vue({
22 |         el:'#app'
23 |     });
24 | </script>
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/vue-demo/demo7_2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue-demo</title>
 6 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |     <ol>
11 |         <!--使用组件-->
12 |         <todo-item
13 |                 v-for="item in todoList"
14 |                 v-bind:todo="item"
15 |         ></todo-item>
16 |     </ol>
17 | 
18 | </div>
19 | <script>
20 |     //定义一个最简单的组件
21 |     Vue.component('todo-item',{
22 |         props:['todo'],
23 |         template:'<li>name:{{todo.name}},age:{{todo.age}}</li>'
24 |     });
25 |     new Vue({
26 |         el:'#app',
27 |         data:{
28 |             todoList:[{name:'张三',age:23},{name:'李四',age:24},{name:'王五',age:25}]
29 |         }
30 |     });
31 | </script>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/vue-demo/demo8.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue-demo</title>
 6 |     <style>
 7 |         .fade-enter-active, .fade-leave-active {
 8 |             transition: opacity .5s
 9 |         }
10 |         .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
11 |             opacity: 0
12 |         }
13 |     </style>
14 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
15 | </head>
16 | <body>
17 | <div id="app">
18 | 
19 |     <button v-on:click="clickEvent">切换</button>
20 | 
21 |     <transition name="fade">
22 |         <p v-if="isShow">
23 |             {{message}}
24 |         </p>
25 |     </transition>
26 | 
27 | </div>
28 | <script>
29 |     new Vue({
30 |         el:'#app',
31 |         data:{
32 |             isShow: true,
33 |             message:'hello world!'
34 |         },
35 |         methods:{
36 |             clickEvent: function () {
37 |                 this.isShow = !this.isShow
38 |             }
39 |         }
40 |     });
41 | </script>
42 | </body>
43 | </html>


--------------------------------------------------------------------------------
/vue-router/router1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>vue-router</title>
 6 |     <script src="https://unpkg.com/vue/dist/vue.js"></script>
 7 |     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 8 | </head>
 9 | <body>
10 | <div id="app">
11 |     <h1>Hello App!</h1>
12 |     <p>
13 |         <!-- 使用 router-link 组件来导航. -->
14 |         <!-- 通过传入 `to` 属性指定链接. -->
15 |         <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
16 |         <router-link to="/foo">Go to Foo</router-link>
17 |         <router-link to="/bar">Go to Bar</router-link>
18 |     </p>
19 |     <!-- 路由出口 -->
20 |     <!-- 路由匹配到的组件将渲染在这里 -->
21 |     <router-view></router-view>
22 | </div>
23 | 
24 | </body>
25 | <script>
26 |     //引入外部页面
27 |     //@todo:外部的页面view如何定制？？
28 |     const Foo = { template: '<div>foo</div>' }
29 |     const Bar = { template: '<div>bar</div>' }
30 | 
31 |     //定义路由
32 |     //@todo:没有router-link如何自己控制路由
33 |     const routes = [
34 |         { path: '/foo', component: Foo },
35 |         { path: '/bar', component: Bar }
36 |     ]
37 | 
38 |     //路由的实例化
39 |     const router = new VueRouter({
40 |         routes: routes // （缩写）相当于 routes: routes
41 |     });
42 | 
43 |     //路由注入
44 |     const app = new Vue({
45 |         router: router
46 |     }).$mount('#app')
47 | </script>
48 | </html>


--------------------------------------------------------------------------------
/vue-router/router2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>vue-router</title>
 6 |     <script src="https://unpkg.com/vue/dist/vue.js"></script>
 7 |     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 8 | </head>
 9 | <body>
10 | <div id="app">
11 |     <h1>Hello App!</h1>
12 |     <p>
13 |         <!-- 使用 router-link 组件来导航. -->
14 |         <!-- 通过传入 `to` 属性指定链接. -->
15 |         <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
16 |         <router-link to="/foo">Go to Foo</router-link>
17 |         <router-link to="/bar">Go to Bar</router-link>
18 |     </p>
19 |     <!-- 路由出口 -->
20 |     <!-- 路由匹配到的组件将渲染在这里 -->
21 |     <router-view></router-view>
22 | </div>
23 | 
24 | </body>
25 | <script>
26 |     //引入外部页面
27 |     //@todo:外部的页面view如何定制？？
28 |     const Foo = { template: '<div>foo</div>' }
29 |     const Bar = { template: '<div>bar</div>' }
30 | 
31 |     //定义路由
32 |     //@todo:没有router-link如何自己控制路由
33 |     const routes = [
34 |         { path: '/foo', component: Foo },
35 |         { path: '/bar', component: Bar }
36 |     ]
37 | 
38 |     //路由的实例化
39 |     const router = new VueRouter({
40 |         routes: routes // （缩写）相当于 routes: routes
41 |     });
42 | 
43 |     //路由注入
44 |     const app = new Vue({
45 |         router: router
46 |     }).$mount('#app')
47 | </script>
48 | </html>


--------------------------------------------------------------------------------
/vuex-demo/vuex1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>vuex学习</title>
 6 |     <script src="https://unpkg.com/vue/dist/vue.js"></script>
 7 |     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 8 |     <script src="https://unpkg.com/vuex"></script>
 9 | </head>
10 | <body>
11 | <div id="app">
12 |     <p>{{ count }}</p>
13 |     <p>
14 |         <button @click="increment">+</button>
15 |         <button @click="decrement">-</button>
16 |     </p>
17 | </div>
18 | </body>
19 | <script>
20 |     const store = new Vuex.Store({
21 |         state: {
22 |             count: 0
23 |         },
24 |         mutations: {
25 |             increment (state) {
26 |                 state.count++
27 |             },
28 |             decrement (state) {
29 |                 state.count--
30 |             }
31 |         }
32 |     })
33 | 
34 |     new Vue({
35 |         el:'#app',
36 |         store,
37 |         computed:{
38 |             count(){
39 |                 return store.state.count;
40 |             }
41 |         },
42 |         methods:{
43 |             increment(){
44 |                 store.commit('increment')
45 |             },
46 |             decrement () {
47 |                 store.commit('decrement')
48 |             }
49 |         }
50 |     })
51 | </script>
52 | 
53 | </html>


--------------------------------------------------------------------------------
/vuex-demo/vuex2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>vuex学习</title>
 6 |     <script src="https://unpkg.com/vue/dist/vue.js"></script>
 7 |     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 8 |     <script src="https://unpkg.com/vuex"></script>
 9 | </head>
10 | <body>
11 | <div id="app">
12 |     <p>{{ count }}</p>
13 |     <p>
14 |         <button @click="increment">+</button>
15 |         <button @click="decrement">-</button>
16 |     </p>
17 | </div>
18 | </body>
19 | <script>
20 |     const store = new Vuex.Store({
21 |         state: {
22 |             count: 0
23 |         },
24 |         mutations: {
25 |             increment (state) {
26 |                 state.count++
27 |             },
28 |             decrement (state) {
29 |                 state.count--
30 |             }
31 |         },
32 |         actions: {
33 |             increment (context) {
34 |                 console.log(context)
35 |                 context.commit('increment')
36 |             }
37 |         }
38 |     })
39 | 
40 |     new Vue({
41 |         el:'#app',
42 |         store,
43 |         computed:{
44 |             count(){
45 |                 return store.state.count;
46 |             }
47 |         },
48 |         methods:{
49 |             increment(){
50 |                 store.dispatch('increment')
51 |             },
52 |             decrement () {
53 |                 store.commit('decrement')
54 |             }
55 |         }
56 |     })
57 | </script>
58 | 
59 | </html>


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