├── .gitignore
├── 01_src_分析脚手架
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── School.vue
    │   └── Student.vue
    └── main.js
├── 02_src_ref元素
    ├── App.vue
    ├── components
    │   └── School.vue
    └── main.js
├── 03_src_props配置
    ├── App.vue
    ├── components
    │   └── Student.vue
    └── main.js
├── 04_src_mixin混入(合)
    ├── App.vue
    ├── components
    │   ├── School.vue
    │   └── Student.vue
    ├── main.js
    └── mixin.js
├── 05_src_插件
    ├── App.vue
    ├── components
    │   ├── School.vue
    │   └── Student.vue
    ├── main.js
    └── plugins.js
├── 06_src_scoped样式
    ├── App.vue
    ├── components
    │   ├── School.vue
    │   └── Student.vue
    └── main.js
├── 07_src_TodoList案例
    ├── App.vue
    ├── components
    │   ├── MyFooter.vue
    │   ├── MyHeader.vue
    │   ├── MyItem.vue
    │   └── MyList.vue
    ├── main.js
    ├── todoList.css
    └── todoList.html
├── 07_src_TodoList案例_test
    ├── App.vue
    ├── components
    │   ├── MyFooter.vue
    │   ├── MyHeader.vue
    │   ├── MyItem.vue
    │   └── MyList.vue
    ├── main.js
    ├── todoList.css
    └── todoList.html
├── 08_浏览器本地存储
    ├── localStorage.html
    └── sessionStorage.html
├── 09_src_TodoList本地存储
    ├── App.vue
    ├── components
    │   ├── MyFooter.vue
    │   ├── MyHeader.vue
    │   ├── MyItem.vue
    │   └── MyList.vue
    └── main.js
├── 10_src_组件自定义事件
    ├── App.vue
    ├── components
    │   ├── School.vue
    │   └── Student.vue
    └── main.js
├── 11_src_TodoList_自定义事件
    ├── App.vue
    ├── components
    │   ├── MyFooter.vue
    │   ├── MyHeader.vue
    │   ├── MyItem.vue
    │   └── MyList.vue
    └── main.js
├── 12_src_全局事件总线
    ├── App.vue
    ├── components
    │   ├── School.vue
    │   └── Student.vue
    └── main.js
├── 13_src_TodoList_事件总线
    ├── App.vue
    ├── components
    │   ├── MyFooter.vue
    │   ├── MyHeader.vue
    │   ├── MyItem.vue
    │   └── MyList.vue
    └── main.js
├── 14_src_消息订阅与发布
    ├── App.vue
    ├── components
    │   ├── School.vue
    │   └── Student.vue
    └── main.js
├── 15_src_TodoList_pubsub
    ├── App.vue
    ├── components
    │   ├── MyFooter.vue
    │   ├── MyHeader.vue
    │   ├── MyItem.vue
    │   └── MyList.vue
    └── main.js
├── 16_src_TodoList_nextTick
    ├── App.vue
    ├── components
    │   ├── MyFooter.vue
    │   ├── MyHeader.vue
    │   ├── MyItem.vue
    │   └── MyList.vue
    └── main.js
├── 17_src_过渡与动画
    ├── App.vue
    ├── components
    │   ├── Test.vue
    │   ├── Test2.vue
    │   └── Test3.vue
    ├── image-20211120101929608.png
    └── main.js
├── 18_src_TodoList_动画
    ├── App.vue
    ├── components
    │   ├── MyFooter.vue
    │   ├── MyHeader.vue
    │   ├── MyItem.vue
    │   └── MyList.vue
    └── main.js
├── 19_src_配置代理服务器
    ├── App.vue
    └── main.js
├── 20_src_github搜索案例
    ├── App.vue
    ├── assets
    │   ├── css
    │   │   └── bootstrap.css
    │   └── fonts
    │   │   ├── glyphicons-halflings-regular.eot
    │   │   ├── glyphicons-halflings-regular.svg
    │   │   ├── glyphicons-halflings-regular.ttf
    │   │   ├── glyphicons-halflings-regular.woff
    │   │   └── glyphicons-halflings-regular.woff2
    ├── components
    │   ├── List.vue
    │   └── Search.vue
    ├── index.css
    ├── index.html
    └── main.js
├── 21_src_github搜索案例_vue-resource
    ├── App.vue
    ├── assets
    │   ├── css
    │   │   └── bootstrap.css
    │   └── fonts
    │   │   ├── glyphicons-halflings-regular.eot
    │   │   ├── glyphicons-halflings-regular.svg
    │   │   ├── glyphicons-halflings-regular.ttf
    │   │   ├── glyphicons-halflings-regular.woff
    │   │   └── glyphicons-halflings-regular.woff2
    ├── components
    │   ├── List.vue
    │   └── Search.vue
    ├── index.css
    ├── index.html
    └── main.js
├── 22_插槽
    ├── 1_src_默认插槽
    │   ├── App.vue
    │   ├── components
    │   │   └── Category.vue
    │   └── main.js
    ├── 2_src_具名插槽
    │   ├── App.vue
    │   ├── components
    │   │   └── Category.vue
    │   └── main.js
    └── 3_src_作用域插槽
    │   ├── App.vue
    │   ├── components
    │       └── Category.vue
    │   └── main.js
├── 23_src_纯vue版
    ├── App.vue
    ├── components
    │   └── Count.vue
    └── main.js
├── 24_src_vuex版
    ├── App.vue
    ├── components
    │   └── Count.vue
    ├── main.js
    └── store
    │   └── index.js
├── 25_src_求和案例_getters
    ├── App.vue
    ├── components
    │   └── Count.vue
    ├── main.js
    └── store
    │   └── index.js
├── 26_src_求和案例_mapState与mapGetters
    ├── App.vue
    ├── components
    │   └── Count.vue
    ├── main.js
    └── store
    │   └── index.js
├── 27_src_求和案例_mapMutations与mapActions
    ├── App.vue
    ├── components
    │   └── Count.vue
    ├── main.js
    └── store
    │   └── index.js
├── 28_src_求和案例_多组件共享数据
    ├── App.vue
    ├── components
    │   ├── Count.vue
    │   └── Person.vue
    ├── main.js
    └── store
    │   └── index.js
├── 29_src_求和案例_vuex模块化编码
    ├── App.vue
    ├── components
    │   ├── Count.vue
    │   └── Person.vue
    ├── main.js
    └── store
    │   ├── count.js
    │   ├── index.js
    │   └── person.js
├── 30_src_路由的基本使用
    ├── App.vue
    ├── about.html
    ├── components
    │   ├── About.vue
    │   └── Home.vue
    ├── home.html
    ├── main.js
    └── router
    │   └── index.js
├── 31_src_多级路由
    ├── App.vue
    ├── about.html
    ├── components
    │   └── Banner.vue
    ├── home-message.html
    ├── home-news.html
    ├── home.html
    ├── main.js
    ├── pages
    │   ├── About.vue
    │   ├── Home.vue
    │   ├── Message.vue
    │   └── News.vue
    └── router
    │   └── index.js
├── 32_src_路由的query参数
    ├── App.vue
    ├── components
    │   └── Banner.vue
    ├── main.js
    ├── pages
    │   ├── About.vue
    │   ├── Detail.vue
    │   ├── Home.vue
    │   ├── Message.vue
    │   └── News.vue
    └── router
    │   └── index.js
├── 33_src_命名路由
    ├── App.vue
    ├── about.html
    ├── components
    │   └── Banner.vue
    ├── home-message.html
    ├── home-news.html
    ├── home.html
    ├── main.js
    ├── pages
    │   ├── About.vue
    │   ├── Detail.vue
    │   ├── Home.vue
    │   ├── Message.vue
    │   └── News.vue
    └── router
    │   └── index.js
├── 34_src_路由的params参数
    ├── App.vue
    ├── about.html
    ├── components
    │   └── Banner.vue
    ├── home-message.html
    ├── home-news.html
    ├── home.html
    ├── main.js
    ├── pages
    │   ├── About.vue
    │   ├── Detail.vue
    │   ├── Home.vue
    │   ├── Message.vue
    │   └── News.vue
    └── router
    │   └── index.js
├── 35_src_路由的props配置
    ├── App.vue
    ├── components
    │   └── Banner.vue
    ├── pages
    │   ├── About.vue
    │   ├── Detail.vue
    │   ├── Home.vue
    │   ├── Message.vue
    │   └── News.vue
    └── router
    │   └── index.js
├── 36_src_router-link的replace属性
    ├── App.vue
    ├── components
    │   └── Banner.vue
    ├── main.js
    ├── pages
    │   ├── About.vue
    │   ├── Detail.vue
    │   ├── Home.vue
    │   ├── Message.vue
    │   └── News.vue
    └── router
    │   └── index.js
├── 37_src_编程式路由导航
    ├── App.vue
    ├── components
    │   └── Banner.vue
    ├── main.js
    ├── pages
    │   ├── About.vue
    │   ├── Detail.vue
    │   ├── Home.vue
    │   ├── Message.vue
    │   └── News.vue
    └── router
    │   └── index.js
├── 38_src_缓存路由组件
    ├── App.vue
    ├── components
    │   └── Banner.vue
    ├── main.js
    ├── pages
    │   ├── About.vue
    │   ├── Detail.vue
    │   ├── Home.vue
    │   ├── Message.vue
    │   └── News.vue
    └── router
    │   └── index.js
├── 39_src_两个新的生命周期钩子
    ├── App.vue
    ├── components
    │   └── Banner.vue
    ├── main.js
    ├── pages
    │   ├── About.vue
    │   ├── Detail.vue
    │   ├── Home.vue
    │   ├── Message.vue
    │   └── News.vue
    └── router
    │   └── index.js
├── 40_src_全局路由守卫
    ├── App.vue
    ├── components
    │   └── Banner.vue
    ├── main.js
    ├── pages
    │   ├── About.vue
    │   ├── Detail.vue
    │   ├── Home.vue
    │   ├── Message.vue
    │   └── News.vue
    └── router
    │   └── index.js
├── 41_src_独享路由守卫
    ├── App.vue
    ├── components
    │   └── Banner.vue
    ├── main.js
    ├── pages
    │   ├── About.vue
    │   ├── Detail.vue
    │   ├── Home.vue
    │   ├── Message.vue
    │   └── News.vue
    └── router
    │   └── index.js
├── 42_src_组件内路由守卫
    ├── App.vue
    ├── components
    │   └── Banner.vue
    ├── main.js
    ├── pages
    │   ├── About.vue
    │   ├── Detail.vue
    │   ├── Home.vue
    │   ├── Message.vue
    │   └── News.vue
    └── router
    │   └── index.js
├── 43_src_history模式与hash模式
    ├── App.vue
    ├── components
    │   └── Banner.vue
    ├── main.js
    ├── pages
    │   ├── About.vue
    │   ├── Detail.vue
    │   ├── Home.vue
    │   ├── Message.vue
    │   └── News.vue
    └── router
    │   └── index.js
├── 44_src_element-ui
    ├── App.vue
    └── main.js
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── css
    │   └── bootstrap.css
    ├── favicon.ico
    ├── image
    │   ├── vuex.png
    │   ├── 全局事件总线.png
    │   └── 消息订阅与发布.png
    └── index.html
├── src
    ├── App.vue
    ├── components
    │   └── Banner.vue
    ├── main.js
    ├── pages
    │   ├── About.vue
    │   ├── Detail.vue
    │   ├── Home.vue
    │   ├── Message.vue
    │   └── News.vue
    └── router
    │   └── index.js
└── vue.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/01_src_分析脚手架/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <School></School>
 4 |         <Student></Student>
 5 |     </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |     import School from './components/School'
10 |     import Student from './components/Student'
11 | 
12 |     export default {
13 |         name:'App',
14 |         components:{
15 |             School,
16 |             Student
17 |         }
18 |     }
19 | </script>


--------------------------------------------------------------------------------
/01_src_分析脚手架/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xingwei07/vue_test/85867ccb36c0a8297e13a331655bd407d8f541fa/01_src_分析脚手架/assets/logo.png


--------------------------------------------------------------------------------
/01_src_分析脚手架/components/School.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="demo">
 3 |         <h2>学校名称：{{name}}</h2>
 4 |         <h2>学校地址：{{address}}</h2>
 5 |         <button @click="show">点我提示学校名</button>
 6 |     </div>
 7 | </template>
 8 | 
 9 | <script>
10 |     export default {
11 |         name:'School',
12 |         data(){
13 |             return {
14 |                 name:'尚硅谷',
15 |                 address:'北京昌平'
16 |             }
17 |         },
18 |         methods:{
19 |             show(){
20 |                 alert(this.name)
21 |             }
22 |         }
23 |     }
24 | </script>
25 | 
26 | <style>
27 |     .demo{
28 |         background-color: orange;
29 |     }
30 | </style>


--------------------------------------------------------------------------------
/01_src_分析脚手架/components/Student.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <h2>学生姓名：{{name}}</h2>
 4 |         <h2>学生年龄：{{age}}</h2>
 5 |     </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |     export default {
10 |         name:'Student',
11 |         data(){
12 |             return {
13 |                 name:'张三',
14 |                 age: 18
15 |             }
16 |         }
17 |     }
18 | </script>


--------------------------------------------------------------------------------
/01_src_分析脚手架/main.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |   该文件时整个项目的入口文件
 3 | */
 4 | // 引入Vue
 5 | import Vue from 'vue'
 6 | // 引入App组件，它是所有组件的父组件
 7 | import App from './App.vue'
 8 | // 关闭Vue的生产提示
 9 | Vue.config.productionTip = false
10 | 
11 | // 创建Vue实例对象vm
12 | new Vue({
13 |   // 功能：将App组件放入容器中
14 |   render: h => h(App),
15 | }).$mount('#app')
16 | 


--------------------------------------------------------------------------------
/02_src_ref元素/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1 v-text="msg" ref="title"></h1>
 4 |     <button ref="btn" @click="showDOM">点我输出上方DOM</button>
 5 |     <School ref="sch" />
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 |   //引入School组件
11 |   import School from './components/School.vue'
12 | 
13 |   export default {
14 |     name:'App',
15 |     data() {
16 |       return {
17 |         msg:'欢迎学习Vue!'
18 |       }
19 |     },
20 |     methods:{
21 |       showDOM(){
22 |         console.log(this.$refs.title) //真实DOM元素
23 |         console.log(this.$refs.btn) //真实DOM元素
24 |         console.log(this.$refs.sch) //School组件的实例对象(vc)
25 |       }
26 |     },
27 |     components:{
28 |       School
29 |     }
30 |   }
31 | </script>
32 | 
33 | <style>
34 | 
35 | </style>


--------------------------------------------------------------------------------
/02_src_ref元素/components/School.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="school">
 3 |     <h2>学校名称：{{name}}</h2>
 4 |     <h2>学校地址：{{address}}</h2>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |   export default {
10 |     name:'School',
11 |     data(){
12 |       return {
13 |         name:'尚硅谷',
14 |         address:'北京昌平'
15 |       }
16 |     }
17 |   }
18 | </script>
19 | 
20 | <style>
21 |   .school {
22 |     background-color: gray;
23 |   }
24 | </style>


--------------------------------------------------------------------------------
/02_src_ref元素/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | //关闭vue的生产提示
 6 | Vue.config.productionTip = false
 7 | 
 8 | //创建vm
 9 | new Vue({
10 |     el:'#app',
11 |     render: h => h(App)
12 | })


--------------------------------------------------------------------------------
/03_src_props配置/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Student name="张三" :age="20" sex="男" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   import Student from './components/Student.vue'
 9 | 
10 |   export default {
11 |     name:'App',
12 |     components:{
13 |       Student
14 |     }
15 |   }
16 | </script>


--------------------------------------------------------------------------------
/03_src_props配置/components/Student.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>{{msg}}</h1>
 4 |     <h2>学生姓名：{{name}}</h2>
 5 |     <h2>学生性别：{{sex}}</h2>
 6 |     <h2>学生年龄：{{age+1}}</h2>
 7 |     <button @click="updateAge">尝试修改年龄</button>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 |   export default {
13 |     name:'Student',
14 |     data(){
15 |       return {
16 |         msg:'我是一个尚硅谷的学生'
17 |       }
18 |     },
19 |     methods: {
20 |       updateAge(){
21 |         this.age++
22 |       }
23 |     },
24 |     // props:['name','age','sex'] //简单接收
25 |     // props:{
26 |     //   name: String,
27 |     //   age: Number,
28 |     //   sex: String
29 |     // }
30 |     props:{
31 |       name:{
32 |         type:String, //类型是String
33 |         required:true //name是必要的
34 |       },
35 |       age:{
36 |         type:Number,
37 |         default:99 //默认值
38 |       },
39 |       sex:{
40 |         type:String,
41 |         required:true,
42 |         default:'男'
43 |       }
44 |     }
45 |   }
46 | </script>


--------------------------------------------------------------------------------
/03_src_props配置/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | //关闭vue的生产提示
 6 | Vue.config.productionTip = false
 7 | 
 8 | //创建vm
 9 | new Vue({
10 |     el:'#app',
11 |     render: h => h(App)
12 | })


--------------------------------------------------------------------------------
/04_src_mixin混入(合)/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Student />
 4 |     <hr>
 5 |     <School />
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 |   import Student from './components/Student'
11 |   import School from './components/School'
12 | 
13 |   export default {
14 |     name:'App',
15 |     components:{
16 |       Student,
17 |       School
18 |     }
19 |   }
20 | </script>


--------------------------------------------------------------------------------
/04_src_mixin混入(合)/components/School.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <!-- <h2 @click="showName">学校名称：{{name}}</h2> -->
 4 |     <h2 @click="showName">学校名称：{{name}}</h2>
 5 |     <h2>学校地址：{{address}}</h2>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script> 
10 |   //引入一个混合
11 |   // import {mixin} from '../mixin'
12 | 
13 |   export default {
14 |     name:'School',
15 |     data(){
16 |       return {
17 |         name:'尚硅谷',
18 |         address:'北京昌平'
19 |       }
20 |     }
21 |   }
22 | </script>


--------------------------------------------------------------------------------
/04_src_mixin混入(合)/components/Student.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2 @click="showName">学生姓名：{{name}}</h2>
 4 |     <h2>学生年龄：{{age}}</h2>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |   // import {mixin} from '../mixin'
10 |   export default {
11 |     name:'Student',
12 |     data(){
13 |       return {
14 |         name:'张三',
15 |         age:18
16 |       }
17 |     }
18 |   }
19 | </script>


--------------------------------------------------------------------------------
/04_src_mixin混入(合)/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | import {mixin} from './mixin'
 6 | 
 7 | //关闭vue的生产提示
 8 | Vue.config.productionTip = false
 9 | Vue.mixin(mixin)
10 | 
11 | //创建vm
12 | new Vue({
13 |     el:'#app',
14 |     render: h => h(App)
15 | })


--------------------------------------------------------------------------------
/04_src_mixin混入(合)/mixin.js:
--------------------------------------------------------------------------------
 1 | export const mixin = {
 2 |   methods: {
 3 |     showName(){
 4 |       alert(this.name)
 5 |     }
 6 |   }
 7 | }
 8 | 
 9 | export const mixin2 = {
10 |   mounted(){
11 |     console.log("加载完毕...")
12 |   }
13 | }


--------------------------------------------------------------------------------
/05_src_插件/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Student />
 4 |     <hr>
 5 |     <School />
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 |   import Student from './components/Student'
11 |   import School from './components/School'
12 | 
13 |   export default {
14 |     name:'App',
15 |     components:{
16 |       Student,
17 |       School
18 |     }
19 |   }
20 | </script>


--------------------------------------------------------------------------------
/05_src_插件/components/School.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>学校名称：{{name | myFilter}}</h2>
 4 |     <h2>学校地址：{{address}}</h2>
 5 |     <button @click="test">点我测试一下hello</button>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script> 
10 |   export default {
11 |     name:'School',
12 |     data(){
13 |       return {
14 |         name:'尚硅谷111',
15 |         address:'北京昌平'
16 |       }
17 |     },
18 |     methods:{
19 |       test(){
20 |         this.hello()
21 |       }
22 |     }
23 |   }
24 | </script>


--------------------------------------------------------------------------------
/05_src_插件/components/Student.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>学生姓名：{{name}}</h2>
 4 |     <h2 @click="add">学生年龄：{{age}}</h2>
 5 |     <input type="text" v-fbind:value="age">
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 |   export default {
11 |     name:'Student',
12 |     data(){
13 |       return {
14 |         name:'张三',
15 |         age:18
16 |       }
17 |     }
18 |   }
19 | </script>


--------------------------------------------------------------------------------
/05_src_插件/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | 
 6 | //引入插件
 7 | import plugins from './plugins'
 8 | 
 9 | //关闭vue的生产提示
10 | Vue.config.productionTip = false
11 | 
12 | //应用(使用)插件
13 | Vue.use(plugins)
14 | 
15 | //创建vm
16 | new Vue({
17 |     el:'#app',
18 |     render: h => h(App)
19 | })


--------------------------------------------------------------------------------
/05_src_插件/plugins.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   install(Vue){
 3 |     //全局过滤器
 4 |     Vue.filter('myFilter',function(value){
 5 |       return value.slice(0,4)
 6 |     })
 7 | 
 8 |     //定义全局指令
 9 |     Vue.directive('fbind',{
10 |       //指令与元素成功绑定时(一上来)
11 |       bind(element,binding){
12 |         element.value = binding.value
13 |       },
14 |       //指令所在元素被插入页面时
15 |       inserted(element){
16 |         element.focus()
17 |       },
18 |       //指令所在的模板被重新解析时
19 |       update(element,binding) {
20 |         element.value = binding.value
21 |       }
22 |     })
23 | 
24 |     //定义混入
25 |     Vue.mixin({
26 |       data(){
27 |         return {
28 |           x: 100,
29 |           y: 200
30 |         }
31 |       },
32 |       methods:{
33 |         add(){
34 |           this.age++
35 |         }
36 |       }
37 |     })
38 | 
39 |     //给原型上添加一个方法
40 |     Vue.prototype.hello = ()=>{
41 |       alert('你好啊')
42 |     }
43 |   }
44 | }
45 | 
46 | 


--------------------------------------------------------------------------------
/06_src_scoped样式/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Student />
 4 |     <hr>
 5 |     <School />
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 |   import Student from './components/Student'
11 |   import School from './components/School'
12 | 
13 |   export default {
14 |     name:'App',
15 |     components:{
16 |       Student,
17 |       School
18 |     }
19 |   }
20 | </script>


--------------------------------------------------------------------------------
/06_src_scoped样式/components/School.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="demo">
 3 |     <h2>学校名称：{{name}}</h2>
 4 |     <h2>学校地址：{{address}}</h2>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script> 
 9 |   export default {
10 |     name:'School',
11 |     data(){
12 |       return {
13 |         name:'尚硅谷111',
14 |         address:'北京昌平'
15 |       }
16 |     }
17 |   }
18 | </script>
19 | 
20 | <style scoped>
21 |   .demo {
22 |     background-color: skyblue;
23 |   }
24 | </style>


--------------------------------------------------------------------------------
/06_src_scoped样式/components/Student.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="demo">
 3 |     <h2>学生姓名：{{name}}</h2>
 4 |     <h2>学生年龄：{{age}}</h2>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |   export default {
10 |     name:'Student',
11 |     data(){
12 |       return {
13 |         name:'张三',
14 |         age:18
15 |       }
16 |     }
17 |   }
18 | </script>
19 | 
20 | <style scoped>
21 |   .demo {
22 |     background-color: orange;
23 |   }
24 | </style>


--------------------------------------------------------------------------------
/06_src_scoped样式/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | 
 6 | //关闭vue的生产提示
 7 | Vue.config.productionTip = false
 8 | 
 9 | //创建vm
10 | new Vue({
11 |     el:'#app',
12 |     render: h => h(App)
13 | })


--------------------------------------------------------------------------------
/07_src_TodoList案例/components/MyHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="todo-header">
 3 |     <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="todo" @keydown.enter="add" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   import {nanoid} from 'nanoid'
 9 | 
10 |   export default {
11 |     name:'MyHeader',
12 |     props:['addTodo'],
13 |     data(){
14 |       return {
15 |         todo:''
16 |       }
17 |     },
18 |     methods:{
19 |       add(){
20 |         //判断是否为空-去掉首尾空格
21 |         if(!this.todo.trim()) return
22 |         //定义数据
23 |         const todoObj = {
24 |           id: nanoid(),
25 |           title: this.todo.trim(),
26 |           status: false
27 |         }
28 |         //调用vm的addTodo方法
29 |         this.addTodo(todoObj)
30 |         //清空输入框
31 |         this.todo = ''
32 |       }
33 |     }
34 |   }
35 | </script>
36 | 
37 | <style scoped>
38 |   /* header */
39 |   .todo-header input {
40 |     width: 560px;
41 |     height: 28px;
42 |     font-size: 14px;
43 |     border: 1px solid #ccc;
44 |     border-radius: 4px;
45 |     padding: 4px 7px;
46 |   }
47 | 
48 |   .todo-header input:focus {
49 |     outline: none;
50 |     border-color: rgba(82, 168, 236, 0.8);
51 |     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
52 |   }
53 | </style>


--------------------------------------------------------------------------------
/07_src_TodoList案例/components/MyItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <li>
 3 |     <label>
 4 |       <input type="checkbox" :checked="todoObj.status" @change="edit(todoObj.id)" />
 5 |       <!-- 不建议修改props中的内容 -->
 6 |       <!-- <input type="checkbox" v-model="todoObj.status" /> -->
 7 |       <span>{{todoObj.title}}</span>
 8 |     </label>
 9 |     <button class="btn btn-danger" @click="del(todoObj.id)">删除</button>
10 |   </li>
11 | </template>
12 | 
13 | <script>
14 |   export default {
15 |     name:'MyItem',
16 |     props:['todoObj','editStatus','delTodo'],
17 |     methods:{
18 |       //修改状态
19 |       edit(id){
20 |         //通知APP组件将对应的todo对象的status值取反
21 |         this.editStatus(id)
22 |       },
23 |       //删除
24 |       del(id){
25 |         if(confirm('是否删除数据')) {
26 |           //通知APP组件将对应的todo对象删除
27 |          this.delTodo(id)
28 |         }
29 |       }
30 |     }
31 |   }
32 | </script>
33 | 
34 | <style scoped>
35 |   /* item */
36 |   li {
37 |     list-style: none;
38 |     height: 36px;
39 |     line-height: 36px;
40 |     padding: 0 5px;
41 |     border-bottom: 1px solid #ddd;
42 |   }
43 | 
44 |   li label {
45 |     float: left;
46 |     cursor: pointer;
47 |   }
48 | 
49 |   li label li input {
50 |     vertical-align: middle;
51 |     margin-right: 6px;
52 |     position: relative;
53 |     top: -1px;
54 |   }
55 | 
56 |   li button {
57 |     float: right;
58 |     display: none;
59 |     margin-top: 3px;
60 |   }
61 | 
62 |   li:before {
63 |     content: initial;
64 |   }
65 | 
66 |   li:last-child {
67 |     border-bottom: none;
68 |   }
69 | 
70 |   li:hover {
71 |     background-color: #ddd;
72 |   }
73 | 
74 |   li:hover button {
75 |     display: block;
76 |   }
77 | </style>


--------------------------------------------------------------------------------
/07_src_TodoList案例/components/MyList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul class="todo-main">
 3 |     <MyItem 
 4 |       v-for="todoObj in todoArr"
 5 |       :key="todoObj.id"
 6 |       :todoObj="todoObj"
 7 |       :editStatus="editStatus"
 8 |       :delTodo="delTodo"
 9 |     />
10 |   </ul>
11 | </template>
12 | 
13 | <script>
14 |   import MyItem from './MyItem'
15 | 
16 |   export default {
17 |     name:'MyList',
18 |     components:{
19 |       MyItem
20 |     },
21 |     props:['todoArr','editStatus','delTodo']
22 |   }
23 | </script>
24 | 
25 | <style scoped>
26 |   /* main */
27 |   .todo-main {
28 |     margin-left: 0;
29 |     border: 1px solid #ddd;
30 |     border-radius: 2px;
31 |     padding: 0;
32 |   }
33 | 
34 |   .todo-empty {
35 |     height: 40px;
36 |     line-height: 40px;
37 |     border: 1px solid #ddd;
38 |     border-radius: 2px;
39 |     padding-left: 5px;
40 |     margin-top: 10px;
41 |   }
42 | </style>


--------------------------------------------------------------------------------
/07_src_TodoList案例/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | 
 6 | //关闭vue的生产提示
 7 | Vue.config.productionTip = false
 8 | 
 9 | //创建vm
10 | new Vue({
11 |     el:'#app',
12 |     render: h => h(App)
13 | })


--------------------------------------------------------------------------------
/07_src_TodoList案例/todoList.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Recat App</title>
 6 |   <link rel="stylesheet" href="todoList.css">
 7 |   </head>
 8 |   <body>
 9 |     <div id="root">
