vue初体验(一)

最近接手了一个后台数据管理系统，用的vue2.0，粗略谈一下感受。

第一次接触vue，先在官网看教程和api，大概了解是个什么东东，心里大概有点底了，还是撸helloworld吧。

一：vue-cli

因为之前有用过angular，所以node已经装好了，可以直接搭建脚手架。

npm install -g vue-cli  全局安装

vue init webpack project-name  创建一个vue项目

cd project-name  进入目录

npm install  安装依赖

npm run dev  启动项目

上图为安装完后的项目结构

index.html 为整个项目的入口文件

src/App.vue是根组件，后面的组件都在这里注入

src/main.js是主js，公共类全局类配置等都可以写在这里

二：vue-router

路由，替代传统的#锚点，可在不加载刷新的情况下通过路由快速切换

npm install vue-router 安装路由

在src 文件夹下的 main.js 文件内引入

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

引入Vue和VueRouter插件

var routes = [{

    path: "/home",

    component: {

        template: "#a"

    }

},

{

    path: "/nav",

    component: {

        template: "#b"

    }

},

];

// 定义路由组件

var router = new VueRouter({

    routes

});

// 定义路由

new Vue({

    el: "#main",

    router

});

// 创建和挂载实例

此时可以利用router-link跳转（会渲染成一个a标签）

    One
    Two
   

三：component

组件，类似公共方法，就是一个个小的模块，定义的组件可以在任意页面中调用，一个组件就是一个.vue文件，页面包括3个部分，template、script和style。

1、template为html部分，script逻辑和style样式。

template下直接子元素只允许一个标签，不可同时出现多个。

正确：

错误：

2、script

2.1 组件调用

在调用组件时，需把其要调用的组件先在此模块中注入

在调用时只需调用组件名即可

此时test.js里的内容，会显示在这个页面上。

2.2 组件传值

组件传值有三种方法，父组件-->子组件，子组件-->父组件，同级之间传值

父向子页面传值：

需通过prop传值，父页面在跳转时绑定所需要的值为title

结合上面所说的路由，跳转时传值，可直接在跳转处绑定数据

aaa

子向父传值：

如果子组件需要改变父组件的状态，需要通过$emit触发父组件的事件

this.$emit('title',this.title)

同级页面传值：

可通过公共方法来传值

四：vuex

如果项目非常复杂，父子组件之间传递值比较麻烦，也可以通过vuex来管理

未完待续