<html>
<body>
<div id="app" style="border-bottom: 1px solid firebrick; margin-bottom: 20px">
<h1>{{ message }}</h1>
<div style="border-bottom: 1px solid firebrick; margin-bottom: 20px">
<router-link to="/qizhou">蕲州镇</router-link>
<router-link to="/linchuan">临川县</router-link>
<router-link to="/yixin">宜兴县</router-link>
<router-view></router-view>
</div>
<div style="border-bottom: 1px solid firebrick; margin-bottom: 20px">
<input type="button" onclick="route('frigate', '护卫舰')" value="护卫舰"/>
<input type="button" onclick="route('destroyer', '驱逐舰')" value="驱逐舰"/>
<input type="button" onclick="route('attacker', '攻击舰')" value="攻击舰"/>
<router-view name="ship"></router-view>
</div>
<div style="border-bottom: 1px solid firebrick; margin: 20px">
<router-link to="/xueyiwei">薛忆沩</router-link>
<router-view name="book1"></router-view>
<router-view name="book2"></router-view>
<router-view name="book3"></router-view>
</div>
<div style="border-bottom: 1px solid firebrick; margin-bottom: 20px">
<router-link to="/school/hubei">湖北</router-link>
<router-link to="/school/shanxi">陕西</router-link>
<router-link to="/school/beijing">北京</router-link>
<router-view></router-view>
</div>
<div style="border-bottom: 1px solid firebrick; margin-bottom: 20px">
<input type="button" v-on:click="count += 1" value="连续递增"/>
<input type="button" v-on:click.once="count += 1" value="只能增加一次"/>
<span>{{ count }}</span><br>
<div v-on:click="buble" style="margin: 20px 20px 20px 0px">
<button v-on:click="buble">事件冒泡</button>
<button v-on:click.stop="buble">阻止冒泡</button>
</div>
<input type="button" onclick="decode()" value="解耦"/><br>
<button v-on:click="trigger()">触发默认事件</button>
<a v-on:click.self="clickself">
第一层
<a v-on:click="clickself">
第二层
<a v-on:click="clickself">
第三层
<a v-on:click="clickself">
第四层
</a>
</a>
</a>
</a>
<div style="margin: 20px">
出生时间: {{ birthday | dateFormat}}<br>死亡时间: {{ deadtime | dateFormat}}
</div>
<div id="obj1" @click.capture="capture('obj1')">
obj1
<div id="obj2" @click.capture="capture('obj2')">
obj2
<div id="obj3" @click="capture('obj3')">
obj3
<div id="obj4" @click="capture('obj4')">
obj4
<div>
capture即是给元素添加一个监听器，<br>
当元素发生冒泡时，先触发带有该修饰符的元素。<br>
若有多个该修饰符，则由外而内触发。 <br>
就是谁有该事件修饰符，就先触发谁。<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
const Qizhou = { template: `
<div>
<p>
蕲州镇位于长江中下游北岸大别山南曲，是个偏僻的小镇。
是明代圣医李时珍的故乡。
大别山龙脉彼起此伏，象舞龙般一直舞到蕲州镇，生动非常；
弯弯曲曲、浩浩荡荡的长江水，象玉带那样轻飘流过蕲州，
然后缓缓东流，呈现环抱形状，又被巴水、湍水河兜裹，成为“水抱格”。
它的西北方有桐柏山和大别山挡住西北风，形成“环山格”。
所以蕲州镇真正是一块“山坏水抱”的风水地理宝地。
是富贵双全的风水地理格局。
</p>
</div>`
}
const Linchuan = {template: `
<div>
<p>
临川县位江西省抚州市西南，名为“上顿渡”，是众水所汇之处，
地理风水的气场十分优越，南面的赣江、崇江、
抚河如扇形十弯九曲流向临川，在临川北汇合流入长江和鄱阳湖，
成为地理风水难得的“聚水格”局。
临川西北有环形的山脉挡住西北风，形成“山环水抱必有气” （即气聚），
符合“山环水抱必有大发者”的风水定律。
临川的北方又有九岭山、连云山、幕阜山铸成层层包围，使北风不能入侵吹散气场。
此外，临川较远的南方，有武夷山直行，成为来气之口直入临川，源源不绝地入而聚汇，
形成一个优越不散的大气场，使临川成为一块风水宝地。
所以尽管时代变迁，社会制度更换，从来不影响临川的人才辈出的地理环境。
</p>
</div>`
}
const Yixin = { template: `
<div>
<p>
宜兴是典型的聚水格，它有水龙的保佑。
宜兴地处长江中游弯弯曲曲的大环抱中，地理风水的气场十分良好。
它又是众水众湖汇合流入太湖的必经之路，而且处近终点站。
它的西北形成众星拱月般扇形水系：有宜兴长漕河、渴湖、长荡湖、南猗湖，还有很多人工水库。
这些湖河源于长江，向江汇合，流经宜兴，注入太湖。因此，使宜兴成为典型的水抱型。
</p>
</div>`
}
const Frigate = { template: `
<div>
<h1>{{$route.params.ship}}</h1>
<p>
本级舰外形设计简洁洗练，防空/反舰/反潜配置均衡，堪称颇具水准的设计。
就数量而言，本级舰将成为中国新一代舰队组成的骨干，
其适航性与作战能力都优于过去中国海军主力的051型驱逐舰；
服役以来，本级舰积极参与国际远航活动、索马里反海盗等，
为中国海军累积了可观的远洋操作经验。
</p>
</div>`
}
const Destroyer = { template: `
<div>
<h1>{{$route.params.ship}}</h1>
<p>
本级舰也是第一次在驱护舰的设计上实现远程攻防兼备的大潜力优秀平台，
其未来改进型号再进一步加入电磁推进、电磁炮、激光近防技术及海基反导能力后，
必然可以成为维护中国国家安全和海外利益的实力担当，更是中国海军走向深蓝的利剑先锋。
</p>
</div>`
}
const Attacker = { template: `
<div>
<h1>{{$route.params.ship}}</h1>
<p>
该舰设计上也更为深入具体，其采用直通甲板设计，
具有4个直升机起降点，2台升降机，在机库下还设置有巨大的坞舱，
可以搭载一定数量的国产气垫船。在整体外形上，
075型两栖攻击舰与中国在2012年阿布扎比防务展上展示的2.5万吨级出口两栖攻击舰非常相像，
因此有分析认为，展示的出口型号有可能是解放军自用型号的衍生产品 。
据中国军方透露，目前中国海军正在建造一艘075型两栖攻击舰，
由上海沪东中华造船厂承建，第一艘船只可于2019年初下水，并于2020全面投入使用。
075型两栖攻击舰和美国海军黄蜂级两栖攻击舰外型尺寸相当。
</p>
</div>`
}
const Book1 = { template: `
<div>
<h1>通往天堂的最后那一段路程</h1>
<p>
我们的领队告诉我们，我们将沿着乡间坎坷不平的道路一直走到黄河的东岸。
那一天， 天气非常晴朗。我走在队伍的最前面，感觉自己是一部戏剧的主角。
一阵深情的畅快沁透了我的身心。那是自去年夏天离开马德里以来从没有出现过的感觉。
你知道我想起了什么吗?我想起了马克白斯听到他妻子的死讯时的那一段独白。
“生命不过是行走的影子。”我想这也许不是一种悲叹。
那“毫无意义的喧嚣与骚动”也同样可以不是责难。我就非常喜欢喧嚣与骚动，你知道的。
我就是行走的影子。你也是的。我们曾经行走在爱丁堡、伦敦和巴黎。
我们曾经行走在底特律、多伦多和纽约。然后，我又独自行走在莫斯科和马德里。
现在，我又行走在中国的城市和乡村。我的一生都行走在喧嚣与骚动之中。
还有另外的一种“行走”在推动着我的生命，你知道的。
在过去的三十年中，我从基督教走向了无神论，又从无政府主义走向了共产主义。
如果我停止了行走，我的灵魂就会哗变，我的身心就将分裂。
</p>
</div>`}
const Book2 = { template: `
<div>
<p>
有一天，他与弗兰西丝讨论起了中国唐代诗人李商隐的一句诗。
我们的领队说他不理解在汉语中人们为什么可以将“回”与“归”连在一起用。
在他看来，“归”是一种心理的嬗变，而“回”只是物理的迁移。
“归”指向未来，而“回”纠缠着过去。我不喜欢这种讨论，因为我害怕时间。
我一直不知道时间是一去不复返的箭，还是不断重复的圈。
不管时间是什么，在我看来，“过去”都是对生命的嘲弄。
当我说我爱你的时候，我不是说我曾经爱过你。我是说我仍然爱着你。
你的呼吸仍然掠过我的听觉。你的柔弱仍然颤动我的抚摸。你的忧伤仍然腐蚀我的向往。
</p>
</div>`
}
const Book3 = { template: `
<div>
<p>
是想象力解放了我们。
通过想象，我们成为我们的祖先，我们的后代，我们的敌人，我们的奴隶。
也只有通过想象，我们才能够成为我们自己。想象力激起了欲望和虚构的狂热。
这是生活的基础。生活是想象力虚构出来的真实。
在那个未来的中国人看来，我给你的这封信一定就像是一篇水平不高的小说。
我关于生活的“纪实”通过他的想象而成为了一种“虚构”。
是时间完成了这种创造吗?不。我知道，根本就用不着等到下一个世纪。
也根本就用不着去等待那个还没有出生的中国人。
在我们自己的时代，鸿沟就已经存在。
</p>
</div>`
}
const Decode = {
props: ['vue'],
template: `<div>使用props向路由组件传递属性，作用是解耦。{{ vue }}</div>`
}
var router = new VueRouter({
routes: [
{
path: '/qizhou',
component: Qizhou
},
{
path: '/linchuan',
component: Linchuan
},
{
path: '/yixin',
component: Yixin
},
{
name: 'frigate',
path: '/frigate/:ship',
components: {
ship: Frigate
}
},
{
name: 'destroyer',
path: '/destroyer/:ship',
components: {
ship: Destroyer
}
},
{
name: 'attacker',
path: '/attacker/:ship',
components: {
ship: Attacker
}
},
{
path: '/xueyiwei',
redirect: '/book'
},
{
path: '/book',
components: {
book1: Book1,
book2: Book2,
book3: Book3
}
},
{
path: '/school/hubei',
redirect: to => {
return '/pku'
}
},
{
path: '/whu',
component: {template: '<div>国立武汉大学</div>'}
},
{
path: '/xju',
alias: '/pku',
component: {template: '<div>西安交通大学</div>'}
},
{
path: '/pku',
component: {template: '<div>北京大学</div>'}
},
{
name: 'decode',
path: '/decode/:vue',
component: Decode,
props: true,
}
]
});
function route(name, ship) {
console.log(name);
router.push({
name: name,
params: {ship: ship}
});
};
function decode() {
router.push({
//path和params不可同时出现，因为参数最终都会拼接到路径中
//具名路由中往往是路由名称和参数出现在一起，或者仅仅只出现路径但是参数会包含在路径中
name: 'decode',
params: {vue: 'vue.js'}
});
}
new Vue({
el: '#app',
router: router,
data: {
message: '为往圣继绝学，为万世开太平!',
birthday: 123456789,
deadtime: 987654321,
count: 0,
},
filters: {
dateFormat: function(original) {
console.log('original: ' + original);
var date = new Date(original);
var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDate();
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
var target = year + '-' + month + '-' + day
console.log('target: ' + target);
return target;
}
},
methods: {
buble: function () {
window.alert('hello .stop');
},
trigger: function() {
window.alert('事件被触发');
},
clickself: function() {
window.alert('只有在点击自身时才会触发');
},
capture: function(value) {
console.log('======================');
console.log(value);
}
}
});
</script>
</html>vue中的路由和时间修饰符 --- 联网的情况下直接可以运行
猜你喜欢
转载自blog.csdn.net/qq_23143555/article/details/81210329
今日推荐
周排行