10 |       <div class="todo-container">
11 |         <div class="todo-wrap">
12 |           <div class="todo-header">
13 |             <input type="text" placeholder="请输入你的任务名称，按回车键确认" />
14 |           </div>
15 |           <ul class="todo-main">
16 |             <li>
17 |               <label>
18 |                 <input type="checkbox" />
19 |                 <span>xxxxx</span>
20 |               </label>
21 |               <button class="btn btn-danger" style="display:none">删除</button>
22 |             </li>
23 |             <li>
24 |               <label>
25 |                 <input type="checkbox" />
26 |                 <span>yyyyy</span>
27 |               </label>
28 |               <button class="btn btn-danger" style="display: none;">删除</button>
29 |             </li>
30 |           </ul>
31 |           <div class="todo-footer">
32 |             <label>
33 |               <input type="checkbox">
34 |             </label>
35 |             <span>
36 |               <span>已完成0</span> / 全部2
37 |             </span>
38 |             <button class="btn btn-danger">清除已完成任务</button>
39 |           </div>
40 |         </div>
41 |       </div>
42 |     </div>
43 |   </body>
44 | </html>


--------------------------------------------------------------------------------
/07_src_TodoList案例_test/components/MyHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="todo-header">
 3 |     <input type="text" placeholder="请输入你的任务名称，按回车键确认" @keyup.enter="addTodo" v-model="todoTitle" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   import {nanoid} from 'nanoid'
 9 | 
10 |   export default {
11 |     name:'MyHeader',
12 |     data(){
13 |       return {
14 |         todoTitle: ''
15 |       }
16 |     },
17 |     // props:['add'],
18 |     methods:{
19 |       //添加待办
20 |       addTodo(){
21 |         if(!this.todoTitle.trim()) return
22 |         const todoObj = {
23 |           id: nanoid(),
24 |           title: this.todoTitle.trim(),
25 |           status: false
26 |         }
27 |         //将todoObj提交给APP
28 |         // this.add(todoObj)
29 |         this.$emit('add',todoObj)
30 |         this.todoTitle = ''
31 |       }
32 |     }
33 |   }
34 | </script>
35 | 
36 | <style scoped>
37 |   /* header */
38 |   .todo-header input {
39 |     width: 560px;
40 |     height: 28px;
41 |     font-size: 14px;
42 |     border: 1px solid #ccc;
43 |     border-radius: 4px;
44 |     padding: 4px 7px;
45 |   }
46 | 
47 |   .todo-header input:focus {
48 |     outline: none;
49 |     border-color: rgba(82, 168, 236, 0.8);
50 |     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
51 |   }
52 | </style>


--------------------------------------------------------------------------------
/07_src_TodoList案例_test/components/MyItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <li>
 3 |     <label>
 4 |       <input type="checkbox" :checked="todo.status" @change="check(todo.id)" />
 5 |       <span>{{todo.title}}</span>
 6 |     </label>
 7 |     <button class="btn btn-danger" @click="delTodo(todo.id)">删除</button>
 8 |   </li>
 9 | </template>
10 | 
11 | <script>
12 |   export default {
13 |     name:'MyItem',
14 |     props:['todo','editStatus','del'],
15 |     methods:{
16 |       check(id){
17 |         this.editStatus(id)
18 |       },
19 |       delTodo(id){
20 |         if(confirm('是否确认删除'))  this.del(id)
21 |       }
22 |     }
23 |   }
24 | </script>
25 | 
26 | <style scoped>
27 |   /* item */
28 |   li {
29 |     list-style: none;
30 |     height: 36px;
31 |     line-height: 36px;
32 |     padding: 0 5px;
33 |     border-bottom: 1px solid #ddd;
34 |   }
35 | 
36 |   li label {
37 |     float: left;
38 |     cursor: pointer;
39 |   }
40 | 
41 |   li label li input {
42 |     vertical-align: middle;
43 |     margin-right: 6px;
44 |     position: relative;
45 |     top: -1px;
46 |   }
47 | 
48 |   li button {
49 |     float: right;
50 |     display: none;
51 |     margin-top: 3px;
52 |   }
53 | 
54 |   li:before {
55 |     content: initial;
56 |   }
57 | 
58 |   li:last-child {
59 |     border-bottom: none;
60 |   }
61 | 
62 |   li:hover {
63 |     background-color: #ddd;
64 |   }
65 | 
66 |   li:hover button {
67 |     display: block;
68 |   }
69 | </style>


--------------------------------------------------------------------------------
/07_src_TodoList案例_test/components/MyList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul class="todo-main">
 3 |     <MyItem 
 4 |       v-for="todo in todos" 
 5 |       :key="todo.id" 
 6 |       :todo="todo" 
 7 |       :editStatus="editStatus"
 8 |       :del="del"
 9 |     />
10 |   </ul>
11 | </template>
12 | 
13 | <script>
14 |   import MyItem from './MyItem'
15 | 
16 |   export default {
17 |     name:'MyList',
18 |     props:['todos','editStatus','del'],
19 |     components:{
20 |       MyItem
21 |     }
22 |   }
23 | </script>
24 | 
25 | <style scoped>
26 |   /* main */
27 |   .todo-main {
28 |     margin-left: 0;
29 |     border: 1px solid #ddd;
30 |     border-radius: 2px;
31 |     padding: 0;
32 |   }
33 | 
34 |   .todo-empty {
35 |     height: 40px;
36 |     line-height: 40px;
37 |     border: 1px solid #ddd;
38 |     border-radius: 2px;
39 |     padding-left: 5px;
40 |     margin-top: 10px;
41 |   }
42 | </style>


--------------------------------------------------------------------------------
/07_src_TodoList案例_test/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | 
 6 | //关闭vue的生产提示
 7 | Vue.config.productionTip = false
 8 | 
 9 | //创建vm
10 | new Vue({
11 |     el:'#app',
12 |     render: h => h(App)
13 | })


--------------------------------------------------------------------------------
/07_src_TodoList案例_test/todoList.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Recat App</title>
 6 |   <link rel="stylesheet" href="todoList.css">
 7 |   </head>
 8 |   <body>
 9 |     <div id="root">
10 |       <div class="todo-container">
11 |         <div class="todo-wrap">
12 |           <div class="todo-header">
13 |             <input type="text" placeholder="请输入你的任务名称，按回车键确认" />
14 |           </div>
15 |           <ul class="todo-main">
16 |             <li>
17 |               <label>
18 |                 <input type="checkbox" />
19 |                 <span>xxxxx</span>
20 |               </label>
21 |               <button class="btn btn-danger" style="display:none">删除</button>
22 |             </li>
23 |             <li>
24 |               <label>
25 |                 <input type="checkbox" />
26 |                 <span>yyyyy</span>
27 |               </label>
28 |               <button class="btn btn-danger" style="display: none;">删除</button>
29 |             </li>
30 |           </ul>
31 |           <div class="todo-footer">
32 |             <label>
33 |               <input type="checkbox">
34 |             </label>
35 |             <span>
36 |               <span>已完成0</span> / 全部2
37 |             </span>
38 |             <button class="btn btn-danger">清除已完成任务</button>
39 |           </div>
40 |         </div>
41 |       </div>
42 |     </div>
43 |   </body>
44 | </html>


--------------------------------------------------------------------------------
/08_浏览器本地存储/localStorage.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>localStorage</title>
 6 |   </head>
 7 |   <body>
 8 |     <h1>localStorage</h1>
 9 |     <button onclick="add()">增加localStorage</button>
10 |     <button onclick="read()">读取localStorage</button>
11 |     <button onclick="del()">删除localStorage</button>
12 |     <button onclick="delAll()">清空localStorage</button>
13 | 
14 |     <script>
15 |       const p = {
16 |         id: '001',
17 |         name: '张三',
18 |         age: 18
19 |       }
20 |       
21 |       function add(){
22 |         localStorage.setItem('msg','abc');
23 |         localStorage.setItem('num',123);
24 |         localStorage.setItem('obj',JSON.stringify(p));
25 |       }
26 | 
27 |       function read(){
28 |         console.log(localStorage.getItem('msg'));
29 |         console.log(localStorage.getItem('num'));
30 |         const p = localStorage.getItem('obj');
31 |         console.log(JSON.parse(p));
32 | 
33 |         console.log(localStorage.getItem('msg2'))
34 |       }
35 | 
36 |       function del(){
37 |         localStorage.removeItem('msg');
38 |       }
39 |       
40 |       function delAll(){
41 |         localStorage.clear()
42 |       }
43 |     </script>
44 |   </body>
45 | </html>


--------------------------------------------------------------------------------
/08_浏览器本地存储/sessionStorage.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>sessionStorage</title>
 6 |   </head>
 7 |   <body>
 8 |     <h1>sessionStorage</h1>
 9 |     <button onclick="add()">增加sessionStorage</button>
10 |     <button onclick="read()">读取sessionStorage</button>
11 |     <button onclick="del()">删除sessionStorage</button>
12 |     <button onclick="clearAll()">清空sessionStorage</button>
13 | 
14 |     <script>
15 |       const p = {
16 |         id: '001',
17 |         name: '张三',
18 |         age: 18
19 |       }
20 | 
21 |       function add(){
22 |         sessionStorage.setItem('msg','a');
23 |         sessionStorage.setItem('num',123);
24 |         sessionStorage.setItem('obj',JSON.stringify(p));
25 |       }
26 | 
27 |       function read(){
28 |         console.log(sessionStorage.getItem('msg'))
29 |         console.log(sessionStorage.getItem('num'))
30 |         const p = sessionStorage.getItem('obj')
31 |         console.log(JSON.parse(p))
32 |         console.log(sessionStorage.getItem('msg2'))
33 |       }
34 | 
35 |       function del(){
36 |         sessionStorage.removeItem('msg')
37 |       }
38 | 
39 |       function clearAll(){
40 |         sessionStorage.clear()
41 |       }
42 |     </script>
43 |   </body>
44 | </html>


--------------------------------------------------------------------------------
/09_src_TodoList本地存储/components/MyHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="todo-header">
 3 |     <input type="text" placeholder="请输入你的任务名称，按回车键确认" @keyup.enter="addTodo" v-model="todoTitle" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   import {nanoid} from 'nanoid'
 9 | 
10 |   export default {
11 |     name:'MyHeader',
12 |     data(){
13 |       return {
14 |         todoTitle: ''
15 |       }
16 |     },
17 |     // props:['add'],
18 |     methods:{
19 |       //添加待办
20 |       addTodo(){
21 |         if(!this.todoTitle.trim()) return
22 |         const todoObj = {
23 |           id: nanoid(),
24 |           title: this.todoTitle.trim(),
25 |           status: false
26 |         }
27 |         //将todoObj提交给APP
28 |         // this.add(todoObj)
29 |         this.$emit('add',todoObj)
30 |         this.todoTitle = ''
31 |       }
32 |     }
33 |   }
34 | </script>
35 | 
36 | <style scoped>
37 |   /* header */
38 |   .todo-header input {
39 |     width: 560px;
40 |     height: 28px;
41 |     font-size: 14px;
42 |     border: 1px solid #ccc;
43 |     border-radius: 4px;
44 |     padding: 4px 7px;
45 |   }
46 | 
47 |   .todo-header input:focus {
48 |     outline: none;
49 |     border-color: rgba(82, 168, 236, 0.8);
50 |     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
51 |   }
52 | </style>


--------------------------------------------------------------------------------
/09_src_TodoList本地存储/components/MyItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <li>
 3 |     <label>
 4 |       <input type="checkbox" :checked="todo.status" @change="check(todo.id)" />
 5 |       <span>{{todo.title}}</span>
 6 |     </label>
 7 |     <button class="btn btn-danger" @click="delTodo(todo.id)">删除</button>
 8 |   </li>
 9 | </template>
10 | 
11 | <script>
12 |   export default {
13 |     name:'MyItem',
14 |     props:['todo','editStatus','del'],
15 |     methods:{
16 |       check(id){
17 |         this.editStatus(id)
18 |       },
19 |       delTodo(id){
20 |         if(confirm('是否确认删除'))  this.del(id)
21 |       }
22 |     }
23 |   }
24 | </script>
25 | 
26 | <style scoped>
27 |   /* item */
28 |   li {
29 |     list-style: none;
30 |     height: 36px;
31 |     line-height: 36px;
32 |     padding: 0 5px;
33 |     border-bottom: 1px solid #ddd;
34 |   }
35 | 
36 |   li label {
37 |     float: left;
38 |     cursor: pointer;
39 |   }
40 | 
41 |   li label li input {
42 |     vertical-align: middle;
43 |     margin-right: 6px;
44 |     position: relative;
45 |     top: -1px;
46 |   }
47 | 
48 |   li button {
49 |     float: right;
50 |     display: none;
51 |     margin-top: 3px;
52 |   }
53 | 
54 |   li:before {
55 |     content: initial;
56 |   }
57 | 
58 |   li:last-child {
59 |     border-bottom: none;
60 |   }
61 | 
62 |   li:hover {
63 |     background-color: #ddd;
64 |   }
65 | 
66 |   li:hover button {
67 |     display: block;
68 |   }
69 | </style>


--------------------------------------------------------------------------------
/09_src_TodoList本地存储/components/MyList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul class="todo-main">
 3 |     <MyItem 
 4 |       v-for="todo in todos" 
 5 |       :key="todo.id" 
 6 |       :todo="todo" 
 7 |       :editStatus="editStatus"
 8 |       :del="del"
 9 |     />
10 |   </ul>
11 | </template>
12 | 
13 | <script>
14 |   import MyItem from './MyItem'
15 | 
16 |   export default {
17 |     name:'MyList',
18 |     props:['todos','editStatus','del'],
19 |     components:{
20 |       MyItem
21 |     }
22 |   }
23 | </script>
24 | 
25 | <style scoped>
26 |   /* main */
27 |   .todo-main {
28 |     margin-left: 0;
29 |     border: 1px solid #ddd;
30 |     border-radius: 2px;
31 |     padding: 0;
32 |   }
33 | 
34 |   .todo-empty {
35 |     height: 40px;
36 |     line-height: 40px;
37 |     border: 1px solid #ddd;
38 |     border-radius: 2px;
39 |     padding-left: 5px;
40 |     margin-top: 10px;
41 |   }
42 | </style>


--------------------------------------------------------------------------------
/09_src_TodoList本地存储/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | 
 6 | //关闭vue的生产提示
 7 | Vue.config.productionTip = false
 8 | 
 9 | //创建vm
10 | new Vue({
11 |     el:'#app',
12 |     render: h => h(App)
13 | })


--------------------------------------------------------------------------------
/10_src_组件自定义事件/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="app">
 3 |     <h1>{{msg}}</h1>
 4 |     <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
 5 |     <School :getSchoolName="getSchoolName"  />
 6 |     <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
 7 |     <!-- <Student @atguigu="getStudentName" @show="m1" /> -->
 8 | 
 9 |     <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
10 |     <!-- <Student ref="student" @click="demo" /> 所有绑定的事件都当做自定义事件 -->
11 |     <Student ref="student" @click.native="test" /> <!-- 加上native会解析为原生dom事件 -->
12 | 
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 |   import Student from './components/Student'
18 |   import School from './components/School'
19 | 
20 |   export default {
21 |     name:'App',
22 |     data() {
23 |       return {
24 |         msg:'你好啊！'
25 |       }
26 |     },
27 |     components:{
28 |       Student,
29 |       School
30 |     },
31 |     methods: {
32 |       getSchoolName(name){
33 |         console.log("获取到了学校名称",name)
34 |       },
35 |       //第一个参数使用name正常接，其余的参数整理到a数组里
36 |       getStudentName(name,...params){
37 |         console.log('获取到了学生姓名',name,params)
38 |       },
39 |       m1(){
40 |         console.log('m1被调用了');
41 |       },
42 |       demo(){
43 |         console.log('demo被触发了')
44 |       },
45 |       test(){
46 |         alert(123)
47 |       }
48 |     },
49 |     mounted(){
50 |       //等待3秒钟后绑定自定义事件
51 |       // setTimeout(()=>{
52 |         this.$refs.student.$on('atguigu',this.getStudentName) //绑定自定义事件 
53 |       //   // this.$refs.student.$once('atguigu',this.getStudentName) //绑定自定义事件 只允许触发一次
54 |       // },3000)
55 |     }
56 |   }
57 | </script>
58 | 
59 | <style lang="css">
60 |   .app {
61 |     background-color: gray;
62 |     padding: 5px;
63 |   }
64 | </style>


--------------------------------------------------------------------------------
/10_src_组件自定义事件/components/School.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="school">
 3 |     <h2>学校名称：{{name}}</h2>
 4 |     <h2>学校地址：{{address}}</h2>
 5 |     <button @click="send">给APP传递学校名称</button>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script> 
10 |   export default {
11 |     name:'School',
12 |     data(){
13 |       return {
14 |         name:'尚硅谷',
15 |         address:'北京昌平'
16 |       }
17 |     },
18 |     props:['getSchoolName'],
19 |     methods: {
20 |       send(){
21 |         this.getSchoolName(this.name)
22 |       }
23 |     },
24 |   }
25 | </script>
26 | 
27 | <style lang="css">
28 |   .school {
29 |     background-color: orange;
30 |     padding: 5px;
31 |   }
32 | </style>


--------------------------------------------------------------------------------
/10_src_组件自定义事件/components/Student.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="student">
 3 |     <h2>学生姓名：{{name}}</h2>
 4 |     <h2>学生性别：{{sex}}</h2>
 5 |     <h2>学生年龄：{{age}}</h2>
 6 |     <button @click="add">年龄增加</button>
 7 |     <button @click="send">给APP传递姓名</button>
 8 |     <button @click="unbind">解绑自定义事件</button>
 9 |     <button @click="death">销毁当前student组件的实例(vc)</button>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 |   export default {
15 |     name:'Student',
16 |     data(){
17 |       return {
18 |         name:'张三',
19 |         sex:'男',
20 |         age:18
21 |       }
22 |     },
23 |     methods: {
24 |       add(){
25 |         this.age++
26 |         console.log('年龄增加了');
27 |       },
28 |       send(){
29 |         //触发绑定事件
30 |         this.$emit('atguigu',this.name,300,500,800)
31 |         // this.$emit('show')
32 |         this.$emit('click')
33 |       },
34 |       unbind(){
35 |         this.$off('atguigu') //解绑一个自定义事件
36 |         // this.$off(['atguigu','show']) //解绑多个自定义事件
37 |         // this.$off() //解绑所有自定义事件
38 |       },
39 |       death(){
40 |         this.$destroy() //销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效
41 |         console.log('vc被销毁了')
42 |       }
43 |     },
44 |   }
45 | </script>
46 | 
47 | <style lang="css">
48 |   .student {
49 |     background-color: pink;
50 |     padding: 5px;
51 |     margin-top: 20px;
52 |   }
53 | </style>


--------------------------------------------------------------------------------
/10_src_组件自定义事件/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | 
 6 | //关闭vue的生产提示
 7 | Vue.config.productionTip = false
 8 | 
 9 | //创建vm
10 | new Vue({
11 |     el:'#app',
12 |     render: h => h(App),
13 |     // mounted(){
14 |     //     setTimeout(()=>{
15 |     //         this.$destroy()
16 |     //     },3000)
17 |     // }
18 | })


--------------------------------------------------------------------------------
/11_src_TodoList_自定义事件/components/MyHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="todo-header">
 3 |     <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="todo" @keydown.enter="add" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   import {nanoid} from 'nanoid'
 9 | 
10 |   export default {
11 |     name:'MyHeader',
12 |     // props:['addTodo'],
13 |     data(){
14 |       return {
15 |         todo:''
16 |       }
17 |     },
18 |     methods:{
19 |       add(){
20 |         //判断是否为空-去掉首尾空格
21 |         if(!this.todo.trim()) return
22 |         //定义数据
23 |         const todoObj = {
24 |           id: nanoid(),
25 |           title: this.todo.trim(),
26 |           status: false
27 |         }
28 |         // //调用vm的addTodo方法
29 |         // this.addTodo(todoObj)
30 |         this.$emit('addTodo',todoObj)
31 |         //清空输入框
32 |         this.todo = ''
33 |       }
34 |     }
35 |   }
36 | </script>
37 | 
38 | <style scoped>
39 |   /* header */
40 |   .todo-header input {
41 |     width: 560px;
42 |     height: 28px;
43 |     font-size: 14px;
44 |     border: 1px solid #ccc;
45 |     border-radius: 4px;
46 |     padding: 4px 7px;
47 |   }
48 | 
49 |   .todo-header input:focus {
50 |     outline: none;
51 |     border-color: rgba(82, 168, 236, 0.8);
52 |     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
53 |   }
54 | </style>


--------------------------------------------------------------------------------
/11_src_TodoList_自定义事件/components/MyItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <li>
 3 |     <label>
 4 |       <input type="checkbox" :checked="todoObj.status" @change="edit(todoObj.id)" />
 5 |       <!-- 不建议修改props中的内容 -->
 6 |       <!-- <input type="checkbox" v-model="todoObj.status" /> -->
 7 |       <span>{{todoObj.title}}</span>
 8 |     </label>
 9 |     <button class="btn btn-danger" @click="del(todoObj.id)">删除</button>
10 |   </li>
11 | </template>
12 | 
13 | <script>
14 |   export default {
15 |     name:'MyItem',
16 |     props:['todoObj','editStatus','delTodo'],
17 |     methods:{
18 |       //修改状态
19 |       edit(id){
20 |         //通知APP组件将对应的todo对象的status值取反
21 |         this.editStatus(id)
22 |       },
23 |       //删除
24 |       del(id){
25 |         if(confirm('是否删除数据')) {
26 |           //通知APP组件将对应的todo对象删除
27 |          this.delTodo(id)
28 |         }
29 |       }
30 |     }
31 |   }
32 | </script>
33 | 
34 | <style scoped>
35 |   /* item */
36 |   li {
37 |     list-style: none;
38 |     height: 36px;
39 |     line-height: 36px;
40 |     padding: 0 5px;
41 |     border-bottom: 1px solid #ddd;
42 |   }
43 | 
44 |   li label {
45 |     float: left;
46 |     cursor: pointer;
47 |   }
48 | 
49 |   li label li input {
50 |     vertical-align: middle;
51 |     margin-right: 6px;
52 |     position: relative;
53 |     top: -1px;
54 |   }
55 | 
56 |   li button {
57 |     float: right;
58 |     display: none;
59 |     margin-top: 3px;
60 |   }
61 | 
62 |   li:before {
63 |     content: initial;
64 |   }
65 | 
66 |   li:last-child {
67 |     border-bottom: none;
68 |   }
69 | 
70 |   li:hover {
71 |     background-color: #ddd;
72 |   }
73 | 
74 |   li:hover button {
75 |     display: block;
76 |   }
77 | </style>


--------------------------------------------------------------------------------
/11_src_TodoList_自定义事件/components/MyList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul class="todo-main">
 3 |     <MyItem 
 4 |       v-for="todoObj in todoArr"
 5 |       :key="todoObj.id"
 6 |       :todoObj="todoObj"
 7 |       :editStatus="editStatus"
 8 |       :delTodo="delTodo"
 9 |     />
10 |   </ul>
11 | </template>
12 | 
13 | <script>
14 |   import MyItem from './MyItem'
15 | 
16 |   export default {
17 |     name:'MyList',
18 |     components:{
19 |       MyItem
20 |     },
21 |     props:['todoArr','editStatus','delTodo']
22 |   }
23 | </script>
24 | 
25 | <style scoped>
26 |   /* main */
27 |   .todo-main {
28 |     margin-left: 0;
29 |     border: 1px solid #ddd;
30 |     border-radius: 2px;
31 |     padding: 0;
32 |   }
33 | 
34 |   .todo-empty {
35 |     height: 40px;
36 |     line-height: 40px;
37 |     border: 1px solid #ddd;
38 |     border-radius: 2px;
39 |     padding-left: 5px;
40 |     margin-top: 10px;
41 |   }
42 | </style>


--------------------------------------------------------------------------------
/11_src_TodoList_自定义事件/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | 
 6 | //关闭vue的生产提示
 7 | Vue.config.productionTip = false
 8 | 
 9 | //创建vm
10 | new Vue({
11 |     el:'#app',
12 |     render: h => h(App)
13 | })


--------------------------------------------------------------------------------
/12_src_全局事件总线/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="app">
 3 |     <h1>{{msg}}</h1>
 4 |     <School />
 5 |     <Student />
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 |   import Student from './components/Student'
11 |   import School from './components/School'
12 | 
13 |   export default {
14 |     name:'App',
15 |     data() {
16 |       return {
17 |         msg:'你好啊！'
18 |       }
19 |     },
20 |     components:{
21 |       Student,
22 |       School
23 |     }
24 |   }
25 | </script>
26 | 
27 | <style lang="css">
28 |   .app {
29 |     background-color: gray;
30 |     padding: 5px;
31 |   }
32 | </style>


--------------------------------------------------------------------------------
/12_src_全局事件总线/components/School.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="school">
 3 |     <h2>学校名称：{{name}}</h2>
 4 |     <h2>学校地址：{{address}}</h2>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script> 
 9 |   export default {
10 |     name:'School',
11 |     data(){
12 |       return {
13 |         name:'尚硅谷',
14 |         address:'北京昌平'
15 |       }
16 |     },
17 |     mounted(){
18 |       //绑定自定义组件
19 |       this.$bus.$on('atguigu',(name)=>{
20 |         console.log(name)
21 |       })
22 |     }
23 |   }
24 | </script>
25 | 
26 | <style lang="css">
27 |   .school {
28 |     background-color: orange;
29 |     padding: 5px;
30 |   }
31 | </style>


--------------------------------------------------------------------------------
/12_src_全局事件总线/components/Student.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="student">
 3 |     <h2>学生姓名：{{name}}</h2>
 4 |     <h2>学生性别：{{sex}}</h2>
 5 |     <button @click="sendStudentName">将学生姓名传递给School组件</button>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 |   export default {
11 |     name:'Student',
12 |     data(){
13 |       return {
14 |         name:'张三',
15 |         sex:'男'
16 |       }
17 |     },
18 |     methods:{
19 |       sendStudentName(){
20 |         console.log(this)
21 |         this.$bus.$emit('atguigu',this.name)
22 |       }
23 |     }
24 |   }
25 | </script>
26 | 
27 | <style lang="css">
28 |   .student {
29 |     background-color: pink;
30 |     padding: 5px;
31 |     margin-top: 20px;
32 |   }
33 | </style>


--------------------------------------------------------------------------------
/12_src_全局事件总线/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | 
 6 | //关闭vue的生产提示
 7 | Vue.config.productionTip = false
 8 | 
 9 | //创建vm
10 | new Vue({
11 |     el:'#app',
12 |     render: h => h(App),
13 |     beforeCreate() {
14 |         //安装全局事件总线
15 |         Vue.prototype.$bus = this
16 |     },
17 | })


--------------------------------------------------------------------------------
/13_src_TodoList_事件总线/components/MyHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="todo-header">
 3 |     <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="todo" @keydown.enter="add" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   import {nanoid} from 'nanoid'
 9 | 
10 |   export default {
11 |     name:'MyHeader',
12 |     // props:['addTodo'],
13 |     data(){
14 |       return {
15 |         todo:''
16 |       }
17 |     },
18 |     methods:{
19 |       add(){
20 |         //判断是否为空-去掉首尾空格
21 |         if(!this.todo.trim()) return
22 |         //定义数据
23 |         const todoObj = {
24 |           id: nanoid(),
25 |           title: this.todo.trim(),
26 |           status: false
27 |         }
28 |         // //调用vm的addTodo方法
29 |         // this.addTodo(todoObj)
30 |         this.$emit('addTodo',todoObj)
31 |         //清空输入框
32 |         this.todo = ''
33 |       }
34 |     }
35 |   }
36 | </script>
37 | 
38 | <style scoped>
39 |   /* header */
40 |   .todo-header input {
41 |     width: 560px;
42 |     height: 28px;
43 |     font-size: 14px;
44 |     border: 1px solid #ccc;
45 |     border-radius: 4px;
46 |     padding: 4px 7px;
47 |   }
48 | 
49 |   .todo-header input:focus {
50 |     outline: none;
51 |     border-color: rgba(82, 168, 236, 0.8);
52 |     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
53 |   }
54 | </style>


--------------------------------------------------------------------------------
/13_src_TodoList_事件总线/components/MyList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul class="todo-main">
 3 |     <MyItem 
 4 |       v-for="todoObj in todoArr"
 5 |       :key="todoObj.id"
 6 |       :todoObj="todoObj"
 7 |     />
 8 |   </ul>
 9 | </template>
10 | 
11 | <script>
12 |   import MyItem from './MyItem'
13 | 
14 |   export default {
15 |     name:'MyList',
16 |     components:{
17 |       MyItem
18 |     },
19 |     // props:['todoArr','editStatus','delTodo']
20 |     props:['todoArr']
21 |   }
22 | </script>
23 | 
24 | <style scoped>
25 |   /* main */
26 |   .todo-main {
27 |     margin-left: 0;
28 |     border: 1px solid #ddd;
29 |     border-radius: 2px;
30 |     padding: 0;
31 |   }
32 | 
33 |   .todo-empty {
34 |     height: 40px;
35 |     line-height: 40px;
36 |     border: 1px solid #ddd;
37 |     border-radius: 2px;
38 |     padding-left: 5px;
39 |     margin-top: 10px;
40 |   }
41 | </style>


