vue2.0 + router基本语法总结

vue基本脚手架

• D://word# vue init webpack vue

常用的方法

1. methods: {} => 方法处理
2. mounted(){} => DOM 加载前之前执行
3. computed: {} => 计算属性
4. components: {} => 组件注册
5. filters:{} => 过滤器注册
6. watch:{} =>数据监听 不常用
7. data:{} =>Vue 将会递归将 data 的属性转换为 getter/setter
8. props {} =>可以是数组或对象，用于接收来自父组件的数据

指令

1. v-for => v-for="item in data"
2. {{item.text}}
3. v-model => 数据绑定， 数据同步用
4. v-bind => 数据绑定用 简写（:sryle=""）
5. v-on => 数据监听，绑定方法 简写（@clack=""）
6. v-if => 数据判断 true/false
7. v-show =>样式控制显隐 true/false
8. v-html => 遍历html 标签的一种形式 <div v-html="item.html"></div>
9. ref => ref="dom" 获取DOM this.$refs.dom

路由

路由的注册

import Vue from 'vue';

import Router from 'vue-router';

Vue.use(Router);

export default new Router({

mode: 'history', //历史记录去掉连接#号

routes: [{

//一级页面注册

path: '/',

    redirect: '/login'

},{

    path: '/about',

    component: resolve => require(['../components/common/index.vue'], resolve),

    //为二及页面注册

children: [{

    {

        path: '/rtf',

        component: resolve => require(['../components/page/rtf.vue'], resolve)

    } ]

    },

{

    path: '/login',

        component: resolve => require(['../components/common/login.vue'], resolve)

    }, {

        path: '/goods/id',

        component: resolve => require(['../components/common/login.vue'], resolve)

    },

]

})

app.vue中添加显示router显示页面

    <router-view></router-view>

多级页面在此<router-view>中在添加一次 <router-view></router-view>

路由的传惨

隐藏key连接形式传惨

    var url = "/goods/"+"参数";

    this.$router.push(url);

    路由注册中心 path: '/goods/id', 按此配置

接收参数

    this.$route.params.id

Get形式传惨

this.$router.push({

    path: “/goods”,

    query: {

        payType: "需要传入的参数"

    }

});

接收参数

    this.$route.query.payType;

组件的传惨

<template>

    <div>

        <h1>这里是父组件</h1>

        <vmenu :data="list" @gat="orderList"></vmenu>

    </div>

</template>

//组件传参

    :data="list"

子组件触发父子的事件

@gat="orderList"

list:{

    id:12 >>..

}

orderList(){

    console.log("这里是父组件")

}

//组件引用

import Vmenu from '../../common/menu'

//组件祖册

components:{Vmenu }

子组件

//组件接收参数

props: {

username: String,

},

官方文档

   参考文献： http://www.shikedian.com/#/article/45