├── docs
    ├── advanced
    │   ├── filters.md
    │   ├── components.md
    │   ├── axios.md
    │   └── components
    │   │   ├── props.md
    │   │   ├── components-basics.md
    │   │   └── emit.md
    ├── .vuepress
    │   ├── public
    │   │   ├── life-1.png
    │   │   ├── life-2.png
    │   │   ├── life-3.png
    │   │   ├── life-4.png
    │   │   ├── life-5.png
    │   │   ├── life-6.png
    │   │   ├── life-7.png
    │   │   ├── life-8.png
    │   │   ├── life-9.png
    │   │   ├── life-10.png
    │   │   ├── life-11.png
    │   │   └── computed-1.png
    │   ├── components
    │   │   ├── v-if
    │   │   │   ├── example1.vue
    │   │   │   ├── example1-2.vue
    │   │   │   ├── example1-3.vue
    │   │   │   └── example2.vue
    │   │   ├── v-model
    │   │   │   ├── example3.vue
    │   │   │   ├── example1.vue
    │   │   │   ├── example2.vue
    │   │   │   └── example4.vue
    │   │   ├── component
    │   │   │   ├── example2.vue
    │   │   │   ├── example2-2.vue
    │   │   │   ├── example2-3.vue
    │   │   │   ├── example1.vue
    │   │   │   ├── Button.vue
    │   │   │   ├── Button2-2.vue
    │   │   │   ├── Button2.vue
    │   │   │   └── Button2-3.vue
    │   │   ├── class
    │   │   │   ├── example1-2.vue
    │   │   │   └── example1-1.vue
    │   │   └── computeds
    │   │   │   ├── example1-1.vue
    │   │   │   ├── example1-2.vue
    │   │   │   ├── example2-1.vue
    │   │   │   └── example1-3.vue
    │   └── config.js
    ├── basics
    │   ├── instruct.md
    │   ├── instructs
    │   │   ├── others.md
    │   │   ├── v-on.md
    │   │   ├── v-bind.md
    │   │   ├── v-model.md
    │   │   ├── conditional.md
    │   │   └── list.md
    │   ├── watch.md
    │   ├── class-and-style.md
    │   ├── lifecycle.md
    │   └── computed.md
    ├── README.md
    └── introduction
    │   ├── introduce.md
    │   └── installation.md
├── .gitignore
├── deploy.sh
├── package.json
└── README.md


/docs/advanced/filters.md:
--------------------------------------------------------------------------------
1 | # 过滤器 filters
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | docs/.vuepress/theme/
3 | docs/.vuepress/dist/


--------------------------------------------------------------------------------
/docs/.vuepress/public/life-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shiyutim/start-from-scratch-learn-Vue/HEAD/docs/.vuepress/public/life-1.png


--------------------------------------------------------------------------------
/docs/.vuepress/public/life-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shiyutim/start-from-scratch-learn-Vue/HEAD/docs/.vuepress/public/life-2.png


--------------------------------------------------------------------------------
/docs/.vuepress/public/life-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shiyutim/start-from-scratch-learn-Vue/HEAD/docs/.vuepress/public/life-3.png


--------------------------------------------------------------------------------
/docs/.vuepress/public/life-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shiyutim/start-from-scratch-learn-Vue/HEAD/docs/.vuepress/public/life-4.png


--------------------------------------------------------------------------------
/docs/.vuepress/public/life-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shiyutim/start-from-scratch-learn-Vue/HEAD/docs/.vuepress/public/life-5.png


--------------------------------------------------------------------------------
/docs/.vuepress/public/life-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shiyutim/start-from-scratch-learn-Vue/HEAD/docs/.vuepress/public/life-6.png


--------------------------------------------------------------------------------
/docs/.vuepress/public/life-7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shiyutim/start-from-scratch-learn-Vue/HEAD/docs/.vuepress/public/life-7.png


--------------------------------------------------------------------------------
/docs/.vuepress/public/life-8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shiyutim/start-from-scratch-learn-Vue/HEAD/docs/.vuepress/public/life-8.png


--------------------------------------------------------------------------------
/docs/.vuepress/public/life-9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shiyutim/start-from-scratch-learn-Vue/HEAD/docs/.vuepress/public/life-9.png


--------------------------------------------------------------------------------
/docs/.vuepress/public/life-10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shiyutim/start-from-scratch-learn-Vue/HEAD/docs/.vuepress/public/life-10.png


--------------------------------------------------------------------------------
/docs/.vuepress/public/life-11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shiyutim/start-from-scratch-learn-Vue/HEAD/docs/.vuepress/public/life-11.png


--------------------------------------------------------------------------------
/docs/.vuepress/public/computed-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shiyutim/start-from-scratch-learn-Vue/HEAD/docs/.vuepress/public/computed-1.png


--------------------------------------------------------------------------------
/docs/advanced/components.md:
--------------------------------------------------------------------------------
1 | # 组件 components
2 | 
3 | - [组件基础](components/components-basics.md)
4 | - [父向子传值 props](components/props.md)
5 | - [子向父传值 emit](components/emit.md)
6 | 


--------------------------------------------------------------------------------
/docs/basics/instruct.md:
--------------------------------------------------------------------------------
 1 | # 指令
 2 | 
 3 | 指令，是 Vue 中用来执行一系列操作的行内代码，以`v-`开头。因部分指令相对来说比较常用，写起来篇幅较大，所以把指令拆分成以下几个小节进行讲解。
 4 | 
 5 | - [v-if/v-show](instructs/conditional.md)
 6 | - [v-for](instructs/list.md)
 7 | - [v-on](instructs/v-on.md)
 8 | - [v-bind](instructs/v-bind.md)
 9 | - [v-model](instructs/v-model.md)
10 | - [其他指令](instructs/others.md)
11 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/v-if/example1.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1 v-if="count < 0">count 小于0</h1>
 4 |     <h1 v-else-if="count == 0">count 等于0</h1>
 5 |     <h1 v-else>count 大于0</h1>
 6 | 
 7 |     <input type="number" v-model="count" />
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   data() {
14 |     return {
15 |       count: 0
16 |     }
17 |   }
18 | }
19 | </script>


--------------------------------------------------------------------------------
/docs/.vuepress/components/v-if/example1-2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1 v-show="count < 0">count 小于0</h1>
 4 |     <h1 v-show="count == 0">count 等于0</h1>
 5 |     <h1 v-show="count > 0">count 大于0</h1>
 6 | 
 7 |     <input type="number" v-model="count" />
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   data() {
14 |     return {
15 |       count: 0
16 |     }
17 |   }
18 | }
19 | </script>


--------------------------------------------------------------------------------
/docs/.vuepress/components/v-model/example3.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <input type="number" v-model.number="message" />
 4 |     <p v-show="message">{{message}}</p>
 5 |     <p v-show="!message">
 6 |       <br />
 7 |     </p>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   data() {
14 |     return {
15 |       message: ''
16 |     }
17 |   },
18 |   methods: {}
19 | }
20 | </script>
21 | 
22 | <style scoped lang=""></style>


--------------------------------------------------------------------------------
/docs/.vuepress/components/v-model/example1.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <input type="text" v-model="message" />
 4 |     <p v-show="message">{{message}}</p>
 5 |     <p v-show="!message">
 6 |       <br />
 7 |     </p>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   data() {
14 |     return {
15 |       message: 'hello Vue~'
16 |     }
17 |   },
18 |   methods: {}
19 | }
20 | </script>
21 | 
22 | <style scoped lang=""></style>


--------------------------------------------------------------------------------
/docs/.vuepress/components/v-model/example2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <input type="text" v-model.lazy="message" />
 4 |     <p v-show="message">{{message}}</p>
 5 |     <p v-show="!message">
 6 |       <br />
 7 |     </p>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   data() {
14 |     return {
15 |       message: 'hello Vue~'
16 |     }
17 |   },
18 |   methods: {}
19 | }
20 | </script>
21 | 
22 | <style scoped lang=""></style>


--------------------------------------------------------------------------------
/docs/.vuepress/components/component/example2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |         <component-Button2 :color="color" content="change color" @btn-handler="changeColor" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     data() {
10 |       return {
11 |         color: 'primary'
12 |       }
13 |     },
14 |     methods: {
15 |       changeColor(event) {
16 |         console.log(event)
17 |         this.color = event
18 |       }
19 |     }
20 |   }
21 | </script>
22 | 
23 | <style scoped>
24 | 
25 | </style>


--------------------------------------------------------------------------------
/docs/.vuepress/components/component/example2-2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |         <component-Button2-2 :color.sync="color" content="change color" @btn-handler="changeColor" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     data() {
10 |       return {
11 |         color: 'primary'
12 |       }
13 |     },
14 |     methods: {
15 |       changeColor(event) {
16 |         console.log(event)
17 |         // this.color = event
18 |       }
19 |     }
20 |   }
21 | </script>
22 | 
23 | <style scoped>
24 | 
25 | </style>


--------------------------------------------------------------------------------
/docs/.vuepress/components/component/example2-3.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |         <component-Button2-3 :color.sync="color" content="change color" @btn-handler="changeColor" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     data() {
10 |       return {
11 |         color: 'primary'
12 |       }
13 |     },
14 |     methods: {
15 |       changeColor(event) {
16 |         console.log(event)
17 |         // this.color = event
18 |       }
19 |     }
20 |   }
21 | </script>
22 | 
23 | <style scoped>
24 | 
25 | </style>


--------------------------------------------------------------------------------
/deploy.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env sh
 2 | 
 3 | # 确保脚本抛出遇到的错误
 4 | set -e
 5 | 
 6 | # 生成静态文件
 7 | npm run docs:build
 8 | 
 9 | # 进入生成的文件夹
10 | cd docs/.vuepress/dist
11 | 
12 | # 如果是发布到自定义域名
13 | # echo 'www.example.com' > CNAME
14 | 
15 | git init
16 | git add -A
17 | git commit -m 'deploy'
18 | 
19 | # 如果发布到 https://<USERNAME>.github.io
20 | # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
21 | 
22 | # 如果发布到 https://<USERNAME>.github.io/<REPO>
23 | git push -f git@github.com:shiyutim/start-from-scratch-learn-Vue.git master:gh-pages
24 | 
25 | cd -


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "start-from-scratch-learn-Vue",
 3 |   "version": "1.0.0",
 4 |   "main": "index.js",
 5 |   "repository": "https://github.com/shiyutim/start-from-scratch-learn-Vue.git",
 6 |   "author": "shiyutim <shiyutim@outlook.com>",
 7 |   "license": "MIT",
 8 |   "scripts": {
 9 |     "docs:dev": "vuepress dev docs",
10 |     "docs:build": "vuepress build docs",
11 |     "deploy": "bash deploy.sh"
12 |   },
13 |   "dependencies": {
14 |     "axios": "^0.19.1"
15 |   },
16 |   "devDependencies": {
17 |     "vuepress": "^1.2.0"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/v-if/example1-3.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1 v-if="count1 < 0">count1 小于0</h1>
 4 |     <h1 v-else-if="count1==0">count1 等于0</h1>
 5 |     <h1 v-else>count1 大于0</h1>
 6 | 
 7 |     <input type="number" v-model="count1" />
 8 | 
 9 |     <h1 v-show="count2 < 0">count2 小于0</h1>
10 |     <h1 v-show="count2==0">count2 等于0</h1>
11 |     <h1 v-show="count2 > 0">count2 大于0</h1>
12 | 
13 |     <input type="number" v-model="count2" />
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |   data() {
20 |     return {
21 |       count1: 0,
22 |       count2: 0
23 |     }
24 |   }
25 | }
26 | </script>
27 | 
28 | <style></style>


--------------------------------------------------------------------------------
/docs/.vuepress/components/v-if/example2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <div v-if="userInfo.isMember" class="member">
 4 |       <p>姓名： {{userInfo.name}}</p>
 5 |       <p>年龄： {{userInfo.age}}</p>
 6 |       <p>性别： {{userInfo.sex === 1 ? '男' : '女'}}</p>
 7 |     </div>
 8 |     <div v-else class="noMember">
 9 |       <h1>你现在不是会员哦！</h1>
10 |       <button @click="userInfo.isMember = 1">点击申请</button>
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   data() {
18 |     return {
19 |       userInfo: {
20 |         name: 'tim',
21 |         age: 10,
22 |         sex: 1, // 1 男 2 女
23 |         isMember: 0 // 0 为非会员 1 为会员
24 |       }
25 |     }
26 |   }
27 | }
28 | </script>
29 | 
30 | <style scoped></style>


--------------------------------------------------------------------------------
/docs/.vuepress/components/component/example1.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class='container'>
 3 |         <component-Button color="primary" content="登录" @btn-handler="login" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   data () {
10 |     return {
11 |     }
12 |   },
13 |   props: {
14 | 
15 |   },
16 |   components: {
17 |     
18 |   },
19 |   computed: {
20 |     
21 |   },
22 |   watch: {
23 |     
24 |   },
25 |   methods: {
26 |   // type your function
27 |   login() {
28 |       console.log('login~')
29 |   }
30 |     
31 |   },
32 |   created () {
33 |     
34 |   },
35 |   mounted () {
36 |     
37 |   },
38 |   updated () {
39 |     
40 |   },
41 |   destroyed () {
42 |     
43 |   },
44 |   filters: {
45 |     
46 |   },
47 | }
48 | </script>
49 | 
50 | <style scoped>
51 | 
52 | 
53 | </style>
54 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/class/example1-2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <section>
 4 |       <span
 5 |         class="item"
 6 |         :class="{active: activeIndex === index}"
 7 |         :style="{color: hoverIndex === index ? '#3498db' : ''}"
 8 |         @click="activeIndex = index"
 9 |         @mouseenter="hoverIndex = index"
10 |         @mouseleave="hoverIndex = -1"
11 |         v-for="(i, index) in 5"
12 |       >标签{{index+1}}</span>
13 |     </section>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |   data() {
20 |     return {
21 |       hoverIndex: -1,
22 |       activeIndex: 0
23 |     }
24 |   },
25 |   methods: {}
26 | }
27 | </script>
28 | 
29 | <style scoped>
30 | .item {
31 |   margin-right: 7px;
32 |   cursor: pointer;
33 |   font-size: 16px;
34 |   font-weight: 500;
35 | }
36 | .active {
37 |   border-bottom: 2px solid #e74c3c;
38 | }
39 | </style>


--------------------------------------------------------------------------------
/docs/.vuepress/components/class/example1-1.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <section>
 4 |       <span
 5 |         class="item"
 6 |         :style="{color: hoverIndex === index ? '#3498db' : ''}"
 7 |         @mouseenter="hoverIndex = index"
 8 |         @mouseleave="hoverIndex = -1"
 9 |         v-for="(i, index) in 5"
10 |       >标签{{index+1}}</span>
11 |       <!-- :class="{active: activeIndex === index}" -->
12 |       <!-- @click="activeIndex = index" -->
13 |     </section>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |   data() {
20 |     return {
21 |       hoverIndex: -1
22 |       //   activeIndex: 0
23 |     }
24 |   },
25 |   methods: {}
26 | }
27 | </script>
28 | 
29 | <style scoped>
30 | .item {
31 |   margin-right: 7px;
32 |   cursor: pointer;
33 |   font-size: 16px;
34 |   font-weight: 500;
35 | }
36 | .active {
37 |   border-bottom: 2px solid #e74c3c;
38 | }
39 | </style>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 从零开始学习 Vue
 2 | 
 3 | 从零开始学习 Vue，循序渐进的学习 Vue 中常用功能。
 4 | 
 5 | ## 如果你觉得这个文档对你有帮助请点个 star，有任何意见可以提 issues。
 6 | ## 如果有人看的话，我还会继续更新 Vue3 的文档的。
 7 | 
 8 | 
 9 | ## 写作原因
10 | 
11 | 写这个文档的起因是因为一个刚入行的朋友，要开始学习 Vue，给他解惑的重任自然就落在我身上了。但是让他自己看官方文档和通过我的一些只言片语是无法讲清楚的，想当初我学习的时候看官方文档也没有学的那么轻松，可能官网文档有些词语比较“晦涩”。但我经过长时间的使用后，再回过头来看官方文档，发现官方文档已经把所有的内容都写全了，只不过**有些地方**话语不够通俗易懂，**真实例子**不够详细。
12 | 
13 | 所以，我准备在官方文档的基础上，把项目中常用的功能进行系统描述，同时每个“功能”之间尽可能的分离（内容不会涉及大量没有学习过的知识），用通俗易懂的话语和简单的代码展示出来，希望能够帮助**刚接触 vue**的同学尽快上手。同时，本文也不会把 Vue 的所有 API 一一进行讲解，只会挑选我们工作中使用频率最高的。
14 | 
15 | 本篇文档是基于**Vue2.X 版本**进行讲解。所有内容都是在[官网文档](https://cn.vuejs.org/v2/guide/)的基础上进行扩充筛选。所以，初学者要对比着官网文档进行学习，如果两者有差异，**一切以官方文档为主** :thumbsup:。
16 | 
17 | 因为本人并不是资深开发者，所以可能有些错误和漏洞，恳请各位多多指正。
18 | 
19 | ## 适合人群
20 | 
21 | 本文只适合初学者。如果你已经在工作中使用过一段时间的开发者，那么 Vue [官方文档](https://cn.vuejs.org/)才是你首要的目标。
22 | 
23 | ## 阅读建议
24 | 
25 | 本文通过循序渐进的方式，把 Vue 中的每个“功能模块”拆分开来进行讲解，上下文和例子的依赖比较明显。所以建议从**本文的开头依次进行学习**。同时，在每篇文章最后都有几个简单的小例子，建议看完后手动实现一下加深印象。
26 | 
27 | 学习是一个从陌生到熟练的过程，如果你感觉学会了之后，一定要**多写**。
28 | 
29 | ## 目录结构
30 | 


--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
 1 | # 从零开始学习 Vue
 2 | 
 3 | 从零开始学习 Vue，循序渐进的学习 Vue 中常用功能。
 4 | 
 5 | [[toc]]
 6 | 
 7 | ## 写作原因
 8 | 
 9 | 写这个文档的起因是因为一个刚入行的朋友，要开始学习 Vue，给他解惑的重任自然就落在我身上了。但是让他自己看官方文档和通过我的一些只言片语是无法讲清楚的，想当初我学习的时候看官方文档也没有学的那么轻松，可能官网文档有些词语比较“晦涩”。但我经过长时间的使用后，再回过头来看官方文档，发现官方文档已经把所有的内容都写全了，只不过**有些地方**话语不够通俗易懂，**真实例子**不够详细。
10 | 
11 | 所以，我准备在官方文档的基础上，把项目中常用的功能进行系统描述，同时每个“功能”之间尽可能的分离（内容不会涉及大量没有学习过的知识），用通俗易懂的话语和简单的代码展示出来，希望能够帮助**刚接触 vue**的同学尽快上手。同时，本文也不会把 Vue 的所有 API 一一进行讲解，只会挑选我们工作中使用频率最高的。
12 | 
13 | 本篇文档是基于**Vue2.X 版本**进行讲解。所有内容都是在[官网文档](https://cn.vuejs.org/v2/guide/)的基础上进行扩充筛选。所以，初学者要对比着官网文档进行学习，如果两者有差异，**一切以官方文档为主** :thumbsup:。
14 | 
15 | 因为本人并不是资深开发者，所以可能有些错误和漏洞，恳请各位多多指正。
16 | 
17 | ## 适合人群
18 | 
19 | 本文只适合初学者。如果你已经在工作中使用过一段时间的开发者，那么 Vue [官方文档](https://cn.vuejs.org/)才是你首要的目标。
20 | 
21 | ## 阅读建议
22 | 
23 | 本文通过循序渐进的方式，把 Vue 中的每个“功能模块”拆分开来进行讲解，上下文和例子的依赖比较明显。所以建议从**本文的开头依次进行学习**。同时，在每篇文章最后都有几个简单的小例子，建议看完后手动实现一下加深印象。
24 | 
25 | 学习是一个从陌生到熟练的过程，如果你感觉学会了之后，一定要**多写**。
26 | 
27 | ## 目录结构
28 | 
29 | ## 开始学习
30 | 
31 | 如果你准备好了学习，那么就请[点击这里吧](introduction/installation.md)。
32 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/component/Button.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class='container'>
 3 |       <button :class="color" v-text="content" @click="$emit('btn-handler')"></button>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   data () {
10 |     return {}
11 |   },
12 |   props: {
13 |     color: {
14 |       type: String,
15 |       required: true,
16 |     },
17 |     content: {
18 |       type: String,
19 |       required: true,
20 |     }
21 |   },
22 |   components: {
23 |   },
24 |   computed: {
25 |     
26 |   },
27 |   watch: {
28 |     
29 |   },
30 |   methods: {
31 |   // type your function
32 |     
33 |   },
34 |   created () {
35 |     
36 |   },
37 |   mounted () {
38 |     
39 |   },
40 |   updated () {
41 |     
42 |   },
43 |   destroyed () {
44 |     
45 |   },
46 |   filters: {   
47 |   },
48 | }
49 | </script>
50 | 
51 | <style scoped>
52 |   button {
53 |     border: none;
54 |   }
55 |   .success {
56 |     color: #fff;
57 |     background: forestgreen;
58 |   }
59 |   .error {
60 |     color: #fff;
61 |     background: #ff0000;
62 |   }
63 |   .primary {
64 |     color: #fff;
65 |     background: blue;
66 |   }
67 |   .warning {
68 |     color: #fff;
69 |     background: yellow;
70 |   }
71 | </style>
72 | 


--------------------------------------------------------------------------------
/docs/.vuepress/config.js:
--------------------------------------------------------------------------------
 1 | {
 2 |   /* <div style="background: #fff; border: 1px solid #eee;padding: 25px 35px; margin-top: 10px; margin-bottom: 40px;">
 3 | 
 4 |   </div> */
 5 | }
 6 | 
 7 | module.exports = {
 8 |   title: 'start-from-scratch-learn-Vue',
 9 |   description: 'Just playing around',
10 |   displayAllHeaders: true, // true为显示所有页面的标题链接
11 |   collapsable: false, // false 为导航栏展开
12 |   base: '/start-from-scratch-learn-Vue/',
13 |   themeConfig: {
14 |     sidebar: [{
15 |         title: '前言', // 必要的
16 |         // path: '/', // 可选的, 应该是一个绝对路径
17 |         collapsable: false, // 可选的, 默认值是 true,
18 |         sidebarDepth: 2, // 可选的, 默认值是 1
19 |         children: ['/']
20 |       },
21 |       {
22 |         title: '简介',
23 |         collapsable: false,
24 |         sidebarDepth: 1,
25 |         children: ['introduction/installation.md', 'introduction/introduce.md']
26 |       },
27 |       {
28 |         title: '入门篇',
29 |         collapsable: false,
30 |         sidebarDepth: 2,
31 |         children: ['basics/instruct.md', 'basics/class-and-style.md', 'basics/lifecycle.md', 'basics/computed.md', 'basics/watch.md']
32 |       },
33 |       {
34 |         title: '进阶篇',
35 |         collapsable: false,
36 |         sidebarDepth: 2,
37 |         children: ['advanced/components.md', 'advanced/filters.md', 'advanced/axios.md']
38 |       },
39 |     ],
40 |     repo: 'shiyutim/start-from-scratch-learn-Vue',
41 |     lastUpdated: '上次更新'
42 |   }
43 | }


--------------------------------------------------------------------------------
/docs/.vuepress/components/v-model/example4.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container" style="padding: 20px 0;">
 3 |     <input type="number" v-model.number="nickname" />
 4 |     <!-- 账号默认为手机号 -->
 5 |     <input type="text" v-model.trim="password" />
 6 |     <button @click="login">登录</button>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   data() {
13 |     return {
14 |       nickname: '', // 账号
15 |       password: '' // 密码
16 |     }
17 |   },
18 |   methods: {
19 |     // es6
20 |     login() {
21 |       let params = {
22 |         nickname: this.nickname,
23 |         password: this.password
24 |       }
25 |       if (params.nickname.toString().length !== 11) {
26 |         return window.alert('请输入正确的手机号')
27 |       }
28 | 
29 |       if (params.password === '') {
30 |         return window.alert('请输入密码')
31 |       }
32 | 
33 |       //   axios.post('xxx', params).then()   这里进行发送数据
34 |       window.alert('登陆成功！')
35 |     },
36 | 
37 |     // es5
38 |     login2: function() {
39 |       var params = {
40 |         nickname: this.nickname,
41 |         password: this.password
42 |       }
43 |       if (params.nickname.toString().length !== 11) {
44 |         return window.alert('请输入正确的手机号')
45 |       }
46 | 
47 |       if (params.passowrd === '') {
48 |         return window.alert('请输入密码')
49 |       }
50 | 
51 |       //   axios.post('xxx', params).then()   这里进行发送数据
52 |       window.alert('登陆成功！')
53 |     }
54 |   }
55 | }
56 | </script>
57 | 
58 | <style scoped lang="">
59 | </style>


--------------------------------------------------------------------------------
/docs/.vuepress/components/component/Button2-2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <button :class="color" v-text="content" @click="btnClick"></button>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     data() {
10 |       return {}
11 |     },
12 |     props: {
13 |       color: {
14 |         type: String,
15 |         required: true
16 |       },
17 |       content: {
18 |         type: String,
19 |         required: true
20 |       }
21 |     },
22 |     methods: {
23 |         btnClick() {
24 |             let value = ['success', 'error', 'primary', 'warning']
25 |             let index = Math.random()
26 |             let l = value.length
27 |             index = Math.round((l - 1 ) * index)
28 |             // console.log('index', index)
29 |             if(index > 3) index = 3
30 |             if(index < 0) index = 0
31 |             // this.$emit('btn-handler', value[index])
32 |             this.$emit('update:color', value[index])
33 |         }
34 |     }
35 |   }
36 | </script>
37 | 
38 | <style scoped>
39 |   button {
40 |     border: none;
41 |     padding: 15px 20px;
42 |     border-radius: 3px;
43 |     cursor: pointer;
44 |   }
45 |   button:hover {
46 |       opacity: .9;
47 |   }
48 |   .success {
49 |     color: #fff;
50 |     background: #27ae60;
51 |   }
52 |   .error {
53 |     color: #fff;
54 |     background: #c0392b;
55 |   }
56 |   .primary {
57 |     color: #fff;
58 |     background: #3498db;
59 |   }
60 |   .warning {
61 |     color: #fff;
62 |     background: #d35400;
63 |   }
64 | </style>


--------------------------------------------------------------------------------
/docs/.vuepress/components/component/Button2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <button :class="color" v-text="content" @click="btnClick"></button>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     data() {
10 |       return {}
11 |     },
12 |     props: {
13 |       color: {
14 |         type: String,
15 |         required: true
16 |       },
17 |       content: {
18 |         type: String,
19 |         required: true
20 |       }
21 |     },
22 |     methods: {
23 |         btnClick() {
24 |             // let value = ['success', 'error', 'primary', 'warning']
25 |             // let index = Math.random()
26 |             // let l = value.length
27 |             // index = Math.round((l - 1 ) * index)
28 |             // // console.log('index', index)
29 |             // if(index > 3) index = 3
30 |             // if(index < 0) index = 0
31 |             // this.$emit('btn-handler', value[index])
32 |             // this.color = value[index]
33 |         }
34 |     }
35 |   }
36 | </script>
37 | 
38 | <style scoped>
39 |   button {
40 |     border: none;
41 |     padding: 15px 20px;
42 |     border-radius: 3px;
43 |     cursor: pointer;
44 |   }
45 |   button:hover {
46 |       opacity: .9;
47 |   }
48 |   .success {
49 |     color: #fff;
50 |     background: #27ae60;
51 |   }
52 |   .error {
53 |     color: #fff;
54 |     background: #c0392b;
55 |   }
56 |   .primary {
57 |     color: #fff;
58 |     background: #3498db;
59 |   }
60 |   .warning {
61 |     color: #fff;
62 |     background: #d35400;
63 |   }
64 | </style>


