Skip to content

Commit 85867cc

Browse files
xingwei07xingwei07
committed
commit
1 parent 38f62d8 commit 85867cc

File tree

10 files changed

+298
-86
lines changed

10 files changed

+298
-86
lines changed

‎README.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -243,7 +243,7 @@ new Vue({
243243

244244
1. 语法：`this.$nextTick(回调函数)`
245245

246-
2. 作用：在下一次 DOM 更新结束后执行其指定的回调。
246+
2. 作用：在`下一次` DOM `更新循环结束`后执行其指定的回调。
247247

248248
3. 什么时候用：当改变数据后，要基于更新后的新 DOM 进行某些操作时，要在`nextTick`所指定的回调函数中执行。
249249

@@ -350,7 +350,7 @@ module.exports = {
350350
<Category>
351351
<div>html结构1</div>
352352
</Category>
353-
353+
354354
子组件中：
355355
<template>
356356
<div>
@@ -373,7 +373,7 @@ module.exports = {
373373
<div>html结构2</div>
374374
</template>
375375
</Category>
376-
376+
377377
子组件中：
378378
<template>
379379
<div>
@@ -400,21 +400,21 @@ module.exports = {
400400
</ul>
401401
</template>
402402
</Category>
403-
403+
404404
<Category>
405405
<template scope="scopeData">
406406
<!-- 生成的是h4标题 ->
407407
<h4 v-for="g in scopeData.game" :key="g>{{g}}</h4>
408408
</template>
409409
</Category>
410-
410+
411411
子组件中：
412412
<template>
413413
<div>
414414
<slot :games="games"></slot>
415415
</div>
416416
</template>
417-
417+
418418
<script>
419419
export default {
420420
name: "Category",
@@ -473,7 +473,7 @@ module.exports = {
473473
//引入store
474474
import store from './store'
475475
......
476-
476+
477477
//创建vm
478478
new Vue({
479479
el: '#app',
@@ -594,7 +594,7 @@ module.exports = {
594594
```js
595595
//靠mapMutations生成：increment、decrement（对象方式）
596596
...mapMutations({increment:'JIA',decrement:'JIAN'}),
597-
597+
598598
//靠mapMutations生成：increment、decrement（数组方式）
599599
...mapMutations(['JIA','JIAN']),
600600
```
@@ -844,10 +844,10 @@ module.exports = {
844844
```html
845845
<!-- 简化前，需要写完整的路径 -->
846846
<router-link to="/demo/test/welcome">跳转</route-link>
847-
847+
848848
<!-- 简化后，直接通过名字跳转 -->
849849
<router-link :to="{name:'hello'}">跳转</router-link>
850-
850+
851851
<!-- 简化写法配合传递参数 -->
852852
<router-link
853853
:to="{
@@ -893,7 +893,7 @@ module.exports = {
893893
```html
894894
<!-- 跳转并携带params参数，to的字符串写法 -->
895895
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
896-
896+
897897
<!-- 跳转并携带params参数，to的对象写法 -->
898898
<router-link
899899
:to="{

‎src/App.vue

Lines changed: 29 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,38 @@
11
<template>
22
<div>
3-
<button>原始样式</button>
4-
<input type="text" name="" id="" placeholder="原始样式">
5-
<atguigu-row>
6-
<el-button>默认按钮</el-button>
7-
<el-button type="primary">主要按钮</el-button>
8-
<el-button type="success">成功按钮</el-button>
9-
<el-button type="info">信息按钮</el-button>
10-
<el-button type="warning">警告按钮</el-button>
11-
<el-button type="danger">危险按钮</el-button>
12-
</atguigu-row>
13-
14-
<el-date-picker
15-
v-model="value2"
16-
align="right"
17-
type="date"
18-
placeholder="选择日期"
19-
:picker-options="pickerOptions">
20-
</el-date-picker>
21-
22-
<atguigu-row>
23-
<el-button icon="el-icon-search" circle></el-button>
24-
<el-button type="primary" icon="el-icon-edit" circle></el-button>
25-
<el-button type="success" icon="el-icon-check" circle></el-button>
26-
<el-button type="info" icon="el-icon-message" circle></el-button>
27-
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
28-
<el-button type="danger" icon="el-icon-delete" circle></el-button>
29-
</atguigu-row>
30-
</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>
3128
</template>
3229

3330
<script>
31+
import Banner from './components/Banner'
3432
export default {
3533
name:'App',
36-
data() {
37-
return {
38-
pickerOptions: {
39-
disabledDate(time) {
40-
return time.getTime() > Date.now();
41-
},
42-
shortcuts: [{
43-
text: '今天',
44-
onClick(picker) {
45-
picker.$emit('pick', new Date());
46-
}
47-
}, {
48-
text: '昨天',
49-
onClick(picker) {
50-
const date = new Date();
51-
date.setTime(date.getTime() - 3600 * 1000 * 24);
52-
picker.$emit('pick', date);
53-
}
54-
}, {
55-
text: '一周前',
56-
onClick(picker) {
57-
const date = new Date();
58-
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
59-
picker.$emit('pick', date);
60-
}
61-
}]
62-
},
63-
value1: '',
64-
value2: '',
65-
};
34+
components:{
35+
Banner
6636
}
67-
}
37+
}
6838
</script>

‎src/components/Banner.vue

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
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

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,26 @@
11
//引入Vue
22
import Vue from 'vue'
3-
43
//引入app
54
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 )
5+
//引入vue-router
6+
import VueRouter from 'vue-router'
7+
//引入路由器
8+
import router from './router'
199

2010
//关闭vue的生产提示
2111
Vue.config.productionTip = false
2212

23-
//应用ElementUI
24-
// Vue.use(ElementUI);
13+
//使用路由器
14+
Vue.use(VueRouter)
2515

2616
//创建vm
2717
new Vue({
2818
el:'#app',
2919
render: h => h(App),
20+
router
21+
// mounted(){
22+
// setTimeout(()=>{
23+
// this.$destroy()
24+
// },3000)
25+
// }
3026
})

‎src/pages/About.vue

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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>

0 commit comments

Comments
 (0)