[SpringBoot+VueJs] 3.3 VueJs的一些基础知识

目录

1. 环境搭建
2. 后端
   2.1 数据库设计
   2.2 SpringBoot + Mybatis
   2.3 SpringBoot+RestfulAPI
3. 前端
   3.1 VueJS 2.0 + Webpack工程介绍
   3.2 Admin-LTE介绍及使用
   3.3 VueJS一些基础知识
   3.4 项目中用到的和VueJS的开源组件

前言

总结了一些VueJs的基础知识，方便后面写代码的时候有概念。
说实话，我从最早的那种响应式的页面开发经验，跳转到这里还是稍微花了点时间的。
因为最早的形式就是后端返回HTML/FTL，浏览器展示。

也就意味着有N个页面要维护。
而类似于Vue.js， AngularJs等MVVM出现

MVVM

参考：谈谈MVVM框架

我的理解是，

1. 前后端的同事的工作就更分离了，也意味着更能够敏捷开发。而不是臃肿的MVC模式下用Controller来维护View，然后前后端的耦合很大。现在，前后端同事只要在数据上保持一致。实际上工作就完全分离了。
2. 可以做单页应用，也就是对于后端来说只有一个HTML/Ftl文件维护即可。前端通过组件的形式来像堆积木一样的堆积不同的页面。对于用户来说，访问速度很快（因为没有页面同步加载的过程）

我的开发过程中，用的比较多的就是下面两个功能。

• 组件
• Router
  我通过这两个就可以开发单页应用了

实战中的例子

大致的思路就是：

1. 我需要有个主页面
2. 我通过路由的方式转移到不同的页面去。
3. 不同的页面其实是一个组件，而不是通过去后台请求发来的HTML/FTL文件。

根据前一节：3.2 Admin-LTE介绍。
我们已经有一个app.vue来挂载到的第一个div上。所以思路的第一步已经做好了。

接下里就是我们的两个子页面：

├──app.vue
│ ├── com1.vue
│ └── com2.vue

对于vue来说。com1.vue和com2.vue既是两个组件。接下来我们通过注册router的方式，来讲路由注册号。这样的话，页面跳转就可以做到了。

这里使用的是vuejs2.0的router注册方式。最下面参考的链接是vuejs1.0的

改造main.js如下：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import bot from './components/com1.vue'
import unity from './components/com2.vue'
/* eslint-disable no-new */
Vue.use(VueResource)

Vue.use(VueRouter)

// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
// const bot = { template: '
foo
' }
// const Bar = { template: '
bar
' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
const routes = [
  {path: '/', redirect: 'com1'},
  {path: '/com1', component: com1},
  {path: '/com2', component: com2}
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
new Vue({
  router,
  // el: '#app',
  template: '',
  components: { App }
}).$mount('#app')

这里就是注册了一个router，并写好路由 ：

  {path: '/', redirect: 'com1'},
  {path: '/com1', component: com1},
  {path: '/com2', component: com2}

上述也比较好理解。就是首页redirect到com1.vue。
点击/com1，使用的是com1.vue
点击/com2，使用的是com2.vue

接下来就是需要在app.vue中绑定router-view，关键代码如下：

        

          
HEADER
          
          
          

            com1页面
          
          

            com2页面
          
        
        
      
      
    
    
    

      
    

工程目录如下
先通过讲跳转的URI标识号。
在通过具体的来加载各自的xxx.vue（com1.vue，com2.vue）

实现后的工程目录如下：

目录

知道这些原理之后，理论上就可以直接在各自的组件（xxx.vue）中开发自己的组件了。

组件

这里已com1.vue为例:

组件

这里的几个概念：