--------------------------------------------------------------------------------
/13_src_TodoList_事件总线/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | 
 6 | //关闭vue的生产提示
 7 | Vue.config.productionTip = false
 8 | 
 9 | //创建vm
10 | new Vue({
11 |     el:'#app',
12 |     render: h => h(App),
13 |     beforeCreate() {
14 |         Vue.prototype.$bus = this
15 |     },
16 | })


--------------------------------------------------------------------------------
/14_src_消息订阅与发布/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="app">
 3 |     <h1>{{msg}}</h1>
 4 |     <School />
 5 |     <Student />
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 |   import Student from './components/Student'
11 |   import School from './components/School'
12 | 
13 |   export default {
14 |     name:'App',
15 |     data() {
16 |       return {
17 |         msg:'你好啊！'
18 |       }
19 |     },
20 |     components:{
21 |       Student,
22 |       School
23 |     }
24 |   }
25 | </script>
26 | 
27 | <style lang="css">
28 |   .app {
29 |     background-color: gray;
30 |     padding: 5px;
31 |   }
32 | </style>


--------------------------------------------------------------------------------
/14_src_消息订阅与发布/components/School.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="school">
 3 |     <h2>学校名称：{{name}}</h2>
 4 |     <h2>学校地址：{{address}}</h2>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |   import pubsub from 'pubsub-js'
10 | 
11 |   export default {
12 |     name:'School',
13 |     data(){
14 |       return {
15 |         name:'尚硅谷',
16 |         address:'北京昌平'
17 |       }
18 |     },
19 |     mounted(){
20 |       // //绑定自定义组件
21 |       // this.$bus.$on('atguigu',(name)=>{
22 |       //   console.log(name)
23 |       // })
24 | 
25 |       //订阅hello消息，一旦有人发布就执行回调
26 |       this.pubName = pubsub.subscribe('hello',(magName,data)=>{
27 |         console.log('有人发布了hello消息，hello消息的回调执行了',magName,data)
28 |       })
29 |     },
30 |     beforeDestroy(){
31 |       pubsub.unsubscribe(this.pubName) //取消订阅
32 |     }
33 |   }
34 | </script>
35 | 
36 | <style lang="css">
37 |   .school {
38 |     background-color: orange;
39 |     padding: 5px;
40 |   }
41 | </style>


--------------------------------------------------------------------------------
/14_src_消息订阅与发布/components/Student.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="student">
 3 |     <h2>学生姓名：{{name}}</h2>
 4 |     <h2>学生性别：{{sex}}</h2>
 5 |     <button @click="sendStudentName">将学生姓名传递给School组件</button>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 |   import pubsub from 'pubsub-js'
11 | 
12 |   export default {
13 |     name:'Student',
14 |     data(){
15 |       return {
16 |         name:'张三',
17 |         sex:'男'
18 |       }
19 |     },
20 |     methods:{
21 |       sendStudentName(){
22 |         // this.$bus.$emit('atguigu',this.name)
23 |         pubsub.publish('hello',this.name) //发布hello消息
24 |       }
25 |     }
26 |   }
27 | </script>
28 | 
29 | <style lang="css">
30 |   .student {
31 |     background-color: pink;
32 |     padding: 5px;
33 |     margin-top: 20px;
34 |   }
35 | </style>


--------------------------------------------------------------------------------
/14_src_消息订阅与发布/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | 
 6 | //关闭vue的生产提示
 7 | Vue.config.productionTip = false
 8 | 
 9 | //创建vm
10 | new Vue({
11 |     el:'#app',
12 |     render: h => h(App),
13 |     // beforeCreate() {
14 |     //     //安装全局事件总线
15 |     //     Vue.prototype.$bus = this
16 |     // },
17 | })


--------------------------------------------------------------------------------
/15_src_TodoList_pubsub/components/MyHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="todo-header">
 3 |     <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="todo" @keydown.enter="add" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   import {nanoid} from 'nanoid'
 9 | 
10 |   export default {
11 |     name:'MyHeader',
12 |     // props:['addTodo'],
13 |     data(){
14 |       return {
15 |         todo:''
16 |       }
17 |     },
18 |     methods:{
19 |       add(){
20 |         //判断是否为空-去掉首尾空格
21 |         if(!this.todo.trim()) return
22 |         //定义数据
23 |         const todoObj = {
24 |           id: nanoid(),
25 |           title: this.todo.trim(),
26 |           status: false
27 |         }
28 |         // //调用vm的addTodo方法
29 |         // this.addTodo(todoObj)
30 |         this.$emit('addTodo',todoObj)
31 |         //清空输入框
32 |         this.todo = ''
33 |       }
34 |     }
35 |   }
36 | </script>
37 | 
38 | <style scoped>
39 |   /* header */
40 |   .todo-header input {
41 |     width: 560px;
42 |     height: 28px;
43 |     font-size: 14px;
44 |     border: 1px solid #ccc;
45 |     border-radius: 4px;
46 |     padding: 4px 7px;
47 |   }
48 | 
49 |   .todo-header input:focus {
50 |     outline: none;
51 |     border-color: rgba(82, 168, 236, 0.8);
52 |     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
53 |   }
54 | </style>


--------------------------------------------------------------------------------
/15_src_TodoList_pubsub/components/MyList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul class="todo-main">
 3 |     <MyItem 
 4 |       v-for="todoObj in todoArr"
 5 |       :key="todoObj.id"
 6 |       :todoObj="todoObj"
 7 |     />
 8 |   </ul>
 9 | </template>
10 | 
11 | <script>
12 |   import MyItem from './MyItem'
13 | 
14 |   export default {
15 |     name:'MyList',
16 |     components:{
17 |       MyItem
18 |     },
19 |     // props:['todoArr','editStatus','delTodo']
20 |     props:['todoArr']
21 |   }
22 | </script>
23 | 
24 | <style scoped>
25 |   /* main */
26 |   .todo-main {
27 |     margin-left: 0;
28 |     border: 1px solid #ddd;
29 |     border-radius: 2px;
30 |     padding: 0;
31 |   }
32 | 
33 |   .todo-empty {
34 |     height: 40px;
35 |     line-height: 40px;
36 |     border: 1px solid #ddd;
37 |     border-radius: 2px;
38 |     padding-left: 5px;
39 |     margin-top: 10px;
40 |   }
41 | </style>


--------------------------------------------------------------------------------
/15_src_TodoList_pubsub/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | 
 6 | //关闭vue的生产提示
 7 | Vue.config.productionTip = false
 8 | 
 9 | //创建vm
10 | new Vue({
11 |     el:'#app',
12 |     render: h => h(App),
13 |     beforeCreate() {
14 |         Vue.prototype.$bus = this
15 |     },
16 | })


--------------------------------------------------------------------------------
/16_src_TodoList_nextTick/components/MyHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="todo-header">
 3 |     <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="todo" @keydown.enter="add" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   import {nanoid} from 'nanoid'
 9 | 
10 |   export default {
11 |     name:'MyHeader',
12 |     // props:['addTodo'],
13 |     data(){
14 |       return {
15 |         todo:''
16 |       }
17 |     },
18 |     methods:{
19 |       add(){
20 |         //判断是否为空-去掉首尾空格
21 |         if(!this.todo.trim()) return
22 |         //定义数据
23 |         const todoObj = {
24 |           id: nanoid(),
25 |           title: this.todo.trim(),
26 |           status: false
27 |         }
28 |         // //调用vm的addTodo方法
29 |         // this.addTodo(todoObj)
30 |         this.$emit('addTodo',todoObj)
31 |         //清空输入框
32 |         this.todo = ''
33 |       }
34 |     }
35 |   }
36 | </script>
37 | 
38 | <style scoped>
39 |   /* header */
40 |   .todo-header input {
41 |     width: 560px;
42 |     height: 28px;
43 |     font-size: 14px;
44 |     border: 1px solid #ccc;
45 |     border-radius: 4px;
46 |     padding: 4px 7px;
47 |   }
48 | 
49 |   .todo-header input:focus {
50 |     outline: none;
51 |     border-color: rgba(82, 168, 236, 0.8);
52 |     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
53 |   }
54 | </style>


--------------------------------------------------------------------------------
/16_src_TodoList_nextTick/components/MyList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul class="todo-main">
 3 |     <MyItem 
 4 |       v-for="todoObj in todoArr"
 5 |       :key="todoObj.id"
 6 |       :todoObj="todoObj"
 7 |     />
 8 |   </ul>
 9 | </template>
10 | 
11 | <script>
12 |   import MyItem from './MyItem'
13 | 
14 |   export default {
15 |     name:'MyList',
16 |     components:{
17 |       MyItem
18 |     },
19 |     // props:['todoArr','editStatus','delTodo']
20 |     props:['todoArr']
21 |   }
22 | </script>
23 | 
24 | <style scoped>
25 |   /* main */
26 |   .todo-main {
27 |     margin-left: 0;
28 |     border: 1px solid #ddd;
29 |     border-radius: 2px;
30 |     padding: 0;
31 |   }
32 | 
33 |   .todo-empty {
34 |     height: 40px;
35 |     line-height: 40px;
36 |     border: 1px solid #ddd;
37 |     border-radius: 2px;
38 |     padding-left: 5px;
39 |     margin-top: 10px;
40 |   }
41 | </style>


--------------------------------------------------------------------------------
/16_src_TodoList_nextTick/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | 
 6 | //关闭vue的生产提示
 7 | Vue.config.productionTip = false
 8 | 
 9 | //创建vm
10 | new Vue({
11 |     el:'#app',
12 |     render: h => h(App),
13 |     beforeCreate() {
14 |         Vue.prototype.$bus = this
15 |     },
16 | })


--------------------------------------------------------------------------------
/17_src_过渡与动画/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Test />
 4 |     <Test2 />
 5 |     <Test3 />
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 |   import Test from './components/Test'
11 |   import Test2 from './components/Test2'
12 |   import Test3 from './components/Test3'
13 | 
14 |   export default {
15 |     name:'App',
16 |     components:{
17 |       Test,
18 |       Test2,
19 |       Test3
20 |     },
21 |   }
22 | </script>


--------------------------------------------------------------------------------
/17_src_过渡与动画/components/Test.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <button @click="show = !show">显示/隐藏</button>
 4 |     <transition name="test" appear> <!-- appear：加载时显示动画 -->
 5 |       <h1 v-show="show">你好啊</h1>
 6 |     </transition>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 |   export default {
12 |     name:'Test',
13 |     data(){
14 |       return {
15 |         show:true
16 |       }
17 |     }
18 |   }
19 | </script>
20 | 
21 | <style scoped>
22 |   h1 {
23 |     background-color: orange;
24 |   }
25 |   
26 |   /* 默认名称 */
27 |   /* .v-enter-active {
28 |     animation: atguigu 0.5s linear;
29 |   }
30 | 
31 |   .v-leave-active {
32 |     animation: atguigu 0.5s linear reverse;
33 |   } */
34 | 
35 |   /* 自定义名称 */
36 |   .test-enter-active {
37 |     animation: atguigu 0.5s linear;
38 |   }
39 | 
40 |   .test-leave-active {
41 |     animation: atguigu 0.5s linear reverse;
42 |   }
43 | 
44 |   @keyframes atguigu {
45 |     from{
46 |       transform: translateX(-100%);
47 |     }
48 | 
49 |     to{
50 |       transform: translateX(0px);
51 |     }
52 |   }
53 | </style>


--------------------------------------------------------------------------------
/17_src_过渡与动画/components/Test2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <button @click="show = !show">显示/隐藏</button>
 4 |     <transition-group name="test" appear> <!-- appear：加载时显示动画 -->
 5 |       <h1 v-show="show" key="1">你好啊</h1>
 6 |       <h1 v-show="!show" key="2">尚硅谷</h1>
 7 |     </transition-group>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 |   export default {
13 |     name:'Test2',
14 |     data(){
15 |       return {
16 |         show:true
17 |       }
18 |     }
19 |   }
20 | </script>
21 | 
22 | <style scoped>
23 |   h1 {
24 |     background-color: orange;
25 |     /* transition: 0.5s linear; */
26 |   }
27 | 
28 |   /* 进入的起点 离开的终点 */
29 |   .test-enter, .test-leave-to {
30 |     transform: translateX(-100%);
31 |   }
32 | 
33 |   .test-enter-active, .test-leave-active {
34 |     transition: 0.5s linear;
35 |   }
36 | 
37 |   /* 进入的终点 离开的起点 */
38 |   .test-enter-to, .test-leave {
39 |     transform: translateX(0);
40 |   }
41 | </style>


--------------------------------------------------------------------------------
/17_src_过渡与动画/components/Test3.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <button @click="show = !show">显示/隐藏</button>
 4 |     <transition-group
 5 |       appear
 6 |       name="animate__animated animate__bounce"
 7 |       enter-active-class="animate__tada"
 8 |       leave-active-class="animate__zoomOut"
 9 |     > <!-- appear：加载时显示动画 -->
10 |       <h1 v-show="show" key="1">你好啊</h1>
11 |       <h1 v-show="!show" key="2">尚硅谷</h1>
12 |     </transition-group>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 |   import 'animate.css'
18 | 
19 |   export default {
20 |     name:'Test2',
21 |     data(){
22 |       return {
23 |         show:true
24 |       }
25 |     }
26 |   }
27 | </script>
28 | 
29 | <style scoped>
30 |   h1 {
31 |     background-color: orange;
32 |   }
33 | </style>


--------------------------------------------------------------------------------
/17_src_过渡与动画/image-20211120101929608.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xingwei07/vue_test/85867ccb36c0a8297e13a331655bd407d8f541fa/17_src_过渡与动画/image-20211120101929608.png


--------------------------------------------------------------------------------
/17_src_过渡与动画/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | 
 6 | //关闭vue的生产提示
 7 | Vue.config.productionTip = false
 8 | 
 9 | //创建vm
10 | new Vue({
11 |     el:'#app',
12 |     render: h => h(App),
13 |     beforeCreate() {
14 |         Vue.prototype.$bus = this
15 |     },
16 | })


--------------------------------------------------------------------------------
/18_src_TodoList_动画/components/MyHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="todo-header">
 3 |     <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="todo" @keydown.enter="add" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   import {nanoid} from 'nanoid'
 9 | 
10 |   export default {
11 |     name:'MyHeader',
12 |     // props:['addTodo'],
13 |     data(){
14 |       return {
15 |         todo:''
16 |       }
17 |     },
18 |     methods:{
19 |       add(){
20 |         //判断是否为空-去掉首尾空格
21 |         if(!this.todo.trim()) return
22 |         //定义数据
23 |         const todoObj = {
24 |           id: nanoid(),
25 |           title: this.todo.trim(),
26 |           status: false
27 |         }
28 |         // //调用vm的addTodo方法
29 |         // this.addTodo(todoObj)
30 |         this.$emit('addTodo',todoObj)
31 |         //清空输入框
32 |         this.todo = ''
33 |       }
34 |     }
35 |   }
36 | </script>
37 | 
38 | <style scoped>
39 |   /* header */
40 |   .todo-header input {
41 |     width: 560px;
42 |     height: 28px;
43 |     font-size: 14px;
44 |     border: 1px solid #ccc;
45 |     border-radius: 4px;
46 |     padding: 4px 7px;
47 |   }
48 | 
49 |   .todo-header input:focus {
50 |     outline: none;
51 |     border-color: rgba(82, 168, 236, 0.8);
52 |     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
53 |   }
54 | </style>


--------------------------------------------------------------------------------
/18_src_TodoList_动画/components/MyList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul class="todo-main">
 3 |     <transition-group name="todo" appear>
 4 |       <MyItem 
 5 |         v-for="todoObj in todoArr"
 6 |         :key="todoObj.id"
 7 |         :todoObj="todoObj"
 8 |       />
 9 |     </transition-group>
10 |   </ul>
11 | </template>
12 | 
13 | <script>
14 |   import MyItem from './MyItem'
15 | 
16 |   export default {
17 |     name:'MyList',
18 |     components:{
19 |       MyItem
20 |     },
21 |     // props:['todoArr','editStatus','delTodo']
22 |     props:['todoArr']
23 |   }
24 | </script>
25 | 
26 | <style scoped>
27 |   /* main */
28 |   .todo-main {
29 |     margin-left: 0;
30 |     border: 1px solid #ddd;
31 |     border-radius: 2px;
32 |     padding: 0;
33 |   }
34 | 
35 |   .todo-empty {
36 |     height: 40px;
37 |     line-height: 40px;
38 |     border: 1px solid #ddd;
39 |     border-radius: 2px;
40 |     padding-left: 5px;
41 |     margin-top: 10px;
42 |   }
43 | 
44 |   /* 自定义名称 */
45 |   .todo-enter-active {
46 |     animation: atguigu 0.5s linear;
47 |   }
48 | 
49 |   .todo-leave-active {
50 |     animation: atguigu 0.5s linear reverse;
51 |   }
52 | 
53 |   @keyframes atguigu {
54 |     from{
55 |       transform: translateX(100%);
56 |     }
57 | 
58 |     to{
59 |       transform: translateX(0px);
60 |     }
61 |   }
62 | </style>


--------------------------------------------------------------------------------
/18_src_TodoList_动画/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | 
 6 | //关闭vue的生产提示
 7 | Vue.config.productionTip = false
 8 | 
 9 | //创建vm
10 | new Vue({
11 |     el:'#app',
12 |     render: h => h(App),
13 |     beforeCreate() {
14 |         Vue.prototype.$bus = this
15 |     },
16 | })


--------------------------------------------------------------------------------
/19_src_配置代理服务器/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <button @click="getStudentMsg">请求学生信息</button>
 4 |     <button @click="getCarMsg">请求汽车信息</button>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |   import axios from 'axios'
10 | 
11 |   export default {
12 |     name:'App',
13 |     methods:{
14 |       getStudentMsg(){
15 |         axios.get('http://localhost:8080/api/students').then(
16 |           response => {
17 |             console.log('请求成功了',response.data)
18 |           },
19 |           error => {
20 |             console.log('请求失败了',error.message)
21 |           }
22 |         )
23 |       },
24 |       getCarMsg(){
25 |         axios.get('http://localhost:8080/foo/cars').then(
26 |           response => {
27 |             console.log('请求成功了',response.data)
28 |           },
29 |           error => {
30 |             console.log('请求失败了',error.message)
31 |           }
32 |         )
33 |       }
34 |     }
35 |   }
36 | </script>


--------------------------------------------------------------------------------
/19_src_配置代理服务器/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | 
 6 | //关闭vue的生产提示
 7 | Vue.config.productionTip = false
 8 | 
 9 | //创建vm
10 | new Vue({
11 |     el:'#app',
12 |     render: h => h(App),
13 | })


--------------------------------------------------------------------------------
/20_src_github搜索案例/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <Search />
 4 |     <List />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |   import List from './components/List'
10 |   import Search from './components/Search'
11 | 
12 |   export default {
13 |     name:'App',
14 |     components:{
15 |       List,
16 |       Search
17 |     }
18 |   }
19 | </script>


--------------------------------------------------------------------------------
/20_src_github搜索案例/assets/fonts/glyphicons-halflings-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xingwei07/vue_test/85867ccb36c0a8297e13a331655bd407d8f541fa/20_src_github搜索案例/assets/fonts/glyphicons-halflings-regular.eot


--------------------------------------------------------------------------------
/20_src_github搜索案例/assets/fonts/glyphicons-halflings-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xingwei07/vue_test/85867ccb36c0a8297e13a331655bd407d8f541fa/20_src_github搜索案例/assets/fonts/glyphicons-halflings-regular.ttf


--------------------------------------------------------------------------------
/20_src_github搜索案例/assets/fonts/glyphicons-halflings-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xingwei07/vue_test/85867ccb36c0a8297e13a331655bd407d8f541fa/20_src_github搜索案例/assets/fonts/glyphicons-halflings-regular.woff


--------------------------------------------------------------------------------
/20_src_github搜索案例/assets/fonts/glyphicons-halflings-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xingwei07/vue_test/85867ccb36c0a8297e13a331655bd407d8f541fa/20_src_github搜索案例/assets/fonts/glyphicons-halflings-regular.woff2


--------------------------------------------------------------------------------
/20_src_github搜索案例/components/List.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="row">
 3 |     <h1 v-if="list.isWelcome">欢迎使用查询工具！</h1>
 4 |     <h1 v-show="list.isLoading">正在查询，请稍后...</h1>
 5 |     <h1 v-show="list.errorMsg">{{list.errorMsg}}</h1>
 6 |     <div class="card" v-for="user in list.userInfo" :key="user.login">
 7 |       <a :href="user.html_url" target="_blank">
 8 |         <img :src="user.avatar_url" width="100px" />
 9 |       </a>
10 |       <p class="card-text">{{user.login}}</p>
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 |   export default {
17 |     name:'List',
18 |     data(){
19 |       return {
20 |         list: {
21 |           isWelcome: true,
22 |           isLoading: false,
23 |           errorMsg: '',
24 |           userInfo: []
25 |         }
26 |       }
27 |     },
28 |     mounted(){
29 |       this.$bus.$on('userInfo',(retunData)=>{
30 |         this.list = {...this.list, ...retunData}
31 |       })
32 |     }
33 |   }
34 | </script>
35 | 
36 | <style scpoed>
37 |   .album {
38 |     min-height: 50rem;
39 |     padding-top: 3rem;
40 |     padding-bottom: 3rem;
41 |     background-color: #f7f7f7;
42 |   }
43 | 
44 |   .card {
45 |     float: left;
46 |     width: 33.333%;
47 |     padding: .75rem;
48 |     margin-bottom: 2rem;
49 |     border: 1px solid #efefef;
50 |     text-align: center;
51 |   }
52 | 
53 |   .card > img {
54 |     margin-bottom: .75rem;
55 |     border-radius: 100px;
56 |   }
57 | 
58 |   .card-text {
59 |     font-size: 85%;
60 |   }
61 | </style>


--------------------------------------------------------------------------------
/20_src_github搜索案例/components/Search.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="jumbotron">
 3 |     <h3 class="jumbotron-heading">Search Github Users</h3>
 4 |     <div>
 5 |       <input v-model="keyWords" type="text" placeholder="enter the name your search" />&nbsp;
 6 |       <button @click="search">Search</button>
 7 |     </div>
 8 |   </section>
 9 | </template>
10 | 
11 | <script>
12 |   import axois from 'axios'
13 | 
14 |   export default {
15 |     name:'Search',
16 |     data(){
17 |       return {
18 |         keyWords: ''
19 |       }
20 |     },
21 |     methods:{
22 |       //发送请求
23 |       search(){
24 |         this.$bus.$emit('userInfo',{isWelcome:false, isLoading:true, errorMsg:'', userInfo:[]})
25 |         axois.get(`https://api.github.com/search/users?q=${this.keyWords}`).then(
26 |           response => {
27 |             console.log('请求成功了')
28 |             this.$bus.$emit('userInfo',{isLoading:false, userInfo:response.data.items})
29 |           },
30 |           error => {
31 |             console.log('请求出错了：',error.message)
32 |             this.$bus.$emit('userInfo',{isLoading:false, userInfo:[], errorMsg:error.message})
33 |           }
34 |         )
35 |       }
36 |     }
37 |   }
38 | </script>
39 | 
40 | <style>
41 | 
42 | </style>


--------------------------------------------------------------------------------
/20_src_github搜索案例/index.css:
--------------------------------------------------------------------------------
 1 | .album {
 2 |   min-height: 50rem;
 3 |   padding-top: 3rem;
 4 |   padding-bottom: 3rem;
 5 |   background-color: #f7f7f7;
 6 | }
 7 | 
 8 | .card {
 9 |   float: left;
10 |   width: 33.333%;
11 |   padding: .75rem;
12 |   margin-bottom: 2rem;
13 |   border: 1px solid #efefef;
14 |   text-align: center;
15 | }
16 | 
17 | .card > img {
18 |   margin-bottom: .75rem;
19 |   border-radius: 100px;
20 | }
21 | 
22 | .card-text {
23 |   font-size: 85%;
24 | }


--------------------------------------------------------------------------------
/20_src_github搜索案例/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | 
 6 | //关闭vue的生产提示
 7 | Vue.config.productionTip = false
 8 | 
 9 | //创建vm
10 | new Vue({
11 |     el:'#app',
12 |     render: h => h(App),
13 |     beforeCreate(){
14 |         Vue.prototype.$bus = this
15 |     }
16 | })


--------------------------------------------------------------------------------
/21_src_github搜索案例_vue-resource/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <Search />
 4 |     <List />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |   import List from './components/List'
10 |   import Search from './components/Search'
11 | 
12 |   export default {
13 |     name:'App',
14 |     components:{
15 |       List,
16 |       Search
17 |     }
18 |   }
19 | </script>


--------------------------------------------------------------------------------
/21_src_github搜索案例_vue-resource/assets/fonts/glyphicons-halflings-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xingwei07/vue_test/85867ccb36c0a8297e13a331655bd407d8f541fa/21_src_github搜索案例_vue-resource/assets/fonts/glyphicons-halflings-regular.eot


--------------------------------------------------------------------------------
/21_src_github搜索案例_vue-resource/assets/fonts/glyphicons-halflings-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xingwei07/vue_test/85867ccb36c0a8297e13a331655bd407d8f541fa/21_src_github搜索案例_vue-resource/assets/fonts/glyphicons-halflings-regular.ttf


--------------------------------------------------------------------------------
/21_src_github搜索案例_vue-resource/assets/fonts/glyphicons-halflings-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xingwei07/vue_test/85867ccb36c0a8297e13a331655bd407d8f541fa/21_src_github搜索案例_vue-resource/assets/fonts/glyphicons-halflings-regular.woff


--------------------------------------------------------------------------------
/21_src_github搜索案例_vue-resource/assets/fonts/glyphicons-halflings-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xingwei07/vue_test/85867ccb36c0a8297e13a331655bd407d8f541fa/21_src_github搜索案例_vue-resource/assets/fonts/glyphicons-halflings-regular.woff2


--------------------------------------------------------------------------------
/21_src_github搜索案例_vue-resource/components/List.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="row">
 3 |     <h1 v-if="list.isWelcome">欢迎使用查询工具！</h1>
 4 |     <h1 v-show="list.isLoading">正在查询，请稍后...</h1>
 5 |     <h1 v-show="list.errorMsg">{{list.errorMsg}}</h1>
 6 |     <div class="card" v-for="user in list.userInfo" :key="user.login">
 7 |       <a :href="user.html_url" target="_blank">
 8 |         <img :src="user.avatar_url" width="100px" />
 9 |       </a>
10 |       <p class="card-text">{{user.login}}</p>
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 |   export default {
17 |     name:'List',
18 |     data(){
19 |       return {
20 |         list: {
21 |           isWelcome: true,
22 |           isLoading: false,
23 |           errorMsg: '',
24 |           userInfo: []
25 |         }
26 |       }
27 |     },
28 |     mounted(){
29 |       this.$bus.$on('userInfo',(retunData)=>{
30 |         this.list = {...this.list, ...retunData}
31 |       })
32 |     }
33 |   }
34 | </script>
35 | 
36 | <style scpoed>
37 |   .album {
38 |     min-height: 50rem;
39 |     padding-top: 3rem;
40 |     padding-bottom: 3rem;
41 |     background-color: #f7f7f7;
42 |   }
43 | 
44 |   .card {
45 |     float: left;
46 |     width: 33.333%;
47 |     padding: .75rem;
48 |     margin-bottom: 2rem;
49 |     border: 1px solid #efefef;
50 |     text-align: center;
51 |   }
52 | 
53 |   .card > img {
54 |     margin-bottom: .75rem;
55 |     border-radius: 100px;
56 |   }
57 | 
58 |   .card-text {
59 |     font-size: 85%;
60 |   }
61 | </style>


--------------------------------------------------------------------------------
/21_src_github搜索案例_vue-resource/components/Search.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="jumbotron">
 3 |     <h3 class="jumbotron-heading">Search Github Users</h3>
 4 |     <div>
 5 |       <input v-model="keyWords" type="text" placeholder="enter the name your search" />&nbsp;
 6 |       <button @click="search">Search</button>
 7 |     </div>
 8 |   </section>
 9 | </template>
10 | 
11 | <script>
12 |   export default {
13 |     name:'Search',
14 |     data(){
15 |       return {
16 |         keyWords: ''
17 |       }
18 |     },
19 |     methods:{
20 |       //发送请求
21 |       search(){
22 |         this.$bus.$emit('userInfo',{isWelcome:false, isLoading:true, errorMsg:'', userInfo:[]})
23 |         this.$http.get(`https://api.github.com/search/users?q=${this.keyWords}`).then(
24 |           response => {
25 |             console.log('请求成功了')
26 |             this.$bus.$emit('userInfo',{isLoading:false, userInfo:response.data.items})
27 |           },
28 |           error => {
29 |             console.log('请求出错了：',error.message)
30 |             this.$bus.$emit('userInfo',{isLoading:false, userInfo:[], errorMsg:error.message})
31 |           }
32 |         )
33 |       }
34 |     }
35 |   }
36 | </script>
37 | 
38 | <style>
39 | 
40 | </style>


