最近接手了一个后台数据管理系统,用的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插件
<script src="vue.js"></script>
<script src="vue-router.js"></script>
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标签)
<div id="main">
<router-link to="/home">One</router-link>
<router-link to="/nav">Two</router-link>
<router-view></router-view>
</div>
三:component
组件,类似公共方法,就是一个个小的模块,定义的组件可以在任意页面中调用,一个组件就是一个.vue文件,页面包括3个部分,template、script和style。
1、template为html部分,script逻辑和style样式。
template下直接子元素只允许一个标签,不可同时出现多个。
正确:<template>
<div> 子
<div></div> 孙
<div></div> 孙
</div>
</template>
错误:<template>
<div> 子
<div></div> 孙
<div></div> 孙
</div>
<div> 子 </div>
</template>
2、script
2.1 组件调用
在调用组件时,需把其要调用的组件先在此模块中注入
在调用时只需调用组件名即可
此时test.js里的内容,会显示在这个页面上。
2.2 组件传值
组件传值有三种方法,父组件-->子组件,子组件-->父组件,同级之间传值
父向子页面传值:
需通过prop传值,父页面在跳转时绑定所需要的值为title
结合上面所说的路由,跳转时传值,可直接在跳转处绑定数据
<router-link :to="{ title: '12345'}">aaa</router-link>
子向父传值:
如果子组件需要改变父组件的状态,需要通过$emit触发父组件的事件
this.$emit('title',this.title)
同级页面传值:
可通过公共方法来传值
四:vuex
如果项目非常复杂,父子组件之间传递值比较麻烦,也可以通过vuex来管理
未完待续