zoukankan      html  css  js  c++  java
  • vuejs,router

    接下来我们要做的是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>
  • 相关阅读:
    Civil 3D 二次开发 创建Civil 3D 对象—— 01 —— 创建几何空间点
    Civil 3D 二次开发 创建Civil 3D 对象—— 00 ——
    Civil 3D 二次开发 创建AutoCAD对象—— 01 —— 创建直线
    Civil 3D 二次开发 新建CLR项目出现错误C2143
    Civil 3D 二次开发 创建AutoCAD对象—— 00 ——
    了解AutoCAD对象层次结构 —— 6 ——块表记录
    datepicker97使用
    使用angular 外接 templateUrl,使用ng-include
    angularJs 遮罩
    网上找的有关css兼容问题
  • 原文地址:https://www.cnblogs.com/longsiyuan/p/6106686.html
Copyright © 2011-2022 走看看