--------------------------------------------------------------------------------
/docs/.vuepress/components/computeds/example1-1.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="wrap">
 3 |     <section class="commodity">
 4 |       <div class="item" v-for="(item, index) in new_priceList" :key="index">
 5 |         <div>
 6 |           <img :src="item.thumb" alt class="item_img" />
 7 |         </div>
 8 |         <div>
 9 |           <p>{{ item.title }}</p>
10 |         </div>
11 |         <div>
12 |           <p>销量： {{ item.sales }}</p>
13 |           <p>价格： {{ item.price }}</p>
14 |         </div>
15 |       </div>
16 |     </section>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | import axios from 'axios'
22 | export default {
23 |   data() {
24 |     return {
25 |       list: []
26 |     }
27 |   },
28 |   computed: {
29 |     new_priceList() {
30 |       return this.list
31 |     }
32 |   },
33 |   methods: {
34 |     initData() {
35 |       axios
36 |         .get(
37 |           'https://easy-mock.com/mock/5e1aa4ff7f109b0caa4d2e26/learnvue/commodity'
38 |         )
39 |         .then(res => {
40 |           let data = res.data.data
41 |           console.log(data, 'data')
42 |           this.list = data.list
43 |         })
44 |     }
45 |   },
46 |   created() {
47 |     this.initData()
48 |   },
49 |   mounted() {},
50 |   updated() {},
51 |   destroyed() {}
52 | }
53 | </script>
54 | 
55 | <style scoped>
56 | .commodity {
57 |   display: flex;
58 |   flex-direction: row;
59 |   flex-wrap: wrap;
60 |   justify-content: flex-start;
61 | }
62 | .item {
63 |   margin: 10px;
64 |   width: 200px;
65 | }
66 | .item_img {
67 |   width: 100px;
68 |   height: 100px;
69 | }
70 | </style>
71 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/computeds/example1-2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="wrap">
 3 |     <section class="commodity">
 4 |       <div class="item" v-for="(item, index) in new_priceList" :key="index">
 5 |         <div>
 6 |           <img :src="item.thumb" alt class="item_img" />
 7 |         </div>
 8 |         <div>
 9 |           <p>{{ item.title }}</p>
10 |         </div>
11 |         <div>
12 |           <p>销量： {{ item.sales }}</p>
13 |           <p>价格： {{ item.price }}</p>
14 |         </div>
15 |       </div>
16 |     </section>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | import axios from 'axios'
22 | export default {
23 |   data() {
24 |     return {
25 |       list: []
26 |     }
27 |   },
28 |   computed: {
29 |     new_priceList() {
30 |       return this.list.sort((a, b) => {
31 |         return a.price - b.price
32 |       })
33 |     }
34 |   },
35 |   methods: {
36 |     initData() {
37 |       axios
38 |         .get(
39 |           'https://easy-mock.com/mock/5e1aa4ff7f109b0caa4d2e26/learnvue/commodity'
40 |         )
41 |         .then(res => {
42 |           let data = res.data.data
43 |           console.log(data, 'data')
44 |           this.list = data.list
45 |         })
46 |     }
47 |   },
48 |   created() {
49 |     this.initData()
50 |   },
51 |   mounted() {},
52 |   updated() {},
53 |   destroyed() {}
54 | }
55 | </script>
56 | 
57 | <style scoped>
58 | .commodity {
59 |   display: flex;
60 |   flex-direction: row;
61 |   flex-wrap: wrap;
62 |   justify-content: flex-start;
63 | }
64 | .item {
65 |   margin: 10px;
66 |   width: 200px;
67 | }
68 | .item_img {
69 |   width: 100px;
70 |   height: 100px;
71 | }
72 | </style>
73 | 


--------------------------------------------------------------------------------
/docs/advanced/axios.md:
--------------------------------------------------------------------------------
 1 | # axios
 2 | 
 3 | [[toc]]
 4 | 
 5 | ## 介绍
 6 | 
 7 | axios 是 Vue 官方推荐的 http 库，所以，我们都是通过 axios 进行发送 http 请求。axios 有[中文版官方文档](http://www.axios-js.com/docs/)，不过这个文档很不中文，如果你英文不好，可以看这个[中文版文档](https://www.kancloud.cn/yunye/axios/234845)。
 8 | 
 9 | ## 使用
10 | 
11 | 使用方式有两种，一种方式通过`npm install axios`进行安装包。另一种方式通过 cdn 进行使用`<script src="https://unpkg.com/axios/dist/axios.min.js"></script>`。
12 | 
13 | 如果你使用 vue-cli 构建的项目，输入`npm install axios -S`安装包进`package.json`文件的`dependencies`中。`dependencies`为我们开发和上线后需要使用的包。`devDependencies`为我们开发时需要使用的包。
14 | 
15 | 使用 axios 发送 get 和 post 请求非常简单，不过，再次之前你可能需要了解一下`Promise`。如果你不了解也没关系，只需要照着格式写就可以了，不过，`Promise`是非常重要的异步处理方式，必须要会的哦。
16 | 
17 | 同时，axios 的中文文档真是简单明了，所以应该都能看懂，其实就是照葫芦画瓢，唯一有问题的地方可能就是**跨域处理**了吧。
18 | 
19 | ## get 请求
20 | 
21 | 发送 get 请求
22 | 
23 | ```js
24 | import axios from 'axios'
25 | 
26 | axios
27 |   .get('/user?ID=12345') // {1}
28 |   .then(function(response) {
29 |     // {2}
30 |     console.log(response)
31 |   })
32 |   .catch(function(error) {
33 |     // {3}
34 |     console.log(error)
35 |   })
36 | ```
37 | 
38 | 使用`axios.get`发送 get 请求，`{1}`处为 url，`{2}`处为成功的回调，`{3}`为错误的回调
39 | 
40 | 如果要传递参数，可以添加可选的`params`：
41 | 
42 | ```js
43 | import axios from 'axios'
44 | 
45 | axios
46 |   .get('/user', {
47 |     params: {
48 |       Id: 12345
49 |     }
50 |   })
51 |   .then(function(response) {
52 |     console.log(response)
53 |   })
54 |   .catch(function(error) {
55 |     console.log(error)
56 |   })
57 | ```
58 | 
59 | ## post 请求
60 | 
61 | 发送 post 请求
62 | 
63 | ```js
64 | import axios from 'axios'
65 | 
66 | axios
67 |   .post('/user', {
68 |     firstName: 'Fred',
69 |     lastName: 'Flintstone'
70 |   })
71 |   .then(function(response) {
72 |     console.log(response)
73 |   })
74 |   .catch(function(error) {
75 |     console.log(error)
76 |   })
77 | ```
78 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/computeds/example2-1.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="wrap">
 3 |     <div class="tools">
 4 |       <input type="text" v-model="search" />
 5 |     </div>
 6 |     <section class="commodity">
 7 |       <div class="item" v-for="(item, index) in new_titleList" :key="index">
 8 |         <div>
 9 |           <img :src="item.thumb" alt class="item_img" />
10 |         </div>
11 |         <div>
12 |           <p>{{ item.title }}</p>
13 |         </div>
14 |         <div>
15 |           <p>销量： {{ item.sales }}</p>
16 |           <p>价格： {{ item.price }}</p>
17 |         </div>
18 |       </div>
19 |     </section>
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | import axios from 'axios'
25 | export default {
26 |   data() {
27 |     return {
28 |       list: [],
29 |       search: ''
30 |     }
31 |   },
32 |   computed: {
33 |     new_titleList() {
34 |         if(!this.search )return this.list
35 | 
36 |         let arr = this.list.filter(item => {
37 |             return item.title.includes(this.search)
38 |         })        
39 |         return arr
40 |     }
41 |   },
42 |   methods: {
43 |     initData() {
44 |       axios
45 |         .get(
46 |           'https://easy-mock.com/mock/5e1aa4ff7f109b0caa4d2e26/learnvue/commodity'
47 |         )
48 |         .then(res => {
49 |           let data = res.data.data
50 |           console.log(data, 'data')
51 |           this.list = data.list
52 |         })
53 |     }
54 |   },
55 |   created() {
56 |     setTimeout(() => {
57 |       this.initData()
58 |     }, 1000)
59 |   },
60 |   mounted() {},
61 |   updated() {},
62 |   destroyed() {}
63 | }
64 | </script>
65 | 
66 | <style scoped>
67 | .commodity {
68 |   display: flex;
69 |   flex-direction: row;
70 |   flex-wrap: wrap;
71 |   justify-content: flex-start;
72 | }
73 | .item {
74 |   margin: 10px;
75 |   width: 200px;
76 | }
77 | .item_img {
78 |   width: 100px;
79 |   height: 100px;
80 | }
81 | </style>
82 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/component/Button2-3.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <button :class="color" v-text="content" @click="btnClick"></button>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     data() {
10 |       return {}
11 |     },
12 |     props: {
13 |       color: {
14 |         type: String,
15 |         required: true
16 |       },
17 |       content: {
18 |         type: String,
19 |         required: true
20 |       }
21 |     },
22 |     methods: {
23 |         btnClick() {
24 |             let result = this.getColor()
25 |             console.log('result', result)
26 |             this.$emit('update:color', result)
27 |         },
28 |         getColor() {
29 |             console.time('color')
30 |             let value = ['success', 'error', 'primary', 'warning']
31 |             let index = Math.random()
32 |             let l = value.length
33 |             let color = this.color
34 |             index = Math.round((l - 1 ) *index)
35 |             // if(value[index] === color) {
36 |             //     return this.getColor()
37 |             // }
38 |             do {
39 |                 index = Math.round((l - 1 ) * Math.random())
40 |             }
41 |             while(color === value[index])
42 | 
43 |             if(index > 3) index = 3
44 |             if(index < 0) index = 0
45 |             console.timeEnd('color')
46 |             return value[index]
47 |         }
48 |     }
49 |   }
50 | </script>
51 | 
52 | <style scoped>
53 |   button {
54 |     border: none;
55 |     padding: 15px 20px;
56 |     border-radius: 3px;
57 |     cursor: pointer;
58 |   }
59 |   button:hover {
60 |       opacity: .9;
61 |   }
62 |   .success {
63 |     color: #fff;
64 |     background: #27ae60;
65 |   }
66 |   .error {
67 |     color: #fff;
68 |     background: #c0392b;
69 |   }
70 |   .primary {
71 |     color: #fff;
72 |     background: #3498db;
73 |   }
74 |   .warning {
75 |     color: #fff;
76 |     background: #d35400;
77 |   }
78 | </style>


--------------------------------------------------------------------------------
/docs/.vuepress/components/computeds/example1-3.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="wrap">
 3 |     <div class="tools">
 4 |       <button @click="status = 1">升序</button>
 5 |       <button @click="status = 2">降序</button>
 6 |     </div>
 7 |     <section class="commodity">
 8 |       <div class="item" v-for="(item, index) in new_priceList" :key="index">
 9 |         <div>
10 |           <img :src="item.thumb" alt class="item_img" />
11 |         </div>
12 |         <div>
13 |           <p>{{ item.title }}</p>
14 |         </div>
15 |         <div>
16 |           <p>销量： {{ item.sales }}</p>
17 |           <p>价格： {{ item.price }}</p>
18 |         </div>
19 |       </div>
20 |     </section>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | import axios from 'axios'
26 | export default {
27 |   data() {
28 |     return {
29 |       list: [],
30 |       status: 0 // 默认为0 即默认排序 1 为升序 2 为降序
31 |     }
32 |   },
33 |   computed: {
34 |     new_priceList() {
35 |       if (!this.status) return this.list
36 |       return this.list.sort((a, b) => {
37 |         return this.status === 1 ? a.price - b.price : b.price - a.price
38 |       })
39 |     }
40 |   },
41 |   methods: {
42 |     initData() {
43 |       axios
44 |         .get(
45 |           'https://easy-mock.com/mock/5e1aa4ff7f109b0caa4d2e26/learnvue/commodity'
46 |         )
47 |         .then(res => {
48 |           let data = res.data.data
49 |           console.log(data, 'data')
50 |           this.list = data.list
51 |         })
52 |     }
53 |   },
54 |   created() {
55 |     setTimeout(() => {
56 |       this.initData()
57 |     }, 1000)
58 |   },
59 |   mounted() {},
60 |   updated() {},
61 |   destroyed() {}
62 | }
63 | </script>
64 | 
65 | <style scoped>
66 | .commodity {
67 |   display: flex;
68 |   flex-direction: row;
69 |   flex-wrap: wrap;
70 |   justify-content: flex-start;
71 | }
72 | .item {
73 |   margin: 10px;
74 |   width: 200px;
75 | }
76 | .item_img {
77 |   width: 100px;
78 |   height: 100px;
79 | }
80 | </style>
81 | 


--------------------------------------------------------------------------------
/docs/basics/instructs/others.md:
--------------------------------------------------------------------------------
  1 | # 其他指令
  2 | 
  3 | [[toc]]
  4 | 
  5 | ## 介绍
  6 | 
  7 | 前面已经介绍了比较重要且常用的指令，剩下的指令在这里简单的介绍一下。
  8 | 
  9 | ## v-text
 10 | 
 11 | 正常使用模板插值时，使用`{{}}`的方式：
 12 | 
 13 | ```html
 14 | <span> {{msg}} </span>
 15 | ```
 16 | 
 17 | 使用`v-text`的写法：
 18 | 
 19 | ```html
 20 | <span v-text="msg"></span>
 21 | ```
 22 | 
 23 | 这俩种方式最终的效果是一样的。
 24 | 
 25 | ## v-html
 26 | 
 27 | 假设在 data 有如下变量:
 28 | 
 29 | ```js
 30 | msg: `<span style="fontSize: 20px;">Hello V-html</span>`
 31 | ```
 32 | 
 33 | 在使用`{ { msg } }`或`v-text="msg"`的时候，会原封不动的渲染出来:
 34 | 
 35 | ```js
 36 | <span style="fontSize: 20px;">Hello V-html</span>
 37 | ```
 38 | 
 39 | 但是我们的本意是渲染出一个`<span>`标签。所以 vue 提供了`v-html`，可以识别出 html 标签。
 40 | 
 41 | ```html
 42 | <span v-html="msg"></span>
 43 | ```
 44 | 
 45 | <div style="background: #fff; border: 1px solid #eee;padding: 25px 35px; margin-top: 10px; margin-bottom: 40px;">
 46 |     <span style="fontSize: 20px;">Hello V-html</span>
 47 | </div>
 48 | 
 49 | ## v-clock
 50 | 
 51 | 在加载页面的时候，页面会经过编译，然后渲染 dom。所以，如果加载过程比较慢的话，会看到模板语法的表达式，比如:
 52 | 
 53 | ```html
 54 | <div>{{ msg }}</div>
 55 | ```
 56 | 
 57 | 然后页面加载完之后，才能看到实际的值：
 58 | 
 59 | ```html
 60 | <div>Hello Vue!</div>
 61 | ```
 62 | 
 63 | 这样用户体验很不好。所以，vue 提供了`v-clock`，我们可以使用 css 规则来隐藏未编译的模板标签。
 64 | 
 65 | ```html
 66 | <div v-clock>{{msg}}</div>
 67 | 
 68 | <style>
 69 |   [v-clock] {
 70 |     display: none;
 71 |   }
 72 | </style>
 73 | ```
 74 | 
 75 | 这样设置后，用户便不会看到未经过编译的**模板标签**，而是一片空白，然后页面渲染完成后，便会恢复回来。
 76 | 
 77 | ## v-once
 78 | 
 79 | 顾名思义，v-once，使用在标签上，这个元素渲染一次后，就会变成**静态内容**，并被缓存起来。
 80 | 
 81 | ```html
 82 | <div v-once>Hello Vue</div>
 83 | ```
 84 | 
 85 | 不过，**[官方文档有如下提示](https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E9%80%9A%E8%BF%87-v-once-%E5%88%9B%E5%BB%BA%E4%BD%8E%E5%BC%80%E9%94%80%E7%9A%84%E9%9D%99%E6%80%81%E7%BB%84%E4%BB%B6)**：
 86 | 
 87 | ::: danger 警告
 88 | 
 89 | 再说一次，试着不要过度使用这个模式。当你需要渲染大量静态内容时，极少数的情况下它会给你带来便利，除非你非常留意渲染变慢了，不然它完全是没有必要的——再加上它在后期会带来很多困惑。例如，设想另一个开发者并不熟悉 v-once 或漏看了它在模板中，他们可能会花很多个小时去找出模板为什么无法正确更新。
 90 | :::
 91 | 
 92 | ## v-pre
 93 | 
 94 | 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签，跳过大量没有指令的节点会加快编译。
 95 | 
 96 | ```html
 97 | <span v-pre>{{ this will not be compiled }}</span>
 98 | ```
 99 | 
100 | ---
101 | 
102 | <a href="javascript:history.go(-1)">返回上一页</a>
103 | 


