The website uses cookies. By using this site, you agree to our use of cookies as described in the Privacy Policy.
I Agree
blank_error__heading
blank_error__body
Text direction?

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

字数 1,188阅读 5,217

目录

前言

总结了一些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来挂载到<Body>的第一个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: '<div>foo</div>' }
// const Bar = { template: '<div>bar</div>' }

// 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: '<App/>',
  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,关键代码如下:

        <ul class="sidebar-menu"><li class="header">HEADER</li>
          <!-- Optionally, you can add icons to the links -->
          <!--<li class="active"><a href="#"><i class="fa fa-link"></i><span><router-link to="/com1">com1页面</router-link></span></a></li>-->
          <li><router-link to="/com1"><i class="fa fa-link"></i><span>com1页面</span></router-link></li><li><router-link to="/com2"><i class="fa fa-link"></i><span>com2页面</span></router-link></li></ul>
        <!-- /.sidebar-menu -->
      </section>
      <!-- /.sidebar -->
    </aside>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper"><router-view></router-view></div>

工程目录如下
先通过<router-link>讲跳转的URI标识号。
在通过<router-view>具体的来加载各自的xxx.vue(com1.vue,com2.vue)

实现后的工程目录如下:

目录

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

组件

这里已com1.vue为例:

组件

这里的几个概念:

  • <template>是页面的视图层,其中只能有一个<div>
  • components属性:可以是引用的外部安装的组件,也可以是自己定义的然后这里用到的组件。比如里面的Vuetable就是外部安装来的,errorcasetable就是自己写的另外一个组件。这里就达到了堆积木的效果
  • data属性:这个页面所有的数据。意味着是MVVM中的model
  • computed & mounted:这个是vue的生命周期。我还不是特别理解,但是computed是在页面加载前就会计算好。mounted是页面加载的时候调用。
  • methods:顾名思义,这个vue实例下的函数。相当于java的私有方法。我用的话一般是在mounted里调用这些方法。
实例生命周期

另外一部分是在view里的一些指令:

view

已下图为例,用到了v-for和v-bind。

  • v-for:比较好理解,就是entity这个在上述data属性中的数据,它是个list。所以可以渲染到了li标签。
  • v-bind:就是绑定了 这里的style = {width:calculatePercentage(e)},width:calculatePercentage()是个函数。所以意思就是这个style是根据这个函数的计算结果来展示。

更多请参考:

源码

Git Hub Demo

Measure
Measure
Related Notes
Get a free MyMarkup account to save this article and view it later on any device.
Create account

End User License Agreement

Summary | 4 Annotations
不同的页面其实是一个组件,而不是通过去后台请求发来的HTML/FTL文件
2020/06/02 08:08
改造main.js
2020/06/02 08:13
注册了一个router
2020/06/02 08:13
<router-view>
2020/06/02 08:33