标签:complete 代码 form vue 路由 router ops lin gray
接下来我们要做的是vue的路由处理,首先当然是安装:
npm install vue-router
接下打开我们的main.js,引入我们vue-router,然后在告诉vue我们要使用我们的vue-router
import Vue from ‘vue‘ import VueRouter from ‘vue-router‘ import App from ‘./App‘ Vue.use(VueRouter) /* eslint-disable no-new */ new Vue({ el: ‘#app‘, template: ‘<App/>‘, components: { App } })
接下来我们开始使用,比如我们的首页我们是用我们的todo-items这个组件来处理
const routes=[ {path:‘/‘,component:todoItems}, ]
那么我们当然也要把它引用进来
import todoItem from ‘./components/Todo-items‘
接下来我们还要做一件事情就是访问一个todo跟上一个id
const routes=[ {path:‘/‘,component:todoItem}, {path:‘/todo/:id‘,component:Todo} ]
但是我们并没有todo这个组件所以创建一个toto的组件
<template> </template> <script> export default { data () { return { } }, } </script>
在main.js中也是要引用进来的
import Todo from ‘./components/todo‘
然后实例化我们的router
const router = new VueRouter({ routes })
但是我们还要告诉的们vue我们要把router传递进去的
import Vue from ‘vue‘ import VueRouter from ‘vue-router‘ import App from ‘./App‘ import todoItem from ‘./components/Todo-items‘ import Todo from ‘./components/todo‘ Vue.use(VueRouter) const routes=[ {path:‘/‘,component:todoItem}, {path:‘/todo/:id‘,component:Todo,name:‘todo‘} ] const router = new VueRouter({ routes }) /* eslint-disable no-new */ new Vue({ el: ‘#app‘, template: ‘<App/>‘, components: { App }, router })
然后我们的视图内容交给我们router来处理,也就是我们在app.vue中的组件引用那块,不直接渲染
<template> <div id="app"> <img src="./assets/logo.png"> <!-- <hello></hello> --> <!-- <todo-item :todos="todos"></todo-item> <todo-form :todos="todos"></todo-form> --> <router-view :todos="todos"></router-view> </div> </template> <script> import Hello from ‘./components/Hello‘ // import todoForm from ‘./components/todo-form‘ // import todoItem from ‘./components/Todo-items‘ export default { name: ‘app‘, data(){ return{ message:‘this is todos‘, todos:[ {id:1,title:"learn vuejs",completed:false}, ], } }, computed:{ todoCount(){ return this.todos.length; } }, components: { Hello } } </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; } </style>
但是这个时候我们的form并没有显示,那么我们就在首页的todoItem中引用这个子组件,script里面的代码
<script> import todoForm from ‘./todo-form‘ export default { name:‘todos‘, props:[‘todos‘], data(){ return { newTodo:{id:null,title:"",completed:false} }//定义一个obj; }, props:[‘todos‘], methods:{ deleteTodo(index){ this.todos.splice(index,1);//删除下标为index的元素 }, toggleCompletion(todo){ todo.completed = !todo.completed; } }, components: { todoForm } } </script>
当然也要在template中引用这个组件
<template> <div id="todos"> <ul class="list-group"> <li class="list-group-item" v-for="(todo,index) in todos" v-bind:class="{‘completed‘ : todo.completed}"> <router-link :to="{ name: ‘todo‘, params: { id:todo.id }}">{{todo.title}} </router-link> <button class="btn btn-warning btn-xs pull-right" v-on:click="deleteTodo(index)">Delete</button> <button class="btn btn-xs pull-right margin-right-10" v-on:click="toggleCompletion(todo)" v-bind:class="[todo.completed ? ‘btn-success‘ : ‘btn-danger‘]">{{todo.completed ? ‘completed‘ : ‘working‘}}</button> </li> </ul> <todo-form :todos="todos"></todo-form> </div> </template> <script> import todoForm from ‘./todo-form‘ export default { name:‘todos‘, props:[‘todos‘], data(){ return { newTodo:{id:null,title:"",completed:false} }//定义一个obj; }, props:[‘todos‘], methods:{ deleteTodo(index){ this.todos.splice(index,1);//删除下标为index的元素 }, toggleCompletion(todo){ todo.completed = !todo.completed; } }, components: { todoForm } } </script> <style> .completed{ color: green; font-style: italic; } .margin-right-10{ margin-right: 10px; } </style>
标签:complete 代码 form vue 路由 router ops lin gray
原文地址:http://www.cnblogs.com/longsiyuan/p/6106686.html