--------------------------------------------------------------------------------
/21_src_github搜索案例_vue-resource/index.css:
--------------------------------------------------------------------------------
 1 | .album {
 2 |   min-height: 50rem;
 3 |   padding-top: 3rem;
 4 |   padding-bottom: 3rem;
 5 |   background-color: #f7f7f7;
 6 | }
 7 | 
 8 | .card {
 9 |   float: left;
10 |   width: 33.333%;
11 |   padding: .75rem;
12 |   margin-bottom: 2rem;
13 |   border: 1px solid #efefef;
14 |   text-align: center;
15 | }
16 | 
17 | .card > img {
18 |   margin-bottom: .75rem;
19 |   border-radius: 100px;
20 | }
21 | 
22 | .card-text {
23 |   font-size: 85%;
24 | }


--------------------------------------------------------------------------------
/21_src_github搜索案例_vue-resource/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | 
 6 | //引入插件
 7 | import vueResoure from 'vue-resource'
 8 | 
 9 | //关闭vue的生产提示
10 | Vue.config.productionTip = false
11 | 
12 | //使用插件
13 | Vue.use(vueResoure)
14 | 
15 | //创建vm
16 | new Vue({
17 |     el:'#app',
18 |     render: h => h(App),
19 |     beforeCreate(){
20 |         Vue.prototype.$bus = this
21 |     }
22 | })


--------------------------------------------------------------------------------
/22_插槽/1_src_默认插槽/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <Category title="食物">
 4 |       <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
 5 |     </Category>
 6 |     <Category title="游戏">
 7 |       <ul>
 8 |         <li v-for="(item,index) in games" :key="index">{{item}}</li>
 9 |       </ul>
10 |     </Category>
11 |     <Category title="电影">
12 |       <video controls autoplay src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
13 |     </Category>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | import Category from './components/Category'
19 | 
20 |   export default {
21 |     name:'App',
22 |     components:{
23 |       Category
24 |     },
25 |     data(){
26 |       return {
27 |         foods:['火锅','烧烤','小龙虾','牛排'],
28 |         games: ['红色警戒','穿越火线','劲舞团','超级玛丽'],
29 |         films: ['《教父》','《拆弹专家》','《战狼》']
30 |       }
31 |     }
32 |   }
33 | </script>
34 | 
35 | <style lang="css" scoped>
36 |   .container {
37 |     display: flex;
38 |     justify-content: space-around;
39 |   }
40 | 
41 |   img {
42 |     width: 200px;
43 |   }
44 | 
45 |   video {
46 |     width: 200px;
47 |   }
48 | </style>


--------------------------------------------------------------------------------
/22_插槽/1_src_默认插槽/components/Category.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="category">
 3 |     <h3>{{title}}分类</h3>
 4 |     <!-- <ul>
 5 |       <li v-for="(item,index) in list" :key="index">{{item}}</li>
 6 |     </ul> -->
 7 |     <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
 8 |     <slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 |   export default {
14 |     name:'Category',
15 |     props:['list','title']
16 |   }
17 | </script>
18 | 
19 | <style>
20 |  h3 {
21 |    background-color: orange;
22 |    text-align: center;
23 |  }
24 |   .category {
25 |     background-color: skyblue;
26 |     width: 200px;
27 |     height: 300px;
28 |   }
29 | </style>


--------------------------------------------------------------------------------
/22_插槽/1_src_默认插槽/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | 
 6 | //关闭vue的生产提示
 7 | Vue.config.productionTip = false
 8 | 
 9 | //创建vm
10 | new Vue({
11 |     el:'#app',
12 |     render: h => h(App),
13 |     beforeCreate(){
14 |         Vue.prototype.$bus = this
15 |     }
16 | })


--------------------------------------------------------------------------------
/22_插槽/2_src_具名插槽/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <Category title="食物">
 4 |       <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
 5 |       <div slot="footer" class="footer">
 6 |         <a href="#">更多美食</a>
 7 |       </div>
 8 |     </Category>
 9 |     <Category title="游戏">
10 |       <ul slot="center">
11 |         <li v-for="(item,index) in games" :key="index">{{item}}</li>
12 |       </ul>
13 |       <div slot="footer" class="footer">
14 |         <a href="#">单机游戏</a>
15 |         <a href="#">网络游戏</a>
16 |       </div>
17 |     </Category>
18 |     <Category title="电影">
19 |       <video slot="center" controls autoplay src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
20 |       <template slot="footer">
21 |         <div class="footer">
22 |           <a href="#">经典</a>
23 |           <a href="#">热门</a>
24 |           <a href="#">推荐</a>
25 |         </div>
26 |         <h4>欢迎欣赏</h4>
27 |       </template>
28 |     </Category>
29 |   </div>
30 | </template>
31 | 
32 | <script>
33 | import Category from './components/Category'
34 | 
35 |   export default {
36 |     name:'App',
37 |     components:{
38 |       Category
39 |     },
40 |     data(){
41 |       return {
42 |         foods:['火锅','烧烤','小龙虾','牛排'],
43 |         games: ['红色警戒','穿越火线','劲舞团','超级玛丽'],
44 |         films: ['《教父》','《拆弹专家》','《战狼》']
45 |       }
46 |     }
47 |   }
48 | </script>
49 | 
50 | <style lang="css" scoped>
51 |   .container, .footer {
52 |     display: flex;
53 |     justify-content: space-around;
54 |   }
55 | 
56 |   img {
57 |     width: 200px;
58 |   }
59 | 
60 |   video {
61 |     width: 200px;
62 |   }
63 | 
64 |   h4 {
65 |     text-align: center;
66 |   }
67 | </style>


--------------------------------------------------------------------------------
/22_插槽/2_src_具名插槽/components/Category.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="category">
 3 |     <h3>{{title}}分类</h3>
 4 |     <!-- <ul>
 5 |       <li v-for="(item,index) in list" :key="index">{{item}}</li>
 6 |     </ul> -->
 7 |     <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
 8 |     <slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
 9 |     <slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 |   export default {
15 |     name:'Category',
16 |     props:['list','title']
17 |   }
18 | </script>
19 | 
20 | <style>
21 |  h3 {
22 |    background-color: orange;
23 |    text-align: center;
24 |  }
25 |   .category {
26 |     background-color: skyblue;
27 |     width: 200px;
28 |     height: 300px;
29 |   }
30 | </style>


--------------------------------------------------------------------------------
/22_插槽/2_src_具名插槽/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | 
 6 | //关闭vue的生产提示
 7 | Vue.config.productionTip = false
 8 | 
 9 | //创建vm
10 | new Vue({
11 |     el:'#app',
12 |     render: h => h(App),
13 |     beforeCreate(){
14 |         Vue.prototype.$bus = this
15 |     }
16 | })


--------------------------------------------------------------------------------
/22_插槽/3_src_作用域插槽/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <Category title="游戏">
 4 |       <template scope="{games}">
 5 |         <ul>
 6 |           <li v-for="(item,index) in games" :key="index">{{item}}</li>
 7 |         </ul>
 8 |       </template>
 9 |     </Category>
10 | 
11 |     <Category title="游戏">
12 |       <template scope="{games}">
13 |         <ol>
14 |           <li v-for="(item,index) in games" :key="index">{{item}}</li>
15 |         </ol>
16 |       </template>
17 |     </Category>
18 | 
19 |     <Category title="游戏">
20 |       <template scope="{games}">
21 |           <h4 v-for="(item,index) in games" :key="index">{{item}}</h4>
22 |       </template>
23 |     </Category>
24 | 
25 |   </div>
26 | </template>
27 | 
28 | <script>
29 |   import Category from './components/Category'
30 | 
31 |   export default {
32 |     name:'App',
33 |     components:{
34 |       Category
35 |     }
36 |   }
37 | </script>
38 | 
39 | <style lang="css" scoped>
40 |   .container, .footer {
41 |     display: flex;
42 |     justify-content: space-around;
43 |   }
44 | 
45 |   img {
46 |     width: 200px;
47 |   }
48 | 
49 |   video {
50 |     width: 200px;
51 |   }
52 | 
53 |   h4 {
54 |     text-align: center;
55 |   }
56 | </style>


--------------------------------------------------------------------------------
/22_插槽/3_src_作用域插槽/components/Category.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="category">
 3 |     <h3>{{title}}分类</h3>
 4 |     <!-- <ul>
 5 |       <li v-for="(item,index) in list" :key="index">{{item}}</li>
 6 |     </ul> -->
 7 |     <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
 8 |     <slot :games="games">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 |   export default {
14 |     name:'Category',
15 |     props:['title'],
16 |     data(){
17 |       return {
18 |         games: ['红色警戒','穿越火线','劲舞团','超级玛丽']
19 |       }
20 |     }
21 |   }
22 | </script>
23 | 
24 | <style>
25 |  h3 {
26 |    background-color: orange;
27 |    text-align: center;
28 |  }
29 |   .category {
30 |     background-color: skyblue;
31 |     width: 200px;
32 |     height: 300px;
33 |   }
34 | </style>


--------------------------------------------------------------------------------
/22_插槽/3_src_作用域插槽/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | 
 6 | //关闭vue的生产提示
 7 | Vue.config.productionTip = false
 8 | 
 9 | //创建vm
10 | new Vue({
11 |     el:'#app',
12 |     render: h => h(App),
13 |     beforeCreate(){
14 |         Vue.prototype.$bus = this
15 |     }
16 | })


--------------------------------------------------------------------------------
/23_src_纯vue版/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Count />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   import Count from './components/Count'
 9 | 
10 |   export default {
11 |     name:'App',
12 |     components:{
13 |       Count
14 |     },
15 |     mounted(){
16 |       // console.log(this)
17 |     },
18 |   }
19 | </script>


--------------------------------------------------------------------------------
/23_src_纯vue版/components/Count.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>当前求和为：{{sum}}</h1>
 4 |     <select v-model.number="number">
 5 |       <option value="1">1</option>
 6 |       <option value="2">2</option>
 7 |       <option value="3">3</option>
 8 |     </select>
 9 |     <button @click="increment">+</button>
10 |     <button @click="decrement">-</button>
11 |     <button @click="incrementOdd">求和为奇数时再加</button>
12 |     <button @click="incrementWait">等一等再加</button>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 |   export default {
18 |     name:'Count',
19 |     data(){
20 |       return {
21 |         sum: 0, //和
22 |         number: 1 //选择的值
23 |       }
24 |     },
25 |     methods:{
26 |       increment(){
27 |         this.sum += this.number
28 |       },
29 |       decrement(){
30 |         this.sum -= this.number
31 |       },
32 |       incrementOdd(){
33 |         if(this.sum % 2){
34 |           this.sum += this.number
35 |         }
36 |       },
37 |       incrementWait(){
38 |         setTimeout(()=>{
39 |           this.sum += this.number
40 |         },500)
41 |       }
42 |     }
43 |   }
44 | </script>
45 | 
46 | <style>
47 |   button {
48 |     margin-left: 5px;
49 |   }
50 | </style>


--------------------------------------------------------------------------------
/23_src_纯vue版/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | //引入vueResource
 6 | import vueResource from 'vue-resource'
 7 | //关闭vue的生产提示
 8 | Vue.config.productionTip = false
 9 | //使用插件
10 | Vue.use(vueResource)
11 | 
12 | //创建vm
13 | new Vue({ 
14 |     el:'#app',
15 |     render: h => h(App),
16 |     beforeCreate(){
17 |         Vue.prototype.$bus = this
18 |     }
19 | })


--------------------------------------------------------------------------------
/24_src_vuex版/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Count />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   import Count from './components/Count'
 9 | 
10 |   export default {
11 |     name:'App',
12 |     components:{
13 |       Count
14 |     },
15 |     mounted(){
16 |       // console.log(this)
17 |     },
18 |   }
19 | </script>


--------------------------------------------------------------------------------
/24_src_vuex版/components/Count.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>当前求和为：{{$store.state.sum}}</h1>
 4 |     <select v-model.number="number">
 5 |       <option value="1">1</option>
 6 |       <option value="2">2</option>
 7 |       <option value="3">3</option>
 8 |     </select>
 9 |     <button @click="increment">+</button>
10 |     <button @click="decrement">-</button>
11 |     <button @click="incrementOdd">求和为奇数时再加</button>
12 |     <button @click="incrementWait">等一等再加</button>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 |   export default {
18 |     name:'Count',
19 |     data(){
20 |       return {
21 |         number: 1 //选择的值
22 |       }
23 |     },
24 |     methods:{
25 |       increment(){
26 |         this.$store.commit('JIA',this.number)
27 |       },
28 |       decrement(){
29 |         this.$store.commit('JIAN',this.number)
30 |       },
31 |       incrementOdd(){
32 |         this.$store.dispatch('jiaOdd',this.number)
33 |       },
34 |       incrementWait(){
35 |         this.$store.dispatch('jiaWait',this.number)
36 |       }
37 |     }
38 |   }
39 | </script>
40 | 
41 | <style>
42 |   button {
43 |     margin-left: 5px;
44 |   }
45 | </style>


--------------------------------------------------------------------------------
/24_src_vuex版/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | //引入vueResource
 6 | import vueResource from 'vue-resource'
 7 | //引入store
 8 | import store from './store'
 9 | //关闭vue的生产提示
10 | Vue.config.productionTip = false
11 | //使用插件
12 | Vue.use(vueResource)
13 | 
14 | //创建vm
15 | new Vue({ 
16 |     el:'#app',
17 |     render: h => h(App),
18 |     store,
19 |     beforeCreate(){
20 |         Vue.prototype.$bus = this
21 |     }
22 | })


--------------------------------------------------------------------------------
/24_src_vuex版/store/index.js:
--------------------------------------------------------------------------------
 1 | //该文件用于创建Vuex中最为核心的store
 2 | 
 3 | //引入Vue
 4 | import Vue from 'vue'
 5 | //引入vuex
 6 | import Vuex from 'vuex'
 7 | //使用插件
 8 | Vue.use(Vuex)
 9 | //准备actions——用于响应组件中的动作
10 | const actions = {
11 |   // jia(context,value){
12 |   //   console.log('jia被调用了')
13 |   //   context.commit('JIA',value)
14 |   // },
15 |   // jian(context,value){
16 |   //   console.log('jian被调用了')
17 |   //   context.commit('JIAN',value)
18 |   // },
19 |   jiaOdd(context,value){
20 |     console.log('jiaOdd被调用了')
21 |     if(context.state.sum % 2){
22 |       context.commit('JIA',value)
23 |     }
24 |   },
25 |   jiaWait(context,value){
26 |     console.log("jiaWait被调用了")
27 |     setTimeout(()=>{
28 |       context.commit('JIA',value)
29 |     },500)
30 |   }
31 | }
32 | //准备mutations——用于操作数据（state）
33 | const mutations = {
34 |   JIA(state,value){
35 |     console.log('JIA被调用了')
36 |     state.sum += value
37 |   },
38 |   JIAN(store,value){
39 |     console.log('JIAN被调用了')
40 |     store.sum -= value
41 |   }
42 | }
43 | //准备state——用于存储数据
44 | const state = {
45 |   sum:0 //和
46 | }
47 | //创建并暴露store
48 | export default new Vuex.Store({
49 |   actions,
50 |   mutations,
51 |   state
52 | })


--------------------------------------------------------------------------------
/25_src_求和案例_getters/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Count />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   import Count from './components/Count'
 9 | 
10 |   export default {
11 |     name:'App',
12 |     components:{
13 |       Count
14 |     },
15 |     mounted(){
16 |       // console.log(this)
17 |     },
18 |   }
19 | </script>


--------------------------------------------------------------------------------
/25_src_求和案例_getters/components/Count.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>当前求和为：{{$store.state.sum}}</h1>
 4 |     <h1>当前求和放大10倍为：{{$store.getters.bigSum}}</h1>
 5 |     <select v-model.number="number">
 6 |       <option value="1">1</option>
 7 |       <option value="2">2</option>
 8 |       <option value="3">3</option>
 9 |     </select>
10 |     <button @click="increment">+</button>
11 |     <button @click="decrement">-</button>
12 |     <button @click="incrementOdd">求和为奇数时再加</button>
13 |     <button @click="incrementWait">等一等再加</button>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 |   export default {
19 |     name:'Count',
20 |     data(){
21 |       return {
22 |         number: 1 //选择的值
23 |       }
24 |     },
25 |     computed:{
26 |       bigSum(){
27 |         return this.$store.getters.bigSum
28 |       }
29 |     },
30 |     methods:{
31 |       increment(){
32 |         this.$store.commit('JIA',this.number)
33 |       },
34 |       decrement(){
35 |         this.$store.commit('JIAN',this.number)
36 |       },
37 |       incrementOdd(){
38 |         this.$store.dispatch('jiaOdd',this.number)
39 |       },
40 |       incrementWait(){
41 |         this.$store.dispatch('jiaWait',this.number)
42 |       }
43 |     }
44 |   }
45 | </script>
46 | 
47 | <style>
48 |   button {
49 |     margin-left: 5px;
50 |   }
51 | </style>


--------------------------------------------------------------------------------
/25_src_求和案例_getters/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | //引入vueResource
 6 | import vueResource from 'vue-resource'
 7 | //引入store
 8 | import store from './store'
 9 | //关闭vue的生产提示
10 | Vue.config.productionTip = false
11 | //使用插件
12 | Vue.use(vueResource)
13 | 
14 | //创建vm
15 | new Vue({ 
16 |     el:'#app',
17 |     render: h => h(App),
18 |     store,
19 |     beforeCreate(){
20 |         Vue.prototype.$bus = this
21 |     }
22 | })


--------------------------------------------------------------------------------
/25_src_求和案例_getters/store/index.js:
--------------------------------------------------------------------------------
 1 | //该文件用于创建Vuex中最为核心的store
 2 | 
 3 | //引入Vue
 4 | import Vue from 'vue'
 5 | //引入vuex
 6 | import Vuex from 'vuex'
 7 | //使用插件
 8 | Vue.use(Vuex)
 9 | //准备actions——用于响应组件中的动作
10 | const actions = {
11 |   // jia(context,value){
12 |   //   console.log('jia被调用了')
13 |   //   context.commit('JIA',value)
14 |   // },
15 |   // jian(context,value){
16 |   //   console.log('jian被调用了')
17 |   //   context.commit('JIAN',value)
18 |   // },
19 |   jiaOdd(context,value){
20 |     console.log('jiaOdd被调用了')
21 |     if(context.state.sum % 2){
22 |       context.commit('JIA',value)
23 |     }
24 |   },
25 |   jiaWait(context,value){
26 |     console.log("jiaWait被调用了")
27 |     setTimeout(()=>{
28 |       context.commit('JIA',value)
29 |     },500)
30 |   }
31 | }
32 | //准备mutations——用于操作数据（state）
33 | const mutations = {
34 |   JIA(state,value){
35 |     console.log('JIA被调用了')
36 |     state.sum += value
37 |   },
38 |   JIAN(store,value){
39 |     console.log('JIAN被调用了')
40 |     store.sum -= value
41 |   }
42 | }
43 | //准备state——用于存储数据
44 | const state = {
45 |   sum:0 //和
46 | }
47 | //准备getters——用于将state中的数据进行加工
48 | const getters = {
49 |   bigSum(state){
50 |     return state.sum * 10
51 |   }
52 | }
53 | 
54 | //创建并暴露store
55 | export default new Vuex.Store({
56 |   actions,
57 |   mutations,
58 |   state,
59 |   getters
60 | })


--------------------------------------------------------------------------------
/26_src_求和案例_mapState与mapGetters/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Count />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   import Count from './components/Count'
 9 | 
10 |   export default {
11 |     name:'App',
12 |     components:{
13 |       Count
14 |     },
15 |     mounted(){
16 |       // console.log(this)
17 |     },
18 |   }
19 | </script>


--------------------------------------------------------------------------------
/26_src_求和案例_mapState与mapGetters/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | //引入vueResource
 6 | import vueResource from 'vue-resource'
 7 | //引入store
 8 | import store from './store'
 9 | //关闭vue的生产提示
10 | Vue.config.productionTip = false
11 | //使用插件
12 | Vue.use(vueResource)
13 | 
14 | //创建vm
15 | new Vue({ 
16 |     el:'#app',
17 |     render: h => h(App),
18 |     store,
19 |     beforeCreate(){
20 |         Vue.prototype.$bus = this
21 |     }
22 | })


--------------------------------------------------------------------------------
/26_src_求和案例_mapState与mapGetters/store/index.js:
--------------------------------------------------------------------------------
 1 | //该文件用于创建Vuex中最为核心的store
 2 | 
 3 | //引入Vue
 4 | import Vue from 'vue'
 5 | //引入vuex
 6 | import Vuex from 'vuex'
 7 | //使用插件
 8 | Vue.use(Vuex)
 9 | //准备actions——用于响应组件中的动作
10 | const actions = {
11 |   // jia(context,value){
12 |   //   console.log('jia被调用了')
13 |   //   context.commit('JIA',value)
14 |   // },
15 |   // jian(context,value){
16 |   //   console.log('jian被调用了')
17 |   //   context.commit('JIAN',value)
18 |   // },
19 |   jiaOdd(context,value){
20 |     console.log('jiaOdd被调用了')
21 |     if(context.state.sum % 2){
22 |       context.commit('JIA',value)
23 |     }
24 |   },
25 |   jiaWait(context,value){
26 |     console.log("jiaWait被调用了")
27 |     setTimeout(()=>{
28 |       context.commit('JIA',value)
29 |     },500)
30 |   }
31 | }
32 | //准备mutations——用于操作数据（state）
33 | const mutations = {
34 |   JIA(state,value){
35 |     console.log('JIA被调用了')
36 |     state.sum += value
37 |   },
38 |   JIAN(store,value){
39 |     console.log('JIAN被调用了')
40 |     store.sum -= value
41 |   }
42 | }
43 | //准备state——用于存储数据
44 | const state = {
45 |   sum:0, //和
46 |   school: '尚硅谷',
47 |   subject: '前端'
48 | }
49 | //准备getters——用于将state中的数据进行加工
50 | const getters = {
51 |   bigSum(state){
52 |     return state.sum * 10
53 |   }
54 | }
55 | 
56 | //创建并暴露store
57 | export default new Vuex.Store({
58 |   actions,
59 |   mutations,
60 |   state,
61 |   getters
62 | })


--------------------------------------------------------------------------------
/27_src_求和案例_mapMutations与mapActions/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Count />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   import Count from './components/Count'
 9 | 
10 |   export default {
11 |     name:'App',
12 |     components:{
13 |       Count
14 |     },
15 |     mounted(){
16 |       // console.log(this)
17 |     },
18 |   }
19 | </script>


--------------------------------------------------------------------------------
/27_src_求和案例_mapMutations与mapActions/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | //引入vueResource
 6 | import vueResource from 'vue-resource'
 7 | //引入store
 8 | import store from './store'
 9 | //关闭vue的生产提示
10 | Vue.config.productionTip = false
11 | //使用插件
12 | Vue.use(vueResource)
13 | 
14 | //创建vm
15 | new Vue({ 
16 |     el:'#app',
17 |     render: h => h(App),
18 |     store,
19 |     beforeCreate(){
20 |         Vue.prototype.$bus = this
21 |     }
22 | })


--------------------------------------------------------------------------------
/27_src_求和案例_mapMutations与mapActions/store/index.js:
--------------------------------------------------------------------------------
 1 | //该文件用于创建Vuex中最为核心的store
 2 | 
 3 | //引入Vue
 4 | import Vue from 'vue'
 5 | //引入vuex
 6 | import Vuex from 'vuex'
 7 | //使用插件
 8 | Vue.use(Vuex)
 9 | //准备actions——用于响应组件中的动作
10 | const actions = {
11 |   // jia(context,value){
12 |   //   console.log('jia被调用了')
13 |   //   context.commit('JIA',value)
14 |   // },
15 |   // jian(context,value){
16 |   //   console.log('jian被调用了')
17 |   //   context.commit('JIAN',value)
18 |   // },
19 |   jiaOdd(context,value){
20 |     console.log('jiaOdd被调用了')
21 |     if(context.state.sum % 2){
22 |       context.commit('JIA',value)
23 |     }
24 |   },
25 |   jiaWait(context,value){
26 |     console.log("jiaWait被调用了")
27 |     setTimeout(()=>{
28 |       context.commit('JIA',value)
29 |     },500)
30 |   }
31 | }
32 | //准备mutations——用于操作数据（state）
33 | const mutations = {
34 |   JIA(state,value){
35 |     console.log('JIA被调用了')
36 |     state.sum += value
37 |   },
38 |   JIAN(store,value){
39 |     console.log('JIAN被调用了')
40 |     store.sum -= value
41 |   }
42 | }
43 | //准备state——用于存储数据
44 | const state = {
45 |   sum:0, //和
46 |   school: '尚硅谷',
47 |   subject: '前端'
48 | }
49 | //准备getters——用于将state中的数据进行加工
50 | const getters = {
51 |   bigSum(state){
52 |     return state.sum * 10
53 |   }
54 | }
55 | 
56 | //创建并暴露store
57 | export default new Vuex.Store({
58 |   actions,
59 |   mutations,
60 |   state,
61 |   getters
62 | })


--------------------------------------------------------------------------------
/28_src_求和案例_多组件共享数据/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Count />
 4 |     <Person />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |   import Count from './components/Count'
10 |   import Person from './components/Person'
11 | 
12 |   export default {
13 |     name:'App',
14 |     components:{
15 |       Count,
16 |       Person
17 |     },
18 |     mounted(){
19 |       // console.log(this)
20 |     },
21 |   }
22 | </script>


--------------------------------------------------------------------------------
/28_src_求和案例_多组件共享数据/components/Count.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>当前求和为：{{sum}}</h1>
 4 |     <h1>当前求和放大10倍为：{{bigSum}}</h1>
 5 |     <h1>我在{{school}}，学习{{subject}}</h1>
 6 |     <h3 style="color:red">Person组件的总人数是：{{personList.length}}</h3>
 7 |     <select v-model.number="number">
 8 |       <option value="1">1</option>
 9 |       <option value="2">2</option>
10 |       <option value="3">3</option>
11 |     </select>
12 |     <button @click="increment(number)">+</button>
13 |     <button @click="decrement(number)">-</button>
14 |     <button @click="incrementOdd(number)">求和为奇数时再加</button>
15 |     <button @click="incrementWait(number)">等一等再加</button>
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 |   import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
21 |   export default {
22 |     name:'Count',
23 |     data(){
24 |       return {
25 |         number: 1 //选择的值
26 |       }
27 |     },
28 |     computed:{
29 |       //借助mapState生成计算数据，从state中读取数据。（数组写法）
30 |       ...mapState(['sum','school','subject','personList']),
31 | 
32 |       //借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
33 |       ...mapGetters(['bigSum'])
34 |     },
35 |     methods:{
36 |       //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
37 |       ...mapMutations({increment:'JIA', decrement:'JIAN'}),
38 | 
39 |       //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
40 |       ...mapActions({incrementOdd:'jiaOdd', incrementWait:'jiaWait'})
41 |     }
42 |   }
43 | </script>
44 | 
45 | <style>
46 |   button {
47 |     margin-left: 5px;
48 |   }
49 | </style>


--------------------------------------------------------------------------------
/28_src_求和案例_多组件共享数据/components/Person.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>人员列表</h1>
 4 |     <h3 style="color:red">Count组件的求和为：{{sum}}</h3>
 5 |     <input type="text" v-model="name"><button @click="add">添加</button>
 6 |     <ul>
 7 |       <li v-for="person in personList" :key="person.id">{{person.name}}</li>
 8 |     </ul>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 |   import {nanoid} from 'nanoid'
14 | 
15 |   export default {
16 |     name: 'Person',
17 |     data(){
18 |       return {
19 |         name: ''
20 |       }
21 |     },
22 |     computed:{
23 |       personList(){
24 |         return this.$store.state.personList
25 |       },
26 |       sum(){
27 |         return this.$store.state.sum
28 |       }
29 |     },
30 |     methods:{
31 |       add(){
32 |         const person = {
33 |           id: nanoid(),
34 |           name: this.name
35 |         }
36 |         this.$store.commit('ADD_PERSON',person)
37 |         this.name = ''
38 |       }
39 |     }
40 |   }
41 | </script>
42 | 
43 | <style>
44 | 
45 | </style>


--------------------------------------------------------------------------------
/28_src_求和案例_多组件共享数据/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | //引入vueResource
 6 | import vueResource from 'vue-resource'
 7 | //引入store
 8 | import store from './store'
 9 | //关闭vue的生产提示
10 | Vue.config.productionTip = false
11 | //使用插件
12 | Vue.use(vueResource)
13 | 
14 | //创建vm
15 | new Vue({ 
16 |     el:'#app',
17 |     render: h => h(App),
18 |     store,
19 |     beforeCreate(){
20 |         Vue.prototype.$bus = this
21 |     }
22 | })


--------------------------------------------------------------------------------
/28_src_求和案例_多组件共享数据/store/index.js:
--------------------------------------------------------------------------------
 1 | //该文件用于创建Vuex中最为核心的store
 2 | 
 3 | //引入Vue
 4 | import Vue from 'vue'
 5 | //引入vuex
 6 | import Vuex from 'vuex'
 7 | //使用插件
 8 | Vue.use(Vuex)
 9 | //准备actions——用于响应组件中的动作
