icon-cookie
The website uses cookies to optimize your user experience. Using this website grants us the permission to collect certain information essential to the provision of our services to you, but you may change the cookie settings within your browser any time you wish. Learn more
I agree
blank_error__heading
blank_error__body
Text direction?

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

字数 1,188阅读 5,045

目录

前言

总结了一些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