Open RainZhai opened 7 years ago
VueRouter 嵌套路由功能 main.js
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{
path: '/first',
component: firstcomponent,
children: [{
path:'/first/firstsub',
component: firstsub
}]
},
{
path: '/second',
component: secondcomponent
}
]
})
Firstcomponent.vue
<router-link to="/first/firstsub">Go to Sub</router-link>
<router-view></router-view>
数据的动态加载 Secondcomponent.vue
<template>
<div id="secondcomponent">
<h1>I am another page</h1>
<a> written by {{ author }} </a>
<ul>
<li v-for="article in articles">
{{article.title}}
</li>
</ul>
</div>
</template>
<script>
export default {
data (){
return {
author: '微信公众号 jinkey-love',
articles: [{"title":"this is the 1"},
{"title":"this is the 2"}]
}
},
//设置数据加载
mounted: function() {
this.$http.jsonp('http://localhost:8080/data.json', {}, {
headers: {
},
emulateJSON: true
}).then(function(response) {
// 这里是处理正确的回调
this.articles = response.data.articles
// this.articles = response.data["articles"] 也可以
}, function(response) {
this.articles = [
{"title":"this is the aaaaa"},
{"title":"this is the bbbbb"},
{"title":"this is the 77777"}
]
// 这里是处理错误的回调
console.log(response)
});
}
}
</script>
todolist示例 app.vue
<template>
<div id="app">
<h1 v-text="title"></h1>
<div>
<input v-model="newItem" v-on:keyup.enter="addNew" />
<ul>
<li v-for="item in items" v-bind:class="{finished: item.isFinished}" v-on:click="toggleFinish(item)">
{{item.label}} <span v-on:click="deleteItem(item)">删除</span>
</li>
</ul>
</div>
<router-link to="/first">Go to Foo</router-link>
<router-link to="/second">Go to Bar</router-link>
<router-view></router-view>
</div>
</template>
<script>
import Hello from './components/Hello'
//引入store.js 处理localStorage
import Store from './store'
export default {
name: 'app',
components: {
Hello
},
data(){
return {
title: "this is a title",
items:Store.fetch(),
newItem: ''
}
},
methods: {
toggleFinish: function(item){
item.isFinished = !item.isFinished;
},
addNew: function(){
console.log(this.newItem);
this.items.push({
label:this.newItem,
isFinished:false
});
this.newItem = '';
},
deleteItem: function(item){
this.items.splice(this.items.indexOf(item), 1);
return false;
}
},
//观察items变化
watch: {
items: {
handler : function(items){
Store.save(items);
},
deep: true
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.finished{ text-decoration: line-through; }
</style>
store.js
const STORAGE_KEY ='todos-vuejs';
export default {
fetch() {
return JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || []
},
save(items){
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
}
}
父向子组件传递消息 父组件 app.vue
<template>
<div id="app">
<h1 v-text="title"></h1>
<div class="box1">
<input v-model="newItem" v-on:keyup.enter="addNew" />
<ul>
<li v-for="item in items" v-bind:class="{finished: item.isFinished}" v-on:click="toggleFinish(item)">
{{item.label}} <span v-on:click="deleteItem(item)">删除</span>
</li>
</ul>
</div>
<div class="box1">
<h2>父向子组件传参</h2>
<Mybtn msg="我是一个父消息"></Mybtn>
</div>
<div class="box1">
<h2>路由功能</h2>
<router-link to="/first">Go to Foo</router-link>
<router-link to="/second">Go to Bar</router-link>
<router-view></router-view>
</div>
</div>
</template>
<script>
import Mybtn from './components/Mybtn'
import Store from './store'
export default {
name: 'app',
components: {
Mybtn
},
data() {
return {
title: "this is a title",
items: Store.fetch(),
newItem: ''
}
},
methods: {
toggleFinish: function(item) {
item.isFinished = !item.isFinished;
},
addNew: function() {
console.log(this.newItem);
this.items.push({
label: this.newItem,
isFinished: false
});
this.newItem = '';
},
deleteItem: function(item) {
this.items.splice(this.items.indexOf(item), 1);
return false;
}
},
watch: {
items: {
handler: function(items) {
Store.save(items);
},
deep: true
}
}
}
</script>
<style>
#app {
width: 800px;
margin: 0 auto;
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.finished {
text-decoration: line-through;
}
.box1 {
border: 1px solid #666;
padding: 10px;
margin-bottom: 10px;
}
</style>
子组件 Mybtn.vue
<template>
<div id="mybtn">
<button v-on:click="onClickMe"> Clickme</button>
<p>{{msg}}</p>
</div>
</template>
<script type="text/javascript">
export default {
data () {
return {
author: 'sdfdsf jinkey-love'
}
},
props:["msg"],
methods:{
onClickMe: function(){
console.log(this.msg);
}
}
}
</script>
<style>
</style>
子向父组件传递消息 父组件 app.vue
<template>
<div id="app">
<div class="box1">
<h2>子向父组件传递消息</h2>
<Mybtn msg="我是一个父消息" v-on:mybtnsay="listenMybtn"></Mybtn>
<p>子组件说:{{childsays}}</p>
</div>
</div>
</template>
<script>
import Mybtn from './components/Mybtn'
import Store from './store'
export default {
name: 'app',
components: {
Mybtn
},
data() {
return {
childsays: ''
}
},
methods: {
listenMybtn: function(msg) {
this.childsays = msg;
}
}
}
</script>
<style>
</style>
子组件 Mybtn.vue
<template>
<div id="mybtn">
<button v-on:click="onClickMe"> Clickme</button>
<button v-on:click="onClickTellFather"> tell my father</button>
<p>{{msg}}</p>
</div>
</template>
<script type="text/javascript">
export default {
data() {
return {
btnmsg: 'My btn say hello'
}
},
props: ["msg"],
methods: {
onClickMe: function() {
console.log(this.msg);
},
onClickTellFather: function() {
console.log(this.btnmsg);
this.$emit("mybtnsay", this.btnmsg);//emit可以调用自定义方法
//$dispatch 与 $broadcast 2.0中取消,在vuex中可以实现该功能
}
}
}
</script>
<style>
</style>
版本2.0,参考:http://www.jianshu.com/p/5ba253651c3b VueRouter 路由功能 app.vue
main.js