--------------------------------------------------------------------------------
/docs/basics/instructs/v-on.md:
--------------------------------------------------------------------------------
  1 | # 事件监听
  2 | 
  3 | [[toc]]
  4 | 
  5 | ## 介绍
  6 | 
  7 | [v-on](https://cn.vuejs.org/v2/guide/events.html)指令用于**监听 dom 事件**，可以触发表达式或函数。
  8 | 
  9 | ## v-on
 10 | 
 11 | 在前面小例子中，我们给申请按钮设置了一个监听事件：`@click="userInfo.isMember = 1"`。这里使用了简写形式，实际上为`v-on:click="userInfo.isMember = 1"`。表示*使用`v-on:`监听`click`事件，如果发生点击事件，则调用右边的表达式*。也就是把`userInfo.isMember`的值重新赋值为 1。
 12 | 
 13 | 那么，除了可以监听`click`事件，还可以监听哪些呢？比如说： `keyup`（键盘按下事件）、`mouseover`（鼠标经过事件） 等等 dom 事件。除了监听 dom 事件还可以监听子组件传过来的事件，等到讲解组件一节时在详细说明。
 14 | 
 15 | 上面也提到了我们可以使用简写的方式。`v-on:`指令可以简写为`@`，那么简写后的监听事件为`@click、@mouseover和@keyup`。
 16 | 
 17 | ## 调用方法
 18 | 
 19 | `v-on`除了可以调用表达式外（`@click="userInfo.isMember = 1"`），还可以调用方法（函数），比如`@click="submit"`，那么这个`submit`就是一个函数。下面我们详细说一下**函数**。
 20 | 
 21 | 在 vue 中，一个函数是定义在`methods{}`中的，在前面几节中，我们初始化的模板里面并没有`methods:{}`一项。现在，我们可以添加这一项了，这里是存放函数的地方。
 22 | 
 23 | ::: warning 注意
 24 | 在 methods 后面写的是 `:{}`，而不是`()`，这里需要注意！一定不要弄混了。
 25 | :::
 26 | 
 27 | ```html
 28 | <template>
 29 |   <div class="container">
 30 |     <div v-if="userInfo.isMember" class="member">
 31 |       <p v-for="(value, name, index) in userInfo" :key="index">
 32 |         {{name}}: {{value}}
 33 |       </p>
 34 |     </div>
 35 |     <div v-else class="noMember">
 36 |       <h1>你现在不是会员哦！</h1>
 37 |       <button @click="userInfo.isMember = 1">点击申请</button>
 38 |     </div>
 39 |   </div>
 40 | </template>
 41 | 
 42 | <script>
 43 |   export default {
 44 |     data() {
 45 |       return {
 46 |         userInfo: {
 47 |           name: 'tim',
 48 |           age: 10,
 49 |           sex: 1, // 1男 2女
 50 |           isMember: 0 // 0为非会员 1 为会员
 51 |         }
 52 |       }
 53 |     }, // 每个层级间， 以 `,` 分隔
 54 |     // change
 55 |     methods: {} // {1}  这里定义函数
 56 |     // end
 57 |   }
 58 | </script>
 59 | 
 60 | <style scoped lang=""></style>
 61 | ```
 62 | 
 63 | 还是套用前面的例子（嘻嘻:grinning:），在此基础上，我们在`{1}`处添加了一个`methods:{}`。注意，这里的层级关系是 `data`和`methods`是同级的，每个层级之间以`,`分隔。
 64 | 
 65 | 现在我们改造一下，不直接使用`click`调用表达式，改成调用方法。所以，我们首先改变一下`申请按钮`。
 66 | 
 67 | ```html
 68 | <button @click="submit">点击申请</button>
 69 | ```
 70 | 
 71 | 接下来我们定义一个函数:
 72 | 
 73 | ```js
 74 | // es6 写法
 75 | methods: {
 76 |     submit () {}
 77 | }
 78 | 
 79 | // es5 写法
 80 | methods: {
 81 |     submit: function() {}
 82 | }
 83 | ```
 84 | 
 85 | 定义好了函数后，测试一下是否设置好了，可以使用`console.log`进行测试。在函数内部添加如下代码：
 86 | 
 87 | ```js
 88 | submit() {
 89 |     console.log('click`)
 90 | }
 91 | ```
 92 | 
 93 | 在你点击`申请按钮`后，控制台打印了`click`，说明函数调用成功。接下来就是改变会员状态了，那么把以前写的`userInfo.isMember = 1`放到函数内部就可以了。
 94 | 
 95 | ```js
 96 | submit() {
 97 |     console.log('click')
 98 |     this.userInfo.isMember = 1   // {1}
 99 | }
100 | ```
101 | 
102 | 注意，我们在 html 内联中定义`click`事件的时候，`userInfo`前面没有`this`，而在函数中，也就是`{1}`处，我们使用的是`this`。前面已经讲过，我们访问`data`里面数据的时候，需要通过`this`来访问。
103 | 
104 | 这时候再点击`申请按钮`，可以看到已经自动改变了界面状态。
105 | 
106 | ## 按键修饰符
107 | 
108 | 按键修饰符可以添加在**事件名**的后面，以`.`进行分隔`@<事件名>.<修饰符>`。比如说，我们在提交表单的时候，用户在输入完成后，除了可以手动点击提交按钮外，还可以点击键盘的`enter`键来提交申请，那么这时候我们就可以使用`@keyup.enter`来调用函数。`keyup`为事件名，`enter`为修饰符，更多修饰符请参考[官方文档](https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6)。
109 | 
110 | ---
111 | 
112 | <a href="javascript:history.go(-1)">返回上一页</a>
113 | 


--------------------------------------------------------------------------------
/docs/basics/instructs/v-bind.md:
--------------------------------------------------------------------------------
  1 | # v-bind
  2 | 
  3 | [[toc]]
  4 | 
  5 | ## 介绍
  6 | 
  7 | `v-bind`指令用于动态的绑定一个或多个特性。比如说表达式，还记得我们在使用`v-for`的时候，在`key`的前面添加了一个`:`了吗，这个`:`就是`v-bind:`的简写方式。`v-bind:key="index"`，简写为`:key="index"`
  8 | 
  9 | ## v-bind
 10 | 
 11 | 调用方法就是在一个属性前面添加`v-bind:`或者`:`。以后我们都简写为`:`。
 12 | 例子：
 13 | 
 14 | - 绑定一个图片`src`属性：
 15 | 
 16 | ```html
 17 | <!-- 绑定一个变量 -->
 18 | <img :src="imgSrc" />
 19 | 
 20 | <!-- 拼接 -->
 21 | <img :src='https://www.xxx.com/ + "imgSrc"' />
 22 | 
 23 | <script>
 24 |   data () {
 25 |     return {
 26 |       imgSrc: 'xxxxx'
 27 |   }}
 28 | </script>
 29 | ```
 30 | 
 31 | - 绑定一个 a 标签的`href`链接
 32 | 
 33 | ```html
 34 | <a :href="aHref"> 这是一个链接 </a>
 35 | 
 36 | <script>
 37 |   data () {
 38 |     return {
 39 |       aHref: 'xxxxx'
 40 |     }
 41 |   }
 42 | </script>
 43 | ```
 44 | 
 45 | - 绑定一个对象
 46 | 
 47 | ```html
 48 | <img :src="img.url" />
 49 | 
 50 | <a :href="img.url"> 这是一个链接 </a>
 51 | 
 52 | <script>
 53 |   return {
 54 |     img: {
 55 |       url: 'xxxx'
 56 |     }
 57 |   }
 58 | </script>
 59 | ```
 60 | 
 61 | - 绑定一个数组
 62 | 
 63 | ```html
 64 | <!-- 0 为角标 代表第一项 -->
 65 | <img :src="img[0].url" />
 66 | 
 67 | <a :href="img[1].url"> 这是一个链接 </a>
 68 | 
 69 | <script>
 70 |   return {
 71 |     img: [
 72 |       {
 73 |         url: 'imgUrl.com'
 74 |       },
 75 |       {
 76 |         url: 'a.com'
 77 |       }
 78 |     ]
 79 |   }
 80 | </script>
 81 | ```
 82 | 
 83 | ## 小例子
 84 | 
 85 | ### 遍历渲染一组图片
 86 | 
 87 | 一般来说，在渲染一组图片的时候，我们是通过`v-for`来进行遍历渲染的，搭配`v-bind`就能实现 动态的给`<img>`绑定 url。
 88 | 这里给大家提供一组真实的图片链接，是通过我写的[小爬虫](https://github.com/shiyutim/crawler)爬取的。接口地址为: `https://easy-mock.com/mock/5e1aa4ff7f109b0caa4d2e26/learnvue/imglist`。
 89 | 
 90 | 首先，我们进行如下初始化页面模板：
 91 | 
 92 | ```html
 93 | <template>
 94 |   <div class="container">
 95 |     <img src class="img" />
 96 |   </div>
 97 | </template>
 98 | 
 99 | <script>
100 |   export default {
101 |     data() {
102 |       return {
103 |         imgList: []
104 |       }
105 |     },
106 |     methods: {},
107 |     mounted() {}
108 |   }
109 | </script>
110 | 
111 | <style scoped lang=""></style>
112 | ```
113 | 
114 | 进行如上初始化后，先是通过接口获取到数据后，存入`data`里面的`imgList`，然后通过遍历`imgList`数组，把值“绑定”给 img 的 src 属性。
115 | 
116 | ```html
117 | <template>
118 |   <div class="container">
119 |     <img
120 |       class="img"
121 |       v-for="(item, index) in imgList"
122 |       :src="item"
123 |       :key="index"
124 |     />
125 |   </div>
126 | </template>
127 | 
128 | <script>
129 |   export default {
130 |     data() {
131 |       return {
132 |         imgList: []
133 |       }
134 |     },
135 |     methods: {
136 |       initData() {
137 |         axios
138 |           .get(
139 |             'https://easy-mock.com/mock/5e1aa4ff7f109b0caa4d2e26/learnvue/imglist'
140 |           )
141 |           .then(res => {
142 |             console.log(res, 'res')
143 |             this.imgList = res.data.data.imgList   {1}
144 |           })
145 |           .catch(err => {
146 |             throw err
147 |           })
148 |       }
149 |     },
150 |     mounted() {
151 |       this.initData()   // 这里为方法的调用 在生命周期一节会讲
152 |     }
153 |   }
154 | </script>
155 | 
156 | <style scoped lang="">
157 |   .img {
158 |     width: 200px;
159 |     height: 200px;
160 |     margin: 5px;
161 |   }
162 | </style>
163 | ```
164 | 
165 | - 这里同样通过`axios`获取数据，并通过 `{1}` 处进行赋值操作。
166 | - 通过`v-for="(item, index) in imgList"` 遍历数组。
167 | - 通过`:src="item"` 把这个数组的每一项（即每一个 url）动态的绑定到 src 上，完整写法为`v-bind:src="item"`。
168 | - `:key="index"`给每一个图片标识一个`key`属性，值为当前项的索引（即 0/1/2/3 ...），完整写法为`v-bind:key="index"`。
169 | 
170 | 运行以上代码后，就会看到页面上出现了许多图片。
171 | 
172 | ---
173 | 
174 | <a href="javascript:history.go(-1)">返回上一页</a>
175 | 