10 | const actions = {
11 |   // jia(context,value){
12 |   //   console.log('jia被调用了')
13 |   //   context.commit('JIA',value)
14 |   // },
15 |   // jian(context,value){
16 |   //   console.log('jian被调用了')
17 |   //   context.commit('JIAN',value)
18 |   // },
19 |   jiaOdd(context,value){
20 |     console.log('jiaOdd被调用了')
21 |     if(context.state.sum % 2){
22 |       context.commit('JIA',value)
23 |     }
24 |   },
25 |   jiaWait(context,value){
26 |     console.log("jiaWait被调用了")
27 |     setTimeout(()=>{
28 |       context.commit('JIA',value)
29 |     },500)
30 |   }
31 | }
32 | //准备mutations——用于操作数据（state）
33 | const mutations = {
34 |   JIA(state,value){
35 |     console.log('JIA被调用了')
36 |     state.sum += value
37 |   },
38 |   JIAN(store,value){
39 |     console.log('JIAN被调用了')
40 |     store.sum -= value
41 |   },
42 |   ADD_PERSON(store,value){
43 |     console.log('ADD_PERSON被调用了')
44 |     store.personList.unshift(value)
45 |   }
46 | }
47 | //准备state——用于存储数据
48 | const state = {
49 |   sum:0, //和
50 |   school: '尚硅谷',
51 |   subject: '前端',
52 |   personList: [
53 |     {id:'001',name:'张三'}
54 |   ]
55 | }
56 | //准备getters——用于将state中的数据进行加工
57 | const getters = {
58 |   bigSum(state){
59 |     return state.sum * 10
60 |   }
61 | }
62 | 
63 | //创建并暴露store
64 | export default new Vuex.Store({
65 |   actions,
66 |   mutations,
67 |   state,
68 |   getters
69 | })


--------------------------------------------------------------------------------
/29_src_求和案例_vuex模块化编码/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Count />
 4 |     <hr>
 5 |     <Person />
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 |   import Count from './components/Count'
11 |   import Person from './components/Person'
12 | 
13 |   export default {
14 |     name:'App',
15 |     components:{
16 |       Count,
17 |       Person
18 |     },
19 |     mounted(){
20 |       // console.log(this)
21 |     },
22 |   }
23 | </script>


--------------------------------------------------------------------------------
/29_src_求和案例_vuex模块化编码/components/Count.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>当前求和为：{{sum}}</h1>
 4 |     <h1>当前求和放大10倍为：{{bigSum}}</h1>
 5 |     <h1>我在{{school}}，学习{{subject}}</h1>
 6 |     <h3 style="color:red">Person组件的总人数是：{{personList.length}}</h3>
 7 |     <select v-model.number="number">
 8 |       <option value="1">1</option>
 9 |       <option value="2">2</option>
10 |       <option value="3">3</option>
11 |     </select>
12 |     <button @click="increment(number)">+</button>
13 |     <button @click="decrement(number)">-</button>
14 |     <button @click="incrementOdd(number)">求和为奇数时再加</button>
15 |     <button @click="incrementWait(number)">等一等再加</button>
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 |   import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
21 |   export default {
22 |     name:'Count',
23 |     data(){
24 |       return {
25 |         number: 1 //选择的值
26 |       }
27 |     },
28 |     computed:{
29 |       //借助mapState生成计算数据，从state中读取数据。（数组写法）
30 |       ...mapState('countAbout',['sum','school','subject']),
31 |       ...mapState('personAbout',['personList']),
32 | 
33 |       //借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
34 |       ...mapGetters('countAbout',['bigSum'])
35 |     },
36 |     methods:{
37 |       //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
38 |       ...mapMutations('countAbout',{increment:'JIA', decrement:'JIAN'}),
39 | 
40 |       //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
41 |       ...mapActions('countAbout',{incrementOdd:'jiaOdd', incrementWait:'jiaWait'})
42 |     }
43 |   }
44 | </script>
45 | 
46 | <style>
47 |   button {
48 |     margin-left: 5px;
49 |   }
50 | </style>


--------------------------------------------------------------------------------
/29_src_求和案例_vuex模块化编码/components/Person.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>人员列表</h1>
 4 |     <h3 style="color:red">Count组件的求和为：{{sum}}</h3>
 5 |     <h3>列表中第一个人的名字是：{{firstPersonName}}</h3>
 6 |     <input type="text" v-model="name">
 7 |     <button @click="add">添加</button>
 8 |     <button @click="addWang">添加一个姓王的人</button>
 9 |     <button @click="addPersonServer">添加一个人人，名字随机</button>
10 |     <ul>
11 |       <li v-for="person in personList" :key="person.id">{{person.name}}</li>
12 |     </ul>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 |   import {nanoid} from 'nanoid'
18 | 
19 |   export default {
20 |     name: 'Person',
21 |     data(){
22 |       return {
23 |         name: ''
24 |       }
25 |     },
26 |     computed:{
27 |       personList(){
28 |         return this.$store.state.personAbout.personList
29 |       },
30 |       sum(){
31 |         return this.$store.state.countAbout.sum
32 |       },
33 |       firstPersonName(){
34 |         return this.$store.getters['personAbout/firstPersonName']
35 |       }
36 |     },
37 |     methods:{
38 |       add(){
39 |         const person = {
40 |           id: nanoid(),
41 |           name: this.name
42 |         }
43 |         this.$store.commit('personAbout/ADD_PERSON',person)
44 |         this.name = ''
45 |       },
46 |       addWang(){
47 |         this.$store.dispatch('personAbout/addWang',{id:nanoid(),name:this.name})
48 |         this.name = ''
49 |       },
50 |       addPersonServer(){
51 |         this.$store.dispatch('personAbout/addPersonServer')
52 |       }
53 |     }
54 |   }
55 | </script>
56 | 
57 | <style>
58 | 
59 | </style>


--------------------------------------------------------------------------------
/29_src_求和案例_vuex模块化编码/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | //引入vueResource
 6 | import vueResource from 'vue-resource'
 7 | //引入store
 8 | import store from './store'
 9 | //关闭vue的生产提示
10 | Vue.config.productionTip = false
11 | //使用插件
12 | Vue.use(vueResource)
13 | 
14 | //创建vm
15 | new Vue({ 
16 |     el:'#app',
17 |     render: h => h(App),
18 |     store,
19 |     beforeCreate(){
20 |         Vue.prototype.$bus = this
21 |     }
22 | })


--------------------------------------------------------------------------------
/29_src_求和案例_vuex模块化编码/store/count.js:
--------------------------------------------------------------------------------
 1 | //求和相关的配置
 2 | export default {
 3 |   namespaced:true,
 4 |   actions: {
 5 |     jiaOdd(context,value){
 6 |       console.log('jiaOdd被调用了')
 7 |       if(context.state.sum % 2){
 8 |         context.commit('JIA',value)
 9 |       }
10 |     },
11 |     jiaWait(context,value){
12 |       console.log("jiaWait被调用了")
13 |       setTimeout(()=>{
14 |         context.commit('JIA',value)
15 |       },500)
16 |     }
17 |   },
18 |   mutations:{
19 |     JIA(state,value){
20 |       console.log('JIA被调用了')
21 |       state.sum += value
22 |     },
23 |     JIAN(store,value){
24 |       console.log('JIAN被调用了')
25 |       store.sum -= value
26 |     }
27 |   },
28 |   state:{
29 |     sum:0, //和
30 |     school: '尚硅谷',
31 |     subject: '前端'
32 |   },
33 |   getters:{
34 |     bigSum(state){
35 |       return state.sum * 10
36 |     }
37 |   }
38 | }


--------------------------------------------------------------------------------
/29_src_求和案例_vuex模块化编码/store/index.js:
--------------------------------------------------------------------------------
 1 | //该文件用于创建Vuex中最为核心的store
 2 | 
 3 | //引入Vue
 4 | import Vue from 'vue'
 5 | //引入vuex
 6 | import Vuex from 'vuex'
 7 | 
 8 | import person from './person'
 9 | import count from './count'
10 | //使用插件
11 | Vue.use(Vuex)
12 | 
13 | //创建并暴露store
14 | export default new Vuex.Store({
15 |   modules:{
16 |     countAbout:count,
17 |     personAbout:person
18 |   }
19 | })


--------------------------------------------------------------------------------
/29_src_求和案例_vuex模块化编码/store/person.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios"
 2 | import { nanoid } from "nanoid"
 3 | 
 4 | //人员相关的配置
 5 | export default {
 6 |   namespaced:true,
 7 |   actions:{
 8 |     addWang(context,value){
 9 |       if(value.name.indexOf('王') === 0){
10 |         context.commit('ADD_PERSON',value)
11 |       } else {
12 |         alert('添加的人必须姓王')
13 |       }
14 |     },
15 |     addPersonServer(context){
16 |       axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
17 |         response => {
18 |           context.commit('ADD_PERSON',{id:nanoid(),name:response.data})
19 |         },
20 |         error => {
21 |           alert(error.message)
22 |         }
23 |       )
24 |     }
25 |   },
26 |   mutations:{
27 |     ADD_PERSON(store,value){
28 |       console.log('ADD_PERSON被调用了')
29 |       store.personList.unshift(value)
30 |     }
31 |   },
32 |   state:{
33 |     personList: [
34 |       {id:'001',name:'张三'}
35 |     ]
36 |   },
37 |   getters:{
38 |     firstPersonName(state){
39 |       return state.personList[0].name
40 |     }
41 |   }
42 | }


--------------------------------------------------------------------------------
/30_src_路由的基本使用/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |       <div class="row">
 4 |         <div class="col-xs-offset-2 col-xs-8">
 5 |           <div class="page-header"><h2>Vue Router Demo</h2></div>
 6 |         </div>
 7 |       </div>
 8 |       <div class="row">
 9 |         <div class="col-xs-2 col-xs-offset-2">
10 |           <div class="list-group">
11 |             <!-- 原始html中使用a标签实现页面的跳转 -->
12 |             <!-- <a href="./about.html" class="list-group-item active">About</a> -->
13 |             <!-- <a href="./home.html" class="list-group-item">Home</a> -->
14 |             
15 |             <!-- Vue中借助router-link标签实现路由的切换  -->
16 |             <router-link to="/about" class="list-group-item" active-class="active">About</router-link>
17 |             <router-link to="/home" class="list-group-item" active-class="active">Home</router-link>
18 |           </div>
19 |         </div>
20 |         <div class="col-xs-6">
21 |           <div class="panel">
22 |             <div class="panel-body">
23 |               <!-- 指定组件的呈现位置 -->
24 |               <router-view></router-view>
25 |             </div>
26 |           </div>
27 |         </div>
28 |       </div>
29 |     </div>
30 | </template>
31 | 
32 | <script>
33 | 
34 |   export default {
35 |     name:'App',
36 |   }
37 | </script>


--------------------------------------------------------------------------------
/30_src_路由的基本使用/about.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue App</title>
 6 |     <link rel="stylesheet" href="../public/css/bootstrap.css">
 7 |   </head>
 8 |   <body>
 9 |     <div>
10 |       <div class="row">
11 |         <div class="col-xs-offset-2 col-xs-8">
12 |           <div class="page-header"><h2>Vue Router Demo</h2></div>
13 |         </div>
14 |       </div>
15 |       <div class="row">
16 |         <div class="col-xs-2 col-xs-offset-2">
17 |           <div class="list-group">
18 |             <a href="./about.html" class="list-group-item active">About</a>
19 |             <a href="./home.html" class="list-group-item">Home</a>
20 |           </div>
21 |         </div>
22 |         <div class="col-xs-6">
23 |           <div class="panel">
24 |             <div class="panel-body">
25 |               <h2>我是About的内容</h2>
26 |             </div>
27 |           </div>
28 |         </div>
29 |       </div>
30 |     </div>
31 |   </body>
32 | </html>


--------------------------------------------------------------------------------
/30_src_路由的基本使用/components/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>我是About的内容</h2>
 3 | </template>
 4 | 
 5 | <script>
 6 |   export default {
 7 |     name: 'About'
 8 |   }
 9 | </script>
10 | 
11 | <style>
12 | 
13 | </style>


--------------------------------------------------------------------------------
/30_src_路由的基本使用/components/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>我是Home的内容</h2>
 3 | </template>
 4 | 
 5 | <script>
 6 |   export default {
 7 |     name: 'Home'
 8 |   }
 9 | </script>
10 | 
11 | <style>
12 | 
13 | </style>


--------------------------------------------------------------------------------
/30_src_路由的基本使用/home.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue App</title>
 6 |     <link rel="stylesheet" href="../public/css/bootstrap.css">
 7 |   </head>
 8 |   <body>
 9 |     <div>
10 |       <div class="row">
11 |         <div class="col-xs-offset-2 col-xs-8">
12 |           <div class="page-header"><h2>Vue Router Demo</h2></div>
13 |         </div>
14 |       </div>
15 |       <div class="row">
16 |         <div class="col-xs-2 col-xs-offset-2">
17 |           <div class="list-group">
18 |             <a href="./about.html" class="list-group-item">About</a>
19 |             <a href="./home.html" class="list-group-item active">Home</a>
20 |           </div>
21 |         </div>
22 |         <div class="col-xs-6">
23 |           <div class="panel">
24 |             <div class="panel-body">
25 |               <h2>我是Home的内容</h2>
26 |             </div>
27 |           </div>
28 |         </div>
29 |       </div>
30 |     </div>
31 |   </body>
32 | </html>


--------------------------------------------------------------------------------
/30_src_路由的基本使用/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | //引入vue-router
 6 | import VueRouter from 'vue-router'
 7 | //引入路由器
 8 | import router from './router'
 9 | 
10 | //关闭vue的生产提示
11 | Vue.config.productionTip = false
12 | 
13 | //使用路由器
14 | Vue.use(VueRouter)
15 | 
16 | //创建vm
17 | new Vue({
18 |     el:'#app',
19 |     render: h => h(App),
20 |     router
21 |     // mounted(){
22 |     //     setTimeout(()=>{
23 |     //         this.$destroy()
24 |     //     },3000)
25 |     // }
26 | })


--------------------------------------------------------------------------------
/30_src_路由的基本使用/router/index.js:
--------------------------------------------------------------------------------
 1 | // 该文件专门用于创建整个应用的路由器
 2 | import VueRouter from 'vue-router'
 3 | 
 4 | //引入组件
 5 | import About from '../components/About'
 6 | import Home from '../components/Home'
 7 | 
 8 | //创建并暴露一个路由器
 9 | export default new VueRouter({
10 |   routes: [
11 |     {
12 |       path: '/about',
13 |       component: About
14 |     },
15 |     {
16 |       path: '/home',
17 |       component: Home
18 |     }
19 |   ]
20 | })


--------------------------------------------------------------------------------
/31_src_多级路由/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |       <div class="row">
 4 |         <Banner />
 5 |       </div>
 6 |       <div class="row">
 7 |         <div class="col-xs-2 col-xs-offset-2">
 8 |           <div class="list-group">
 9 |             <!-- 原始html中使用a标签实现页面的跳转 -->
10 |             <!-- <a href="./about.html" class="list-group-item active">About</a> -->
11 |             <!-- <a href="./home.html" class="list-group-item">Home</a> -->
12 |             
13 |             <!-- Vue中借助router-link标签实现路由的切换  -->
14 |             <router-link to="/about" class="list-group-item" active-class="active">About</router-link>
15 |             <router-link to="/home" class="list-group-item" active-class="active">Home</router-link>
16 |           </div>
17 |         </div>
18 |         <div class="col-xs-6">
19 |           <div class="panel">
20 |             <div class="panel-body">
21 |               <!-- 指定组件的呈现位置 -->
22 |               <router-view></router-view>
23 |             </div>
24 |           </div>
25 |         </div>
26 |       </div>
27 |     </div>
28 | </template>
29 | 
30 | <script>
31 |   import Banner from './components/Banner'
32 |   export default {
33 |     name:'App',
34 |     components:{
35 |       Banner
36 |     }
37 |   }
38 | </script>


--------------------------------------------------------------------------------
/31_src_多级路由/about.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue App</title>
 6 |     <link rel="stylesheet" href="../public/css/bootstrap.css">
 7 |   </head>
 8 |   <body>
 9 |     <div>
10 |       <div class="row">
11 |         <div class="col-xs-offset-2 col-xs-8">
12 |           <div class="page-header"><h2>Vue Router Demo</h2></div>
13 |         </div>
14 |       </div>
15 |       <div class="row">
16 |         <div class="col-xs-2 col-xs-offset-2">
17 |           <div class="list-group">
18 |             <a href="./about.html" class="list-group-item active">About</a>
19 |             <a href="./home.html" class="list-group-item">Home</a>
20 |           </div>
21 |         </div>
22 |         <div class="col-xs-6">
23 |           <div class="panel">
24 |             <div class="panel-body">
25 |               <h2>我是About的内容</h2>
26 |             </div>
27 |           </div>
28 |         </div>
29 |       </div>
30 |     </div>
31 |   </body>
32 | </html>


--------------------------------------------------------------------------------
/31_src_多级路由/components/Banner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="col-xs-offset-2 col-xs-8">
 3 |       <div class="page-header"><h2>Vue Router Demo</h2></div>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     name: 'Banner'
10 |   }
11 | </script>


--------------------------------------------------------------------------------
/31_src_多级路由/home-news.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue App</title>
 6 |     <link rel="stylesheet" href="../public/css/bootstrap.css">
 7 |   </head>
 8 |   <body>
 9 |     <div>
10 |       <div class="row">
11 |         <div class="col-xs-offset-2 col-xs-8">
12 |           <div class="page-header"><h2>Vue Router Demo</h2></div>
13 |         </div>
14 |       </div>
15 |       <div class="row">
16 |         <div class="col-xs-2 col-xs-offset-2">
17 |           <div class="list-group">
18 |             <a href="./about.html" class="list-group-item">About</a>
19 |             <a href="./home.html" class="list-group-item active">Home</a>
20 |           </div>
21 |         </div>
22 |         <div class="col-xs-6">
23 |           <div class="panel">
24 |             <div class="panel-body">
25 |               <div>
26 |                 <h2>Home组件内容</h2>
27 |                 <div>
28 |                   <ul class="nav nav-tabs">
29 |                     <li>
30 |                       <a href="./home-news.html" class="list-group-item active">News</a>
31 |                     </li>
32 |                     <li>
33 |                       <a href="./home-message.html" class="list-group-item">Message</a>
34 |                     </li>
35 |                   </ul>
36 |                   <ul>
37 |                     <li>news001</li>
38 |                     <li>news002</li>
39 |                     <li>news003</li>
40 |                   </ul>
41 |                 </div>
42 |               </div>
43 |             </div>
44 |           </div>
45 |         </div>
46 |       </div>
47 |     </div>
48 |   </body>
49 | </html>


--------------------------------------------------------------------------------
/31_src_多级路由/home.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue App</title>
 6 |     <link rel="stylesheet" href="../public/css/bootstrap.css">
 7 |   </head>
 8 |   <body>
 9 |     <div>
10 |       <div class="row">
11 |         <div class="col-xs-offset-2 col-xs-8">
12 |           <div class="page-header"><h2>Vue Router Demo</h2></div>
13 |         </div>
14 |       </div>
15 |       <div class="row">
16 |         <div class="col-xs-2 col-xs-offset-2">
17 |           <div class="list-group">
18 |             <a href="./about.html" class="list-group-item">About</a>
19 |             <a href="./home.html" class="list-group-item active">Home</a>
20 |           </div>
21 |         </div>
22 |         <div class="col-xs-6">
23 |           <div class="panel">
24 |             <div class="panel-body">
25 |               <div>
26 |                 <h2>Home组件内容</h2>
27 |                 <div>
28 |                   <ul class="nav nav-tabs">
29 |                     <li>
30 |                       <a href="./home-news.html" class="list-group-item active">News</a>
31 |                     </li>
32 |                     <li>
33 |                       <a href="./home-message.html" class="list-group-item">Message</a>
34 |                     </li>
35 |                   </ul>
36 |                   <ul>
37 |                     <li>news001</li>
38 |                     <li>news002</li>
39 |                     <li>news003</li>
40 |                   </ul>
41 |                 </div>
42 |               </div>
43 |             </div>
44 |           </div>
45 |         </div>
46 |       </div>
47 |     </div>
48 |   </body>
49 | </html>


--------------------------------------------------------------------------------
/31_src_多级路由/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | //引入vue-router
 6 | import VueRouter from 'vue-router'
 7 | //引入路由器
 8 | import router from './router'
 9 | 
10 | //关闭vue的生产提示
11 | Vue.config.productionTip = false
12 | 
13 | //使用路由器
14 | Vue.use(VueRouter)
15 | 
16 | //创建vm
17 | new Vue({
18 |     el:'#app',
19 |     render: h => h(App),
20 |     router
21 |     // mounted(){
22 |     //     setTimeout(()=>{
23 |     //         this.$destroy()
24 |     //     },3000)
25 |     // }
26 | })


--------------------------------------------------------------------------------
/31_src_多级路由/pages/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>我是About的内容</h2>
 3 | </template>
 4 | 
 5 | <script>
 6 |   export default {
 7 |     name: 'About',
 8 |     mounted(){
 9 |       // console.log('About被挂载了')
10 |       window.aboutRoute = this.$route
11 |       window.aboutRouter = this.$router
12 |     },
13 |     // beforeDestroy(){
14 |     //   console.log('About被销毁了')
15 |     // }
16 |   }
17 | </script>


--------------------------------------------------------------------------------
/31_src_多级路由/pages/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Home组件内容</h2>
 4 |     <div>
 5 |       <ul class="nav nav-tabs">
 6 |         <li>
 7 |           <router-link to="/home/news" class="list-group-item" active-class="active">News</router-link>
 8 |         </li>
 9 |         <li>
10 |           <router-link to="/home/message" class="list-group-item" active-class="active">Message</router-link>
11 |         </li>
12 |       </ul>
13 |       <router-view></router-view>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 |   export default {
20 |     name: 'Home',
21 |     mounted(){
22 |       // console.log('Home被挂载了')
23 |       window.homeRoute = this.$route
24 |       window.homeRouter = this.$router
25 |     },
26 |     // beforeDestroy(){
27 |     //   console.log('Home被销毁了')
28 |     // }
29 |   }
30 | </script>


--------------------------------------------------------------------------------
/31_src_多级路由/pages/Message.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul>
 3 |     <li>
 4 |       <a href="/message1">message001</a>&nbsp;&nbsp;
 5 |     </li>
 6 |     <li>
 7 |       <a href="/message2">message002</a>&nbsp;&nbsp;
 8 |     </li>
 9 |     <li>
10 |       <a href="/message3">message003</a>&nbsp;&nbsp;
11 |     </li>
12 |   </ul>
13 | </template>
14 | 
15 | <script>
16 |   export default {
17 |     name: 'Message'
18 | 
19 |   }
20 | </script>
21 | 
22 | <style>
23 | 
24 | </style>


--------------------------------------------------------------------------------
/31_src_多级路由/pages/News.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul>
 4 |       <li>news001</li>
 5 |       <li>news002</li>
 6 |       <li>news003</li>
 7 |     </ul>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 |   export default {
13 |     name: 'News'
14 |   }
15 | </script>
16 | 
17 | <style>
18 | 
19 | </style>


--------------------------------------------------------------------------------
/31_src_多级路由/router/index.js:
--------------------------------------------------------------------------------
 1 | // 该文件专门用于创建整个应用的路由器
 2 | import VueRouter from 'vue-router'
 3 | 
 4 | //引入组件
 5 | import About from '../pages/About'
 6 | import Home from '../pages/Home'
 7 | import News from '../pages/News'
 8 | import Message from '../pages/Message'
 9 | 
10 | //创建并暴露一个路由器
11 | export default new VueRouter({
12 |   routes: [
13 |     {
14 |       path: '/about',
15 |       component: About
16 |     },
17 |     {
18 |       path: '/home',
19 |       component: Home,
20 |       children:[
21 |         {
22 |           path: 'news',
23 |           component: News
24 |         },
25 |         {
26 |           path: 'message',
27 |           component: Message
28 |         }
29 |       ]
30 |     }
31 |   ]
32 | })


--------------------------------------------------------------------------------
/32_src_路由的query参数/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |       <div class="row">
 4 |         <Banner />
 5 |       </div>
 6 |       <div class="row">
 7 |         <div class="col-xs-2 col-xs-offset-2">
 8 |           <div class="list-group">
 9 |             <!-- 原始html中使用a标签实现页面的跳转 -->
10 |             <!-- <a href="./about.html" class="list-group-item active">About</a> -->
11 |             <!-- <a href="./home.html" class="list-group-item">Home</a> -->
12 |             
13 |             <!-- Vue中借助router-link标签实现路由的切换  -->
14 |             <router-link to="/about" class="list-group-item" active-class="active">About</router-link>
15 |             <router-link to="/home" class="list-group-item" active-class="active">Home</router-link>
16 |           </div>
17 |         </div>
18 |         <div class="col-xs-6">
19 |           <div class="panel">
20 |             <div class="panel-body">
21 |               <!-- 指定组件的呈现位置 -->
22 |               <router-view></router-view>
23 |             </div>
24 |           </div>
25 |         </div>
26 |       </div>
27 |     </div>
28 | </template>
29 | 
30 | <script>
31 |   import Banner from './components/Banner'
32 |   export default {
33 |     name:'App',
34 |     components:{
35 |       Banner
36 |     }
37 |   }
38 | </script>


--------------------------------------------------------------------------------
/32_src_路由的query参数/components/Banner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="col-xs-offset-2 col-xs-8">
 3 |       <div class="page-header"><h2>Vue Router Demo</h2></div>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     name: 'Banner'
10 |   }
11 | </script>


--------------------------------------------------------------------------------
/32_src_路由的query参数/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | //引入vue-router
 6 | import VueRouter from 'vue-router'
 7 | //引入路由器
 8 | import router from './router'
 9 | 
10 | //关闭vue的生产提示
11 | Vue.config.productionTip = false
12 | 
13 | //使用路由器
14 | Vue.use(VueRouter)
15 | 
16 | //创建vm
17 | new Vue({
18 |     el:'#app',
19 |     render: h => h(App),
20 |     router
21 |     // mounted(){
22 |     //     setTimeout(()=>{
23 |     //         this.$destroy()
24 |     //     },3000)
25 |     // }
26 | })


--------------------------------------------------------------------------------
/32_src_路由的query参数/pages/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>我是About的内容</h2>
 3 | </template>
 4 | 
 5 | <script>
 6 |   export default {
 7 |     name: 'About',
 8 |     mounted(){
 9 |       // console.log('About被挂载了')
10 |       window.aboutRoute = this.$route
11 |       window.aboutRouter = this.$router
12 |     },
13 |     // beforeDestroy(){
14 |     //   console.log('About被销毁了')
15 |     // }
16 |   }
17 | </script>


--------------------------------------------------------------------------------
/32_src_路由的query参数/pages/Detail.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul>
 3 |     <li>消息编号：{{$route.query.id}}</li>
 4 |     <li>消息标题：{{$route.query.title}}</li>
 5 |   </ul>
 6 | </template>
 7 | 
 8 | <script>
 9 |   export default {
10 |     name:'Detail'
11 |   }
12 | </script>


--------------------------------------------------------------------------------
/32_src_路由的query参数/pages/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Home组件内容</h2>
 4 |     <div>
 5 |       <ul class="nav nav-tabs">
 6 |         <li>
 7 |           <router-link to="/home/news" class="list-group-item" active-class="active">News</router-link>
 8 |         </li>
 9 |         <li>
10 |           <router-link to="/home/message" class="list-group-item" active-class="active">Message</router-link>
11 |         </li>
12 |       </ul>
13 |       <router-view></router-view>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 |   export default {
20 |     name: 'Home',
21 |     mounted(){
22 |       // console.log('Home被挂载了')
23 |       window.homeRoute = this.$route
24 |       window.homeRouter = this.$router
25 |     },
26 |     // beforeDestroy(){
27 |     //   console.log('Home被销毁了')
28 |     // }
29 |   }
30 | </script>


--------------------------------------------------------------------------------
/32_src_路由的query参数/pages/Message.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul>
 4 |       <li v-for="m in messageList" :key="m.id">
 5 |         <!-- 跳转路由并携带参数，to的字符串写法 -->
 6 |         <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->
 7 | 
 8 |         <router-link :to="{
 9 |           path:'/home/message/detail',
10 |           query:{
11 |             id:m.id,
12 |             title:m.title
13 |           }
14 |         }">
15 |           {{m.title}}
16 |         </router-link>&nbsp;&nbsp;
17 |       </li>
18 |     </ul>
19 |     <hr>
20 |     <router-view></router-view>
21 |   </div>
22 |   
23 | </template>
24 | 
25 | <script>
26 |   export default {
27 |     name: 'Message',
28 |     data(){
29 |       return {
30 |         messageList:[
31 |           {id:'001', title:'message001'},
32 |           {id:'002', title:'message002'},
33 |           {id:'003', title:'message003'}
34 |         ]
35 |       }
36 |     }
37 |   }
38 | </script>
39 | 
40 | <style>
41 | 
42 | </style>


