zoukankan      html  css  js  c++  java
  • vue 基础的一些字眼及路由

    每个框架都有一些自己的写法和一些字眼

    摘自 vue 官网

    v-bind 缩写

    <!-- 完整语法 -->
    <a v-bind:href="url">...</a>
    
    <!-- 缩写 -->
    <a :href="url">...</a>
    

     

      

     

    v-on 缩写

    <!-- 完整语法 -->
    <a v-on:click="doSomething">...</a>
    
    <!-- 缩写 -->
    <a @click="doSomething">...</a>

    使用路由,可以是页面无刷新跳转。并且地址栏地址也是被修改掉的。

    这个是路由文件全部代码

    import Vue from 'vue'
    import Router from 'vue-router'
    import Index from '../pages/index'
    import One from '../pages/one'
    import Two from '../pages/two'
    import Three from '../pages/three'
    import Four from '../pages/four'
    import UserCenter from '../pages/userCenter'
    import UserInfo from '../pages/UserInfo'
    
    Vue.use(Router)
    
    export default new Router({
        routes: [{
    	  path: '/', 		//这里路径就是这样
    	  redirect: 'index'  //设置默认首页
        },{
          path: '/index',
          name: 'index',
          component: Index
        },
        {
          path: '/one',
          name: 'one',
          component: One
        },
        {
          path: '/two',
          name: 'two',
          component: Two
        },
        {
          path: '/three',
          name: 'three',
          component: Three
        },
        {
          path: '/four',
          name: 'four',
          component: Four
        },
        {
          path: '/userCenter',
          name: 'userCenter',
          component: UserCenter,
          children: [
            {
              path: 'userInfo',
              name: 'userInfo',
              component: UserInfo
            }
          ]
        }]
    })
    

      上面  import 是引入文件,from 后面是路径相对于这个路由文件的路径,from前面是一个名字,用于这个路由文件用调用

    Vue.use(Router)是启用路由。没有这个代码,这个路由是没有用的

    export default new Router   默认new一个新的路由, routes    这个属性下面是 path   和component 这两个属性是一定要的,

    一个路径,另一个是 组件名字。不填写属性值是不会报错的,但是会跳转不到页面去。会显示一个空的页面,,,组件的名字就是

    上面from 前面的名字。 

     

     

     

     

     

     

     

     

     

  • 相关阅读:
    SGU 271 Book Pile (双端队列)
    POJ 3110 Jenny's First Exam (贪心)
    HDU 4310 Hero (贪心)
    ZOJ 2132 The Most Frequent Number (贪心)
    POJ 3388 Japanese Puzzle (二分)
    UVaLive 4628 Jack's socks (贪心)
    POJ 2433 Landscaping (贪心)
    CodeForces 946D Timetable (DP)
    Android Studio教程从入门到精通
    Android Tips – 填坑手册
  • 原文地址:https://www.cnblogs.com/caihua0405/p/8529884.html
Copyright © 2011-2022 走看看