--------------------------------------------------------------------------------
/docs/basics/watch.md:
--------------------------------------------------------------------------------
  1 | # 侦听器 watch
  2 | 
  3 | [[toc]]
  4 | 
  5 | ## 介绍
  6 | 
  7 | 侦听器 `watch` 可以用来监听一个数据的变化。`watch` 和 `computed`、`methods` 一样，都是一个对象。所以，他们都使用`:{}`的方式，并且处于同一级别。
  8 | 
  9 | ```js
 10 | 
 11 | data () {
 12 |     return {
 13 |         count: 0
 14 |     }
 15 | }
 16 | 
 17 | watch: {
 18 | 
 19 | },
 20 | computed: {
 21 | 
 22 | },
 23 | methods: {
 24 | 
 25 | }
 26 | ```
 27 | 
 28 | ## watch
 29 | 
 30 | 我们知道，computed 里面添加的是一个**新值**，并且可以在任何地方使用。而 watch 里面添加的是一个已经存在的表达式（变量）。watch 的使用方式分为好几种，下面我们来具体说明一下:
 31 | 
 32 | - 普通方式
 33 | 
 34 | ```js
 35 | computed: {
 36 |   count: (newValue, oldValue) {
 37 |       console.log('newValue', newValue)
 38 |       console.log('oldValue', oldValue)
 39 |   }
 40 | }
 41 | ```
 42 | 
 43 | 此时我们就已经设置好了对变量`count`进行了监听。如果`count`的值改变，那么会打印出对应的值。其中，`newValue`代表新值，`oldValue`代表旧值（newValue 和 oldValue 的名字可以随意更改，只代表第一个参数和第二个参数而已）。
 44 | 
 45 | 比如说，`count`初始化为 0, 那么我们把`count = 1`。此时，`newValue`为 1，`oldValue`为 0。
 46 | 
 47 | - 使用*方法*
 48 | 
 49 | ```js
 50 | methods: {
 51 |     countHandler: function(newValue, oldValue) {
 52 |       console.log('newValue', newValue)
 53 |       console.log('oldValue', oldValue)
 54 |     }
 55 | }
 56 | 
 57 | computed: {
 58 |     count: 'countHandler'
 59 | }
 60 | ```
 61 | 
 62 | 这种方式和上面是同样的效果。
 63 | 
 64 | - 使用`handler`（deep）
 65 | 
 66 | ```js
 67 | computed:{
 68 |     count: {
 69 |         handler: (newValue, oldValue) {
 70 |             ...
 71 |         },
 72 |         deep: true
 73 |     }
 74 | }
 75 | ```
 76 | 
 77 | 注意这里有一个`depp`选项，官网中的解释如下：
 78 | 
 79 | > 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
 80 | 
 81 | 正常来说，我们使用 watch 监听的是单个值，watch 能够正常使用。而如果是一个对象的话，那么 watch 只会监听到**内存地址**的改变，而监听不到对象里面值的改变。
 82 | 
 83 | 假如有如下代码：
 84 | 
 85 | ```js
 86 | 
 87 | data () {
 88 |     return {
 89 |         obj: {
 90 |             name: 'tim'
 91 |         }
 92 |     }
 93 | }
 94 | 
 95 | watch: {
 96 |     obj: function(newVal, oldVal) {
 97 |         console.log('newVal', newVal)
 98 |         console.log('oldVal', oldVal)
 99 |     }
100 | }
101 | ```
102 | 
103 | 我们设置了对 obj 对象的监听，当我们改变 obj 时：
104 | 
105 | ```js
106 | this.obj = {
107 |   name: 'sam'
108 | }
109 | ```
110 | 
111 | <img :src="$withBase('/computed-1.png')" />
112 | 
113 | 如上图所示，我们能够看到，控制台打印出了对应的信息，说明我们能够监听到。但是我们改变`obj`里面的值呢？我们把代码做一下改变：
114 | 
115 | ```js
116 | this.obj.name = 'sam'
117 | ```
118 | 
119 | 现在我们再看一下控制台，发现没有任何打印信息出现，说明我们没有监听到`name`属性。实际上，我们对`obj`设置了`watch`，只是监听了它的内存地址，如果`obj`的内存地址改变了，`watch`才会响应。
120 | （有关内存地址，可以网上找一下`const`声明对象的原理）
121 | 
122 | 那么我们想要监听到`obj`里面的属性，或者说监听`name`属性，我们有两种方法：
123 | 
124 | 1. 其一是，如上面所示，我们可以给`watch`的`obj`里面添加`deep: true`这一条属性，代表我们进行深度监听。但是`obj`里面的任何值改变，该函数都会执行。
125 | 
126 | 加上了`deep: true`属性后，发现控制台打印出了对应的`newVal`和`oldVal`了。
127 | 
128 | 2.  其二是，对`name`属性进行单独的监听，可以进行如下设置：
129 | 
130 | ```js
131 | computed: {
132 |     'obj.name': function(newVal, oldVal) {
133 |         // ...
134 |     }
135 | }
136 | ```
137 | 
138 | 这样，只要`obj.name`的值改变，才会执行对应的函数！
139 | 
140 | - 使用*方法*（immediate）
141 | 
142 | ```js
143 | computed: {
144 |     count: {
145 |       handler: function(newVal, oldVal) {},
146 |       immediate: true
147 |     },
148 | }
149 | ```
150 | 
151 | 可以看到，我们又换了一个属性`immediate`，什么意思呢？来自官网的解释如下：
152 | 
153 | > 该回调将会在侦听开始之后被立即调用
154 | 
155 | 这里比较好理解，意思就是，设置监听后，会立马调用监听的函数。正常来说，最开始的几种方法在页面加载完毕后，都不会打印`newVal`。而设置了`immediate`属性后，页面加载完毕控制台就会打印出`newVal`。
156 | 
157 | 还有其他方法请查看[官方文档](https://cn.vuejs.org/v2/api/#watch)
158 | 
159 | 以上说了一大堆方法可能大家有点蒙，别着急，目前我日常使用过程中，比较常用的就是：
160 | 
161 | ```js
162 | 
163 | computed: {
164 |     count(newVal, oldVal) {
165 |         // ...
166 |     }
167 |     // 或者
168 |     'obj.name'(newVal, oldVal){
169 |         // ...
170 |     }
171 | }
172 | ```
173 | 
174 | 侦听器固然好用，但是也会造成滥用，那么[官方文档](https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7-vs-%E4%BE%A6%E5%90%AC%E5%B1%9E%E6%80%A7)里面有对应的例子，这里就不在细说了。
175 | 


--------------------------------------------------------------------------------
/docs/introduction/introduce.md:
--------------------------------------------------------------------------------
  1 | # 介绍
  2 | 
  3 | [[toc]]
  4 | 
  5 | ## 模板语法
  6 | 
  7 | 在官网文档开始介绍的开头，有这么一句话
  8 | 
  9 | > Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
 10 | 
 11 | 单单这一句话就有好几个名词，简化一下可以这么理解：
 12 | 
 13 | vue.js 允许采用模板语法（`{{}}`）来将数据渲染进 DOM 里。
 14 | 
 15 | ```html
 16 | <div id="app">
 17 |   {{message}}
 18 | </div>
 19 | ```
 20 | 
 21 | ```js
 22 | var app = new Vue({
 23 |   el: '#app',
 24 |   data: {
 25 |     message: 'Hello Vue!'
 26 |   }
 27 | })
 28 | ```
 29 | 
 30 | 上例来自于官网，可以看出，官网都是基于引入 CND 的方式来举的例子，即引入 vue 的`<script>`标签。不过我准备通过 vue-cli 脚手架生成的项目来进行讲解，所以 本文后面的例子都是基于`vue-cli`生成的项目进行举例。
 31 | 
 32 | 上例中,[`el`代表](https://cn.vuejs.org/v2/api/#el)（element）把页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。而`{{}}`就是 vue 提供的模板语法，用来渲染数据使用的。`{{}}`里面放入`data`中的变量，即可渲染对应的值。如果你不想用`{{}}`的形式，可以通过`delimiters`进行改变。
 33 | 
 34 | ```js
 35 | new Vue({
 36 |   delimiters: ['${', '}']
 37 | })
 38 | ```
 39 | 
 40 | 经过以上设置后，渲染变量不在通过`{{}}`，而是`${}`。
 41 | 
 42 | 这里先打开我们初始化好的名为`test`的 vue 项目，打开命令行工具，输入`npm run serve`（vue 3.x 以上） | `npm run dev`（vue 2.x）即可启动项目 按提示在浏览器输入路径即可访问项目。
 43 | 
 44 | 这里为了简化操作，直接修改`src/components/HelloWorld.vue`文件，初始化为:
 45 | 
 46 | ```html
 47 | <template>
 48 |   <div></div>
 49 | </template>
 50 | 
 51 | <script>
 52 |   export default {
 53 |     data() {
 54 |       return {}
 55 |     }
 56 |   }
 57 | </script>
 58 | 
 59 | <style></style>
 60 | ```
 61 | 
 62 | 那么上例可以重写为：
 63 | 
 64 | ```html
 65 | <template>
 66 |   <div>{{message}}</div>
 67 | </template>
 68 | 
 69 | <script>
 70 |   export default {
 71 |     data() {
 72 |       return {
 73 |         message: 'Hello Vue!'
 74 |       }
 75 |     }
 76 |   }
 77 | </script>
 78 | 
 79 | <style></style>
 80 | ```
 81 | 
 82 | 注意这里有点区别，在 vue 项目里，每个页面都是由一个或多个`.vue`文件组成的，而每个`.vue`文件里面，分别由`<template> <script> <style>`标签组成。
 83 | 
 84 | ## 文件结构
 85 | 
 86 | ### template
 87 | 
 88 | `<template>`标签里面存放的就是我们的`html`代码，以后所有关于`html`的代码都需要放在`template`里面。同时，为了保证 vue 能够正常的渲染 dom 树结构，每个组件必须**只有一个根元素**，也就意味着**大部分情况下**，`<template>`标签里面只能有一个`<div>`标签。
 89 | 
 90 | 为了测试一下，我把页面改为：
 91 | 
 92 | ::: danger 警告
 93 | 
 94 | ```html
 95 | <template>
 96 |   <div>{{message}}</div>
 97 |   <div>{{message}}</div>
 98 | </template>
 99 | ```
100 | 
101 | :::
102 | 
103 | 果不其然，页面报错了。所以，各位朋友以后写的时候一定要注意，`<template>`标签下只能有一个“根”标签哦。
104 | 
105 | ### script
106 | 
107 | `<script>`标签里面存放的是我们的`javascript`代码啦，通过`es6`的`export`方式导出。如果没有学习过 es6 的朋友看不懂没关系，页面结构是固定模式，每个页面都需要这样初始化。但是，**对于一个合格的前端来说， es6 语法是必须要会的，所以各位要抓紧学习啦**。
108 | 
109 | 细心的朋友可能注意到，`<script>`标签里面的`data`在两个例子中有些区别，一个是`data {}` 一个是`data() {}`。如果学过 es6 语法的朋友肯定知道`data() {}`代表一个函数，一个对象的函数。如果用 es5 的语法是这样的`data: function() {}`。
110 | 
111 | 那么为什么需要声明一个函数呢？[官网有解释](https://cn.vuejs.org/v2/guide/components.html#data-%E5%BF%85%E9%A1%BB%E6%98%AF%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0)。因为我们在写代码的时候，需要新建多个`.vue`文件，如果没有以函数的方式声明，就会影响到其他文件的变量，所以我们应该以函数的方式声明：
112 | 
113 | ```js
114 | // es6
115 | export default {
116 |   data() {
117 |     return {
118 |       message: 'hello'
119 |     }
120 |   }
121 | }
122 | 
123 | // es5
124 | export default {
125 |   data: function() {
126 |     return {
127 |       message: 'hello'
128 |     }
129 |   }
130 | }
131 | ```
132 | 
133 | 以上两种方式都可以。但是如果不使用函数声明，浏览器控制台会报错。
134 | 
135 | ### style
136 | 
137 | `<style>`标签用来声明 css 样式，这个不需要多介绍。不过`<style>`标签和上面的`data`有共同的特性，即所有的**类名**是共通的。Vue 通过提供[scoped](https://cn.vuejs.org/v2/guide/comparison.html#%E7%BB%84%E4%BB%B6%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%86%85%E7%9A%84-CSS)属性，可以让 css 只存在于当前组件内。用法为:
138 | 
139 | ```html
140 | <style scoped>
141 |   #app {
142 |     // ... some css
143 |   }
144 | </style>
145 | ```
146 | 
147 | > Vue 的单文件组件里的样式设置是非常灵活的。通过 vue-loader，你可以使用任意预处理器、后处理器，甚至深度集成 CSS Modules——全部都在 `<style>` 标签内
148 | 
149 | 所以，如果你想要使用`sass、less和stylus`的话，只需要指定一个`lang`属性，即：
150 | 
151 | ```html
152 | <style scoped lang="less">
153 |   #app {
154 |     // ... some css
155 |   }
156 | </style>
157 | ```
158 | 
159 | 使用上述预处理器的时候，需要先安装对应的包和 loader 哦，如: `npm install less less-loader -S`。
160 | 
161 | 到目前为止，你已经学会了创建一个基本的文件结构，并且了解了各个标签的使用。下面即将开始学习 Vue 具体功能的使用。
162 | 


--------------------------------------------------------------------------------
/docs/introduction/installation.md:
--------------------------------------------------------------------------------
  1 | # 安装
  2 | 
  3 | [[toc]]
  4 | 
  5 | ## 起步
  6 | 
  7 | 有两种方式使用 Vue，一种方式是通过**CND**的方式引入 Vue.js；另一种方式是使用`vue-cli`构建一个完整的 Vue 项目。
  8 | 
  9 | 1. 通过 CDN 方式引入：
 10 | 
 11 | ```html
 12 | <!-- 开发环境版本，包含了有帮助的命令行警告 -->
 13 | <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 14 | ```
 15 | 
 16 | 或者：
 17 | 
 18 | ```html
 19 | <!-- 生产环境版本，优化了尺寸和速度 -->
 20 | <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 21 | ```
 22 | 
 23 | 注意这里有两个名词，**开发环境**和**生产环境**，那分别是什么意思呢:skull:？
 24 | 
 25 | - 开发环境： 我们在开发写代码的时候使用的环境，包含错误提示和警告。
 26 | - 生产环境： 项目写完了，正式发布到服务器上，一些错误提示会关闭。
 27 | 
 28 | 现在我们需要的就是**开发环境**的 CDN 了，直接在项目里面引入`<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>`即可。
 29 | 
 30 | 2. 构建完整的 Vue 项目
 31 | 
 32 | 此方式通过`vue-cli`脚手架生成，但是官方文档指出：
 33 | 
 34 | > 请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。
 35 | 
 36 | 不过，我还是建议通过`vue-cli`来生成一个完整的项目，因为这样能够学习`cli`的使用、`npm`的使用和学会构建一个完整的 Vue 项目。至于为什么尤大建议初学者使用 CDN 的方式，我在尤大的某篇回答里面看到，大概意思是：
 37 | 
 38 | > Vue 一直很重视 引入一个 script 就可以开始写 的用例，这样保证了新人上手的低门槛。
 39 | 
 40 | 所以，选择哪种方式就看你自己了，选择哪种方式都不会影响 Vue 的学习
 41 | 
 42 | ::: warning 警告
 43 | 
 44 | 如果你准备通过`vue-cli`的方式构建`vue`，则需要先学会`vue-cli`和`npm`的使用，所以，我需要先简单介绍一下这两个工具的使用。如果你准备通过 CDN 的方式来学习 Vue，则可以略过接下来的内容，[点击进入下一节的学习](introduce.html)。
 45 | 
 46 | :::
 47 | 
 48 | ## npm
 49 | 
 50 | `npm`是随同`Node.js`一起安装的包管理工具，想要使用`npm`，则需要先安装`Node.js`。安装`Node.js`是必不可少的步骤，各位可以先百度一下安装`Node.js`，这里不再赘述。
 51 | 
 52 | 安装好了之后，打开`cmd`，输入`npm --version`，如果弹出版本号，说明安装成功。
 53 | ::: tip 提示
 54 | 由于 npm 的服务器在国外，所以在国内下载比较慢，可以配置下国内镜像，具体操作自行百度哦
 55 | :::
 56 | 
 57 | cmd 打开方式，window 系统下
 58 | 
 59 | - `win+r`，输入 cmd，即可打开 cmd。
 60 | - 按住`shift` -> 点击鼠标右键 -> 选择`在此处打开命令行窗口`即可打开 cmd
 61 | 
 62 | 这里有必要集中说明一下 npm 的常用命令。
 63 | 
 64 | - `npm run dev`|`npm run serve` 启动 vue-cli 生成的项目。其中，`npm run dev`为 vue-cli 2.x 版本的命令；`npm run serve`为 vue-cli >=3 以上的版本的命令。
 65 | - `npm run build` 为打包命令，一般在项目开发完成后，进行打包上传，之后就可以进行访问了。
 66 | - `npm i <name>` 为`npm install <name>`的简写，意为包的下载命令。其中：
 67 |   - `npm install -S <name>` 为`npm install --save <name>`的简写，意为 把包安装在`dependencies`目录下，`dependencies`在 package.json 文件里面可以看到。**这里面存放的包为开发写代码和项目上线后使用的包**。
 68 |   - `npm install -D <name>` 为`npm install --save-dev <name>`的简写，意为 把包安装在`devDependencies`目录下，`devDependencies`同样在 package.json 文件里面找到。**这里面存放的包为我们开发写代码时候使用的包，项目上线后不再使用**。
 69 | 
 70 | **一般情况下**，我们需要使用`npm install -S <name>`的命令来安装一些包，比如： `npm install -S axios` 、 `npm install -S vue-router` 和 `npm install -S vue-vuex`
 71 | 
 72 | `package.json`文件里面包含项目的配置信息，其中里面可以看到这个项目安装的包，一般在下载别人的项目后，需要`npm install`安装包，**注意这里不需要写包的名字，直接就可以下载**。
 73 | 
 74 | ## vue-cli
 75 | 
 76 | [vue-cli](https://cli.vuejs.org/zh/)，是 vue 官方提供的脚手架，用来**生成完整的 vue 项目**。
 77 | 
 78 | 同时，vue-cli 2.x 和 以上版本命令有些区别，生成后的内容也有很大区别。这里我**建议大家使用 vue-cli 2.x 来生成项目**，因为 vue-cli 4.x 默认配置生成的项目 eslint 检查比较严格，对于新手不太友好，而 vue-cli 2.x 生成的项目，则相对来说没有那么严格。
 79 | 
 80 | - 使用 vue-cli 4.x
 81 | 
 82 | 首先需要**全局安装** vue-cli ，在 cmd 下输入命令`npm install -g @vue/cli`
 83 | 
 84 | vue-cli 4.x 使用`vue create <name>`的方式来生成， `name`为项目名称
 85 | 
 86 | ```js
 87 | vue create test
 88 | // 生成一个名为 `test`的项目
 89 | 
 90 | 
 91 | default (babel, eslint)
 92 | Manually select features
 93 | 
 94 | // 接下来有两个选项，第一个为 `默认配置`，安装babel（编译器） 和 eslint（代码检查）
 95 | // 第二个选项为自己选配。
 96 | ```
 97 | 
 98 | 经过“漫长”的等待，屏幕上出现
 99 | 
100 | ```js
101 | $ cd test
102 | $ npm run serve
103 | ```
104 | 
105 | 即代表着项目初始化完成，按照指示输入上述**输入命令**即可运行服务
106 | 
107 | 默认在浏览器输入`http://localhost:8080/`即可访问项目（这里根据 8080 端口是否被占用而生成不同的端口，按照提示访问即可）。
108 | 
109 | - 使用 vue-cli 2.x
110 | 
111 | 如果想要使用`vue-cli 2.x`生成的项目，根据[官方文档](https://cli.vuejs.org/zh/guide/creating-a-project.html#%E6%8B%89%E5%8F%96-2-x-%E6%A8%A1%E6%9D%BF-%E6%97%A7%E7%89%88%E6%9C%AC)指出:
112 | 
113 | > Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：
114 | 
115 | ```js
116 | npm install -g @vue/cli-init
117 | # `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
118 | vue init webpack my-project
119 | ```
120 | 
121 | vue-cli 2.x 使用 `vue init webpack <name>`的方式来生成，`name`为项目名称。 运行后，一路按`enter`即可。
122 | 
123 | 到这里为止，你已经学会了使用`vue-cli`生成一个完整的 Vue 项目，下面即将开始 Vue 的学习。
124 | 


--------------------------------------------------------------------------------
/docs/advanced/components/props.md:
--------------------------------------------------------------------------------
  1 | # 父向子传值 props
  2 | 
  3 | [[toc]]
  4 | 
  5 | ## 介绍
  6 | 
  7 | 当我们实际使用此组件的时候，发现这个简单的`Button`组件并不能满足我们的需求。我们想要的是漂亮的按钮。并且会改变颜色的按钮。漂亮的按钮我们可以通过 css 来美化，那么会改变颜色的按钮是什么意思呢？
  8 | 
  9 | 从我们前面学习组件的知识来看，我们把组件写成什么样，我们引入过来后，页面就会显示什么样。但是我们总不能挨个把每个颜色的按钮都封装起来吧，那样就太 low 了。
 10 | 
 11 | 所以，我们要基于目前的`Button`组件，来实现根据传入不同的值，显示不同颜色的按钮。
 12 | 
 13 | Vue 为此提供了`props`属性，我们可以向组件传入值，并且在组件内可以接收值。大家可以想到，`Button.vue`是一个按钮组件吧？`index.vue`是一个“页面”吧？那么我们在`index.vue`中引入`Button.vue`，说明`index.vue`是“父亲”，`Button.vue`是“儿子”，这就叫**父向子传值**。
 14 | 
 15 | ## props
 16 | 
 17 | 在讲解之前，我们需要明确一个概念。我们在`index.vue`中，想要向`Button.vue`组件传入值，这个值可以是任何类型的值，然后在`Button.vue`中接收值。
 18 | 
 19 | 明确了概念后，我们开始讲`props`了。
 20 | 
 21 | `props`就是在一个文件内，用来接收值的。跟`methods、computed`等一样，他们都是相同的地位。不过，`props`可以有不同的写法：
 22 | 
 23 | ```js
 24 | // first
 25 | props: {
 26 |   xxx
 27 | },
 28 | // second
 29 | 
 30 | props: [xxx, xxx, xxx],
 31 | ```
 32 | 
 33 | 前面说了，除了美化样式外，我们想要的是不同颜色的按钮。所以，我们可以定义一个`color`选项，用来**接收**值的
 34 | 
 35 | ```js
 36 | props: {
 37 |     color: {
 38 |         type: String,
 39 |         required: true
 40 |     }
 41 | }
 42 | ```
 43 | 
 44 | 我们使用对象的写法，因为可以进行灵活的配置，其中，`type`为接收的类型，`require`可以设置为必填项。更多的配置信息请参考[官方文档](https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E9%AA%8C%E8%AF%81)
 45 | 
 46 | 定义好了接收的`color`后，我们需要设定值的范围，比如说：`['primary', 'success', 'error', 'warning']`，不过这个范围是**我们自己定义的**。
 47 | 
 48 | ```html
 49 | <template>
 50 |   <div class="container">
 51 |     <button :class="color">Click Me</button>
 52 |   </div>
 53 | </template>
 54 | 
 55 | <script>
 56 |   export default {
 57 |     data() {
 58 |       return {}
 59 |     },
 60 |     props: {
 61 |       color: {
 62 |         type: String,
 63 |         required: true
 64 |       }
 65 |     },
 66 |     components: {},
 67 |     computed: {},
 68 |     watch: {},
 69 |     methods: {},
 70 |     created() {},
 71 |     mounted() {},
 72 |     updated() {},
 73 |     destroyed() {}
 74 |   }
 75 | </script>
 76 | 
 77 | <style scoped>
 78 |   button {
 79 |     border: none;
 80 |   }
 81 |   .success {
 82 |     color: #fff;
 83 |     background: forestgreen;
 84 |   }
 85 |   .error {
 86 |     color: #fff;
 87 |     background: #ff0000;
 88 |   }
 89 |   .primary {
 90 |     color: #fff;
 91 |     background: blue;
 92 |   }
 93 |   .warning {
 94 |     color: #fff;
 95 |     background: yellow;
 96 |   }
 97 | </style>
 98 | ```
 99 | 
100 | 可以看出来，我们定义颜色的范围是为了我们设置好对应的 class。 接着，使用`v-bind`把`color`跟`class`绑定在一起
101 | 
102 | 以上操作我们基本完成了组件接收值的操作，剩下的就是在父组件中传递值了。这一步非常简单，我们来看
103 | 
104 | ```js
105 | <Button color="success"></Button>
106 | ```
107 | 
108 | 想要传值，我们只需要在使用组件里面添加对应的值即可。我们需要接收`color`，那么我们就需要在组件里面写上`color="xxx"`，xxx 为你要传入的值，为`['primary', 'success', 'error', 'warning']`
109 | 。
110 | 
111 | 除了直接写上`color="xxx"`外，我们还可以对`color`进行动态的绑定值，比如说：
112 | 
113 | ```js
114 | <Button :color="dynamicColor"></Button>
115 | 
116 | data () {
117 |     return {
118 |         dynamicColor: 'success'
119 |     }
120 | }
121 | ```
122 | 
123 | 这样，我们就通过变量灵活的控制按钮的颜色了。
124 | 
125 | ## slot
126 | 
127 | 在使用了上面的组件后，我们会发现，虽然可以根据传递`color`来改变颜色，但是每个按钮的内容全是一样的：`Click Me`。我们想要的是不同的内容，可能我们需要的是：`确定`或者是`取消`。所以，我们还可以在传入一个`name`选项，用来设置按钮的内容。
128 | 
129 | ```js
130 | 
131 | // index.vue
132 | <Button :color="dynamicColor" name="确定"></Button>
133 | 
134 | 
135 | // Button.vue
136 | 
137 | <button :class="color" v-text="name"></button>
138 | 
139 | props: {
140 |     color: {
141 |         type: String,
142 |         required: true
143 |     },
144 |     name: {
145 |         type: String,
146 |         required: true
147 |     }
148 | }
149 | 
150 | ```
151 | 
152 | 虽然上面同样实现了动态传入按钮的内容，但是略显得麻烦。Vue 提供了一个`<slot>`插槽，用来接收传过来的内容，可以是 html，非常的方便。
153 | 
154 | 那么我们把关于`name`的所有代码删除，添加`<slot>`：
155 | 
156 | ```html
157 | <!-- Button.vue -->
158 | <button :class="color">
159 |   <slot></slot>
160 | </button>
161 | 
162 | <!-- index.vue -->
163 | <button color="error">
164 |   this is a button
165 | </button>
166 | ```
167 | 
168 | 可以看到，我们只需要在`Button`组件内，添加一个`<slot></slot>`标签，然后在`index.vue`里面，像普通标签一样，在组件内填写内容就行了。这就是基本`slot`插槽的应用。
169 | 
170 | ::: tip 提示
171 | 
172 | 关于插槽的写法还有很多种，本文只是做一个抛砖引玉，更多写法请参考[官方文档](https://cn.vuejs.org/v2/guide/components-slots.html#ad)
173 | 
174 | :::
175 | 


--------------------------------------------------------------------------------
/docs/basics/instructs/v-model.md:
--------------------------------------------------------------------------------
  1 | # v-model
  2 | 
  3 | [[toc]]
  4 | 
  5 | ## 介绍
  6 | 
  7 | v-model 用来绑定:
  8 | 
  9 | ```html
 10 | - <input>
 11 | - <select>
 12 | - <textarea>
 13 | - components
 14 | ```
 15 | 
 16 | 前面三项都是基于表单，最后一项`components`表示*组件*。关于组件的知识我们会在后面说明。
 17 | 
 18 | ## v-model
 19 | 
 20 | v-model 就是用来**创建双向数据绑定**，可以监听表单的输入，并自动更新数据，所以叫双向绑定。
 21 | 
 22 | 一个最经典的例子就是：
 23 | 
 24 | ```html
 25 | <template>
 26 |   <div class="container">
 27 |     <input type="text" v-model="message" />
 28 |     <p v-show="message">{{message}}</p>
 29 |   </div>
 30 | </template>
 31 | 
 32 | <script>
 33 |   export default {
 34 |     data() {
 35 |       return {
 36 |         message: 'hello Vue~'
 37 |       }
 38 |     },
 39 |     methods: {}
 40 |   }
 41 | </script>
 42 | 
 43 | <style scoped lang=""></style>
 44 | ```
 45 | 
 46 | <v-model-example1 />
 47 | 
 48 | 随着改变 input 中的内容，下面的 p 标签里面的内容也会随之改变，这就是双向绑定。
 49 | 
 50 | 在我们实际工作中，其应用最广泛的就是获取表单输入值，进行校验后，发送给后台。完整的例子将在最后给出。
 51 | 
 52 | ### 修饰符
 53 | 
 54 | `v-on`可以使用修饰符，`v-model`同样可以使用修饰符，`v-model`可用的修饰符有以下三个：
 55 | 
 56 | - `.lazy`
 57 | 
 58 | 默认情况下，每次监听到输入值后通过`input`事件，`v-model`都会自动同步更新。而使用`.lazy`后，`v-model`会改为使用`change`事件，变为失去焦点后，进行同步。
 59 | 
 60 | 那么我们把上例中`<input>`的`v-model`添加上`.lazy`修饰符后：
 61 | 
 62 | ```html
 63 | <input type="text" v-model.lazy="message" />
 64 | ```
 65 | 
 66 | <v-model-example2 />
 67 | 
 68 | 此刻可以看到，当你在改变 input 表单中的值时，不会马上同步更新，而当你鼠标点击别处（即失去焦点）时，下面的内容才会随之改变。
 69 | 
 70 | - `.number`
 71 | 
 72 | `.number`修饰符可以让用户输入的值转化为数值类型。同时需要注意，`.number`修饰符需要搭配`<input>`标签的 `type="number"`属性一起使用！
 73 | 
 74 | 使用场景为：输入手机号 / 身份证号 等。
 75 | 
 76 | <v-model-example3 />
 77 | 
 78 | - `.trim`
 79 | 
 80 | `.trim`可以自动过滤用户输入的首尾空白字符。
 81 | 
 82 | 使用场景为： 大部分表单验证部分都可使用。比如说，用户表单里输入
 83 | 
 84 | ```
 85 | `    123456`
 86 | ```
 87 | 
 88 | 那么我们获取到的值是：一堆空白+123456，那么使用`.trim`后，我们获取到的值为`123456`。
 89 | 
 90 | ## 小例子
 91 | 
 92 | ### 一个简单的登录页
 93 | 
 94 | 一个登陆页面包含账号和密码，获取到用户输入的数据后进行校验，校验通过后发送给后台。
 95 | 
 96 | 首先初始化一个模板：
 97 | 
 98 | ```html
 99 | <template>
100 |   <div class="container">
101 |     <input type="number" />
102 |     <input type="text" />
103 |     <button>登录</button>
104 |   </div>
105 | </template>
106 | 
107 | <script>
108 |   export default {
109 |     data() {
110 |       return {}
111 |     },
112 |     methods: {}
113 |   }
114 | </script>
115 | 
116 | <style scoped lang=""></style>
117 | ```
118 | 
119 | 然后添加表单和登陆按钮，初始化好 `data` 中用来存储账号（`nickname`）和密码（`password`）的变量，并使用 `v-on:click` 监听 `login` 函数:
120 | 
121 | ```html
122 | <!-- 账号默认为手机号 -->
123 | <input type="number" v-model.number="nickname" />
124 | <input type="text" v-model.trim="password" />
125 | <button @click="login">登录</button>
126 | 
127 | <script>
128 |   export default {
129 |       data() {
130 |         return {
131 |           nickname: '', // 账号
132 |           password: '' // 密码
133 |         }
134 |       },
135 |       methods: {
136 |           // es6
137 |           login() {}
138 | 
139 |           // es5
140 |           login: function() {}
141 |       }
142 |   }
143 | </script>
144 | ```
145 | 
146 | 账号为手机号，所以我们使用`.number`修饰符来进行过滤；密码我们使用`.trim`过滤空白字符；登陆按钮通过 `click` 监听 `login`函数，剩下的就是验证输入值和发送给后台了：
147 | 
148 | ```html
149 | <script>
150 |   export default {
151 |     data() {
152 |       return {
153 |         nickname: '', // 账号
154 |         password: '' // 密码
155 |       }
156 |     },
157 |     methods: {
158 |       // es6
159 |       login() {
160 |         let params = {
161 |           nickname: this.nickname,
162 |           password: this.password
163 |         }
164 |         // 这里应该使用正则表达式验证手机号，为了简化操作，只验证位数
165 |         if (params.nickname.toString().length !== 11) {
166 |           return window.alert('请输入正确的手机号')
167 |         }
168 | 
169 |         if (params.password === '') {
170 |           return window.alert('请输入密码')
171 |         }
172 | 
173 |         //   axios.post('xxx', params).then()   这里进行发送数据
174 |         window.alert('登陆成功！')
175 |       },
176 | 
177 |       // es5   里面内容大部分相同，不再做展示
178 |       login: function() {}
179 |     }
180 |   }
181 | </script>
182 | ```
183 | 
184 | <v-model-example4 />
185 | 
186 | 至此，我们就完成了一个简单的校验工作。如果验证通过后，通过 axios 发送给后台即可，然后根据返回过来的状态来显示登陆成功或失败。
187 | 
188 | ---
189 | 
190 | <a href="javascript:history.go(-1)">返回上一页</a>
191 | 


--------------------------------------------------------------------------------
/docs/advanced/components/components-basics.md:
--------------------------------------------------------------------------------
  1 | # 组件 components
  2 | 
  3 | [[toc]]
  4 | 
  5 | ## 介绍
  6 | 
  7 | 组件是什么呢？能用来干什么呢？在以前传统的项目中，我们使用`.html`作为一个页面。同时，页面中会有很多重复的地方，页面和页面之间也有很多重复的代码。幸好的是，在现在我们可以通过以组件的方式来复用这些代码。
  8 | 
  9 | 比如说，一个官网的首页，有 header，有中间的主要内容，有 footer。那么我们就可以把 header 和 footer 分别抽离出一个组件，哪个页面需要 header 或者 footer，我们直接引入进来就可以了。这样不仅节省了大量的时间还少写了很多重复的代码。
 10 | 
 11 | 那么在 Vue 中，一个“页面”可以由大量的组件组成。引用一下官网的图片如下所示：
 12 | 
 13 | ![](https://cn.vuejs.org/images/components.png)
 14 | 
 15 | 可以看到，最上面的那一个“方块”就可以表示为一个“页面”，下面的所有分支都可以代表一个个组件。可以说，一个“页面”就可以由多个组件组成。
 16 | 
 17 | 介绍完了组件的含义和好处后，我们开始进入正题，在 Vue 中如何组成组件？和如何使用组件？
 18 | 
 19 | ## 注册组件
 20 | 
 21 | Vue 提供了`Vue.component()`这个 api 来注册一个组件，组件名为`()`里面的第一个选项：
 22 | 
 23 | ```js
 24 | Vue.component('component-a', {
 25 |   template: `
 26 |         <div>This is component-a</dvi>
 27 |     `
 28 | })
 29 | ```
 30 | 
 31 | 这样我们就注册了一个名为`component-a`的**全局组件**。注意是全局组件，也就是说，在任何地方我们都可以使用这个组件，而且有一点需要注意，就是组件**名字不能重复**。所以，除了注册一个全局组件外，还可以注册有一个局部组件，那么这个局部组件只能在当前的文件中使用。
 32 | 
 33 | ```js
 34 | var componentA = {
 35 |   // ...
 36 | }
 37 | ```
 38 | 
 39 | 这样，就完成了一个局部组件的注册。
 40 | 
 41 | 有一点我需要声明一下，本文主要是向大家讲解一下如何学习我们工作中最常使用的方法。所以，以上方式我在工作中并没有经常使用，我也不准备深入讲解以上方法，更具体的信息可以查阅官方文档中关于[组件基础](https://cn.vuejs.org/v2/guide/components.html)/[深入了解组件](https://cn.vuejs.org/v2/guide/components-registration.html)一节。
 42 | 
 43 | 所以，我接下来要讲的是我工作中最常使用的注册组件和使用注册的方式，也就是如何将一个`.vue`文件注册为一个组件和**怎么使用它**。更多关于此方法优点的描述请查看[官方文档](https://cn.vuejs.org/v2/guide/single-file-components.html)
 44 | 
 45 | ::: warning 注意
 46 | 在此之前，你需要学会使用`vue-cli`构建一个完整的 Vue 项目。接下来都是对于此方式进行讲解。同时，你还需要知道点`es6 import、export`的知识。
 47 | :::
 48 | 
 49 | ### 深入注册组件
 50 | 
 51 | 在讲怎么使用之前，我想举一个例子，就是赵本上老师的小品，把大象放冰箱需要几步。
 52 | 
 53 | - 首先，我们得有一个“大象”吧，那第一步意味着我们需要得到一个大象。
 54 | - 其次，就是打开冰箱门
 55 | - 再次，把“大象”放入冰箱
 56 | - 最后，关上冰箱门
 57 | 
 58 | 那么，在我们 Vue 中，跟上面几步其实差不多。
 59 | 
 60 | - 注册组件
 61 | - 引入组件
 62 | - 放入`components`中
 63 | - 使用组件
 64 | 
 65 | 下面我们来分解一下以上步骤
 66 | 
 67 | #### 注册组件
 68 | 
 69 | 根据项目规范，我们所有的页面文件都放在`src`目录下，其中创建一个`views`文件夹存放我们的页面文件，`components`文件夹用来存放我们的组件文件。一个`.vue`文件就是一个组件，所以我们可以在`components`目录下创建一个`Button.vue`，新建一个按钮的组件。那么我们可以在`Button.vue`里面放入如下代码结构:
 70 | 
 71 | ```html
 72 | <template>
 73 |   <div class="container">
 74 |     <button>Click Me</button>
 75 |   </div>
 76 | </template>
 77 | 
 78 | <script>
 79 |   export default {
 80 |     data() {
 81 |       return {}
 82 |     },
 83 |     components: {},
 84 |     computed: {},
 85 |     watch: {},
 86 |     methods: {
 87 |       // type your function
 88 |     },
 89 |     created() {},
 90 |     mounted() {},
 91 |     updated() {},
 92 |     destroyed() {}
 93 |   }
 94 | </script>
 95 | 
 96 | <style scoped></style>
 97 | ```
 98 | 
 99 | 以上就创建了一个`Button.vue`的组件。
100 | 
101 | #### 引入组件
102 | 
103 | 引入组件这就涉及到了`es6`的内容，不过 如果你还没有学习，不用担心，你只需要一条指令就可以完成组件的引入，以后你再补`es6`中关于`import/export`的知识即可。
104 | 
105 | `import xxx from 'xxx'`
106 | 
107 | 上面这条指令就是引入组件的命令，其中，第一个 xxx 是文件名，第二个 xxx 是这个文件对应的路径。
108 | 
109 | - 文件名比较简单，如上例的话，就是`Button`。那么，全写为`import Button from 'xxx`
110 | - 文件路径可以有两种方式，一种是**相对路径**，另一种是基于`webpack`配置的`@(src)`的路径。
111 |   - 相对路径，是基于当前文件的路径。假如你在`views`目录下创建了一个`index.vue`的文件，那么基于此文件的路径就是`../components/Button.vue`。全写为`import Button from '../components/Button.vue`
112 |   - `@`或者`src`， 是通过`webpack`配置的路径，使用`@`或者`src`就代表从`src`目录下开始查找文件。全写为`import Button from '@/components/Button.vue`
113 | 
114 | 以上完成了在一个“页面”中引入组件。
115 | 
116 | #### 放入 components
117 | 
118 | 这一步相当于“把大象放入冰箱的步骤”，引入在一个`.vue`文件里面，只通过`import`引入组件是使用不了的，还需要在`components`里面声明一下。
119 | 
120 | `components`相当于一个容器，里面放着的是你引入的组件。其中，`components`跟`methods、computed、data、watch`是同级别的。
121 | 
122 | 我们引入了`Button`组件后，需要在`components`里面声明一下：
123 | 
124 | ```html
125 | <script>
126 |   import Button from 'xxx'
127 |   export default {
128 |     data() {
129 |       return {}
130 |     },
131 |     computed: {},
132 |     watch: {},
133 |     components: {
134 |       Button: Button
135 |     }
136 |   }
137 | </script>
138 | ```
139 | 
140 | 通过`Button: Button`就完成了一个组件的声明，代表着你可以在本页中使用`Button`组件了。
141 | 
142 | 如果你知道`es6`对象值的简写的话，上面还可以写成：
143 | 
144 | ```js
145 | components: {
146 |   Button
147 | }
148 | ```
149 | 
150 | 效果相同，看着简洁多了。
151 | 
152 | ::: tip 提示
153 | 我记得我刚开始学习的时候，这一步经常落下，所以各位小伙伴们，千万不要把这一步落下！！！
154 | :::
155 | 
156 | ::: warning 注意
157 | 
158 | 是`components`不是`component`
159 | 
160 | 是`components`不是`component`
161 | 
162 | 是`components`不是`component`
163 | 
164 | :::
165 | 
166 | #### 使用组件
167 | 
168 | 最后一步是最轻松的了，我们只需要在需要的位置写上组件就可以了。
169 | 
170 | ```js
171 | <button></button>
172 | 
173 | // 或者
174 | 
175 | <Button></Button>
176 | ```
177 | 
178 | 以上就是一个组件从注册到引入到声明到使用的步骤，看起来挺复杂，实际上，等你熟悉了之后，使用组件会非常方便。而且你注册了一次组件后，就不需要在注册组件了，只需要重复 2.3.4 步就可以了。
179 | 


--------------------------------------------------------------------------------
/docs/basics/class-and-style.md:
--------------------------------------------------------------------------------
  1 | # Class 与 Style 绑定
  2 | 
  3 | [[toc]]
  4 | 
  5 | ## 介绍
  6 | 
  7 | 在日常工作中，避免不了需要操作 style 样式和 class，我们可以使用`v-bind`来操作他们。通过`v-bind` 指令，我们可以使用**表达式、对象和数组**来对他们进行控制。
  8 | 
  9 | > 因为本节比较好理解，所以基本参考[官方文档](https://cn.vuejs.org/v2/guide/class-and-style.html)。
 10 | 
 11 | ## class
 12 | 
 13 | 我们可以根据变量来动态的切换 class，最终结果只会渲染出计算后的 class。
 14 | 
 15 | ```html
 16 | <div :class="{active: isActive}"></div>
 17 | 
 18 | data: { isActive: true }
 19 | ```
 20 | 
 21 | 结果为：
 22 | 
 23 | ```html
 24 | <div style="active"></div>
 25 | ```
 26 | 
 27 | 其中，左侧为 class，右侧为变量。只有变量的值为`truthy`时，才会渲染对应的 class。
 28 | 
 29 | 除了可以使用`v-bind`来绑定 class 外，还可以与原生 class 共存：
 30 | 
 31 | ```html
 32 | <div class="test" :class="{active: isActive}"></div>
 33 | data: { isActive: true }
 34 | ```
 35 | 
 36 | 结果为：
 37 | 
 38 | ```html
 39 | <div class="test active"></div>
 40 | ```
 41 | 
 42 | 如果样式多了，写在 html 里面比较麻烦，也可以在`data`里面定义一个对象：
 43 | 
 44 | ```html
 45 | <div class="test" :class="classObject"></div>
 46 | data: { classObject: { active: true, test: false } }
 47 | ```
 48 | 
 49 | 除了可以使用`对象{}`的方式，还可以通过`数组[]`进行绑定：
 50 | 
 51 | ```html
 52 | <div :class="[activeClass, testClass]"></div>
 53 | data: { activeClass: 'active', testClass: 'test' }
 54 | ```
 55 | 
 56 | 结果为：
 57 | 
 58 | ```html
 59 | <div class="active test"></div>
 60 | ```
 61 | 
 62 | 但是这样写的话，写在上面的所有 class 都会渲染出来，那么想要条件渲染可以在数组里面使用对象的语法：
 63 | 
 64 | ```html
 65 | <div :class="[{activeClass: isActiveClass}, testClass]"></div>
 66 | data: { isActiveClass: true, activeClass: 'active', testClass: 'test' }
 67 | ```
 68 | 
 69 | ## style
 70 | 
 71 | 同样，style 与 class 一样，都可以通过**对象**和**数组**的方式进行绑定。
 72 | 
 73 | ```html
 74 | <!-- 对象方式 -->
 75 | <div :style="{ color: Color, height: Height + 'px' }"></div>
 76 | data: { Color: '#000', Height: 100 }
 77 | 
 78 | <!-- 数组方式 -->
 79 | <div :style="['Color', 'Height']"></div>
 80 | data: { Color: '#000', Height: '100px' }
 81 | ```
 82 | 
 83 | 更完整的信息请参阅[官方文档](https://cn.vuejs.org/v2/guide/class-and-style.html)
 84 | 
 85 | ## 小例子
 86 | 
 87 | ### 动态的切换导航页高亮
 88 | 
 89 | 一个常见的需求，就是顶部导航栏或底部导航栏的点击高亮，那么我们通过`v-bind:class`就可以实现这个功能。不过，这个小例子需要搭配`v-for`一起使用。
 90 | 
 91 | 首先我们初始化一个模板：
 92 | 
 93 | ```html
 94 | <template>
 95 |   <div class="container"></div>
 96 | </template>
 97 | 
 98 | <script>
 99 |   export default {
100 |     data() {
101 |       return {}
102 |     },
103 |     methods: {}
104 |   }
105 | </script>
106 | 
107 | <style scoped></style>
108 | ```
109 | 
110 | 然后简单的添加一个导航栏，在添点样式（不能一直这样丑下去啊:kissing_heart:）：
111 | 
112 | ```html
113 | <div class="container">
114 |   <section>
115 |     <span class="item" v-for="(i, index) in 5">标签{{index+1}}</span>
116 |   </section>
117 | </div>
118 | 
119 | <style scoped>
120 |   .item {
121 |     margin-right: 7px;
122 |     cursor: pointer;
123 |     font-size: 16px;
124 |     font-weight: 500;
125 |   }
126 | </style>
127 | ```
128 | 
129 | 我们首先给导航栏加一个鼠标滑过改变字体颜色的效果吧，那么我们可以使用`v-bind:style`来动态的绑定一个 color 颜色，首先你应该思考一下怎么做，然后在看我的思路：
130 | 
131 | ```html
132 | <div class="container">
133 |   <section>
134 |     <span
135 |       :style="{color: hoverIndex === index ? '#3498db' : ''}"
136 |       @mouseenter="hoverIndex = index"
137 |       @mouseleave="hoverIndex = -1"
138 |       class="item"
139 |       v-for="(i, index) in 5"
140 |       >标签{{index+1}}</span
141 |     >
142 |   </section>
143 | </div>
144 | 
145 | <script>
146 |   export default {
147 |     data() {
148 |       return {
149 |         hoverIndex: -1
150 |       }
151 |     },
152 |     methods: {}
153 |   }
154 | </script>
155 | 
156 | <style scoped>
157 |   .item {
158 |     margin-right: 7px;
159 |     cursor: pointer;
160 |     font-size: 16px;
161 |     font-weight: 500;
162 |   }
163 | </style>
164 | ```
165 | 
166 | <class-example1-1 style="margin: 35px 0;" />
167 | 
168 | 通过预览效果能够看到，我们鼠标放上去，颜色字体改变了。这就是通过动态的添加 style 的 color 来改变的，下面我们来分析一下具体的操作：
169 | 
170 | - 在我们使用`v-for`遍历时，有一个 index ，代表当前的索引项，分别为 0、1、2...，那么对于我们的例子来说，就是`0、1、2、3 和 4`。
171 | - `@mouseenter="hoverIndex = index"` 这一步是最为重要，这里使用了我们前面学习的`v-on`的语法，监听了`mouseenter`事件，当鼠标放在**当前的 span 标签时**，设置`hoverIndex`变量等于**index**。通过这一步，我们就知道了**当前鼠标放在的是哪一个 span 标签**。
172 | - `:style="{color: hoverIndex === index ? '#3498db' : ''}"` 使用三元表达式，对 color 的字体颜色进行求值，表示：如果 hoverIndex 等于 当前的**索引项**的话，就添加*蓝色*，否则*什么都不做*。所以，我们知道了鼠标滑过的是哪一个 span 标签后，在设置值就可以了。
173 | - `@mouseleave="hoverIndex = -1"` 这一步，是清除动作，鼠标离开后，把值初始化为-1。为-1 不等于任何 index（0-4）。所以鼠标离开后，不会有任何标签高亮。
174 | 
175 | 在经过以上解释后，相信大家已经有了初步的了解，那么我们在设置点击标签后，添加高亮理解起来也就比较方便了。
176 | 
177 | 跟动态绑定`style`一样，添加高亮我们使用`v-bind:class`，那么我们就设置一个 class：
178 | 
179 | ```css
180 | .active {
181 |   border-bottom: 2px solid #e74c3c;
182 | }
183 | ```
184 | 
185 | 上面是鼠标滑过，添加颜色效果。这次是点击标签，添加 class。那么就需要使用 `v-on` 来监听 `click` 事件。先自己思考一下，然后继续看如下代码：
186 | 
187 | - 首先添加一个变量，用来控制当前**点击的是哪个标签**。我们知道，导航肯定得有一个是高亮状态，不可能没有高亮的标签，所以我们初始化为 0，这样第一个标签自动变成高亮状态。
188 | 
189 | ```js
190 | activeIndex: 0
191 | ```
192 | 
193 | - 添加`v-on:click`事件。跟上面一样，点击的时候，存储点击的 index。这样通过`activeIndex`变量，我们就知道当前点击的是哪个标签了。如果为 0，说明是第一个；为 1，说明是第二个，以此类推。
194 | 
195 | ```js
196 | @click="activeIndex = index"
197 | ```
198 | 
199 | - 接下来就是进行判断了，如果当前点击的项和`index`相同，那么就认为这个 span 标签需要添加高亮 class
200 | 
201 | ```js
202 | :class="{active: activeIndex === index}"
203 | ```
204 | 
205 | 那么通过以上设置后，效果如下：
206 | 
207 | <class-example1-2 style="margin: 35px 0;" />
208 | 
209 | 总结一下，就是通过一个**变量来储存当前的点击状态**，然后通过**变量与 index 进行对比** 来添加 class。
210 | 
211 | 如果你觉得以上你内容比较麻烦，那么还有一个简单的方法。如果你使用了`vue-router`的话，可以通过`<router-link>`自带的高亮 class 来添加对应的样式，引用[官方的话](https://router.vuejs.org/zh/guide/#javascript)就是:
212 | 
213 | > 要注意，当 `<router-link>` 对应的路由匹配成功，将自动设置 class 属性值 `.router-link-active`。查看 API 文档 学习更多相关内容。
214 | 
215 | 那么只要我们给`.router-link-active`这个 class 设置对应的高亮样式就可以了。
216 | 


--------------------------------------------------------------------------------
/docs/basics/instructs/conditional.md:
--------------------------------------------------------------------------------
  1 | # 条件渲染
  2 | 
  3 | [[toc]]
  4 | 
  5 | ## 介绍
  6 | 
  7 | 这一节讲的是条件渲染，顾名思义，就是动态的让一个元素显示或者隐藏。主要由两个指令构成，分别是`v-if`和`v-show`。下面我们分别对着两个指令进行详细分析。
  8 | 
  9 | ## v-if
 10 | 
 11 | [v-if](https://cn.vuejs.org/v2/guide/conditional.html)指令可以控制一个元素是否渲染。只有`v-if`的值为 truthy 后，才被渲染。关于 truthy 的解释可以查看[这篇文档](https://developer.mozilla.org/zh-CN/docs/Glossary/Truthy)。其实简单的说就是为“真值”的时候才渲染。
 12 | 
 13 | 还记得最开始的那个例子吗，让我们把它改变一下：
 14 | 
 15 | ```html
 16 | <template>
 17 |   <!-- change -->
 18 |   <div v-if="message">{{message}}</div>
 19 |   <!-- end -->
 20 | </template>
 21 | 
 22 | <script>
 23 |   export default {
 24 |     data() {
 25 |       return {
 26 |         message: 'Hello Vue!'
 27 |       }
 28 |     }
 29 |   }
 30 | </script>
 31 | 
 32 | <style></style>
 33 | ```
 34 | 
 35 | <div style="background: #fff; border: 1px solid #eee;padding: 25px 35px; margin-top: 10px; margin-bottom: 40px;">
 36 |     Hello Vue!
 37 | </div>
 38 | 
 39 | 上面代码标记出了改变的部分，我们使用`v-if`指令来控制`<div>`标签的显示或隐藏。`v-if="message"`表示，当`message`为 truthy 时，`<div>`标签显示，否则隐藏。
 40 | 
 41 | 所以，变量`message`的值为: `hello Vue!`，转换后为**真值**，所以，这个`<div>`标签能够显示出来。
 42 | 
 43 | 如果我们给值取个反呢？来看看，我们使用`!`进行取反操作：
 44 | 
 45 | ```html
 46 | <template>
 47 |   <!-- change -->
 48 |   <div v-if="!message">{{message}}</div>
 49 |   <!-- end -->
 50 | </template>
 51 | ```
 52 | 
 53 | <div style="background: #fff;  border: 1px solid #eee;padding: 25px 35px; margin-top: 10px; margin-bottom: 40px;">
 54 |  
 55 | </div>
 56 | 
 57 | 为了简化篇幅，没有改动的部分不做展示。 我们进行了取反操作后，果然，页面上原本的`hello Vue!`不见了。
 58 | 
 59 | ---
 60 | 
 61 | vue 还提供了`v-else`。当`v-if`为“假值”时，显示此元素。就跟 JavaScript 的`if/else`一样。
 62 | 
 63 | ```html
 64 | <!-- 根据页面只能有一个根元素的原则，这里改变一下结构 -->
 65 | <div>
 66 |   <h1 v-if="!message">{{message}}</h1>
 67 |   <h1 v-else>Message 被隐藏了</h1>
 68 | </div>
 69 | ```
 70 | 
 71 | <div style="background: #fff;  border: 1px solid #eee;padding: 25px 35px; margin-top: 10px; margin-bottom: 40px;">
 72 | Message 被隐藏了 
 73 | </div>
 74 | 
 75 | 通过上面例子可以看出，设置`v-else`的元素作为补充元素被显示出来。同时需要注意，`v-else`不需要提供任何值，同时只能作为`v-if`的补充。
 76 | 
 77 | > v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
 78 | 
 79 | 如果你想要在添加另外一个条件呢？ vue 又提供了`v-else-if`，用来充当`v-if`的下一个判断条件：
 80 | 
 81 | ```html
 82 | <template>
 83 |   <div>
 84 |     <h1 v-if="count < 0">count 小于0</h1>
 85 |     <h1 v-else-if="count == 0">count 等于0</h1>
 86 |     <h1 v-else>count 大于0</h1>
 87 | 
 88 |     <input type="number" v-model="count" />
 89 |   </div>
 90 | </template>
 91 | 
 92 | <script>
 93 |   export default {
 94 |     data() {
 95 |       return {
 96 |         count: 0
 97 |       }
 98 |     }
 99 |   }
100 | </script>
101 | ```
102 | 
103 | <!-- <div style="background: #fff;  border: 1px solid #eee;padding: 25px 35px; margin-top: 10px; margin-bottom: 40px;">
104 | count 等于0
105 | </div> -->
106 | 
107 | <v-if-example1 />
108 | 
109 | 这里为了更直观的展示`v-else-if`的效果，更换了一下例子中的值，把变量`message`更换为`count`，同时，分别把 count 与 0 进行了三次比较，显示比较后为 truthy 的元素。
110 | 
111 | 为了展示 vue 中的**双向绑定**，在下方添加了一个`<input>`，并设置另外一个指令`v-model`。现在你不需要搞懂`v-model`的意思，只需感受一下效果即可，试着修改一下 `input` 中的值。
112 | 
113 | ::: warning 注意
114 | 
115 | 在上例中`<h1 v-else-if="count==0">count 等于0</h1>` 进行比较时使用了`==`。相信大家应该知道`==`和`===`的区别。为了保证一致性推荐大家使用`===`。本例使用`==`是因为`<input>`输出的值为**字符串**，所以为了更直观的展示而使用`==`进行比较。
116 | 
117 | :::
118 | 
119 | ## v-show
120 | 
121 | `v-show`指令跟`v-if`指令一样，都是用来条件渲染元素。不过`v-show`没有`v-else`，只能单一的判断条件。而且`v-show`和`v-if`的渲染方式也有些区别，我们把上例进行如下修改：
122 | 
123 | ```html
124 | <h1 v-show="count < 0">count 小于0</h1>
125 | <h1 v-show="count == 0">count 等于0</h1>
126 | <h1 v-show="count > 0">count 大于0</h1>
127 | ```
128 | 
129 | 首先我们先把每个判断条件都改为`v-show`，然后把最后一个判断条件改为`count > 0`，因为`v-show`不支持`v-else`，只有`v-if`才能写`v-else`！
130 | 
131 | <v-if-example1-2 />
132 | 
133 | 进行了如上修改后，大家可能发现在效果上这两个例子看起来没有什么区别。但是实际上有很大的区别，大家可以打开 F12 控制台，然后选择`Elements`选项，观察`<h1>`标签的显示和隐藏。
134 | 
135 | ```html
136 | <template>
137 |   <div>
138 |     <h1 v-if="count1 < 0">count1 小于0</h1>
139 |     <h1 v-else-if="count1==0">count1 等于0</h1>
140 |     <h1 v-else>count1 大于0</h1>
141 | 
142 |     <input type="number" v-model="count1" />
143 | 
144 |     <h1 v-show="count2 < 0">count2 小于0</h1>
145 |     <h1 v-show="count2==0">count2 等于0</h1>
146 |     <h1 v-show="count2 > 0">count2 大于0</h1>
147 | 
148 |     <input type="number" v-model="count2" />
149 |   </div>
150 | </template>
151 | 
152 | <script>
153 |   export default {
154 |     data() {
155 |       return {
156 |         count1: 0,
157 |         count2: 0
158 |       }
159 |     }
160 |   }
161 | </script>
162 | 
163 | <style></style>
164 | ```
165 | 
166 | <v-if-example1-3 />
167 | 
168 | 对应的**控制台 Elements 选项卡页面显示应该如下**：
169 | 
170 | ```html
171 | <div>
172 |   <h1>count1 等于0</h1>
173 |   <input type="number" />
174 |   <h1 style="display: none;">count2 小于0</h1>
175 |   <h1>count2 等于0</h1>
176 |   <h1 style="display: none;">count2 大于0</h1>
177 |   <input type="number" />
178 | </div>
179 | ```
180 | 
181 | 从上面可以看出，`v-if`指令控制的选项，为“假值”的元素并没有在页面上显示出来。而`v-show`为“假值”的元素是通过`css`属性`display: none`进行隐藏的。
182 | 
183 | > 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
184 | 
185 | 所以总的来说就是，`v-if`如果为“真值”的情况下，**才会被渲染在页面上**，而`v-show`则是不管什么情况下，都会渲染，只不过会**通过 css 来进行隐藏**。
186 | 
187 | 那么引申出来的就是性能问题。现在大家思考一下上面的例子，是使用`v-if`比较好呢，还是使用`v-show`比较好呢？答案是：使用`v-show`比较好。
188 | 
189 | 因为我们在一个表单里面可以随意的输入任意数值，而只要输入的数值等于 0 或小于 0，对应的`<h1>`标签就需要从新计算，`v-show`只需要简单的切换一下 css 属性就可以切换了。而如果使用`v-if`的话，就需要重新渲染元素了。
190 | 
191 | > 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
192 | 
193 | ## 小例子
194 | 
195 | ### 根据用户信息来给用户展示不同的界面
196 | 
197 | 一般来说，在一个前后端分离的项目中，前端负责接收后端传过来的数据，然后展示页面。在 Vue 中，一般都是使用`axios`来发送 http 请求。我们接收到数据后，进行渲染。（在最后会提及`axios`的使用）
198 | 
199 | 假设有一个**会员中心**页面，只有当用户为会员时，才展示对应的用户信息，否则展示申请会员界面。
200 | 
201 | ```html
202 | <template>
203 |   <div class="container">
204 |     <!-- 会员展示用户信息 -->
205 |     <div class="member">
206 |       <p>姓名： {{userInfo.name}}</p>
207 |       <p>年龄： {{userInfo.age}}</p>
208 |       <p>性别： {{userInfo.sex === 1 ? '男' : '女'}}</p>
209 |     </div>
210 | 
211 |     <!-- 非会员展示申请页面 -->
212 |     <div class="noMember">
213 |       <h1>你现在不是会员哦！</h1>
214 |       <button>点击申请</button>
215 |     </div>
216 |   </div>
217 | </template>
218 | 
219 | <script>
220 |   export default {
221 |     data() {
222 |       return {
223 |         userInfo: {
224 |           name: 'tim',
225 |           age: 10,
226 |           sex: 1, // 1 男 2 女
227 |           isMember: 0 // 0 为非会员 1 为会员
228 |         }
229 |       }
230 |     }
231 |   }
232 | </script>
233 | 
234 | <style scoped></style>
235 | ```
236 | 
237 | 我们进行如上初始化，`data`里面的`userInfo`就是我们请求到的数据，一般我们都会使用`1或2`等 数字来表示`是或否`，比如说，`性别sex`，我们不会接收为`sex: '男'`，只会接收到`sex: 1`这样的形式。
238 | 
239 | 当我们请求到数据并写好页面后，就轮到判断是否是会员了。大家想一下，在页面初始化的时候，我们获取数据，接着进行判断，最后页面进行相对应的渲染。渲染一次之后，页面不会再切换了，只会展示一次，要么你是会员，就显示会员信息，要么你不是会员，则显示申请会员。 这么分析后，大家应该知道我们是使用`v-if`还是`v-show`了吧，我们把剩下的补上。
240 | 
241 | ```html
242 | <template>
243 |   <div class="container">
244 |     <div v-if="userInfo.isMember" class="member">
245 |       <p>姓名： {{userInfo.name}}</p>
246 |       <p>年龄： {{userInfo.age}}</p>
247 |       <p>性别： {{userInfo.sex === 1 ? '男' : '女'}}</p>
248 |     </div>
249 |     <div v-else class="noMember">
250 |       <h1>你现在不是会员哦！</h1>
251 |       <button>点击申请</button>
252 |     </div>
253 |   </div>
254 | </template>
255 | ```
256 | 
257 | 我们选择使用`v-if`进行判断，因为不在需要频繁的切换状态。这里有一点需要说明一下，`v-if="userInfo.isMember"`进行了简写，实际上为`v-if="userInfo.isMember === 1"`。
258 | ::: tip 提示
259 | 在 JavaScript 中，truthy（真值）指的是在布尔值上下文中，转换后的值为真的值。所有值都是真值，除非它们被定义为 假值（即除 false、0、""、null、undefined 和 NaN 以外皆为真值）。
260 | :::
261 | 
262 | 那我们换个思路来想，`if(1)`返回`true`，`if(0)`返回`false`。所以`v-if="userInfo.isMember"`会自动判断，如果为`1`就显示，为`0`就隐藏，最终表达式返回`0` ，则显示会员申请页面。
263 | 
264 | 这里还有一点没有提及，就是**模板语法**可以使用表达式，因为官网有提及，比较简单，就没有细说。上例我们使用**三元表达式** 进行判断，如果为`1`说明性别为男，我们就展示为男，否则展示为女。
265 | 
266 | 目前为止，我们已经学会了根据用户信息，来判断展示不同的界面。 我们在拓展一下，展示一下 Vue 自动更新数据的魅力。在上例的基础上，给申请按钮添加一个真实的点击事件:
267 | 
268 | ```html
269 | <button @click="userInfo.isMember = 1">点击申请</button>
270 | ```
271 | 
272 | 我们把**申请按钮**进行如下修改，现在你看不懂没关系，下面我们会介绍。我们只是简单的设置一个 click 事件，点击后把`isMember`的值设置为 1。
273 | 
274 | ::: warning 注意
275 | 这里为了展示效果，只是在`data`里面把值改变了，在真实的项目是需要发送`http`请求！
276 | :::
277 | 
278 | <v-if-example2 />
279 | 
280 | 现在，点击 `点击申请` 按钮后， 页面会马上展示 会员的界面，同时把申请界面进行隐藏。这里面的工作全是 Vue 在“背后”进行的，我们只需要改变一下对应的值即可。
281 | 
282 | ---
283 | 
284 | <a href="javascript:history.go(-1)">返回上一页</a>
285 | 


--------------------------------------------------------------------------------
/docs/advanced/components/emit.md:
--------------------------------------------------------------------------------
  1 | # 子向父传值 emit
  2 | 
  3 | [[toc]]
  4 | 
  5 | ## 介绍
  6 | 
  7 | 前面我们讲解了怎么封装一个单`.vue`文件组件，同时通过*父向子传值*来显示不同的内容和颜色。只不过目前这个`Button`按钮没有任何的作用，我们没有为它设置任何`v-on`监听器。所以，为了要真正的使用它，我们需要给它绑定一个事件。
  8 | 
  9 | 比如说，一个登录页面，我们使用了这个组件，并且把它作为登录按钮。那么，用户点击了这个登录按钮（也就是这个组件）后，我们需要发送 http 请求，这时我们需要使用`v-on`监听`click`事件。
 10 | 
 11 | 最“无脑”的写法，就是写在这个组件里，大概是这样：
 12 | 
 13 | ```html
 14 | <button :class="color" v-text="name" @click="login"></button>
 15 | 
 16 | <script>
 17 |   methods: {
 18 |     login() {
 19 |       // login event
 20 |     }
 21 |   }
 22 | </script>
 23 | ```
 24 | 
 25 | 虽然以上写法能够满足我们的需求，但是如果别的页面引入了这个组件呢？它可不一定同样是登录按钮，可能是*取消*按钮。所以，我们在这个组件内写**监听事件**是不被允许的。
 26 | 
 27 | 我们需要的是一个**通用事件**，每个页面都能触发这个`click`事件，并且触发不同的函数，传递不同的值。这时候`$emit`就派上了用场。
 28 | 
 29 | ## `$emit`
 30 | 
 31 | `$emit`用来触发当前实例上事件，附带参数都会传回给监听器回调。也就是说，通过`$emit`，我们能够在子组件内向父组件传递一个**事件**，这就是**子向父传值**。
 32 | 
 33 | 下面我们来看一下如何使用它：
 34 | 
 35 | ```html
 36 | <button :class="color" v-text="name" @click="$emit('btn-handler')"></button>
 37 | ```
 38 | 
 39 | 跟以前的代码相比，我们多了一行`@click="$emit('btn-handler')"`。意思是：我们通过`v-on`监听 button 的`click`，使用`$emit`触发传递回一个`btn-handler`事件。
 40 | 
 41 | ::: tip 提示
 42 | 有关`$emit`传递事件名的命名规范，请参考[官方文档](https://cn.vuejs.org/v2/guide/components-custom-events.html#%E4%BA%8B%E4%BB%B6%E5%90%8D)
 43 | :::
 44 | 
 45 | 目前为止，我们在子组件内，通过`$emit`向使用它的父组件传递回一个`btn-handler`事件。注意，我这里说的是`btn-handler`**事件**，那么我们只需要在父组件里，监听这个事件就好了啊。那么监听事件我们知道，使用`v-on`就可以了。所以，我们在引用这个组件的地方，加上监听器就可以了：
 46 | 
 47 | ```html
 48 | <button color="primary" content="登录" @btn-handler="xxx"></button>
 49 | ```
 50 | 
 51 | 可以看到，我在引入组件的时候，添加了一个不完整的代码`@btn-handler="xxx"`。这表示监听`btn-handler`事件，并触发右侧的表达式或者函数（这里为 xxx）。因为我们需要的是登录功能，所以，我们可以写成这样：
 52 | 
 53 | ```html
 54 | <button color="primary" content="登录" @btn-handler="login"></button>
 55 | 
 56 | <script>
 57 |   methods: {
 58 |       login() {
 59 |           console.log('login~')
 60 |       }
 61 |   }
 62 | </script>
 63 | ```
 64 | 
 65 | <component-example1 />
 66 | 
 67 | 现在你打开控制台，然后点击上面蓝色按钮，发现能够打印出`login~`，说明我们已经监听成功啦。这样，我们就完成了从子组件向父组件传递事件的过程。
 68 | 
 69 | ## 传递参数
 70 | 
 71 | 除了能够传递一个事件外，同时还能传递一个值，官网里面的解释已经比较简单明了了，所以推荐大家直接去看官方文档，[点击这里](https://cn.vuejs.org/v2/guide/components.html#%E4%BD%BF%E7%94%A8%E4%BA%8B%E4%BB%B6%E6%8A%9B%E5%87%BA%E4%B8%80%E4%B8%AA%E5%80%BC)查看。
 72 | 
 73 | 如果你看了后，对组件之间的互相传值还是有些困惑，没关系。下面我们通过一个例子来重新温习一下`Button`组件的使用。
 74 | 
 75 | ## 小例子
 76 | 
 77 | ### 点击按钮变色
 78 | 
 79 | 还是基于我们的`Button`组件，这次我们来点不一样的：点击按钮变换不同的颜色。
 80 | 
 81 | 首先是注册组件：
 82 | 
 83 | ```html
 84 | <!-- Button.vue -->
 85 | <template>
 86 |   <div>
 87 |     <button :class="color" v-text="content"></button>
 88 |   </div>
 89 | </template>
 90 | 
 91 | <script>
 92 |   export default {
 93 |     data() {
 94 |       return {}
 95 |     },
 96 |     props: {
 97 |       color: {
 98 |         type: String,
 99 |         required: true
100 |       },
101 |       content: {
102 |         type: String,
103 |         required: true
104 |       }
105 |     }
106 |   }
107 | </script>
108 | 
109 | <style scoped>
110 |   button {
111 |     border: none;
112 |     padding: 15px 20px;
113 |     border-radius: 3px;
114 |     cursor: pointer;
115 |   }
116 |   button:hover {
117 |     opacity: 0.9;
118 |   }
119 |   .success {
120 |     color: #fff;
121 |     background: #27ae60;
122 |   }
123 |   .error {
124 |     color: #fff;
125 |     background: #c0392b;
126 |   }
127 |   .primary {
128 |     color: #fff;
129 |     background: #3498db;
130 |   }
131 |   .warning {
132 |     color: #fff;
133 |     background: #d35400;
134 |   }
135 | </style>
136 | 
137 | <!-- index.vue -->
138 | 
139 | <template>
140 |   <div>
141 |     <button :color="color" content="change color"></button>
142 |   </div>
143 | </template>
144 | 
145 | <script>
146 |   import Button from 'src/components/Button.vue'
147 |   export default {
148 |     data() {
149 |       return {
150 |         color: 'primary'
151 |       }
152 |     },
153 |     components: {
154 |       Button
155 |     }
156 |   }
157 | </script>
158 | 
159 | <style scoped></style>
160 | ```
161 | 
162 | <component-example2 />
163 | 
164 | 我决定了，不要在丑下去了。所以，我改了些样式，并且把颜色更换了一下，这样美观多了是吧。
165 | 
166 | 首先注册组件`Button.vue`，并使用`props`接收两个值，分别是`color`和`content`，代表颜色和按钮的内容。并初始化了一些 class 样式，这样我们才能通过`v-bind:class`来变换不同的颜色。
167 | 
168 | 然后是`index.vue`，这里首先通过`import`引入`Button`组件，接着在`components`里面注册组件，最后在页面上使用。这里传递了两个值，分别为`color: 'primary'`和`content: 'change color'`。
169 | 
170 | 接下来就是改变按钮颜色的逻辑了，我们需要通过`Button.vue`向`index.vue`传递事件和值，然后去改变颜色。首先定义一个颜色的列表，然后获取随机的 index，最后把随机的颜色值传回过去就可以了。
171 | 
172 | ```html
173 | <!-- Button.vue -->
174 | <button :class="color" v-text="content" @click="btnClick"></button>
175 | 
176 | <script>
177 |   methods: {
178 |     btnClick() {
179 |         let value = ['success', 'error', 'primary', 'warning']  // {1}
180 |         let index = Math.random()   // {2}
181 |         let l = value.length   // {3}
182 |         index = Math.round((l - 1 ) * index)   // {4}
183 | 
184 |         // {5}
185 |         if(index > 3) index = 3
186 |         if(index < 0) index = 0
187 |         // console.log('index', index)
188 |         this.$emit('btn-handler', value[index])   // {6}
189 |     }
190 |   }
191 | </script>
192 | ```
193 | 
194 | 在`Button.vue`组件内，我们定义了一个函数，这次不再直接`$emit`传递了，而是把它写在函数内部。在函数内部，我们一一进行分析：
195 | 
196 | 1. 定义了一个颜色列表，所有的颜色都在这里
197 | 2. 获取到一个随机数，并赋值给`index`
198 | 3. 定义颜色列表的长度，并赋值给`l`
199 | 4. 这一步，是获取一个在颜色列表内的随机 index。其中，`l - 1`代表限定范围为 3，`*index`就是获取最后的随机数。最后的随机数应该为`0/1/2/3`
200 | 5. 为了不出错误，保险起见，我们在做一个处理，如果超过`0-3`的范围，我们就把它改变成边界（就是 0 或 3）。
201 | 6. 最后把获取到的**颜色值**传递获取。`value[index]`为颜色值。`$emit`的**第二个参数**为传递回去的参数！！！
202 | 
203 | 接着我们在接收值：
204 | 
205 | ```js
206 | <template>
207 |   <div>
208 |     <Button
209 |       :color="color"
210 |       content="change color"
211 |       @btn-handler="changeColor"
212 |     ></Button>
213 |   </div>
214 | </template>
215 | 
216 | <script>
217 |   export default {
218 |     data() {
219 |       return {
220 |         color: 'primary'
221 |       }
222 |     },
223 |     methods: {
224 |       changeColor(event) {
225 |         console.log('event', event)
226 |         this.color = event   // {1}
227 |       }
228 |     }
229 |   }
230 | </script>
231 | 
232 | <style scoped></style>
233 | ```
234 | 
235 | <component-example2-2 />
236 | 
237 | `event` 就是子组件传过来的值，我们使用`{1}`处，就可以完成值的改变。
238 | 
239 | 有人可能会觉得，为什么要这么麻烦的传来传去呢？为什么不直接在子组件内改变颜色的值呢？其实我们可以试一下，在子组件内，不使用`$emit`传递事件和值，直接修改通过`props`传过来的`color`的颜色。也就是`this.color = value[index]`。
240 | 
241 | 如果你试了，会发现，虽然功能正常使用，但是控制台会报错。也就是说，实际上我们不能直接在子组件里面修改父组件传过来的值，因为这样并不容易区分改变来源。
242 | 
243 | 所以，想要**便利**的使用“双向绑定”，Vue 提供了`update:xxx`模式，[点击这里](https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6)查看官方文档具体说明。其中，xxx 代表通过`props`传过来值的名字。`update:propsName`。
244 | 
245 | 所以，我们要修改的是`color`的值
246 | 
247 | - 第一步是在`Button`组件里，修改为`this.$emit('update:color', value[index])`。表示我们要直接修改`color`的值，值为`value[index]`。
248 | - 第二步是在使用组件的文件里(`index.vue`)把`@btn-handler="changeColor"`去掉，因为现在不需要监听事件了，修改`:color="color"` 为`:color.sync="color"`。
249 | 
250 | 修改后的为`<Button :color.sync="color" content="change color"></Button>`
251 | 
252 | 进行以上修改后，点击按钮后还是能够正常的改变颜色。
253 | 
254 | <hr />
255 | 
256 | 不知道有没有人注意到，点击按钮的时候，有时候两次按钮的颜色是一样的，**为了追求完美**，我们在完善一下这个功能！
257 | 
258 | 总的来说就是，当返回的颜色值和当前的颜色值一样时，在从新求一次值，直到不一样，并返回。
259 | 
260 | 我们以前写的函数逻辑如下：
261 | 
262 | ```js
263 | methods: {
264 |     btnClick() {
265 |         let value = ['success', 'error', 'primary', 'warning']  // {1}
266 |         let index = Math.random()   // {2}
267 |         let l = value.length   // {3}
268 |         index = Math.round((l - 1 ) * index)   // {4}
269 | 
270 |         // {5}
271 |         if(index > 3) index = 3
272 |         if(index < 0) index = 0
273 |         // console.log('index', index)
274 |         this.$emit('btn-handler', value[index])   // {6}
275 |     }
276 |   }
277 | ```
278 | 
279 | 现在我们要继续在`btnClick`函数里面添加代码逻辑了，但是有没有发现，在此函数里面写代码会越写越多，最终会各种逻辑都有，变得非常难理解。所以，我们需要拆分函数，我准备把获取颜色的逻辑拆分成一个`getColor`函数
280 | 
281 | ```js
282 | methods: {
283 |     btnClick() {
284 |         let result = this.getColor()
285 |         console.log('result', result)
286 |         this.$emit('update:color', result)
287 |     },
288 |     getColor() {
289 |         let value = ['success', 'error', 'primary', 'warning']
290 |         let index = Math.random()
291 |         let l = value.length
292 |         let color = this.color   // {1}
293 |         index = Math.round((l - 1 ) * index)
294 | 
295 |         // {2}
296 |         if(value[index] === color) {
297 |             return this.getColor()
298 |         }
299 | 
300 |         if(index > 3) index = 3
301 |         if(index < 0) index = 0
302 |         return value[index]
303 |     }
304 |   }
305 | ```
306 | 
307 | <component-example2-3 />
308 | 
309 | 我们在`{1}`处，储存了当前颜色。在`{2}`处，如果当前的颜色和随机颜色一样，则从新调用这个函数（这里一定要加上`return`，要不返回的颜色为第一次返回的颜色）。
310 | 
311 | <hr />
312 | 
313 | 除了从新调用函数外，我们还可以使用`while`循环来从新写一下这个函数
314 | 
315 | ```js
316 |     methods: {
317 |         btnClick() {
318 |             let result = this.getColor()
319 |             console.log('result', result)
320 |             this.$emit('update:color', result)
321 |         },
322 |         getColor() {
323 |             let value = ['success', 'error', 'primary', 'warning']
324 |             let index = Math.random()
325 |             let l = value.length
326 |             let color = this.color
327 |             index = Math.round((l - 1 ) * index)
328 | 
329 |             // {1}
330 |             do {
331 |                 index = Math.round((l - 1 ) * Math.random())
332 |             }
333 |             while(color === value[index])
334 | 
335 |             if(index > 3) index = 3
336 |             if(index < 0) index = 0
337 |             return value[index]
338 |         }
339 |     }
340 | ```
341 | 
342 | 在`{1}`处，添加了`do/while`逻辑，首先执行一下从新获取随机数。如果不相同，则返回值；如果相同，则继续获取随机数，直到不相同退出 while 循环。
343 | 
344 | 经过我个人测试，第二种方法使用 while 循环比第一种直接调用函数要快一些。
345 | 


--------------------------------------------------------------------------------
/docs/basics/instructs/list.md:
--------------------------------------------------------------------------------
  1 | # 列表渲染
  2 | 
  3 | [[toc]]
  4 | 
  5 | ## 介绍
  6 | 
  7 | 如果要渲染**一组数据**，那么在 Vue 中可以使用 v-for 指令。
  8 | 
  9 | ## 渲染数组
 10 | 
 11 | [v-for](https://cn.vuejs.org/v2/guide/list.html)指令是用来遍历渲染一组数据的。以`<child> in <parent>`的形式，`child`为数组的每一项子元素，也就是要被遍历的每一项；`parent`为数组本身。如`item in list`，那么，`list`就是一个数组，而`item`就是`list`数组里面的每一个子元素。`item` = `list[0]、list[1]、list[2]...list[n]`。下面看个例子：
 12 | 
 13 | ```html
 14 | <template>
 15 |   <div>
 16 |     <ul>
 17 |       <li v-for="item in list" :key="item.age">
 18 |         {{item.name}} --- {{item.age}}
 19 |       </li>
 20 |     </ul>
 21 |   </div>
 22 | </template>
 23 | 
 24 | <script>
 25 |   export default {
 26 |     data() {
 27 |       return {
 28 |         list: [
 29 |           {
 30 |             name: 'tim',
 31 |             age: 10
 32 |           },
 33 |           {
 34 |             name: 'sam',
 35 |             age: 15
 36 |           },
 37 |           {
 38 |             name: 'colin',
 39 |             age: 20
 40 |           }
 41 |         ]
 42 |       }
 43 |     }
 44 |   }
 45 | </script>
 46 | 
 47 | <style></style>
 48 | ```
 49 | 
 50 | <div style="background: #fff; border: 1px solid #eee;padding: 25px 35px; margin-top: 10px; margin-bottom: 40px;">
 51 |     <ul>
 52 |         <li>tim --- 10</li>
 53 |         <li>sam --- 15</li>
 54 |         <li>colin --- 20</li>
 55 |     </ul>
 56 | </div>
 57 | 
 58 | 同时，`v-for`还提供了`index`属性，即当前遍历项的索引:
 59 | 
 60 | ```html
 61 | <ul>
 62 |   <li v-for="(item, index) in list" :key="index">
 63 |     {{item.name}} --- {{item.age}}
 64 |   </li>
 65 | </ul>
 66 | ```
 67 | 
 68 | `index`跟`item`一起，放在一个括号里面，用`,`分隔。同时，我们可以把`key`属性换为`index`。 那么这个`key`是干什么用的呢？[官网文档](https://cn.vuejs.org/v2/api/#key)里面指出，`key`是在 Vue 的 dom 算法的时候，用来对比新旧`vnodes`的。因为 vue 采用虚拟 dom，当页面发生改变时，不会把所有的 html 元素全都改变，只会改变 发生改动的部分。
 69 | 同时还能够看到在 key 的前面有一个`:`，这个是`v-bind:`指令的简写形式。稍后会介绍`v-bind`。
 70 | 
 71 | 继续上面的例子，假设我们有一组数据，存放在`data`里面的`list`中，在页面上，我们通过`ul`的形式展现出来，因为我们要得到的是一个展现用户名字和年龄的列表，所以`v-for`指令要添加在`<li>`标签上，这样我们能够得到一个`<ul>`和一堆`<li>`，这也是我们需要的页面布局，如果我们把`v-for`指令放在`<ul>`上面呢？我们来看看:
 72 | 
 73 | ```html
 74 | <ul v-for="item in list" :key="item.age">
 75 |   <li>{{item.name}} --- {{item.age}}</li>
 76 | </ul>
 77 | ```
 78 | 
 79 | <div style="background: #fff; border: 1px solid #eee;padding: 25px 35px; margin-top: 10px; margin-bottom: 40px;">
 80 | <ul><li>tim --- 10</li></ul><ul><li>sam --- 15</li></ul><ul><li>colin --- 20</li></ul>
 81 | </div>
 82 | 
 83 | 比较明显的是每个`<li>`之间的缝隙变大了，而在看页面结构能看出我们最终渲染出来的是一堆`<ul>`标签和一个`<li>`，这说明`v-for`放在哪里，那么就遍历哪里。而我们需要的不过是一个展现列表而已，所以，第二种方式是错误的，我们**应该把`v-for`指令放在`<li>`标签上**！
 84 | 
 85 | ## 渲染对象
 86 | 
 87 | 还记得上一节中的小例子吗，这里把`userInfo`的数据拿过来，然后使用`v-for`渲染出来：
 88 | 
 89 | ```html
 90 | <template>
 91 |   <div class="container">
 92 |     <div v-if="userInfo.isMember" class="member">
 93 |       <!-- change -->
 94 |       <p v-for="(value, name, index) in userInfo" :key="index">
 95 |         {{name}}: {{value}}
 96 |       </p>
 97 |       <!-- end -->
 98 |     </div>
 99 |     <div v-else class="noMember">
100 |       <h1>你现在不是会员哦！</h1>
101 |       <button @click="userInfo.isMember = 1">点击申请</button>
102 |     </div>
103 |   </div>
104 | </template>
105 | 
106 | <script>
107 |   export default {
108 |     data() {
109 |       return {
110 |         userInfo: {
111 |           name: 'tim',
112 |           age: 10,
113 |           sex: 1, // 1男 2女
114 |           isMember: 0 // 0为非会员 1 为会员
115 |         }
116 |       }
117 |     }
118 |   }
119 | </script>
120 | 
121 | <style scoped lang=""></style>
122 | ```
123 | 
124 | 这里把渲染方式进行了修改，不是在手动写出每一项的内容，而是通过`v-for`进行了渲染。在`v-for`里面，我使用了`value, name, index`，这三个属性分别代表：
125 | 
126 | - value 当前项的值，对于`userInfo`来说，就是`tim、10、1 和 0`
127 | - name 当前项的 key，对于`userInfo`来说，就是`name、age、sex 和 isMember`
128 | - index 当前项的索引，也就是`0、1、2 和 3`
129 | 
130 | 通过以上分析，我们应该知道，我们以`name: value`的形式写出来，那么结果应该是这样的：
131 | 
132 | <div style="background: #fff; border: 1px solid #eee;padding: 25px 35px; margin-top: 10px; margin-bottom: 40px;">
133 |  <div data-v-e2779f08="" class="member"><p data-v-e2779f08="">name: tim</p><p data-v-e2779f08="">age: 10</p><p data-v-e2779f08="">sex: 1</p><p data-v-e2779f08="">isMember: 1</p></div>
134 | </div>
135 | 
136 | 以上就是关于`v-for`的全部内容了，可能有些人还对`:key`属性有些不解，没关系，我们将在下一小节讲解`v-bind:`的使用。不过在此之前，我们还是要通过几个例子来加深一下印象。
137 | 
138 | ## 小例子
139 | 
140 | ### 展示表格数据
141 | 
142 | ```js
143 | ;[
144 |   {
145 |     date: '2016-05-02',
146 |     name: '王小虎',
147 |     address: '上海市普陀区金沙江路 1518 弄'
148 |   },
149 |   {
150 |     date: '2016-05-04',
151 |     name: '王小虎',
152 |     address: '上海市普陀区金沙江路 1517 弄'
153 |   },
154 |   {
155 |     date: '2016-05-01',
156 |     name: '王小虎',
157 |     address: '上海市普陀区金沙江路 1519 弄'
158 |   },
159 |   {
160 |     date: '2016-05-03',
161 |     name: '王小虎',
162 |     address: '上海市普陀区金沙江路 1516 弄'
163 |   }
164 | ]
165 | ```
166 | 
167 | 现在假设我们有一组数据，然后使用`table`进行展示，我们当然不可能每一项都手动写出来，所以这时候可以使用`v-for`来渲染:
168 | 
169 | ```html
170 | <template>
171 |   <div class="container">
172 |     <table>
173 |       <thead>
174 |         <tr>
175 |           <th>data</th>
176 |           <th>name</th>
177 |           <th>address</th>
178 |         </tr>
179 |       </thead>
180 |       <tbody>
181 |         <tr v-for="(item, index) in list" :key="index">
182 |           <td>{{item.date}}</td>
183 |           <td>{{item.name}}</td>
184 |           <td>{{item.address}}</td>
185 |         </tr>
186 |       </tbody>
187 |     </table>
188 |   </div>
189 | </template>
190 | 
191 | <script>
192 |   export default {
193 |     data() {
194 |       return {
195 |         list: [
196 |           {
197 |             date: '2016-05-02',
198 |             name: '王小虎',
199 |             address: '上海市普陀区金沙江路 1518 弄'
200 |           },
201 |           {
202 |             date: '2016-05-04',
203 |             name: '王小虎',
204 |             address: '上海市普陀区金沙江路 1517 弄'
205 |           },
206 |           {
207 |             date: '2016-05-01',
208 |             name: '王小虎',
209 |             address: '上海市普陀区金沙江路 1519 弄'
210 |           },
211 |           {
212 |             date: '2016-05-03',
213 |             name: '王小虎',
214 |             address: '上海市普陀区金沙江路 1516 弄'
215 |           }
216 |         ]
217 |       }
218 |     }
219 |   }
220 | </script>
221 | 
222 | <style scoped lang=""></style>
223 | ```
224 | 
225 | 在接下来的大部分例子中，为了让大家关注业务逻辑和代码，我将会省略 css 样式。
226 | 
227 | 在上面的代码中，我们使用`v-for`来遍历渲染一组数据 `list`，本身没有什么难点，但在实际项目中，我们需要在`data`里面定义`list`，然后在请求到数据后，把数据赋值给`list`，之后页面就会自动完成渲染工作。
228 | 
229 | 为了给大家更真实的“游戏”体验，我给大家`Mock`了一组数据，并创建了一个使用`get`请求访问的接口，地址为：`https://easy-mock.com/mock/5e1980617f109b0caa4d2d5e/listExample`
230 | 
231 | 那么，使用真实的接口后，代码为：
232 | 
233 | ```html
234 | <template>
235 |   <div class="container">
236 |     <table>
237 |       <thead>
238 |         <tr>
239 |           <th>data</th>
240 |           <th>name</th>
241 |           <th>address</th>
242 |         </tr>
243 |       </thead>
244 |       <tbody>
245 |         <tr v-for="(item, index) in list" :key="index">
246 |           <td>{{ item.date }}</td>
247 |           <td>{{ item.name }}</td>
248 |           <td>{{ item.address }}</td>
249 |         </tr>
250 |       </tbody>
251 |     </table>
252 |   </div>
253 | </template>
254 | 
255 | <script>
256 |   export default {
257 |     data() {
258 |       return {
259 |         list: [] // 初始化好一个`list`空数组
260 |       }
261 |     },
262 |     methods: {
263 |       initData() {
264 |         axios
265 |           .get(
266 |             'https://easy-mock.com/mock/5e1980617f109b0caa4d2d5e/listExample'
267 |           )
268 |           .then(res => {
269 |             console.log(res, 'res')
270 | 
271 |             this.list = res.data.data.list // 这条代码最重要 是赋值代码
272 |           })
273 |           .catch(err => {
274 |             throw err
275 |           })
276 |       }
277 |     },
278 |     mounted() {
279 |       this.initData() // 这里是调用代码 在本文的生命周期一节中会讲解
280 |     }
281 |   }
282 | </script>
283 | 
284 | <style scoped lang=""></style>
285 | ```
286 | 
287 | ::: warning 注意
288 | 
289 | 上例使用了用于 Http 请求的`axios`。如果要使用的话，需要在`index.html`的`<head>`标签中放入如下 cdn:`<script src="https://unpkg.com/axios/dist/axios.min.js"></script>`。真实的项目里面，应该通过`npm install axios -S`的方式安装`axios`的 npm 包，然后在项目引用。
290 | :::
291 | 
292 | 关于 axios 在本文的最后会进行讲解，这里不多做介绍，大家只需要关注以下几点：
293 | 
294 | 1. 如果要使用`list`，则需要在`data`里面初始化一个`list: []`。`list: []`代表：初始化一个 list 变量，并赋值为一个空数组。
295 | 2. 在 js 代码里面访问`data`**里面的变量**，比如`list`，我们需要以`this.xxx`的形式，在本例中是`this.list`（在某些情况下可能使用 var \_this = this;）。
296 | 3. `res.data.data.list`就是我们通过接口获取到真实的数据。（可以通过 F12 控制台查看数据）
297 | 4. 我们通过`this.list` = `res.data.data.list` 把获取到的数据**赋值**给本地的`list`，然后页面就会自动渲染。
298 | 5. 如果 A 页面有 list 变量，B 页面也有 list 变量，那么会不会冲突呢？答案是**不会**，因为我们使用的是`data(){}`函数，上面也讲过，每个组件之间不会互相影响。
299 | 
300 | 上面的代码使用的 es6 语法，那么使用 es5 语法的代码如下：
301 | 
302 | ```html
303 | <script>
304 |   export default {
305 |     data() {
306 |       return {
307 |         list: []
308 |       }
309 |     },
310 |     methods: {
311 |       initData: function() {
312 |         console.log(this, '外部的this') // {1}
313 |         var _this = this
314 |         axios
315 |           .get(
316 |             'https://easy-mock.com/mock/5e1980617f109b0caa4d2d5e/listExample'
317 |           )
318 |           .then(function(res) {
319 |             console.log(res, 'res')
320 |             console.log(this, '内部的this') // {2}
321 |             console.log(_this, '_this')
322 | 
323 |             _this.list = res.data.data.list
324 |           })
325 |           .catch(function(err) {
326 |             throw err
327 |           })
328 |       }
329 |     },
330 |     mounted() {
331 |       this.initData()
332 |     }
333 |   }
334 | </script>
335 | ```
336 | 
337 | 因为使用 es5 语法，出现了 this 指向问题。所以，我们需要在函数开始位置把 this 储存起来，然后在函数内部依然能获取到 vue 实例。 也就是说，在`{1}`的时候，this 指向 vue 实例，而在`{2}`的时候，`this`指向`undefined`。
338 | 
339 | 至于为什么使用 es6 语法的**箭头函数**能够通过`this`访问 vue 实例，而是用`es5`传统的函数方式不能够访问，大家可以在网上自行查找一下关于：**箭头函数 this 作用域** 的文章。
340 | 
341 | ---
342 | 
343 | <a href="javascript:history.go(-1)">返回上一页</a>
344 | 


--------------------------------------------------------------------------------
/docs/basics/lifecycle.md:
--------------------------------------------------------------------------------
  1 | # 生命周期 lifecycle
  2 | 
  3 | [[toc]]
  4 | 
  5 | 理解生命周期函数对于我们来说至关重要，但是也不需要你马上理解其所有内容，官方文档里有一张图片，展示了生命周期的过程。
  6 | 
  7 | > 你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。
  8 | 
  9 | <img src="https://cn.vuejs.org/images/lifecycle.png">
 10 | 
 11 | ## 介绍
 12 | 
 13 | 生命周期，就是 Vue 实例从创建到销毁经过的一系列过程。不同的阶段可以访问的数据有很大区别，接下来的分析参考官方文档。
 14 | 
 15 | ::: tip 提示
 16 | 
 17 | 下面会使用 `debugger;` 语句进行断点分析，如果不了解 `debugger` 的可以查看一下[MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/debugger)。
 18 | 
 19 | :::
 20 | 
 21 | ## beforeCreate
 22 | 
 23 | > 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
 24 | 
 25 | 在使用 `new Vue()`创建 Vue 实例后，进入初始化阶段。此时，不能访问到 data 里面的数据，也不能访问到 watch 和 methods 里面的函数。
 26 | 
 27 | 在进行测试之前，先初始化如下模板:
 28 | 
 29 | ```html
 30 | <template>
 31 |   <div class="container">
 32 |     <p>{{message}}</p>
 33 |   </div>
 34 | </template>
 35 | 
 36 | <script>
 37 |   export default {
 38 |     data() {
 39 |       return {
 40 |         message: 'hello Vue'
 41 |       }
 42 |     },
 43 |     methods: {
 44 |       test() {
 45 |         console.log('test function')
 46 |       }
 47 |     },
 48 |     beforeCreate() {
 49 |       try {
 50 |         console.log('进入 beforeCreated')
 51 |         console.log(this.message, 'message')
 52 |         let body = document.querySelector('body')
 53 |         console.log(body, 'body')
 54 |         this.test()
 55 |         debugger
 56 |       } catch (e) {
 57 |         console.error(e)
 58 |         debugger
 59 |       }
 60 |     }
 61 |   }
 62 | </script>
 63 | 
 64 | <style scoped lang=""></style>
 65 | ```
 66 | 
 67 | 项目启动后，打开控制台可以看到如下信息
 68 | 
 69 | <br />
 70 | <img :src="$withBase('/life-1.png')">
 71 | 
 72 | 以上信息说明：
 73 | 
 74 | - 控制台打印 `进入 beforeCreated`。表示首先开始进入 `beforeCreated` 生命周期函数。
 75 | - 接着打印 `data` 里面的 `message`，发现值为 `undefined`。说明在此生命周期函数内，并不能访问到 `data` 里面的值。
 76 | - 接着打印 body。虽然能打印出来，但是发现`#app`的 div 里面并没有任何内容，说明 **虚拟 dom** 还没有渲染出来。
 77 | - 接着调用 `test` 函数。发现控制台报错了，提示 `test` 不是一个函数，说明在此不能访问`methods`里面的任何函数。
 78 | 
 79 | 通过以上分析，此生命周期为初始化阶段，数据、函数、watch 等事件不能访问到。**轻度使用**。
 80 | 
 81 | ## created
 82 | 
 83 | > 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)、属性、方法的运算和 watch/event 事件回调。然而，挂载阶段还没开始，\$el 属性目前尚不可用。
 84 | 
 85 | 在**实例创建完成后**被立即调用，而且实例已经完成了 数据观测，属性、方法的运算、watch 和事件的回调，说明我们已经能够访问`data`里面的数据和`methods`里面的方法了。加入以下生命周期函数进行测试
 86 | 
 87 | ```js
 88 | beforeCreate() {
 89 |     try {
 90 |       console.log('进入 beforeCreated')
 91 |       console.log(this.message, 'message')
 92 |       let body = document.querySelector('body')
 93 |       console.log(body, 'body')
 94 |       this.test()
 95 |       debugger
 96 |     } catch (e) {
 97 |       console.error(e)
 98 |       debugger
 99 |     }
100 |   },
101 |   // 新添加 ！！！
102 |   created() {
103 |     try {
104 |       console.log('进入 created')
105 |       console.log(this.message, 'message')
106 |       let body = document.querySelector('body')
107 |       console.log(body, 'body')
108 |       this.test()
109 |       debugger
110 |     } catch (e) {
111 |       console.error(e)
112 |       debugger
113 |     }
114 |   },
115 | 
116 | ```
117 | 
118 | ::: tip 提示
119 | 
120 | 你可能已经看到，生命周期**函数**是一个函数，以`xxx(){}`的方式声明，以`,`进行分隔，跟`methods: {}`等方法不一样，这里需要注意。
121 | 
122 | :::
123 | 
124 | <br />
125 | <img :src="$withBase('/life-2.png')">
126 | 
127 | 以上信息说明：
128 | 
129 | - 打印 `created` 表示进入 `created` 生命周期
130 | - 打印 `hello Vue` 表示在此我们**能够访问到 `data` 里面的值**！
131 | - 打印 body，跟上面一样，说明此时 dom 还未挂载完成，这里**并不能对 dom 进行任何操作**！
132 | - 最后调用 `test` 函数，控制台打印出了 `test function`，说明在此我们也**能够访问 `methods` 里面的函数了**！
133 | 
134 | 此时我们已经能够访问 `data` 里面的函数，`methods` 里面的方法。还可以使用 `watch、props 和 computed` 等方法。**重度使用，需要重点关注**！
135 | 
136 | ## beforeMount
137 | 
138 | > 在挂载开始之前被调用，相关的 render 函数首次被调用。
139 | 
140 | 在挂载开始之前被调用，也就表示还不能访问 dom，因为还没有开始挂载。
141 | 
142 | <br />
143 | <img :src="$withBase('/life-3.png')">
144 | 
145 | 从图中可以看出，此时打印出的内容跟`created`里面打印出的内容差不多。因此也可以访问 `data、methods 和 watch` 等数据和方法。**轻度使用**。
146 | 
147 | ## mounted
148 | 
149 | > 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。 如果根实例挂载到了一个文档内的元素上，当mounted被调用时vm.$el 也在文档内。
150 | 
151 | 实例被挂载后调用，新创建的 Vue 实例的 el 替换对应的 dom 元素。这说明虚拟 dom 已经挂载完成，也就表示我们能够访问 dom 了。
152 | 
153 | <br />
154 | <img :src="$withBase('/life-4.png')">
155 | 
156 | 此时能够看到，我们能展开`#app`里面的元素了，并看到`p`标签里面的内容了。说明在`mounted`里面，dom 已经加载完成，我们可以在此对 dom 进行操作。**重度使用，需要重点关注**！
157 | 
158 | ## beforeUpdate
159 | 
160 | > 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
161 | 
162 | - 数据更新时调用
163 | 
164 | 说明**数据已经更新了**。
165 | 
166 | - 发生在虚拟 dom 打补丁之前
167 | 
168 | 也就是说，在 dom 修改之前，页面还没有更新。这里解释一下为什么叫*打补丁*，因为 Vue 采用虚拟 dom，并且采用优化算法，对比新旧`Vnode`（虚拟 dom），只修改 **改变的部分**。所以，如果我们只更改了部分值，那么只会更新页面的一部分。这也是 使用 Vue 构建的页面 显得特别快的原因。
169 | 
170 | 还是通过断点调试，为了更好的观察 dom 发生的变化，设置了一个`test`方法，用来改变`message`的值。在`<script>`中加入如下代码：
171 | 
172 | ::: tip 提示
173 | 
174 | 记住，这些生命周期**函数**是属于同级别“地位”，所以他们应该并列的放在一起，并使用`,`分隔。那么此时，在`<script>`标签下，大概有如下“结构”：
175 | 
176 | ```js
177 | export default {
178 |   data() {}
179 |   methods: {},
180 |   beforeCreate() {},
181 |   created() {},
182 |   beforeMount() {},
183 |   mounted() {}
184 | }
185 | ```
186 | 
187 | :::
188 | 
189 | ```html
190 | <div class="container">
191 |   <p>{{message}}</p>
192 |   <button @click="test">reverse</button>
193 | </div>
194 | ```
195 | 
196 | ```js
197 | beforeUpdate() {
198 |     console.log('beforeUpdate')
199 |     console.log(this.message, 'message')
200 |     let body = document.querySelector('body')
201 |     console.log(body, 'body')
202 |     console.log(this)  // `this`代表 Vue 实例
203 |     debugger
204 |   }
205 | 
206 |   methods: {
207 |     test() {
208 |       this.message = this.message
209 |         .split('')
210 |         .reverse()
211 |         .join('')
212 |     }
213 |   }
214 | ```
215 | 
216 | 初始化好后，我们点击`reverse`按钮，触发`test`函数，改变`data`里面`message`的值，控制台信息如下图所示：
217 | 
218 | <img :src="$withBase('/life-5.png')" />
219 | <br />
220 | <img :src="$withBase('/life-6.png')" />
221 | 
222 | 以上信息说明：
223 | 
224 | - 打印`beforeUpdate`表示进入`beforeUpdate`生命周期
225 | - 打印`message`的值为：`euV olleh`，发现值已经是**更新后的值**。说明在此 值已经被更新。
226 | - 展开 body，发现`<p>`里面的值为`Hello Vue`。说明虽然`data`里面的值已经更新，但是真实的 dom 中，值并没有被更新。
227 | - 最后打印的`this`，`this`指向 Vue 实例，可以看到红色箭头指向`message`的值，是更新后的值。因为`data`和`methods`里面的所有方法都会被挂载在 Vue 实例上，所以我们可以通过`this.xxx`获取到对应的值或方法。
228 | 
229 | 最后一张图片是断点时 dom 中的显示情况，可以看到在`beforeUpdate`的时候，真实 dom 里面的值没有更新。**轻度使用**。
230 | 
231 | ## updated
232 | 
233 | > 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
234 | 
235 | 官方文档说的很清楚了，总结如下：数据更改导致虚拟 dom 重新渲染，组件 dom 已经更新，可以执行对应的 dom 操作。在大多数情况下，应该避免在此期间更改状态。应该使用计算属性（`computed`）和 `watch`。
236 | 
237 | 在`<script>`添加如下代码：
238 | 
239 | ```js
240 | updated() {
241 |     console.log('updated')
242 |     console.log(this.message, 'message')
243 |     let body = document.querySelector('body')
244 |     console.log(body, 'body')
245 |     console.log(this)
246 |   }
247 | ```
248 | 
249 | 点击`reverse`按钮后，控制台打印如下图所示：
250 | 
251 | <img :src="$withBase('/life-7.png')" />
252 | 
253 | 此时可以看到，dom 已经更新。**轻度使用**。
254 | 
255 | ## beforeDestroy
256 | 
257 | > 实例销毁之前调用。在这一步，实例仍然完全可用。
258 | 
259 | 组件销毁前或离开页面后，调用这个函数。**轻度使用**。
260 | 
261 | ## destroyed
262 | 
263 | > 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
264 | 
265 | 组件销毁后或页面离开之后，调用这个函数。Vue 中的所有绑定的事件监听都会被销毁，如：watch、computed 等。
266 | 
267 | 除了 Vue 中会自动销毁一些事件监听外，还需要我们自己手动移除监听器，比如:
268 | 
269 | - 使用`document.addEventListener`添加的监听器
270 | - 使用 setInterval 设置的定时器
271 | 
272 | 我们初始化一个组件（关于组件会在后面细说），并在这个组件内设置一个定时器，并使用一个按钮来销毁这个组件：
273 | 
274 | ```html
275 | <template>
276 |   <div class="container">
277 |     <component-a v-if="toggleComponent"></component-a>
278 |     <button @click="toggleComponent = !toggleComponent">toggle</button>
279 |   </div>
280 | </template>
281 | 
282 | <script>
283 |   import Vue from 'vue'
284 | 
285 |   Vue.component('component-a', {
286 |     template: `
287 |       <div>Component-a</div>
288 |     `,
289 |     methods: {
290 |       interval() {
291 |         setInterval(() => {
292 |           console.log('1')
293 |         }, 1000)
294 |       }
295 |     },
296 |     mounted() {
297 |       this.interval()
298 |     },
299 |     beforeDestroy() {
300 |       console.log('component beforeDestroy')
301 |     },
302 |     destroyed() {
303 |       console.log('component destroyed')
304 |     }
305 |   })
306 | 
307 |   export default {
308 |     data() {
309 |       return {
310 |         toggleComponent: true
311 |       }
312 |     }
313 |   }
314 | </script>
315 | ```
316 | 
317 | `@click="toggleComponent = !toggleComponent"` 表示把`toggleComponent`这个变量取反并赋值给他自己。为`true`取反后就为`false`。最后的效果就是点击后可以来回切换显示或隐藏。
318 | 
319 | 在进入页面后，在`mounted`里面调用定时器函数，发现控制台开始打印`1`。同时页面如下，`component-a`组件存在。
320 | <br />
321 | <img :src="$withBase('/life-8.png')" />
322 | <br />
323 | <br />
324 | <img :src="$withBase('/life-9.png')" />
325 | 
326 | 当我们点击`toggle`按钮后，控制台打印如下：
327 | 
328 | <br />
329 | <img :src="$withBase('/life-10.png')" />
330 | <br />
331 | <br />
332 | <img :src="$withBase('/life-11.png')" />
333 | 
334 | 发现虽然已经调用`destroyed`了，但是控制台还是能够打印`1`，说明定时器并没有被销毁。所以，需要我们自己手动清除。
335 | 
336 | 清除定时器，大家都知道，如果是`setTimeout`，我们使用`clearTimeout`；如果是`setInterval`，我们使用`clearInterval`。所以，我们应该使用`clearInterval()`，并且加在`beforeDestroyed`或者`destroyed`里面。但是还有一个问题，就是清除哪个定时器，所以我们还需要把这个定时器赋值给一个变量：
337 | 
338 | ```js
339 | interval() {
340 |   let timer = setInterval(() => {
341 |     console.log('1')
342 |   }, 1000)
343 | }
344 | 
345 | destroyed() {
346 |   clearInterval(timer)
347 |   console.log('component destroyed')
348 | }
349 | ```
350 | 
351 | 这样可以吗？你可以试一下。因为函数作用域的问题，我们在**外部是无法访问到函数内部的变量的**。所以，在`destroyed`里面是访问不到 timer 的。聪明的你一定想到了，我们可以在`data`里面初始化一个变量`timer`，然后在定时器里面进行赋值，最后在`destroyed`里面进行销毁。让我们试一下：
352 | 
353 | ```js
354 | data () {
355 |   return {
356 |     message: 'hello Vue',
357 |     timer: null
358 |   }
359 | }
360 | 
361 | interval() {
362 |   this.timer = setInterval(() => {
363 |     console.log('1')
364 |   }, 1000)
365 | }
366 | 
367 | 
368 | destroyed() {
369 |   clearInterval(this.timer)
370 |   console.log('component destroyed')
371 | }
372 | ```
373 | 
374 | 访问`data`里面的变量，我们需要使用`this.xxx`的方式，所以我们通过`this.timer`进行赋值和销毁。现在重新加载页面，并点击`toggle`，控制台不会再打印`1`了。说明成功销毁定时器。
375 | 
376 | 官方文档里面还有关于`destroyed`的使用例子，[点击这里](https://cn.vuejs.org/v2/cookbook/avoiding-memory-leaks.html)访问。
377 | **轻度使用**。
378 | 


--------------------------------------------------------------------------------
/docs/basics/computed.md:
--------------------------------------------------------------------------------
  1 | # 计算属性 computed
  2 | 
  3 | [[toc]]
  4 | 
  5 | ## 介绍
  6 | 
  7 | computed 是 Vue 提供用来处理复杂逻辑，可以像绑定普通属性一样绑定计算属性，并且计算属性的值会被缓存，除非依赖的值更新。
  8 | 
  9 | 首先解释一下`像绑定普通属性一样绑定计算属性`：绑定普通属性的方式为在`data`里面进行绑定
 10 | 
 11 | ```js
 12 | {{message}}
 13 | 
 14 | data () {
 15 |     return {
 16 |         message: 'hello Vue'
 17 |     }
 18 | }
 19 | 
 20 | ```
 21 | 
 22 | 绑定**计算属性**为：
 23 | 
 24 | ```js
 25 | 
 26 | {{reverseMessage}}
 27 | 
 28 | computed: {
 29 |     // es6
 30 |     reverseMessage() {
 31 |         return this.message.split('').reverse().join('')
 32 |     }
 33 | 
 34 |     // es5
 35 |     reverseMessage: () {
 36 |         return this.message.split('').reverse().join('')
 37 |     }
 38 | }
 39 | 
 40 | ```
 41 | 
 42 | 可以看到，使用方式是相同的，都是使用模板语法`{{}}`。唯一不同的是，计算属性需要在`computed:{}`里面声明，并且是一个函数。
 43 | 
 44 | 同时注意，计算属性是一个函数，想要函数返回一个值需要使用`return`关键字，如果不使用`return`，会发现*这个计算属性*不会返回任何值，需要注意。
 45 | 
 46 | 计算属性的值也会被放入 Vue 实例里面。所以，你依然可以通过`this.reverseMessage`来访问对应的计算属性。
 47 | 
 48 | > 计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter
 49 | 
 50 | 计算属性默认只有 getter，意思是我们访问计算属性的时候，默认只返回值，不可以设置值。
 51 | 
 52 | 不过在需要时你也可以提供一个 setter，意思是可以设置一个 setter，用来改变计算属性的值。方式为：
 53 | 
 54 | ```js
 55 | computed: {
 56 |     // es6
 57 |     reverseMessage: {
 58 |         get() {
 59 |             return this.message.split('').reverse().join('')
 60 |         },
 61 |         set(value) {
 62 |             this.message = this.message + value
 63 |         }
 64 |     }
 65 | 
 66 |     // es5
 67 |     reverseMessage: {
 68 |         get: function() {
 69 |             return this.message.split('').reverse().join('')
 70 |         },
 71 |         set: function(value) {
 72 |             this.message = this.message + value
 73 |         }
 74 |     }
 75 | }
 76 | ```
 77 | 
 78 | 可以看到，`reverseMessage`改变了声明方式，使用了`get(){}`和`set(){}`。
 79 | 
 80 | - `get`就是返回值，跟声明的时候一样。
 81 | - `set`是设置值，接收一个`value`，`value`为我们设置的值。比如说，`this.reverseMessage = '哈哈哈'`，那么`value`就是`哈哈哈`。
 82 | 
 83 | ## 小例子
 84 | 
 85 | 计算属性应用来说相对比较多，下面我们分别看几个例子来理解一下计算属性的应用。一般情况下，使用计算属性的`getter`即可。
 86 | 
 87 | ### 商品排序
 88 | 
 89 | 大家看购物网站的时候，一般都会有排序的功能，比如说，按照价格排序，按照销量排序等。下面我们就来实现一下这个功能。同时为了真实的体验，我提供了一个简单的商品数据列表，接口地址为：`https://easy-mock.com/mock/5e1aa4ff7f109b0caa4d2e26/learnvue/commodity`（接口为 mock 数据（模拟数据），意味着每次请求的数据结果都不一样）。
 90 | 
 91 | ```html
 92 | <template>
 93 |   <div class="container">
 94 |     <section class="commodity">
 95 |       <div class="item" v-for="(item, index) in list" :key="index">
 96 |         <div>
 97 |           <img :src="item.thumb" alt class="item_img" />
 98 |         </div>
 99 |         <div>
100 |           <p class="title">{{item.title}}</p>
101 |         </div>
102 |         <div>
103 |           <p>销量： {{item.sales}}</p>
104 |           <p>价格： {{item.price}}</p>
105 |         </div>
106 |       </div>
107 |     </section>
108 |   </div>
109 | </template>
110 | 
111 | <script>
112 |   export default {
113 |     data() {
114 |       return {
115 |         list: []
116 |       }
117 |     },
118 |     computed: {},
119 |     methods: {
120 |       initData() {
121 |         axios
122 |           .get(
123 |             'https://easy-mock.com/mock/5e1aa4ff7f109b0caa4d2e26/learnvue/commodity'
124 |           )
125 |           .then(res => {
126 |             let data = res.data.data
127 |             console.log(data, 'data')
128 |             this.list = data.list
129 |           })
130 |       }
131 |     },
132 |     created() {
133 |       this.initData()
134 |     },
135 |     mounted() {},
136 |     updated() {},
137 |     destroyed() {}
138 |   }
139 | </script>
140 | 
141 | <style scoped>
142 |   .commodity {
143 |     display: flex;
144 |     flex-direction: row;
145 |     flex-wrap: wrap;
146 |     justify-content: flex-start;
147 |   }
148 |   .item {
149 |     margin: 10px;
150 |     width: 200px;
151 |   }
152 |   .item_img {
153 |     width: 100px;
154 |     height: 100px;
155 |   }
156 | </style>
157 | ```
158 | 
159 | <computeds-example1-1 />
160 | 
161 | 如果你复制上去后，发现页面渲染出来数据了，很棒是不是，这就是真实的接口+数据渲染方式。除了没有完善的错误处理和样式等:hugs:，不过暂时先不考虑。
162 | 
163 | 为了大家更好的理解计算属性，我准备把以上内容复习一下。
164 | 
165 | - 获取数据
166 | 
167 | 这里使用`axios`获取数据（axios 最后会讲怎么使用），并在`created`里面调用（`created/mounted`都可以）。可以看到函数里面使用了`let data = res.data.data`，因为嵌套的层级比较深，为了下面代码更好的使用，所以声明了一个`data`变量。如果你认为没必要的话，请看：
168 | 
169 | ```js
170 | // 不使用变量
171 | this.list = res.data.data.list
172 | if (!res.data.data.list.length) return
173 | res.data.data.xxx // 操作其他值
174 | 
175 | // 使用变量
176 | let data = res.data.data
177 | 
178 | this.list = data.list
179 | if (!data.list) return
180 | data.xxx // 操作其他值
181 | ```
182 | 
183 | - 渲染操作
184 | 
185 | `list`获取到对应的值后，`v-for`会自动进行渲染，`(item, index)` ，`item`代表被遍历的数组的每一项，即`list[0]、list[1]...list[n]`。`index`为当前遍历的索引值，也就是`0、1 ... n`。`:key=index`为`v-bind:key=index`，就是把当前的索引项的值绑定到`key`上。
186 | 
187 | 此时，通过`item.xxx`就能获取到对应的数据了，那么我们通过`{{}}`模板语法渲染数据即可。
188 | 
189 | 下面开始写具体的排序逻辑，我们选择按照**价格排序**。具体的逻辑就是使用计算属性对每个商品的价格，使用`sort`进行排序，排序好了之后 `v-for` 会自动渲染。
190 | 
191 | 首先我们先声明一个计算属性，叫`new_priceList`：
192 | 
193 | ```js
194 | computed: {
195 |     new_priceList() {
196 |         return this.list
197 |     }
198 | }
199 | 
200 | ```
201 | 
202 | 首先声明了一个计算属性`new_priceList`，不过目前我只写了返回`list`。那么意味着我们把`v-for`的`list`替换成`new_priceList`，页面还是正常渲染，不会有任何问题和报错。那么我们来试一下：
203 | 
204 | ```html
205 | <div class="item" v-for="(item, index) in new_priceList" :key="index"></div>
206 | ```
207 | 
208 | 进行替换后，发现页面还是能够正常渲染的，这是我们使用计算属性的第一步。**学会这一步**，因为这可能是你以后经常使用计算属性的第一步。
209 | 
210 | ::: tip 提示
211 | 
212 | 记住，计算属性同样是响应式的，也就是说，如果`list`里面的内容变化了（[官网文档](https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B)有明确指出什么操作是响应式的），那么`new_priceList`里面的值同样会变化，如果`list`不变，那么`new_priceList`会被缓存起来，每次访问会直接返回。
213 | 
214 | :::
215 | 
216 | 接下来就是排序的逻辑了，javaScript 提供了`sort`方法，用来排序。不过，大家可能知道，这个方法并不完美。所以我们需要改进一下：
217 | 
218 | ```js
219 | new_priceList() {
220 |     return this.list.sort((a, b) => {
221 |         return a.price - b.price
222 |     })
223 | }
224 | ```
225 | 
226 | `sort`方法可以接收一个函数，如果返回值为负数，说明第一个值应该在第二个值前面，即第一个值小于第二个值。所以，返回后的数组为升序。
227 | 
228 | <computeds-example1-2 />
229 | 
230 | 可以看到，现在的新数组已经是排序后的数组了。不过，我们需要的智能排序，需要我们手动点击升序或降序。那么就需要一个**值**来控制一下，到底是升序还是降序。
231 | 
232 | ```html
233 | <div class="tools">
234 |   <button @click="status = 1">升序</button>
235 |   <button @click="status = 2">降序</button>
236 | </div>
237 | ```
238 | 
239 | ```js
240 | data () {
241 |     return {
242 |       list: [],
243 |       status: 0 // 默认为0 即默认排序 1 为升序 2 为降序
244 |     }
245 | }
246 | 
247 | computed: {
248 |     new_priceList() {
249 |       if (!this.status) return this.list
250 |       return this.list.sort((a, b) => {
251 |         return this.status === 1 ? a.price - b.price : b.price - a.price
252 |       })
253 |     }
254 |   },
255 | 
256 | ```
257 | 
258 | <computeds-example1-3 />
259 | 
260 | 现在我们可以点击升序或降序按钮，可以控制商品的排序了。那么我们来解释一下最后一步的操作：
261 | 
262 | - 添加控制升序或降序的值
263 | 
264 | 本例为`status`，为 0 说明默认排序，为 1 说明为升序，为 2 说明为降序。（这里的 0、1 和 2 是由自己定义的，你可以定义任何你想定义的值）
265 | 
266 | - 添加按钮来改变`status`的状态
267 |   使用`v-on:click`来改变状态，升序按钮为`status = 1`，降序按钮为`status = 2`
268 | 
269 | - 计算属性逻辑
270 | 
271 |   - `if (!this.status) return this.list`
272 | 
273 |     这里表示，如果为 0 的情况下，就返回默认的`list`数组。`!this.status`表示取 0 的反值。
274 | 
275 |   - `return this.status === 1 ? a.price - b.price : b.price - a.price`
276 | 
277 |     这里使用三元表达式对当前的状态进行求值。如果为 1，则说明为**升序**，那么就返回`a.price - b.price`；如果为其他的值，就说明为**降序**，那么就返回`b.price - a.price`。
278 | 
279 |     **注意嗷**，`status`还有为 0 的情况，所以我们在进入函数之前就判断了，如果为 0，那么就返回默认的`list`数组，而不会走到三元表达式这里。
280 | 
281 | 到这里基本就讲完了一个排序小例子，看完后，记得自己重新实践一下。如果还没有理解到位，那么请看下面的另一个小例子。
282 | 
283 | ### 商品搜索
284 | 
285 | 一般来说，搜索是通过 http 请求，来跟后台进行交互，然后只渲染后台返回过来筛选后的数据就可以了。不过，我们通过计算属性也可以做到筛选功能，而且更快，更高效。唯一的缺点就是，如果有分页，那么搜索只会搜索到当前页的数据，而通过 http 请求，后台会把所有关于搜索的数据发送过来。
286 | 
287 | 商品搜索，可以根据商品标题进行搜索，返回标题中带有搜索关键字的商品就可以了。我们通过`includes`或者`indexOf`实现这个功能。还需要一个方法来遍历数组，并返回一个新数组，大家可以先思考一下使用哪个方法。
288 | 
289 | ```html
290 | <template>
291 |   <div class="wrap">
292 |     <div class="tools">
293 |       <input type="text" v-model="search" />
294 |     </div>
295 |     <section class="commodity">
296 |       <div class="item" v-for="(item, index) in new_titleList" :key="index">
297 |         <div>
298 |           <img :src="item.thumb" alt class="item_img" />
299 |         </div>
300 |         <div>
301 |           <p>{{ item.title }}</p>
302 |         </div>
303 |         <div>
304 |           <p>销量： {{ item.sales }}</p>
305 |           <p>价格： {{ item.price }}</p>
306 |         </div>
307 |       </div>
308 |     </section>
309 |   </div>
310 | </template>
311 | 
312 | <script>
313 |   export default {
314 |     data() {
315 |       return {
316 |         list: [],
317 |         search: ''
318 |       }
319 |     },
320 |     computed: {
321 |       new_titleList() {
322 |         return this.list
323 |       }
324 |     },
325 |     methods: {
326 |       initData() {
327 |         axios
328 |           .get(
329 |             'https://easy-mock.com/mock/5e1aa4ff7f109b0caa4d2e26/learnvue/commodity'
330 |           )
331 |           .then(res => {
332 |             let data = res.data.data
333 |             console.log(data, 'data')
334 |             this.list = data.list
335 |           })
336 |       }
337 |     },
338 |     created() {
339 |       this.initData()
340 |     },
341 |     mounted() {},
342 |     updated() {},
343 |     destroyed() {}
344 |   }
345 | </script>
346 | 
347 | <style scoped>
348 |   .commodity {
349 |     display: flex;
350 |     flex-direction: row;
351 |     flex-wrap: wrap;
352 |     justify-content: flex-start;
353 |   }
354 |   .item {
355 |     margin: 10px;
356 |     width: 200px;
357 |   }
358 |   .item_img {
359 |     width: 100px;
360 |     height: 100px;
361 |   }
362 | </style>
363 | ```
364 | 
365 | <computeds-example2-1 />
366 | 
367 | 还记得`v-model`吗？本例就通过`v-model`把`input`绑定到变量`search`上。那么，我们输入的任何值，都储存在`search`变量上。
368 | 
369 | 还是跟以前一样，第一步先初始化一个`new_titleList`的计算属性，表示这是一个新的数组。并把`v-for`里面的`list`替换为`new_titleList`。接着，我们就开始具体的搜索逻辑
370 | 
371 | ```js
372 |   computed: {
373 |     new_titleList() {
374 |       if (this.search === '') {
375 |         return this.list
376 |       }
377 | 
378 |       let arr = this.list.filter(item => {
379 |         return item.title.indexOf(this.search) > -1
380 |       })
381 |       return arr
382 |     }
383 |   },
384 | ```
385 | 
386 | - `if (this.search === '') { return this.list }`
387 | 
388 |   这一步表示，如果搜索内容为空的话，就返回默认的数组。可以写成这种形式：
389 | 
390 |   ```js
391 |   if (!this.search) return this.list
392 |   ```
393 | 
394 | - 接下来就是遍历数组，然后返回标题中带有搜索关键字的商品了。我们选择使用`filter`，因为`filter`能够**返回一个新数组**。`arr`代表着过滤后的数组，所以返回它即可。下面我们来看具体的过滤逻辑
395 | 
396 |   ```js
397 |   this.list.filter(item => {
398 |     return item.title.includes(this.search)
399 |   })
400 |   ```
401 | 
402 |   - 上面的`item`同样代表 list 里面的每一项
403 |   - `item.title`就是我们要过滤的标题了
404 |   - `this.search`就是用户输入过滤的关键字
405 |   - 我们通过 js 的`includes`方法对标题进行过滤，表示**如果标题中含有搜索关键字，那么就返回这一项**。这一步可以写成
406 | 
407 |     ```js
408 |     return item.title.includes(this.search)
409 |     ```
410 | 
411 |   - 还有一点，我们可以完善一下，就是`let arr`这一步，因为我们知道，`arr`里面存放的就是过滤后的数组，那么我们为何不省略这一步把`let arr`换成直接 `return`呢
412 | 
413 | 经过以上分析，我们可以把上面代码优化成：
414 | 
415 | ```js
416 |   computed: {
417 |     new_titleList() {
418 |         if(!this.search )return this.list
419 | 
420 |         return this.list.filter(item => {
421 |             return item.title.includes(this.search)
422 |         })
423 |     }
424 |   },
425 | ```
426 | 
427 | 相信大家经过以上两个小例子能够对计算属性有了一个深入的了解，计算属性应用非常广泛，大家应该重点掌握。
428 | 


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