--------------------------------------------------------------------------------
/32_src_路由的query参数/pages/News.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul>
 4 |       <li>news001</li>
 5 |       <li>news002</li>
 6 |       <li>news003</li>
 7 |     </ul>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 |   export default {
13 |     name: 'News'
14 |   }
15 | </script>
16 | 
17 | <style>
18 | 
19 | </style>


--------------------------------------------------------------------------------
/32_src_路由的query参数/router/index.js:
--------------------------------------------------------------------------------
 1 | // 该文件专门用于创建整个应用的路由器
 2 | import VueRouter from 'vue-router'
 3 | 
 4 | //引入组件
 5 | import About from '../pages/About'
 6 | import Home from '../pages/Home'
 7 | import News from '../pages/News'
 8 | import Message from '../pages/Message'
 9 | import Detail from '../pages/Detail'
10 | 
11 | //创建并暴露一个路由器
12 | export default new VueRouter({
13 |   routes: [
14 |     {
15 |       path: '/about',
16 |       component: About
17 |     },
18 |     {
19 |       path: '/home',
20 |       component: Home,
21 |       children:[
22 |         {
23 |           path: 'news',
24 |           component: News
25 |         },
26 |         {
27 |           path: 'message',
28 |           component: Message,
29 |           children:[
30 |             {
31 |               path:'detail',
32 |               component:Detail
33 |             }
34 |           ]
35 |         }
36 |       ]
37 |     }
38 |   ]
39 | })


--------------------------------------------------------------------------------
/33_src_命名路由/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |       <div class="row">
 4 |         <Banner />
 5 |       </div>
 6 |       <div class="row">
 7 |         <div class="col-xs-2 col-xs-offset-2">
 8 |           <div class="list-group">
 9 |             <!-- 原始html中使用a标签实现页面的跳转 -->
10 |             <!-- <a href="./about.html" class="list-group-item active">About</a> -->
11 |             <!-- <a href="./home.html" class="list-group-item">Home</a> -->
12 |             
13 |             <!-- Vue中借助router-link标签实现路由的切换  -->
14 |             <router-link to="/about" class="list-group-item" active-class="active">About</router-link>
15 |             <router-link to="/home" class="list-group-item" active-class="active">Home</router-link>
16 |           </div>
17 |         </div>
18 |         <div class="col-xs-6">
19 |           <div class="panel">
20 |             <div class="panel-body">
21 |               <!-- 指定组件的呈现位置 -->
22 |               <router-view></router-view>
23 |             </div>
24 |           </div>
25 |         </div>
26 |       </div>
27 |     </div>
28 | </template>
29 | 
30 | <script>
31 |   import Banner from './components/Banner'
32 |   export default {
33 |     name:'App',
34 |     components:{
35 |       Banner
36 |     }
37 |   }
38 | </script>


--------------------------------------------------------------------------------
/33_src_命名路由/about.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue App</title>
 6 |     <link rel="stylesheet" href="../public/css/bootstrap.css">
 7 |   </head>
 8 |   <body>
 9 |     <div>
10 |       <div class="row">
11 |         <div class="col-xs-offset-2 col-xs-8">
12 |           <div class="page-header"><h2>Vue Router Demo</h2></div>
13 |         </div>
14 |       </div>
15 |       <div class="row">
16 |         <div class="col-xs-2 col-xs-offset-2">
17 |           <div class="list-group">
18 |             <a href="./about.html" class="list-group-item active">About</a>
19 |             <a href="./home.html" class="list-group-item">Home</a>
20 |           </div>
21 |         </div>
22 |         <div class="col-xs-6">
23 |           <div class="panel">
24 |             <div class="panel-body">
25 |               <h2>我是About的内容</h2>
26 |             </div>
27 |           </div>
28 |         </div>
29 |       </div>
30 |     </div>
31 |   </body>
32 | </html>


--------------------------------------------------------------------------------
/33_src_命名路由/components/Banner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="col-xs-offset-2 col-xs-8">
 3 |       <div class="page-header"><h2>Vue Router Demo</h2></div>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     name: 'Banner'
10 |   }
11 | </script>


--------------------------------------------------------------------------------
/33_src_命名路由/home-news.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue App</title>
 6 |     <link rel="stylesheet" href="../public/css/bootstrap.css">
 7 |   </head>
 8 |   <body>
 9 |     <div>
10 |       <div class="row">
11 |         <div class="col-xs-offset-2 col-xs-8">
12 |           <div class="page-header"><h2>Vue Router Demo</h2></div>
13 |         </div>
14 |       </div>
15 |       <div class="row">
16 |         <div class="col-xs-2 col-xs-offset-2">
17 |           <div class="list-group">
18 |             <a href="./about.html" class="list-group-item">About</a>
19 |             <a href="./home.html" class="list-group-item active">Home</a>
20 |           </div>
21 |         </div>
22 |         <div class="col-xs-6">
23 |           <div class="panel">
24 |             <div class="panel-body">
25 |               <div>
26 |                 <h2>Home组件内容</h2>
27 |                 <div>
28 |                   <ul class="nav nav-tabs">
29 |                     <li>
30 |                       <a href="./home-news.html" class="list-group-item active">News</a>
31 |                     </li>
32 |                     <li>
33 |                       <a href="./home-message.html" class="list-group-item">Message</a>
34 |                     </li>
35 |                   </ul>
36 |                   <ul>
37 |                     <li>news001</li>
38 |                     <li>news002</li>
39 |                     <li>news003</li>
40 |                   </ul>
41 |                 </div>
42 |               </div>
43 |             </div>
44 |           </div>
45 |         </div>
46 |       </div>
47 |     </div>
48 |   </body>
49 | </html>


--------------------------------------------------------------------------------
/33_src_命名路由/home.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue App</title>
 6 |     <link rel="stylesheet" href="../public/css/bootstrap.css">
 7 |   </head>
 8 |   <body>
 9 |     <div>
10 |       <div class="row">
11 |         <div class="col-xs-offset-2 col-xs-8">
12 |           <div class="page-header"><h2>Vue Router Demo</h2></div>
13 |         </div>
14 |       </div>
15 |       <div class="row">
16 |         <div class="col-xs-2 col-xs-offset-2">
17 |           <div class="list-group">
18 |             <a href="./about.html" class="list-group-item">About</a>
19 |             <a href="./home.html" class="list-group-item active">Home</a>
20 |           </div>
21 |         </div>
22 |         <div class="col-xs-6">
23 |           <div class="panel">
24 |             <div class="panel-body">
25 |               <div>
26 |                 <h2>Home组件内容</h2>
27 |                 <div>
28 |                   <ul class="nav nav-tabs">
29 |                     <li>
30 |                       <a href="./home-news.html" class="list-group-item active">News</a>
31 |                     </li>
32 |                     <li>
33 |                       <a href="./home-message.html" class="list-group-item">Message</a>
34 |                     </li>
35 |                   </ul>
36 |                   <ul>
37 |                     <li>news001</li>
38 |                     <li>news002</li>
39 |                     <li>news003</li>
40 |                   </ul>
41 |                 </div>
42 |               </div>
43 |             </div>
44 |           </div>
45 |         </div>
46 |       </div>
47 |     </div>
48 |   </body>
49 | </html>


--------------------------------------------------------------------------------
/33_src_命名路由/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | //引入vue-router
 6 | import VueRouter from 'vue-router'
 7 | //引入路由器
 8 | import router from './router'
 9 | 
10 | //关闭vue的生产提示
11 | Vue.config.productionTip = false
12 | 
13 | //使用路由器
14 | Vue.use(VueRouter)
15 | 
16 | //创建vm
17 | new Vue({
18 |     el:'#app',
19 |     render: h => h(App),
20 |     router
21 |     // mounted(){
22 |     //     setTimeout(()=>{
23 |     //         this.$destroy()
24 |     //     },3000)
25 |     // }
26 | })


--------------------------------------------------------------------------------
/33_src_命名路由/pages/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>我是About的内容</h2>
 3 | </template>
 4 | 
 5 | <script>
 6 |   export default {
 7 |     name: 'About',
 8 |     mounted(){
 9 |       // console.log('About被挂载了')
10 |       window.aboutRoute = this.$route
11 |       window.aboutRouter = this.$router
12 |     },
13 |     // beforeDestroy(){
14 |     //   console.log('About被销毁了')
15 |     // }
16 |   }
17 | </script>


--------------------------------------------------------------------------------
/33_src_命名路由/pages/Detail.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul>
 3 |     <li>消息编号：{{$route.query.id}}</li>
 4 |     <li>消息标题：{{$route.query.title}}</li>
 5 |   </ul>
 6 | </template>
 7 | 
 8 | <script>
 9 |   export default {
10 |     name:'Detail'
11 |   }
12 | </script>


--------------------------------------------------------------------------------
/33_src_命名路由/pages/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Home组件内容</h2>
 4 |     <div>
 5 |       <ul class="nav nav-tabs">
 6 |         <li>
 7 |           <router-link to="/home/news" class="list-group-item" active-class="active">News</router-link>
 8 |         </li>
 9 |         <li>
10 |           <router-link to="/home/message" class="list-group-item" active-class="active">Message</router-link>
11 |         </li>
12 |       </ul>
13 |       <router-view></router-view>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 |   export default {
20 |     name: 'Home',
21 |     mounted(){
22 |       // console.log('Home被挂载了')
23 |       window.homeRoute = this.$route
24 |       window.homeRouter = this.$router
25 |     },
26 |     // beforeDestroy(){
27 |     //   console.log('Home被销毁了')
28 |     // }
29 |   }
30 | </script>


--------------------------------------------------------------------------------
/33_src_命名路由/pages/Message.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul>
 4 |       <li v-for="m in messageList" :key="m.id">
 5 |         <!-- 跳转路由并携带参数，to的字符串写法 -->
 6 |         <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->
 7 | 
 8 |         <!-- <router-link :to="{
 9 |           path:'/home/message/detail',
10 |           query:{
11 |             id:m.id,
12 |             title:m.title
13 |           }
14 |         }"> -->
15 |         <router-link :to="{
16 |           name: 'detailName',
17 |           query:{
18 |             id:m.id,
19 |             title:m.title
20 |           }
21 |         }">
22 |           {{m.title}}
23 |         </router-link>&nbsp;&nbsp;
24 |       </li>
25 |     </ul>
26 |     <hr>
27 |     <router-view></router-view>
28 |   </div>
29 |   
30 | </template>
31 | 
32 | <script>
33 |   export default {
34 |     name: 'Message',
35 |     data(){
36 |       return {
37 |         messageList:[
38 |           {id:'001', title:'message001'},
39 |           {id:'002', title:'message002'},
40 |           {id:'003', title:'message003'}
41 |         ]
42 |       }
43 |     }
44 |   }
45 | </script>
46 | 
47 | <style>
48 | 
49 | </style>


--------------------------------------------------------------------------------
/33_src_命名路由/pages/News.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul>
 4 |       <li>news001</li>
 5 |       <li>news002</li>
 6 |       <li>news003</li>
 7 |     </ul>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 |   export default {
13 |     name: 'News'
14 |   }
15 | </script>
16 | 
17 | <style>
18 | 
19 | </style>


--------------------------------------------------------------------------------
/33_src_命名路由/router/index.js:
--------------------------------------------------------------------------------
 1 | // 该文件专门用于创建整个应用的路由器
 2 | import VueRouter from 'vue-router'
 3 | 
 4 | //引入组件
 5 | import About from '../pages/About'
 6 | import Home from '../pages/Home'
 7 | import News from '../pages/News'
 8 | import Message from '../pages/Message'
 9 | import Detail from '../pages/Detail'
10 | 
11 | //创建并暴露一个路由器
12 | export default new VueRouter({
13 |   routes: [
14 |     {
15 |       name:'aboutName',
16 |       path: '/about',
17 |       component: About
18 |     },
19 |     {
20 |       path: '/home',
21 |       component: Home,
22 |       children:[
23 |         {
24 |           path: 'news',
25 |           component: News
26 |         },
27 |         {
28 |           path: 'message',
29 |           component: Message,
30 |           children:[
31 |             {
32 |               name:'detailName',
33 |               path:'detail',
34 |               component:Detail
35 |             }
36 |           ]
37 |         }
38 |       ]
39 |     }
40 |   ]
41 | })


--------------------------------------------------------------------------------
/34_src_路由的params参数/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |       <div class="row">
 4 |         <Banner />
 5 |       </div>
 6 |       <div class="row">
 7 |         <div class="col-xs-2 col-xs-offset-2">
 8 |           <div class="list-group">
 9 |             <!-- 原始html中使用a标签实现页面的跳转 -->
10 |             <!-- <a href="./about.html" class="list-group-item active">About</a> -->
11 |             <!-- <a href="./home.html" class="list-group-item">Home</a> -->
12 |             
13 |             <!-- Vue中借助router-link标签实现路由的切换  -->
14 |             <router-link to="/about" class="list-group-item" active-class="active">About</router-link>
15 |             <router-link to="/home" class="list-group-item" active-class="active">Home</router-link>
16 |           </div>
17 |         </div>
18 |         <div class="col-xs-6">
19 |           <div class="panel">
20 |             <div class="panel-body">
21 |               <!-- 指定组件的呈现位置 -->
22 |               <router-view></router-view>
23 |             </div>
24 |           </div>
25 |         </div>
26 |       </div>
27 |     </div>
28 | </template>
29 | 
30 | <script>
31 |   import Banner from './components/Banner'
32 |   export default {
33 |     name:'App',
34 |     components:{
35 |       Banner
36 |     }
37 |   }
38 | </script>


--------------------------------------------------------------------------------
/34_src_路由的params参数/about.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue App</title>
 6 |     <link rel="stylesheet" href="../public/css/bootstrap.css">
 7 |   </head>
 8 |   <body>
 9 |     <div>
10 |       <div class="row">
11 |         <div class="col-xs-offset-2 col-xs-8">
12 |           <div class="page-header"><h2>Vue Router Demo</h2></div>
13 |         </div>
14 |       </div>
15 |       <div class="row">
16 |         <div class="col-xs-2 col-xs-offset-2">
17 |           <div class="list-group">
18 |             <a href="./about.html" class="list-group-item active">About</a>
19 |             <a href="./home.html" class="list-group-item">Home</a>
20 |           </div>
21 |         </div>
22 |         <div class="col-xs-6">
23 |           <div class="panel">
24 |             <div class="panel-body">
25 |               <h2>我是About的内容</h2>
26 |             </div>
27 |           </div>
28 |         </div>
29 |       </div>
30 |     </div>
31 |   </body>
32 | </html>


--------------------------------------------------------------------------------
/34_src_路由的params参数/components/Banner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="col-xs-offset-2 col-xs-8">
 3 |       <div class="page-header"><h2>Vue Router Demo</h2></div>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     name: 'Banner'
10 |   }
11 | </script>


--------------------------------------------------------------------------------
/34_src_路由的params参数/home-news.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue App</title>
 6 |     <link rel="stylesheet" href="../public/css/bootstrap.css">
 7 |   </head>
 8 |   <body>
 9 |     <div>
10 |       <div class="row">
11 |         <div class="col-xs-offset-2 col-xs-8">
12 |           <div class="page-header"><h2>Vue Router Demo</h2></div>
13 |         </div>
14 |       </div>
15 |       <div class="row">
16 |         <div class="col-xs-2 col-xs-offset-2">
17 |           <div class="list-group">
18 |             <a href="./about.html" class="list-group-item">About</a>
19 |             <a href="./home.html" class="list-group-item active">Home</a>
20 |           </div>
21 |         </div>
22 |         <div class="col-xs-6">
23 |           <div class="panel">
24 |             <div class="panel-body">
25 |               <div>
26 |                 <h2>Home组件内容</h2>
27 |                 <div>
28 |                   <ul class="nav nav-tabs">
29 |                     <li>
30 |                       <a href="./home-news.html" class="list-group-item active">News</a>
31 |                     </li>
32 |                     <li>
33 |                       <a href="./home-message.html" class="list-group-item">Message</a>
34 |                     </li>
35 |                   </ul>
36 |                   <ul>
37 |                     <li>news001</li>
38 |                     <li>news002</li>
39 |                     <li>news003</li>
40 |                   </ul>
41 |                 </div>
42 |               </div>
43 |             </div>
44 |           </div>
45 |         </div>
46 |       </div>
47 |     </div>
48 |   </body>
49 | </html>


--------------------------------------------------------------------------------
/34_src_路由的params参数/home.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue App</title>
 6 |     <link rel="stylesheet" href="../public/css/bootstrap.css">
 7 |   </head>
 8 |   <body>
 9 |     <div>
10 |       <div class="row">
11 |         <div class="col-xs-offset-2 col-xs-8">
12 |           <div class="page-header"><h2>Vue Router Demo</h2></div>
13 |         </div>
14 |       </div>
15 |       <div class="row">
16 |         <div class="col-xs-2 col-xs-offset-2">
17 |           <div class="list-group">
18 |             <a href="./about.html" class="list-group-item">About</a>
19 |             <a href="./home.html" class="list-group-item active">Home</a>
20 |           </div>
21 |         </div>
22 |         <div class="col-xs-6">
23 |           <div class="panel">
24 |             <div class="panel-body">
25 |               <div>
26 |                 <h2>Home组件内容</h2>
27 |                 <div>
28 |                   <ul class="nav nav-tabs">
29 |                     <li>
30 |                       <a href="./home-news.html" class="list-group-item active">News</a>
31 |                     </li>
32 |                     <li>
33 |                       <a href="./home-message.html" class="list-group-item">Message</a>
34 |                     </li>
35 |                   </ul>
36 |                   <ul>
37 |                     <li>news001</li>
38 |                     <li>news002</li>
39 |                     <li>news003</li>
40 |                   </ul>
41 |                 </div>
42 |               </div>
43 |             </div>
44 |           </div>
45 |         </div>
46 |       </div>
47 |     </div>
48 |   </body>
49 | </html>


--------------------------------------------------------------------------------
/34_src_路由的params参数/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | //引入vue-router
 6 | import VueRouter from 'vue-router'
 7 | //引入路由器
 8 | import router from './router'
 9 | 
10 | //关闭vue的生产提示
11 | Vue.config.productionTip = false
12 | 
13 | //使用路由器
14 | Vue.use(VueRouter)
15 | 
16 | //创建vm
17 | new Vue({
18 |     el:'#app',
19 |     render: h => h(App),
20 |     router
21 |     // mounted(){
22 |     //     setTimeout(()=>{
23 |     //         this.$destroy()
24 |     //     },3000)
25 |     // }
26 | })


--------------------------------------------------------------------------------
/34_src_路由的params参数/pages/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>我是About的内容</h2>
 3 | </template>
 4 | 
 5 | <script>
 6 |   export default {
 7 |     name: 'About',
 8 |     mounted(){
 9 |       // console.log('About被挂载了')
10 |       window.aboutRoute = this.$route
11 |       window.aboutRouter = this.$router
12 |     },
13 |     // beforeDestroy(){
14 |     //   console.log('About被销毁了')
15 |     // }
16 |   }
17 | </script>


--------------------------------------------------------------------------------
/34_src_路由的params参数/pages/Detail.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul>
 3 |     <li>消息编号：{{$route.params.id}}</li>
 4 |     <li>消息标题：{{$route.params.title}}</li>
 5 |   </ul>
 6 | </template>
 7 | 
 8 | <script>
 9 |   export default {
10 |     name:'Detail'
11 |   }
12 | </script>


--------------------------------------------------------------------------------
/34_src_路由的params参数/pages/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Home组件内容</h2>
 4 |     <div>
 5 |       <ul class="nav nav-tabs">
 6 |         <li>
 7 |           <router-link to="/home/news" class="list-group-item" active-class="active">News</router-link>
 8 |         </li>
 9 |         <li>
10 |           <router-link to="/home/message" class="list-group-item" active-class="active">Message</router-link>
11 |         </li>
12 |       </ul>
13 |       <router-view></router-view>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 |   export default {
20 |     name: 'Home',
21 |     mounted(){
22 |       // console.log('Home被挂载了')
23 |       window.homeRoute = this.$route
24 |       window.homeRouter = this.$router
25 |     },
26 |     // beforeDestroy(){
27 |     //   console.log('Home被销毁了')
28 |     // }
29 |   }
30 | </script>


--------------------------------------------------------------------------------
/34_src_路由的params参数/pages/Message.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul>
 4 |       <li v-for="m in messageList" :key="m.id">
 5 |         <!-- 跳转路由并携带参数，to的字符串写法 -->
 6 |         <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->
 7 |         
 8 |         <!-- 跳转路由并携带参数，to的对象写法 -->
 9 |         <!-- <router-link :to="{
10 |           path:'/home/message/detail',
11 |           query:{
12 |             id:m.id,
13 |             title:m.title
14 |           }
15 |         }"> -->
16 |         <router-link :to="{
17 |           name: 'detailName',
18 |           params:{
19 |             id:m.id,
20 |             title:m.title
21 |           }
22 |         }">
23 |           {{m.title}}
24 |         </router-link>&nbsp;&nbsp;
25 |       </li>
26 |     </ul>
27 |     <hr>
28 |     <router-view></router-view>
29 |   </div>
30 |   
31 | </template>
32 | 
33 | <script>
34 |   export default {
35 |     name: 'Message',
36 |     data(){
37 |       return {
38 |         messageList:[
39 |           {id:'001', title:'消息001'},
40 |           {id:'002', title:'消息002'},
41 |           {id:'003', title:'消息003'}
42 |         ]
43 |       }
44 |     },
45 |     mounted(){
46 |       console.log(this)
47 |     }
48 |   }
49 | </script>
50 | 
51 | <style>
52 | 
53 | </style>


--------------------------------------------------------------------------------
/34_src_路由的params参数/pages/News.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul>
 4 |       <li>news001</li>
 5 |       <li>news002</li>
 6 |       <li>news003</li>
 7 |     </ul>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 |   export default {
13 |     name: 'News'
14 |   }
15 | </script>
16 | 
17 | <style>
18 | 
19 | </style>


--------------------------------------------------------------------------------
/34_src_路由的params参数/router/index.js:
--------------------------------------------------------------------------------
 1 | // 该文件专门用于创建整个应用的路由器
 2 | import VueRouter from 'vue-router'
 3 | 
 4 | //引入组件
 5 | import About from '../pages/About'
 6 | import Home from '../pages/Home'
 7 | import News from '../pages/News'
 8 | import Message from '../pages/Message'
 9 | import Detail from '../pages/Detail'
10 | 
11 | //创建并暴露一个路由器
12 | export default new VueRouter({
13 |   routes: [
14 |     {
15 |       name:'aboutName',
16 |       path: '/about',
17 |       component: About
18 |     },
19 |     {
20 |       path: '/home',
21 |       component: Home,
22 |       children:[
23 |         {
24 |           path: 'news',
25 |           component: News
26 |         },
27 |         {
28 |           path: 'message',
29 |           component: Message,
30 |           children:[
31 |             {
32 |               name:'detailName',
33 |               path:'detail/:id/:title',
34 |               component:Detail
35 |             }
36 |           ]
37 |         }
38 |       ]
39 |     }
40 |   ]
41 | })


--------------------------------------------------------------------------------
/35_src_路由的props配置/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |       <div class="row">
 4 |         <Banner />
 5 |       </div>
 6 |       <div class="row">
 7 |         <div class="col-xs-2 col-xs-offset-2">
 8 |           <div class="list-group">
 9 |             <!-- 原始html中使用a标签实现页面的跳转 -->
10 |             <!-- <a href="./about.html" class="list-group-item active">About</a> -->
11 |             <!-- <a href="./home.html" class="list-group-item">Home</a> -->
12 |             
13 |             <!-- Vue中借助router-link标签实现路由的切换  -->
14 |             <router-link to="/about" class="list-group-item" active-class="active">About</router-link>
15 |             <router-link to="/home" class="list-group-item" active-class="active">Home</router-link>
16 |           </div>
17 |         </div>
18 |         <div class="col-xs-6">
19 |           <div class="panel">
20 |             <div class="panel-body">
21 |               <!-- 指定组件的呈现位置 -->
22 |               <router-view></router-view>
23 |             </div>
24 |           </div>
25 |         </div>
26 |       </div>
27 |     </div>
28 | </template>
29 | 
30 | <script>
31 |   import Banner from './components/Banner'
32 |   export default {
33 |     name:'App',
34 |     components:{
35 |       Banner
36 |     }
37 |   }
38 | </script>


--------------------------------------------------------------------------------
/35_src_路由的props配置/components/Banner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="col-xs-offset-2 col-xs-8">
 3 |       <div class="page-header"><h2>Vue Router Demo</h2></div>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     name: 'Banner'
10 |   }
11 | </script>


--------------------------------------------------------------------------------
/35_src_路由的props配置/pages/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>我是About的内容</h2>
 3 | </template>
 4 | 
 5 | <script>
 6 |   export default {
 7 |     name: 'About',
 8 |     mounted(){
 9 |       // console.log('About被挂载了')
10 |       window.aboutRoute = this.$route
11 |       window.aboutRouter = this.$router
12 |     },
13 |     // beforeDestroy(){
14 |     //   console.log('About被销毁了')
15 |     // }
16 |   }
17 | </script>


--------------------------------------------------------------------------------
/35_src_路由的props配置/pages/Detail.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul>
 3 |     <li>消息编号：{{id}}</li>
 4 |     <li>消息标题：{{title}}</li>
 5 |   </ul>
 6 | </template>
 7 | 
 8 | <script>
 9 |   export default {
10 |     name:'Detail',
11 |     props:['id','title'],
12 |     computed:{
13 |       // id(){
14 |       //   return this.$route.params.id
15 |       // },
16 |       // title(){
17 |       //   return this.$route.params.title
18 |       // }
19 |     },
20 |     mounted(){
21 |       console.log(this)
22 |     }
23 |   }
24 | </script>


--------------------------------------------------------------------------------
/35_src_路由的props配置/pages/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Home组件内容</h2>
 4 |     <div>
 5 |       <ul class="nav nav-tabs">
 6 |         <li>
 7 |           <router-link to="/home/news" class="list-group-item" active-class="active">News</router-link>
 8 |         </li>
 9 |         <li>
10 |           <router-link to="/home/message" class="list-group-item" active-class="active">Message</router-link>
11 |         </li>
12 |       </ul>
13 |       <router-view></router-view>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 |   export default {
20 |     name: 'Home',
21 |     mounted(){
22 |       // console.log('Home被挂载了')
23 |       window.homeRoute = this.$route
24 |       window.homeRouter = this.$router
25 |     },
26 |     // beforeDestroy(){
27 |     //   console.log('Home被销毁了')
28 |     // }
29 |   }
30 | </script>


--------------------------------------------------------------------------------
/35_src_路由的props配置/pages/Message.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul>
 4 |       <li v-for="m in messageList" :key="m.id">
 5 |         <!-- 跳转路由并携带参数，to的字符串写法 -->
 6 |         <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->
 7 |         
 8 |         <!-- 跳转路由并携带参数，to的对象写法 -->
 9 |         <!-- <router-link :to="{
10 |           path:'/home/message/detail',
11 |           query:{
12 |             id:m.id,
13 |             title:m.title
14 |           }
15 |         }"> -->
16 |         <router-link :to="{
17 |           name: 'detailName',
18 |           query:{
19 |             id:m.id,
20 |             title:m.title
21 |           }
22 |         }">
23 |           {{m.title}}
24 |         </router-link>&nbsp;&nbsp;
25 |       </li>
26 |     </ul>
27 |     <hr>
28 |     <router-view></router-view>
29 |   </div>
30 | </template>
31 | 
32 | <script>
33 |   export default {
34 |     name: 'Message',
35 |     data(){
36 |       return {
37 |         messageList:[
38 |           {id:'001', title:'消息001'},
39 |           {id:'002', title:'消息002'},
40 |           {id:'003', title:'消息003'}
41 |         ]
42 |       }
43 |     },
44 |   }
45 | </script>


--------------------------------------------------------------------------------
/35_src_路由的props配置/pages/News.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul>
 4 |       <li>news001</li>
 5 |       <li>news002</li>
 6 |       <li>news003</li>
 7 |     </ul>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 |   export default {
13 |     name: 'News'
14 |   }
15 | </script>


--------------------------------------------------------------------------------
/36_src_router-link的replace属性/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |       <div class="row">
 4 |         <Banner />
 5 |       </div>
 6 |       <div class="row">
 7 |         <div class="col-xs-2 col-xs-offset-2">
 8 |           <div class="list-group">
 9 |             <!-- 原始html中使用a标签实现页面的跳转 -->
10 |             <!-- <a href="./about.html" class="list-group-item active">About</a> -->
11 |             <!-- <a href="./home.html" class="list-group-item">Home</a> -->
12 |             
13 |             <!-- Vue中借助router-link标签实现路由的切换  -->
14 |             <router-link to="/about" class="list-group-item" active-class="active">About</router-link>
15 |             <router-link to="/home" class="list-group-item" active-class="active">Home</router-link>
16 |           </div>
17 |         </div>
18 |         <div class="col-xs-6">
19 |           <div class="panel">
20 |             <div class="panel-body">
21 |               <!-- 指定组件的呈现位置 -->
22 |               <router-view></router-view>
23 |             </div>
24 |           </div>
25 |         </div>
26 |       </div>
27 |     </div>
28 | </template>
29 | 
30 | <script>
31 |   import Banner from './components/Banner'
32 |   export default {
33 |     name:'App',
34 |     components:{
35 |       Banner
36 |     }
37 |   }
38 | </script>


--------------------------------------------------------------------------------
/36_src_router-link的replace属性/components/Banner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="col-xs-offset-2 col-xs-8">
 3 |       <div class="page-header"><h2>Vue Router Demo</h2></div>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     name: 'Banner'
10 |   }
11 | </script>


--------------------------------------------------------------------------------
/36_src_router-link的replace属性/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | //引入vue-router
 6 | import VueRouter from 'vue-router'
 7 | //引入路由器
 8 | import router from './router'
 9 | 
10 | //关闭vue的生产提示
11 | Vue.config.productionTip = false
12 | 
13 | //使用路由器
14 | Vue.use(VueRouter)
15 | 
16 | //创建vm
17 | new Vue({
18 |     el:'#app',
19 |     render: h => h(App),
20 |     router
21 |     // mounted(){
22 |     //     setTimeout(()=>{
23 |     //         this.$destroy()
24 |     //     },3000)
25 |     // }
26 | })


--------------------------------------------------------------------------------
/36_src_router-link的replace属性/pages/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>我是About的内容</h2>
 3 | </template>
 4 | 
 5 | <script>
 6 |   export default {
 7 |     name: 'About',
 8 |     mounted(){
 9 |       // console.log('About被挂载了')
10 |       window.aboutRoute = this.$route
11 |       window.aboutRouter = this.$router
12 |     },
13 |     // beforeDestroy(){
14 |     //   console.log('About被销毁了')
15 |     // }
16 |   }
17 | </script>


--------------------------------------------------------------------------------
/36_src_router-link的replace属性/pages/Detail.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul>
 3 |     <li>消息编号：{{id}}</li>
 4 |     <li>消息标题：{{title}}</li>
 5 |   </ul>
 6 | </template>
 7 | 
 8 | <script>
 9 |   export default {
10 |     name:'Detail',
11 |     props:['id','title'],
12 |     computed:{
13 |       // id(){
14 |       //   return this.$route.params.id
15 |       // },
16 |       // title(){
17 |       //   return this.$route.params.title
18 |       // }
19 |     },
20 |     mounted(){
21 |       console.log(this)
22 |     }
23 |   }
24 | </script>


--------------------------------------------------------------------------------
/36_src_router-link的replace属性/pages/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Home组件内容</h2>
 4 |     <div>
 5 |       <ul class="nav nav-tabs">
 6 |         <li>
 7 |           <router-link replace to="/home/news" class="list-group-item" active-class="active">News</router-link>
 8 |         </li>
 9 |         <li>
10 |           <router-link replace to="/home/message" class="list-group-item" active-class="active">Message</router-link>
11 |         </li>
12 |       </ul>
13 |       <router-view></router-view>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 |   export default {
20 |     name: 'Home',
21 |     mounted(){
22 |       // console.log('Home被挂载了')
23 |       window.homeRoute = this.$route
24 |       window.homeRouter = this.$router
25 |     },
26 |     // beforeDestroy(){
27 |     //   console.log('Home被销毁了')
28 |     // }
29 |   }
30 | </script>


--------------------------------------------------------------------------------
/36_src_router-link的replace属性/pages/Message.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul>
 4 |       <li v-for="m in messageList" :key="m.id">
 5 |         <!-- 跳转路由并携带参数，to的字符串写法 -->
 6 |         <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->
 7 |         
 8 |         <!-- 跳转路由并携带参数，to的对象写法 -->
 9 |         <!-- <router-link :to="{
10 |           path:'/home/message/detail',
11 |           query:{
12 |             id:m.id,
13 |             title:m.title
14 |           }
15 |         }"> -->
16 |         <router-link :to="{
17 |           name: 'detailName',
18 |           query:{
19 |             id:m.id,
20 |             title:m.title
21 |           }
22 |         }">
23 |           {{m.title}}
24 |         </router-link>&nbsp;&nbsp;
25 |       </li>
26 |     </ul>
27 |     <hr>
28 |     <router-view></router-view>
29 |   </div>
30 | </template>
31 | 
32 | <script>
33 |   export default {
34 |     name: 'Message',
35 |     data(){
36 |       return {
37 |         messageList:[
38 |           {id:'001', title:'消息001'},
39 |           {id:'002', title:'消息002'},
40 |           {id:'003', title:'消息003'}
41 |         ]
42 |       }
43 |     },
44 |   }
45 | </script>


--------------------------------------------------------------------------------
/36_src_router-link的replace属性/pages/News.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul>
 4 |       <li>news001</li>
 5 |       <li>news002</li>
 6 |       <li>news003</li>
 7 |     </ul>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 |   export default {
13 |     name: 'News'
14 |   }
15 | </script>


--------------------------------------------------------------------------------
/37_src_编程式路由导航/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |       <div class="row">
 4 |         <Banner />
 5 |       </div>
 6 |       <div class="row">
 7 |         <div class="col-xs-2 col-xs-offset-2">
 8 |           <div class="list-group">
 9 |             <!-- 原始html中使用a标签实现页面的跳转 -->
10 |             <!-- <a href="./about.html" class="list-group-item active">About</a> -->
11 |             <!-- <a href="./home.html" class="list-group-item">Home</a> -->
12 |             
13 |             <!-- Vue中借助router-link标签实现路由的切换  -->
14 |             <router-link to="/about" class="list-group-item" active-class="active">About</router-link>
15 |             <router-link to="/home" class="list-group-item" active-class="active">Home</router-link>
16 |           </div>
17 |         </div>
18 |         <div class="col-xs-6">
19 |           <div class="panel">
20 |             <div class="panel-body">
21 |               <!-- 指定组件的呈现位置 -->
22 |               <router-view></router-view>
23 |             </div>
24 |           </div>
25 |         </div>
26 |       </div>
27 |     </div>
28 | </template>
29 | 
30 | <script>
31 |   import Banner from './components/Banner'
32 |   export default {
33 |     name:'App',
34 |     components:{
35 |       Banner
36 |     }
37 |   }
38 | </script>


--------------------------------------------------------------------------------
/37_src_编程式路由导航/components/Banner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="col-xs-offset-2 col-xs-8">
 3 |       <div class="page-header">
 4 |         <h2>Vue Router Demo</h2>
 5 |         <button @click="back">后退</button>
 6 |         <button @click="forward">前进</button>
 7 |         <button @click="test">测试一下to</button>
 8 |       </div>
 9 |     </div>
10 | </template>
11 | 
12 | <script>
13 |   export default {
14 |     name: 'Banner',
15 |     methods:{
16 |       back(){
17 |         this.$router.back()
18 |       },
19 |       forward(){
20 |         this.$router.forward()
21 |       },
22 |       test(){
23 |         // this.$router.go(2) //前进两步
24 |         this.$router.go(-2) //后退两步
25 |       }
26 |     }
27 |   }
28 | </script>


--------------------------------------------------------------------------------
/37_src_编程式路由导航/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | //引入vue-router
 6 | import VueRouter from 'vue-router'
 7 | //引入路由器
 8 | import router from './router'
 9 | 
10 | //关闭vue的生产提示
11 | Vue.config.productionTip = false
12 | 
13 | //使用路由器
14 | Vue.use(VueRouter)
15 | 
16 | //创建vm
17 | new Vue({
18 |     el:'#app',
19 |     render: h => h(App),
20 |     router
21 |     // mounted(){
22 |     //     setTimeout(()=>{
23 |     //         this.$destroy()
24 |     //     },3000)
25 |     // }
26 | })


--------------------------------------------------------------------------------
/37_src_编程式路由导航/pages/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>我是About的内容</h2>
 3 | </template>
 4 | 
 5 | <script>
 6 |   export default {
 7 |     name: 'About',
 8 |     mounted(){
 9 |       // console.log('About被挂载了')
10 |       window.aboutRoute = this.$route
11 |       window.aboutRouter = this.$router
12 |     },
13 |     // beforeDestroy(){
14 |     //   console.log('About被销毁了')
15 |     // }
16 |   }
17 | </script>


--------------------------------------------------------------------------------
/37_src_编程式路由导航/pages/Detail.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul>
 3 |     <li>消息编号：{{id}}</li>
 4 |     <li>消息标题：{{title}}</li>
 5 |   </ul>
 6 | </template>
 7 | 
 8 | <script>
 9 |   export default {
10 |     name:'Detail',
11 |     props:['id','title'],
12 |     computed:{
13 |       // id(){
14 |       //   return this.$route.params.id
15 |       // },
16 |       // title(){
17 |       //   return this.$route.params.title
18 |       // }
19 |     },
20 |     mounted(){
21 |       console.log(this)
22 |     }
23 |   }
24 | </script>


--------------------------------------------------------------------------------
/37_src_编程式路由导航/pages/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Home组件内容</h2>
 4 |     <div>
 5 |       <ul class="nav nav-tabs">
 6 |         <li>
 7 |           <router-link to="/home/news" class="list-group-item" active-class="active">News</router-link>
 8 |         </li>
 9 |         <li>
10 |           <router-link to="/home/message" class="list-group-item" active-class="active">Message</router-link>
11 |         </li>
12 |       </ul>
13 |       <router-view></router-view>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 |   export default {
20 |     name: 'Home',
21 |     mounted(){
22 |       // console.log('Home被挂载了')
23 |       window.homeRoute = this.$route
24 |       window.homeRouter = this.$router
25 |     },
26 |     // beforeDestroy(){
27 |     //   console.log('Home被销毁了')
28 |     // }
29 |   }
30 | </script>


--------------------------------------------------------------------------------
/37_src_编程式路由导航/pages/News.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul>
 4 |       <li>news001</li>
 5 |       <li>news002</li>
 6 |       <li>news003</li>
 7 |     </ul>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 |   export default {
13 |     name: 'News'
14 |   }
15 | </script>


--------------------------------------------------------------------------------
/38_src_缓存路由组件/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |       <div class="row">
 4 |         <Banner />
 5 |       </div>
 6 |       <div class="row">
 7 |         <div class="col-xs-2 col-xs-offset-2">
 8 |           <div class="list-group">
 9 |             <!-- 原始html中使用a标签实现页面的跳转 -->
10 |             <!-- <a href="./about.html" class="list-group-item active">About</a> -->
11 |             <!-- <a href="./home.html" class="list-group-item">Home</a> -->
12 |             
13 |             <!-- Vue中借助router-link标签实现路由的切换  -->
14 |             <router-link to="/about" class="list-group-item" active-class="active">About</router-link>
15 |             <router-link to="/home" class="list-group-item" active-class="active">Home</router-link>
16 |           </div>
17 |         </div>
18 |         <div class="col-xs-6">
19 |           <div class="panel">
20 |             <div class="panel-body">
21 |               <!-- 指定组件的呈现位置 -->
22 |               <router-view></router-view>
23 |             </div>
24 |           </div>
25 |         </div>
26 |       </div>
27 |     </div>
28 | </template>
29 | 
30 | <script>
31 |   import Banner from './components/Banner'
32 |   export default {
33 |     name:'App',
34 |     components:{
35 |       Banner
36 |     }
37 |   }
38 | </script>


--------------------------------------------------------------------------------
/38_src_缓存路由组件/components/Banner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="col-xs-offset-2 col-xs-8">
 3 |       <div class="page-header">
 4 |         <h2>Vue Router Demo</h2>
 5 |         <button @click="back">后退</button>
 6 |         <button @click="forward">前进</button>
 7 |         <button @click="test">测试一下to</button>
 8 |       </div>
 9 |     </div>
10 | </template>
11 | 
12 | <script>
13 |   export default {
14 |     name: 'Banner',
15 |     methods:{
16 |       back(){
17 |         this.$router.back()
18 |       },
19 |       forward(){
20 |         this.$router.forward()
21 |       },
22 |       test(){
23 |         // this.$router.go(2) //前进两步
24 |         this.$router.go(-2) //后退两步
25 |       }
26 |     }
27 |   }
28 | </script>


--------------------------------------------------------------------------------
/38_src_缓存路由组件/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | //引入vue-router
 6 | import VueRouter from 'vue-router'
 7 | //引入路由器
 8 | import router from './router'
 9 | 
10 | //关闭vue的生产提示
11 | Vue.config.productionTip = false
12 | 
13 | //使用路由器
14 | Vue.use(VueRouter)
15 | 
16 | //创建vm
17 | new Vue({
18 |     el:'#app',
19 |     render: h => h(App),
20 |     router
21 |     // mounted(){
22 |     //     setTimeout(()=>{
23 |     //         this.$destroy()
24 |     //     },3000)
25 |     // }
26 | })


--------------------------------------------------------------------------------
/38_src_缓存路由组件/pages/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>我是About的内容</h2>
 3 | </template>
 4 | 
 5 | <script>
 6 |   export default {
 7 |     name: 'About',
 8 |     mounted(){
 9 |       // console.log('About被挂载了')
10 |       window.aboutRoute = this.$route
11 |       window.aboutRouter = this.$router
12 |     },
13 |     // beforeDestroy(){
14 |     //   console.log('About被销毁了')
15 |     // }
16 |   }
17 | </script>


--------------------------------------------------------------------------------
/38_src_缓存路由组件/pages/Detail.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul>
 3 |     <li>消息编号：{{id}}</li>
 4 |     <li>消息标题：{{title}}</li>
 5 |   </ul>
 6 | </template>
 7 | 
 8 | <script>
 9 |   export default {
10 |     name:'Detail',
11 |     props:['id','title'],
12 |     computed:{
13 |       // id(){
14 |       //   return this.$route.params.id
15 |       // },
16 |       // title(){
17 |       //   return this.$route.params.title
18 |       // }
19 |     },
20 |     mounted(){
21 |       console.log(this)
22 |     }
23 |   }
24 | </script>


--------------------------------------------------------------------------------
/38_src_缓存路由组件/pages/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Home组件内容</h2>
 4 |     <div>
 5 |       <ul class="nav nav-tabs">
 6 |         <li>
 7 |           <router-link to="/home/news" class="list-group-item" active-class="active">News</router-link>
 8 |         </li>
 9 |         <li>
10 |           <router-link to="/home/message" class="list-group-item" active-class="active">Message</router-link>
11 |         </li>
12 |       </ul>
13 |       <!-- 缓存一个路由组件 -->
14 |       <keep-alive include="News">
15 |         <router-view></router-view>
16 |       </keep-alive>
17 | 
18 |       <!-- 缓存多个路由组件 -->
19 |       <!-- <keep-alive :include="['News','Message']">
20 |         <router-view></router-view>
21 |       </keep-alive> -->
22 |     </div>
23 |   </div>
24 | </template>
25 | 
26 | <script>
27 |   export default {
28 |     name: 'Home',
29 |     mounted(){
30 |       // console.log('Home被挂载了')
31 |       window.homeRoute = this.$route
32 |       window.homeRouter = this.$router
33 |     },
34 |     // beforeDestroy(){
35 |     //   console.log('Home被销毁了')
36 |     // }
37 |   }
38 | </script>


--------------------------------------------------------------------------------
/38_src_缓存路由组件/pages/News.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul>
 4 |       <li>news001 <input type="text"></li>
 5 |       <li>news002 <input type="text"></li>
 6 |       <li>news003 <input type="text"></li>
 7 |     </ul>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 |   export default {
13 |     name: 'News',
14 |     beforeDestroy(){
15 |       console.log('News组件即将被销毁了')
16 |     }
17 |   }
18 | </script>


--------------------------------------------------------------------------------
/39_src_两个新的生命周期钩子/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |       <div class="row">
 4 |         <Banner />
 5 |       </div>
 6 |       <div class="row">
 7 |         <div class="col-xs-2 col-xs-offset-2">
 8 |           <div class="list-group">
 9 |             <!-- 原始html中使用a标签实现页面的跳转 -->
10 |             <!-- <a href="./about.html" class="list-group-item active">About</a> -->
11 |             <!-- <a href="./home.html" class="list-group-item">Home</a> -->
12 |             
13 |             <!-- Vue中借助router-link标签实现路由的切换  -->
14 |             <router-link to="/about" class="list-group-item" active-class="active">About</router-link>
15 |             <router-link to="/home" class="list-group-item" active-class="active">Home</router-link>
16 |           </div>
17 |         </div>
18 |         <div class="col-xs-6">
19 |           <div class="panel">
20 |             <div class="panel-body">
21 |               <!-- 指定组件的呈现位置 -->
22 |               <router-view></router-view>
23 |             </div>
24 |           </div>
25 |         </div>
26 |       </div>
27 |     </div>
28 | </template>
29 | 
30 | <script>
31 |   import Banner from './components/Banner'
32 |   export default {
33 |     name:'App',
34 |     components:{
35 |       Banner
36 |     }
37 |   }
38 | </script>


--------------------------------------------------------------------------------
/39_src_两个新的生命周期钩子/components/Banner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="col-xs-offset-2 col-xs-8">
 3 |       <div class="page-header">
 4 |         <h2>Vue Router Demo</h2>
 5 |         <button @click="back">后退</button>
 6 |         <button @click="forward">前进</button>
 7 |         <button @click="test">测试一下to</button>
 8 |       </div>
 9 |     </div>
10 | </template>
11 | 
12 | <script>
13 |   export default {
14 |     name: 'Banner',
15 |     methods:{
16 |       back(){
17 |         this.$router.back()
18 |       },
19 |       forward(){
20 |         this.$router.forward()
21 |       },
22 |       test(){
23 |         // this.$router.go(2) //前进两步
24 |         this.$router.go(-2) //后退两步
25 |       }
26 |     }
27 |   }
28 | </script>


--------------------------------------------------------------------------------
/39_src_两个新的生命周期钩子/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | //引入vue-router
 6 | import VueRouter from 'vue-router'
 7 | //引入路由器
 8 | import router from './router'
 9 | 
10 | //关闭vue的生产提示
11 | Vue.config.productionTip = false
12 | 
13 | //使用路由器
14 | Vue.use(VueRouter)
15 | 
16 | //创建vm
17 | new Vue({
18 |     el:'#app',
19 |     render: h => h(App),
20 |     router
21 |     // mounted(){
22 |     //     setTimeout(()=>{
23 |     //         this.$destroy()
24 |     //     },3000)
25 |     // }
26 | })


--------------------------------------------------------------------------------
/39_src_两个新的生命周期钩子/pages/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>我是About的内容</h2>
 3 | </template>
 4 | 
 5 | <script>
 6 |   export default {
 7 |     name: 'About',
 8 |     mounted(){
 9 |       // console.log('About被挂载了')
10 |       window.aboutRoute = this.$route
11 |       window.aboutRouter = this.$router
12 |     },
13 |     // beforeDestroy(){
14 |     //   console.log('About被销毁了')
15 |     // }
16 |   }
17 | </script>


--------------------------------------------------------------------------------
/39_src_两个新的生命周期钩子/pages/Detail.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul>
 3 |     <li>消息编号：{{id}}</li>
 4 |     <li>消息标题：{{title}}</li>
 5 |   </ul>
 6 | </template>
 7 | 
 8 | <script>
 9 |   export default {
10 |     name:'Detail',
11 |     props:['id','title'],
12 |     computed:{
13 |       // id(){
14 |       //   return this.$route.params.id
15 |       // },
16 |       // title(){
17 |       //   return this.$route.params.title
18 |       // }
19 |     },
20 |     mounted(){
21 |       console.log(this)
22 |     }
23 |   }
24 | </script>


--------------------------------------------------------------------------------
/39_src_两个新的生命周期钩子/pages/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Home组件内容</h2>
 4 |     <div>
 5 |       <ul class="nav nav-tabs">
 6 |         <li>
 7 |           <router-link to="/home/news" class="list-group-item" active-class="active">News</router-link>
 8 |         </li>
 9 |         <li>
10 |           <router-link to="/home/message" class="list-group-item" active-class="active">Message</router-link>
11 |         </li>
12 |       </ul>
13 |       <!-- 缓存一个路由组件 -->
14 |       <!-- <keep-alive include="News">
15 |         <router-view></router-view>
16 |       </keep-alive> -->
17 | 
18 |       <!-- 缓存多个路由组件 -->
19 |       <keep-alive :include="['News','Message']">
20 |         <router-view></router-view>
21 |       </keep-alive>
22 |     </div>
23 |   </div>
24 | </template>
25 | 
26 | <script>
27 |   export default {
28 |     name: 'Home',
29 |     mounted(){
30 |       // console.log('Home被挂载了')
31 |       window.homeRoute = this.$route
32 |       window.homeRouter = this.$router
33 |     },
34 |     // beforeDestroy(){
35 |     //   console.log('Home被销毁了')
36 |     // }
37 |   }
38 | </script>


--------------------------------------------------------------------------------
/39_src_两个新的生命周期钩子/pages/News.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul>
 4 |       <li>news001 <input type="text"></li>
 5 |       <li>news002 <input type="text"></li>
 6 |       <li>news003 <input type="text"></li>
 7 |     </ul>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 |   export default {
13 |     name: 'News',
14 |     beforeDestroy(){
15 |       console.log('News组件即将被销毁了')
16 |     },
17 |     activated(){
18 |       console.log('News组件被激活了')
19 |     },
20 |     deactivated(){
21 |       console.log('News组件失活了')
22 |     }
23 |   }
24 | </script>


--------------------------------------------------------------------------------
/40_src_全局路由守卫/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |       <div class="row">
 4 |         <Banner />
 5 |       </div>
 6 |       <div class="row">
 7 |         <div class="col-xs-2 col-xs-offset-2">
 8 |           <div class="list-group">
 9 |             <!-- 原始html中使用a标签实现页面的跳转 -->
10 |             <!-- <a href="./about.html" class="list-group-item active">About</a> -->
11 |             <!-- <a href="./home.html" class="list-group-item">Home</a> -->
12 |             
13 |             <!-- Vue中借助router-link标签实现路由的切换  -->
14 |             <router-link to="/about" class="list-group-item" active-class="active">About</router-link>
15 |             <router-link to="/home" class="list-group-item" active-class="active">Home</router-link>
16 |           </div>
17 |         </div>
18 |         <div class="col-xs-6">
19 |           <div class="panel">
20 |             <div class="panel-body">
21 |               <!-- 指定组件的呈现位置 -->
22 |               <router-view></router-view>
23 |             </div>
24 |           </div>
25 |         </div>
26 |       </div>
27 |     </div>
28 | </template>
29 | 
30 | <script>
31 |   import Banner from './components/Banner'
32 |   export default {
33 |     name:'App',
34 |     components:{
35 |       Banner
36 |     }
37 |   }
38 | </script>


--------------------------------------------------------------------------------
/40_src_全局路由守卫/components/Banner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="col-xs-offset-2 col-xs-8">
 3 |       <div class="page-header">
 4 |         <h2>Vue Router Demo</h2>
 5 |         <button @click="back">后退</button>
 6 |         <button @click="forward">前进</button>
 7 |         <button @click="test">测试一下to</button>
 8 |       </div>
 9 |     </div>
10 | </template>
11 | 
12 | <script>
13 |   export default {
14 |     name: 'Banner',
15 |     methods:{
16 |       back(){
17 |         this.$router.back()
18 |       },
19 |       forward(){
20 |         this.$router.forward()
21 |       },
22 |       test(){
23 |         // this.$router.go(2) //前进两步
24 |         this.$router.go(-2) //后退两步
25 |       }
26 |     },
27 |   }
28 | </script>


--------------------------------------------------------------------------------
/40_src_全局路由守卫/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | //引入vue-router
 6 | import VueRouter from 'vue-router'
 7 | //引入路由器
 8 | import router from './router'
 9 | 
10 | //关闭vue的生产提示
11 | Vue.config.productionTip = false
12 | 
13 | //使用路由器
14 | Vue.use(VueRouter)
15 | 
16 | //创建vm
17 | new Vue({
18 |     el:'#app',
19 |     render: h => h(App),
20 |     router
21 |     // mounted(){
22 |     //     setTimeout(()=>{
23 |     //         this.$destroy()
24 |     //     },3000)
25 |     // }
26 | })


--------------------------------------------------------------------------------
/40_src_全局路由守卫/pages/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>我是About的内容</h2>
 3 | </template>
 4 | 
 5 | <script>
 6 |   export default {
 7 |     name: 'About',
 8 |     mounted(){
 9 |       // console.log('About被挂载了')
10 |       window.aboutRoute = this.$route
11 |       window.aboutRouter = this.$router
12 |     },
13 |     // beforeDestroy(){
14 |     //   console.log('About被销毁了')
15 |     // }
16 |   }
17 | </script>


--------------------------------------------------------------------------------
/40_src_全局路由守卫/pages/Detail.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul>
 3 |     <li>消息编号：{{id}}</li>
 4 |     <li>消息标题：{{title}}</li>
 5 |   </ul>
 6 | </template>
 7 | 
 8 | <script>
 9 |   export default {
10 |     name:'Detail',
11 |     props:['id','title'],
12 |     computed:{
13 |       // id(){
14 |       //   return this.$route.params.id
15 |       // },
16 |       // title(){
17 |       //   return this.$route.params.title
18 |       // }
19 |     },
20 |     mounted(){
21 |       console.log(this)
22 |     }
23 |   }
24 | </script>


--------------------------------------------------------------------------------
/40_src_全局路由守卫/pages/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Home组件内容</h2>
 4 |     <div>
 5 |       <ul class="nav nav-tabs">
 6 |         <li>
 7 |           <router-link to="/home/news" class="list-group-item" active-class="active">News</router-link>
 8 |         </li>
 9 |         <li>
10 |           <router-link to="/home/message" class="list-group-item" active-class="active">Message</router-link>
11 |         </li>
12 |       </ul>
13 |       <!-- 缓存一个路由组件 -->
14 |       <!-- <keep-alive include="News">
15 |         <router-view></router-view>
16 |       </keep-alive> -->
17 | 
18 |       <!-- 缓存多个路由组件 -->
19 |       <keep-alive :include="['News','Message']">
20 |         <router-view></router-view>
21 |       </keep-alive>
22 |     </div>
23 |   </div>
24 | </template>
25 | 
26 | <script>
27 |   export default {
28 |     name: 'Home',
29 |     mounted(){
30 |       // console.log('Home被挂载了')
31 |       window.homeRoute = this.$route
32 |       window.homeRouter = this.$router
33 |     },
34 |     // beforeDestroy(){
35 |     //   console.log('Home被销毁了')
36 |     // }
37 |   }
38 | </script>


--------------------------------------------------------------------------------
/40_src_全局路由守卫/pages/News.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul>
 4 |       <li>news001 <input type="text"></li>
 5 |       <li>news002 <input type="text"></li>
 6 |       <li>news003 <input type="text"></li>
 7 |     </ul>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 |   export default {
13 |     name: 'News',
14 |     beforeDestroy(){
15 |       console.log('News组件即将被销毁了')
16 |     },
17 |     activated(){
18 |       console.log('News组件被激活了')
19 |     },
20 |     deactivated(){
21 |       console.log('News组件失活了')
22 |     }
23 |   }
24 | </script>


--------------------------------------------------------------------------------
/41_src_独享路由守卫/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |       <div class="row">
 4 |         <Banner />
 5 |       </div>
 6 |       <div class="row">
 7 |         <div class="col-xs-2 col-xs-offset-2">
 8 |           <div class="list-group">
 9 |             <!-- 原始html中使用a标签实现页面的跳转 -->
10 |             <!-- <a href="./about.html" class="list-group-item active">About</a> -->
11 |             <!-- <a href="./home.html" class="list-group-item">Home</a> -->
12 |             
13 |             <!-- Vue中借助router-link标签实现路由的切换  -->
14 |             <router-link to="/about" class="list-group-item" active-class="active">About</router-link>
15 |             <router-link to="/home" class="list-group-item" active-class="active">Home</router-link>
16 |           </div>
17 |         </div>
18 |         <div class="col-xs-6">
19 |           <div class="panel">
20 |             <div class="panel-body">
21 |               <!-- 指定组件的呈现位置 -->
22 |               <router-view></router-view>
23 |             </div>
24 |           </div>
25 |         </div>
26 |       </div>
27 |     </div>
28 | </template>
29 | 
30 | <script>
31 |   import Banner from './components/Banner'
32 |   export default {
33 |     name:'App',
34 |     components:{
35 |       Banner
36 |     }
37 |   } 
38 | </script>


--------------------------------------------------------------------------------
/41_src_独享路由守卫/components/Banner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="col-xs-offset-2 col-xs-8">
 3 |       <div class="page-header">
 4 |         <h2>Vue Router Demo</h2>
 5 |         <button @click="back">后退</button>
 6 |         <button @click="forward">前进</button>
 7 |         <button @click="test">测试一下to</button>
 8 |       </div>
 9 |     </div>
10 | </template>
11 | 
12 | <script>
13 |   export default {
14 |     name: 'Banner',
15 |     methods:{
16 |       back(){
17 |         this.$router.back()
18 |       },
19 |       forward(){
20 |         this.$router.forward()
21 |       },
22 |       test(){
23 |         // this.$router.go(2) //前进两步
24 |         this.$router.go(-2) //后退两步
25 |       }
26 |     },
27 |   }
28 | </script>


--------------------------------------------------------------------------------
/41_src_独享路由守卫/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | //引入vue-router
 6 | import VueRouter from 'vue-router'
 7 | //引入路由器
 8 | import router from './router'
 9 | 
10 | //关闭vue的生产提示
11 | Vue.config.productionTip = false
12 | 
13 | //使用路由器
14 | Vue.use(VueRouter)
15 | 
16 | //创建vm
17 | new Vue({
18 |     el:'#app',
19 |     render: h => h(App),
20 |     router
21 |     // mounted(){
22 |     //     setTimeout(()=>{
23 |     //         this.$destroy()
24 |     //     },3000)
25 |     // }
26 | })


--------------------------------------------------------------------------------
/41_src_独享路由守卫/pages/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>我是About的内容</h2>
 3 | </template>
 4 | 
 5 | <script>
 6 |   export default {
 7 |     name: 'About',
 8 |     mounted(){
 9 |       // console.log('About被挂载了')
10 |       window.aboutRoute = this.$route
11 |       window.aboutRouter = this.$router
12 |     },
13 |     // beforeDestroy(){
14 |     //   console.log('About被销毁了')
15 |     // }
16 |   }
17 | </script>


--------------------------------------------------------------------------------
/41_src_独享路由守卫/pages/Detail.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul>
 3 |     <li>消息编号：{{id}}</li>
 4 |     <li>消息标题：{{title}}</li>
 5 |   </ul>
 6 | </template>
 7 | 
 8 | <script>
 9 |   export default {
10 |     name:'Detail',
11 |     props:['id','title'],
12 |     computed:{
13 |       // id(){
14 |       //   return this.$route.params.id
15 |       // },
16 |       // title(){
17 |       //   return this.$route.params.title
18 |       // }
19 |     },
20 |     mounted(){
21 |       console.log(this)
22 |     }
23 |   }
24 | </script>


--------------------------------------------------------------------------------
/41_src_独享路由守卫/pages/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Home组件内容</h2>
 4 |     <div>
 5 |       <ul class="nav nav-tabs">
 6 |         <li>
 7 |           <router-link to="/home/news" class="list-group-item" active-class="active">News</router-link>
 8 |         </li>
 9 |         <li>
10 |           <router-link to="/home/message" class="list-group-item" active-class="active">Message</router-link>
11 |         </li>
12 |       </ul>
13 |       <!-- 缓存一个路由组件 -->
14 |       <!-- <keep-alive include="News">
15 |         <router-view></router-view>
16 |       </keep-alive> -->
17 | 
18 |       <!-- 缓存多个路由组件 -->
19 |       <keep-alive :include="['News','Message']">
20 |         <router-view></router-view>
21 |       </keep-alive>
22 |     </div>
23 |   </div>
24 | </template>
25 | 
26 | <script>
27 |   export default {
28 |     name: 'Home',
29 |     mounted(){
30 |       // console.log('Home被挂载了')
31 |       window.homeRoute = this.$route
32 |       window.homeRouter = this.$router
33 |     },
34 |     // beforeDestroy(){
35 |     //   console.log('Home被销毁了')
36 |     // }
37 |   }
38 | </script>


--------------------------------------------------------------------------------
/41_src_独享路由守卫/pages/News.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul>
 4 |       <li :style="{opacity}">欢迎学习vue</li>
 5 |       <li>news001 <input type="text"></li>
 6 |       <li>news002 <input type="text"></li>
 7 |       <li>news003 <input type="text"></li>
 8 |     </ul>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 |   export default {
14 |     name: 'News',
15 |     data() {
16 |       return {
17 |         opacity: 1
18 |       }
19 |     },
20 |     beforeDestroy(){
21 |       console.log('News组件即将被销毁了')
22 |     },
23 |     activated(){
24 |       this.timer = setInterval(()=>{
25 |         console.log('@')
26 |         this.opacity -= 0.01
27 |         if(this.opacity < 0) this.opacity = 1 
28 |       },16)
29 |       console.log('News组件被激活了')
30 |     },
31 |     deactivated(){
32 |       clearInterval(this.timer)
33 |       console.log('News组件失活了')
34 |     }
35 |   }
36 | </script>


--------------------------------------------------------------------------------
/42_src_组件内路由守卫/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |       <div class="row">
 4 |         <Banner />
 5 |       </div>
 6 |       <div class="row">
 7 |         <div class="col-xs-2 col-xs-offset-2">
 8 |           <div class="list-group">
 9 |             <!-- 原始html中使用a标签实现页面的跳转 -->
10 |             <!-- <a href="./about.html" class="list-group-item active">About</a> -->
11 |             <!-- <a href="./home.html" class="list-group-item">Home</a> -->
12 |             
13 |             <!-- Vue中借助router-link标签实现路由的切换  -->
14 |             <router-link to="/about" class="list-group-item" active-class="active">About</router-link>
15 |             <router-link to="/home" class="list-group-item" active-class="active">Home</router-link>
16 |           </div>
17 |         </div>
18 |         <div class="col-xs-6">
19 |           <div class="panel">
20 |             <div class="panel-body">
21 |               <!-- 指定组件的呈现位置 -->
22 |               <router-view></router-view>
23 |             </div>
24 |           </div>
25 |         </div>
26 |       </div>
27 |     </div>
28 | </template>
29 | 
30 | <script>
31 |   import Banner from './components/Banner'
32 |   export default {
33 |     name:'App',
34 |     components:{
35 |       Banner
36 |     }
37 |   } 
38 | </script>


--------------------------------------------------------------------------------
/42_src_组件内路由守卫/components/Banner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="col-xs-offset-2 col-xs-8">
 3 |       <div class="page-header">
 4 |         <h2>Vue Router Demo</h2>
 5 |         <button @click="back">后退</button>
 6 |         <button @click="forward">前进</button>
 7 |         <button @click="test">测试一下to</button>
 8 |       </div>
 9 |     </div>
10 | </template>
11 | 
12 | <script>
13 |   export default {
14 |     name: 'Banner',
15 |     methods:{
16 |       back(){
17 |         this.$router.back()
18 |       },
19 |       forward(){
20 |         this.$router.forward()
21 |       },
22 |       test(){
23 |         // this.$router.go(2) //前进两步
24 |         this.$router.go(-2) //后退两步
25 |       }
26 |     },
27 |   }
28 | </script>


--------------------------------------------------------------------------------
/42_src_组件内路由守卫/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | //引入vue-router
 6 | import VueRouter from 'vue-router'
 7 | //引入路由器
 8 | import router from './router'
 9 | 
10 | //关闭vue的生产提示
11 | Vue.config.productionTip = false
12 | 
13 | //使用路由器
14 | Vue.use(VueRouter)
15 | 
16 | //创建vm
17 | new Vue({
18 |     el:'#app',
19 |     render: h => h(App),
20 |     router
21 |     // mounted(){
22 |     //     setTimeout(()=>{
23 |     //         this.$destroy()
24 |     //     },3000)
25 |     // }
26 | })


--------------------------------------------------------------------------------
/42_src_组件内路由守卫/pages/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>我是About的内容</h2>
 3 | </template>
 4 | 
 5 | <script>
 6 |   export default {
 7 |     name: 'About',
 8 |     mounted(){
 9 |       // console.log('About被挂载了')
10 |       window.aboutRoute = this.$route
11 |       window.aboutRouter = this.$router
12 |     },
13 |     // beforeDestroy(){
14 |     //   console.log('About被销毁了')
15 |     // },
16 |     beforeRouteEnter (to, from, next) {
17 |       console.log('about——beforeRouteEnter',to,from)
18 |       if(to.meta.isAuth){
19 |         if(localStorage.getItem('school') == 'atguigu') {
20 |           next()
21 |         } else {
22 |           alert('无权限！')
23 |         }
24 |       }
25 |     },
26 |     beforeRouteLeave (to, from, next) {
27 |       console.log('About——beofreRouteLeave',to,from)
28 |       next()
29 |     }
30 |   }
31 | </script>


--------------------------------------------------------------------------------
/42_src_组件内路由守卫/pages/Detail.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul>
 3 |     <li>消息编号：{{id}}</li>
 4 |     <li>消息标题：{{title}}</li>
 5 |   </ul>
 6 | </template>
 7 | 
 8 | <script>
 9 |   export default {
10 |     name:'Detail',
11 |     props:['id','title'],
12 |     computed:{
13 |       // id(){
14 |       //   return this.$route.params.id
15 |       // },
16 |       // title(){
17 |       //   return this.$route.params.title
18 |       // }
19 |     },
20 |     mounted(){
21 |       console.log(this)
22 |     }
23 |   }
24 | </script>


--------------------------------------------------------------------------------
/42_src_组件内路由守卫/pages/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Home组件内容</h2>
 4 |     <div>
 5 |       <ul class="nav nav-tabs">
 6 |         <li>
 7 |           <router-link to="/home/news" class="list-group-item" active-class="active">News</router-link>
 8 |         </li>
 9 |         <li>
10 |           <router-link to="/home/message" class="list-group-item" active-class="active">Message</router-link>
11 |         </li>
12 |       </ul>
13 |       <!-- 缓存一个路由组件 -->
14 |       <!-- <keep-alive include="News">
15 |         <router-view></router-view>
16 |       </keep-alive> -->
17 | 
18 |       <!-- 缓存多个路由组件 -->
19 |       <keep-alive :include="['News','Message']">
20 |         <router-view></router-view>
21 |       </keep-alive>
22 |     </div>
23 |   </div>
24 | </template>
25 | 
26 | <script>
27 |   export default {
28 |     name: 'Home',
29 |     mounted(){
30 |       // console.log('Home被挂载了')
31 |       window.homeRoute = this.$route
32 |       window.homeRouter = this.$router
33 |     },
34 |     // beforeDestroy(){
35 |     //   console.log('Home被销毁了')
36 |     // }
37 |   }
38 | </script>


--------------------------------------------------------------------------------
/42_src_组件内路由守卫/pages/News.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul>
 4 |       <li :style="{opacity}">欢迎学习vue</li>
 5 |       <li>news001 <input type="text"></li>
 6 |       <li>news002 <input type="text"></li>
 7 |       <li>news003 <input type="text"></li>
 8 |     </ul>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 |   export default {
14 |     name: 'News',
15 |     data() {
16 |       return {
17 |         opacity: 1
18 |       }
19 |     },
20 |     beforeDestroy(){
21 |       console.log('News组件即将被销毁了')
22 |     },
23 |     activated(){
24 |       this.timer = setInterval(()=>{
25 |         console.log('@')
26 |         this.opacity -= 0.01
27 |         if(this.opacity < 0) this.opacity = 1 
28 |       },16)
29 |       console.log('News组件被激活了')
30 |     },
31 |     deactivated(){
32 |       clearInterval(this.timer)
33 |       console.log('News组件失活了')
34 |     }
35 |   }
36 | </script>


--------------------------------------------------------------------------------
/43_src_history模式与hash模式/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |       <div class="row">
 4 |         <Banner />
 5 |       </div>
 6 |       <div class="row">
 7 |         <div class="col-xs-2 col-xs-offset-2">
 8 |           <div class="list-group">
 9 |             <!-- 原始html中使用a标签实现页面的跳转 -->
10 |             <!-- <a href="./about.html" class="list-group-item active">About</a> -->
11 |             <!-- <a href="./home.html" class="list-group-item">Home</a> -->
12 |             
13 |             <!-- Vue中借助router-link标签实现路由的切换  -->
14 |             <router-link to="/about" class="list-group-item" active-class="active">About</router-link>
15 |             <router-link to="/home" class="list-group-item" active-class="active">Home</router-link>
16 |           </div>
17 |         </div>
18 |         <div class="col-xs-6">
19 |           <div class="panel">
20 |             <div class="panel-body">
21 |               <!-- 指定组件的呈现位置 -->
22 |               <router-view></router-view>
23 |             </div>
24 |           </div>
25 |         </div>
26 |       </div>
27 |     </div>
28 | </template>
29 | 
30 | <script>
31 |   import Banner from './components/Banner'
32 |   export default {
33 |     name:'App',
34 |     components:{
35 |       Banner
36 |     }
37 |   } 
38 | </script>


--------------------------------------------------------------------------------
/43_src_history模式与hash模式/components/Banner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="col-xs-offset-2 col-xs-8">
 3 |       <div class="page-header">
 4 |         <h2>Vue Router Demo</h2>
 5 |         <button @click="back">后退</button>
 6 |         <button @click="forward">前进</button>
 7 |         <button @click="test">测试一下to</button>
 8 |       </div>
 9 |     </div>
10 | </template>
11 | 
12 | <script>
13 |   export default {
14 |     name: 'Banner',
15 |     methods:{
16 |       back(){
17 |         this.$router.back()
18 |       },
19 |       forward(){
20 |         this.$router.forward()
21 |       },
22 |       test(){
23 |         // this.$router.go(2) //前进两步
24 |         this.$router.go(-2) //后退两步
25 |       }
26 |     },
27 |   }
28 | </script>


--------------------------------------------------------------------------------
/43_src_history模式与hash模式/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | //引入vue-router
 6 | import VueRouter from 'vue-router'
 7 | //引入路由器
 8 | import router from './router'
 9 | 
10 | //关闭vue的生产提示
11 | Vue.config.productionTip = false
12 | 
13 | //使用路由器
14 | Vue.use(VueRouter)
15 | 
16 | //创建vm
17 | new Vue({
18 |     el:'#app',
19 |     render: h => h(App),
20 |     router
21 |     // mounted(){
22 |     //     setTimeout(()=>{
23 |     //         this.$destroy()
24 |     //     },3000)
25 |     // }
26 | })


--------------------------------------------------------------------------------
/43_src_history模式与hash模式/pages/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>我是About的内容</h2>
 3 | </template>
 4 | 
 5 | <script>
 6 |   export default {
 7 |     name: 'About',
 8 |     mounted(){
 9 |       // console.log('About被挂载了')
10 |       window.aboutRoute = this.$route
11 |       window.aboutRouter = this.$router
12 |     },
13 |     // beforeDestroy(){
14 |     //   console.log('About被销毁了')
15 |     // },
16 |     beforeRouteEnter (to, from, next) {
17 |       console.log('about——beforeRouteEnter',to,from)
18 |       if(to.meta.isAuth){
19 |         if(localStorage.getItem('school') == 'atguigu') {
20 |           next()
21 |         } else {
22 |           alert('无权限！')
23 |         }
24 |       }
25 |     },
26 |     beforeRouteLeave (to, from, next) {
27 |       console.log('About——beofreRouteLeave',to,from)
28 |       next()
29 |     }
30 |   }
31 | </script>


--------------------------------------------------------------------------------
/43_src_history模式与hash模式/pages/Detail.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul>
 3 |     <li>消息编号：{{id}}</li>
 4 |     <li>消息标题：{{title}}</li>
 5 |   </ul>
 6 | </template>
 7 | 
 8 | <script>
 9 |   export default {
10 |     name:'Detail',
11 |     props:['id','title'],
12 |     computed:{
13 |       // id(){
14 |       //   return this.$route.params.id
15 |       // },
16 |       // title(){
17 |       //   return this.$route.params.title
18 |       // }
19 |     },
20 |     mounted(){
21 |       console.log(this)
22 |     }
23 |   }
24 | </script>


--------------------------------------------------------------------------------
/43_src_history模式与hash模式/pages/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Home组件内容</h2>
 4 |     <div>
 5 |       <ul class="nav nav-tabs">
 6 |         <li>
 7 |           <router-link to="/home/news" class="list-group-item" active-class="active">News</router-link>
 8 |         </li>
 9 |         <li>
10 |           <router-link to="/home/message" class="list-group-item" active-class="active">Message</router-link>
11 |         </li>
12 |       </ul>
13 |       <!-- 缓存一个路由组件 -->
14 |       <!-- <keep-alive include="News">
15 |         <router-view></router-view>
16 |       </keep-alive> -->
17 | 
18 |       <!-- 缓存多个路由组件 -->
19 |       <keep-alive :include="['News','Message']">
20 |         <router-view></router-view>
21 |       </keep-alive>
22 |     </div>
23 |   </div>
24 | </template>
25 | 
26 | <script>
27 |   export default {
28 |     name: 'Home',
29 |     mounted(){
30 |       // console.log('Home被挂载了')
31 |       window.homeRoute = this.$route
32 |       window.homeRouter = this.$router
33 |     },
34 |     // beforeDestroy(){
35 |     //   console.log('Home被销毁了')
36 |     // }
37 |   }
38 | </script>


--------------------------------------------------------------------------------
/43_src_history模式与hash模式/pages/News.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul>
 4 |       <li :style="{opacity}">欢迎学习vue</li>
 5 |       <li>news001 <input type="text"></li>
 6 |       <li>news002 <input type="text"></li>
 7 |       <li>news003 <input type="text"></li>
 8 |     </ul>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 |   export default {
14 |     name: 'News',
15 |     data() {
16 |       return {
17 |         opacity: 1
18 |       }
19 |     },
20 |     beforeDestroy(){
21 |       console.log('News组件即将被销毁了')
22 |     },
23 |     activated(){
24 |       this.timer = setInterval(()=>{
25 |         console.log('@')
26 |         this.opacity -= 0.01
27 |         if(this.opacity < 0) this.opacity = 1 
28 |       },16)
29 |       console.log('News组件被激活了')
30 |     },
31 |     deactivated(){
32 |       clearInterval(this.timer)
33 |       console.log('News组件失活了')
34 |     }
35 |   }
36 | </script>


--------------------------------------------------------------------------------
/44_src_element-ui/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | 
 4 | //引入app
 5 | import App from './App'
 6 | 
 7 | //完整引入
 8 | //引入ElementUI组件库
 9 | // import ElementUI from 'element-ui';
10 | //引人ElementUI全部样式
11 | // import 'element-ui/lib/theme-chalk/index.css';
12 | 
13 | //按需引入
14 | import { Row,Button,DatePicker } from 'element-ui'
15 | 
16 | Vue.component('atguigu-row', Row )
17 | Vue.component(Button.name, Button )
18 | Vue.component(DatePicker.name, DatePicker )
19 | 
20 | //关闭vue的生产提示
21 | Vue.config.productionTip = false
22 | 
23 | //应用ElementUI
24 | // Vue.use(ElementUI);
25 | 
26 | //创建vm
27 | new Vue({
28 |     el:'#app',
29 |     render: h => h(App),
30 | })


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   presets: [
 3 |     '@vue/cli-plugin-babel/preset',
 4 |     ["@babel/preset-env", { "modules": false }]
 5 |   ],
 6 |   plugins: [
 7 |     [
 8 |       "component",
 9 |       {
10 |         "libraryName": "element-ui",
11 |         "styleLibraryName": "theme-chalk"
12 |       }
13 |     ]
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue_test",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "animate.css": "^4.1.1",
12 |     "axios": "^0.24.0",
13 |     "connect-history-api-fallback": "^1.6.0",
14 |     "core-js": "^3.6.5",
15 |     "element-ui": "^2.15.6",
16 |     "nanoid": "^3.1.30",
17 |     "pubsub-js": "^1.9.4",
18 |     "vue": "^2.6.11",
19 |     "vue-resource": "^1.5.3",
20 |     "vue-router": "^3.5.3",
21 |     "vuex": "^3.6.2"
22 |   },
23 |   "devDependencies": {
24 |     "@vue/cli-plugin-babel": "~4.5.0",
25 |     "@vue/cli-plugin-eslint": "~4.5.0",
26 |     "@vue/cli-service": "~4.5.0",
27 |     "babel-eslint": "^10.1.0",
28 |     "babel-plugin-component": "^1.1.1",
29 |     "eslint": "^6.7.2",
30 |     "eslint-plugin-vue": "^6.2.2",
31 |     "vue-template-compiler": "^2.6.11"
32 |   },
33 |   "eslintConfig": {
34 |     "root": true,
35 |     "env": {
36 |       "node": true
37 |     },
38 |     "extends": [
39 |       "plugin:vue/essential",
40 |       "eslint:recommended"
41 |     ],
42 |     "parserOptions": {
43 |       "parser": "babel-eslint"
44 |     },
45 |     "rules": {}
46 |   },
47 |   "browserslist": [
48 |     "> 1%",
49 |     "last 2 versions",
50 |     "not dead"
51 |   ]
52 | }
53 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xingwei07/vue_test/85867ccb36c0a8297e13a331655bd407d8f541fa/public/favicon.ico


--------------------------------------------------------------------------------
/public/image/vuex.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xingwei07/vue_test/85867ccb36c0a8297e13a331655bd407d8f541fa/public/image/vuex.png


--------------------------------------------------------------------------------
/public/image/全局事件总线.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xingwei07/vue_test/85867ccb36c0a8297e13a331655bd407d8f541fa/public/image/全局事件总线.png


--------------------------------------------------------------------------------
/public/image/消息订阅与发布.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xingwei07/vue_test/85867ccb36c0a8297e13a331655bd407d8f541fa/public/image/消息订阅与发布.png


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <!-- 开启移动端的理想视口 -->
 8 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 9 |     <!-- 配置页签图标 -->
10 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
11 |     <!-- 引入样式文件 -->
12 |     <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
13 |     <!-- 配置页签标题 -->
14 |     <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
15 |     <title>硅谷主页</title>
16 |   </head>
17 |   <body>
18 |     <!-- 当浏览器不支持js时noscript中的元素就会被渲染 -->
19 |     <noscript>
20 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
21 |     </noscript>
22 |     <!-- 容器 -->
23 |     <div id="app"></div>
24 |     <!-- built files will be auto injected -->
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |       <div class="row">
 4 |         <Banner />
 5 |       </div>
 6 |       <div class="row">
 7 |         <div class="col-xs-2 col-xs-offset-2">
 8 |           <div class="list-group">
 9 |             <!-- 原始html中使用a标签实现页面的跳转 -->
10 |             <!-- <a href="./about.html" class="list-group-item active">About</a> -->
11 |             <!-- <a href="./home.html" class="list-group-item">Home</a> -->
12 |             
13 |             <!-- Vue中借助router-link标签实现路由的切换  -->
14 |             <router-link to="/about" class="list-group-item" active-class="active">About</router-link>
15 |             <router-link to="/home" class="list-group-item" active-class="active">Home</router-link>
16 |           </div>
17 |         </div>
18 |         <div class="col-xs-6">
19 |           <div class="panel">
20 |             <div class="panel-body">
21 |               <!-- 指定组件的呈现位置 -->
22 |               <router-view></router-view>
23 |             </div>
24 |           </div>
25 |         </div>
26 |       </div>
27 |     </div>
28 | </template>
29 | 
30 | <script>
31 |   import Banner from './components/Banner'
32 |   export default {
33 |     name:'App',
34 |     components:{
35 |       Banner
36 |     }
37 |   }
38 | </script>


--------------------------------------------------------------------------------
/src/components/Banner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="col-xs-offset-2 col-xs-8">
 3 |       <div class="page-header">
 4 |         <h2>Vue Router Demo</h2>
 5 |         <button @click="back">后退</button>
 6 |         <button @click="forward">前进</button>
 7 |         <button @click="test">测试一下to</button>
 8 |       </div>
 9 |     </div>
10 | </template>
11 | 
12 | <script>
13 |   export default {
14 |     name: 'Banner',
15 |     methods:{
16 |       back(){
17 |         this.$router.back()
18 |       },
19 |       forward(){
20 |         this.$router.forward()
21 |       },
22 |       test(){
23 |         // this.$router.go(2) //前进两步
24 |         this.$router.go(-2) //后退两步
25 |       }
26 |     }
27 |   }
28 | </script>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | //引入Vue
 2 | import Vue from 'vue'
 3 | //引入app
 4 | import App from './App'
 5 | //引入vue-router
 6 | import VueRouter from 'vue-router'
 7 | //引入路由器
 8 | import router from './router'
 9 | 
10 | //关闭vue的生产提示
11 | Vue.config.productionTip = false
12 | 
13 | //使用路由器
14 | Vue.use(VueRouter)
15 | 
16 | //创建vm
17 | new Vue({
18 |     el:'#app',
19 |     render: h => h(App),
20 |     router
21 |     // mounted(){
22 |     //     setTimeout(()=>{
23 |     //         this.$destroy()
24 |     //     },3000)
25 |     // }
26 | })


--------------------------------------------------------------------------------
/src/pages/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>我是About的内容</h2>
 3 | </template>
 4 | 
 5 | <script>
 6 |   export default {
 7 |     name: 'About',
 8 |     mounted(){
 9 |       // console.log('About被挂载了')
10 |       window.aboutRoute = this.$route
11 |       window.aboutRouter = this.$router
12 |     },
13 |     // beforeDestroy(){
14 |     //   console.log('About被销毁了')
15 |     // }
16 |   }
17 | </script>


--------------------------------------------------------------------------------
/src/pages/Detail.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul>
 3 |     <li>消息编号：{{id}}</li>
 4 |     <li>消息标题：{{title}}</li>
 5 |   </ul>
 6 | </template>
 7 | 
 8 | <script>
 9 |   export default {
10 |     name:'Detail',
11 |     props:['id','title'],
12 |     computed:{
13 |       // id(){
14 |       //   return this.$route.params.id
15 |       // },
16 |       // title(){
17 |       //   return this.$route.params.title
18 |       // }
19 |     },
20 |     mounted(){
21 |       console.log(this)
22 |     }
23 |   }
24 | </script>


--------------------------------------------------------------------------------
/src/pages/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Home组件内容</h2>
 4 |     <div>
 5 |       <ul class="nav nav-tabs">
 6 |         <li>
 7 |           <router-link to="/home/news" class="list-group-item" active-class="active">News</router-link>
 8 |         </li>
 9 |         <li>
10 |           <router-link to="/home/message" class="list-group-item" active-class="active">Message</router-link>
11 |         </li>
12 |       </ul>
13 |       <router-view></router-view>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 |   export default {
20 |     name: 'Home',
21 |     mounted(){
22 |       // console.log('Home被挂载了')
23 |       window.homeRoute = this.$route
24 |       window.homeRouter = this.$router
25 |     },
26 |     // beforeDestroy(){
27 |     //   console.log('Home被销毁了')
28 |     // }
29 |   }
30 | </script>


--------------------------------------------------------------------------------
/src/pages/Message.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul>
 4 |       <li v-for="m in messageList" :key="m.id">
 5 |         <!-- 跳转路由并携带参数，to的字符串写法 -->
 6 |         <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->
 7 |         
 8 |         <!-- 跳转路由并携带参数，to的对象写法 -->
 9 |         <!-- <router-link :to="{
10 |           path:'/home/message/detail',
11 |           query:{
12 |             id:m.id,
13 |             title:m.title
14 |           }
15 |         }"> -->
16 |         <router-link :to="{
17 |           name: 'detailName',
18 |           query:{
19 |             id:m.id,
20 |             title:m.title
21 |           }
22 |         }">
23 |           {{m.title}}
24 |         </router-link>&nbsp;&nbsp;
25 |         <button @click="push(m)">push查看</button>
26 |         <button @click="replace(m)">replace查看</button>
27 |       </li>
28 |     </ul>
29 |     <hr>
30 |     <router-view></router-view>
31 |   </div>
32 | </template>
33 | 
34 | <script>
35 |   export default {
36 |     name: 'Message',
37 |     data(){
38 |       return {
39 |         messageList:[
40 |           {id:'001', title:'消息001'},
41 |           {id:'002', title:'消息002'},
42 |           {id:'003', title:'消息003'}
43 |         ]
44 |       }
45 |     },
46 |     methods:{
47 |       push(m){
48 |         this.$router.push({
49 |           name: 'detailName',
50 |           query:{
51 |             id:m.id,
52 |             title:m.title
53 |           }
54 |         })
55 |       },
56 |       replace(m){
57 |         this.$router.replace({
58 |           name: 'detailName',
59 |           query:{
60 |             id:m.id,
61 |             title:m.title
62 |           }
63 |         })
64 |       }
65 |     }
66 |   }
67 | </script>


--------------------------------------------------------------------------------
/src/pages/News.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul>
 4 |       <li>news001</li>
 5 |       <li>news002</li>
 6 |       <li>news003</li>
 7 |     </ul>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 |   export default {
13 |     name: 'News'
14 |   }
15 | </script>


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   lintOnSave: false, //关闭语法检查
 3 |   //开启代理服务器(方式一)
 4 |   // devServer: {
 5 |   //   proxy: 'http://localhost:5000'
 6 |   // },
 7 |   //开启代理服务器(方式二)
 8 |   devServer: {
 9 |     proxy: {
10 |       '/api': {
11 |         target: 'http://localhost:5000',
12 |         pathRewrite: {'/api':''}, //重写路径
13 |         // ws: true, //用于支持websocket
14 |         // changeOrigin: true //用于控制请求中的host值
15 |       },
16 |       '/foo': {
17 |         target: 'http://localhost:5001',
18 |         pathRewrite: {'/foo':''}, //重写路径
19 |         // ws: true, //用于支持websocket
20 |         // changeOrigin: true //用于控制请求中的host值
21 |       }
22 |     }
23 |   }
24 | }


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