专栏首页技术进阶之路从后端开发人员的视角:最浅显的理解 Vue

从后端开发人员的视角:最浅显的理解 Vue

本文以一个后端开发人员的视角去总结 vue 的知识点。

一、文件结构

新建一个 Vue 文件,它的结构如下:

第一部分
<template>
  <table id="simple-table" class="table  table-bordered table-hover">
    <thead>
    <tr>
      <th>ID</th>
      <th>名称</th>
      <th>课程ID</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="chapter in chapters">
      <td>{{chapter.id}}</td>
      <td>{{chapter.name}}</td>
      <td>{{chapter.courseId}}</td>
      <td>操作</td>
    </tr>
    </tbody>
  </table>
</template>

第二部分
<script>
  import Pagination from '../../components/pagination'
  
  export default {
    name: "chapter",
    components: {
      Pagination,
    },
    data() {
      return {
        chapters: [],
      }
    },
    created() {
      let _this = this;
      _this.getAll();
    },
    mounted() {
      // 操作 DOM 节点
    },
    methods: {
      getAll() {
        let _this = this;
        _this.$ajax.get('http://127.0.0.1:9000/business/admin/chapter/list').then(response => {
          _this.chapters = response.data;
        })
      }
    }
  }
</script>

第三部分
<style scoped>

</style>

分为页面部分、JS部分、CSS 部分。

其中页面部分和CSS部分就和普通的网页一样,JS部分有详细划分:

import Pagination from '../../components/pagination'

export default {
  name: "chapter",
  data() {
    return {
      chapters: [],
    }
  },
  components: {
    Pagination,
  },
  created() {
    let _this = this;
    _this.getAll();
  },
  mounted() {
    // 操作 DOM 节点
  },
  methods: {
    getAll() {
      let _this = this;
      _this.$ajax.get('http://127.0.0.1:9000/business/admin/chapter/list').then(response => {
        _this.chapters = response.data;
      })
    }
  },
  watch: {
	  $route: {
	    handler: function (val, oldVal) {
	      console.log("---->页面跳转: ", val, oldVal);
	      let _this = this;
	      _this.$nextTick(function () {
	        _this.activeSidebar(_this.$route.name.replace("/", "-") + "-sidebar");
	      })
	    }
	  }
	},
}
  • name:这个组件的名字,外界可以这样导入组件: import Chapter from './views/admin/chapter'
  • data:定义数据的地方,使用 return 返回,供其他地方使用; 在页面部分可以使用 for 循环遍历列表数据,其中 chapters 是在 data 中定义的数据,取值使用 双大括号 : <tr v-for="chapter in chapters"> <td>{{chapter.id}}</td> <td>{{chapter.name}}</td> <td>{{chapter.courseId}}</td> <td>操作</td> </tr>
  • components:引入子组件;
  • createdmounted 都是钩子函数,他们都可以完成一些初始化操作,两者的区别在后面会再讲。
  • methods:定义自定的函数,在页面部分使用 @click="login()" 绑定要触发的函数。
  • watch:用来监视对象的变化,如 route 就是监视路由的变化,一旦发生变化就触发 handler 函数,nextTick 是一个回调函数,我们可以通过 _this.

关于 package.jsonpackage-lock.json,前者是定义组件的版本号的:

"vue-router": "^3.4.6"

上面的配置的意思是,你要下载的版本号主版本是 3 ,副版本不做限制,默认是最新版,这样就会带来一个问题就是可能每个人安装之后副版本都不一样,那么开发就会有问题,所以就有了 package-lock.json ,它的作用就是锁定组件的版本号为固定的版本,这样大家下载到的版本号都是一样的。

二、钩子函数

Vue 中的钩子函数有 createdmounted

二者的区别在于:

  • created 是在 html 页面渲染之前调用,通常用来初始化一些属性值;
  • mounted 是在页面渲染之后调用,可以用来操作 DOM 节点。

三、路由

先安装:

cnpm install vue-router --save

然后在 main.js 中注册:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

可以通过下面的代码实现路由跳转:

this.$router.push("/welcome")

App.vue 的内容通常如下:

<template>
    <div id="app">
        <router-view/>
    </div>
</template>

其中 <router-view/> 相当于是一个占位符,代表子组件,那么具体是哪一个子组件,需要在 router.js 中定义。

import Vue from 'vue'
import Router from 'vue-router'
import Login from './views/login'
import Admin from './views/admin'
import Welcome from './views/admin/welcome'
import Chapter from './views/admin/chapter'

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [{
    path: '*',
    redirect: "/login",
  }, {
    path: '/login',
    component: Login
  }, {
    path: '/',
    name: "admin",
    component: Admin,
    children: [{
      path: 'welcome',
      name: "welcome",
      component: Welcome,
    }, {
      path: 'business/chapter',
      name: "business/chapter",
      component: Chapter,
    }]
  }]
});

如上所示,默认的访问路径是:

routes: [{
  path: '*',
  redirect: "/login",
}, 

表示转发到 login 下,而 login 对应 Login 组件,所以最后会渲染 Login 组件。

在页面中,如果想达到超链接跳转的效果,我们可以使用下面的方式:

<router-link to="/welcome">
  <span> 欢迎 </span>
</router-link>

四、发送请求

使用 axios 发送请求,先安装:

cnpm install axios --save

然后在 main.js 中注册:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'

Vue.config.productionTip = false;
// 以 Vue 属性的方式使用 axios
Vue.prototype.$ajax = axios;

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

使用也很方便:

对于 get 请求

let _this = this;
_this.$ajax.get('http://127.0.0.1:9000/business/admin/chapter/list').then(response => {
  _this.chapters = response.data;
})

对于 post 请求

_this.$ajax.post('http://127.0.0.1:9000/business/admin/chapter/list', {
  page: page,
  size: _this.$refs.pagination.size,
}).then(response => {
  _this.chapters = response.data.list;
  _this.$refs.pagination.render(page, response.data.total);
})

就像 ajax 一样,直接调用具体的请求方法即可。

五、父子组件传值

5.1、子组件使用父组件的值

<!--
    :list="getAll"
    list: 是子组件暴露出来的一个回调方法;
    getAll: 是父组件的 getAll 方法;
  -->
<pagination ref="pagination" :list="getAll" :itemCount="8"/>

其中绑定的 listitemCount 都需要定义在 子组件props 中。

定义的时候需要注意 props 中的写法,如果绑定的子组件数据类型是:

函数

函数可以直接写 null

props: {
  list: {
    type: Function,
    default: null
  },
}

基本数据类型

props: {
  itemCount: Number
},

对象或数组

如果是对象或数组需要定义为这种形式:

props: {
	prolist: {
		type: Array,
		default() {
			return [];
		}
	}
},

以上是子组件获取父组件的值或者调用父组件的函数,那么父组件怎样调用或者使用子组件的值呢?

5.2、父组件使用子组件的值

我们可以使用

_this.$refs.pagination.size;

得到子组件在 data 中定义的值。

$refsvue 的内置属性,pagination 是组件的 name 值,它也可以用来调用方法,如:

_this.$refs.pagination.render(page, response.data.total);

六、执行流程

现在我们回过头来看一下执行流程:

程序的入口还是 index.html ,index 引用 main.js,然后 main 引用 App.vue,所以我们导入的全局 js 文件可以放在 index 中声明。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Spring 中的 @Import 注解及向容器中添加 Bean 的几种方式

    这次介绍一下 Spring 中的一个重要的注解 @Import 以及向容器中添加 Bean 的几种方式 ,该注解在 SpringBoot 自动转配中起到重要的作...

    wsuo
  • StarUML 使用方法

    如果下载不了,可以在 CSDN 下载 https://download.csdn.net/download/weixin_43941364/12898760...

    wsuo
  • Spring 自定义类型转换器

    因为我们这里指定的日期格式为 2000-08-21,而 Spring 只支持将 2000/08/21 格式的字符串转化为 Date 类型。

    wsuo
  • react 创建组件以及组件通信

    关于React.createClass方法与class App extends Component方法的区别

    念念不忘
  • 组件设计基础(2)

    早期的react设计了许多的生命周期钩子。它们严格定义了组件的生命周期,一般说,生命周期可能会经历如下三个过程:

    一粒小麦
  • 上拉加载下拉刷新了解下

    1.界面上,只分成简单的两块,一块是上方的刷新文字,一块是下方的内容,然后将上方提示内容隐藏在屏幕之外,一般由两种方式,一种是上面遮一层,另一种是marginT...

    IMWeb前端团队
  • React源码分析与实现(一):组件的初始化与渲染

    阅读源码的方式有很多种,广度优先法、调用栈调试法等等,此系列文章,采用基线法,顾名思义,就是以低版本为基线,逐渐了解源码的演进过程和思路。

    Nealyang
  • 使用Unity3D的设计思想实现一个简单的C#赛车游戏场景

    最近看了看一个C#游戏开发的公开课,在该公开课中使用面向对象思想与Unity3D游戏开发思想结合的方式,对一个简单的赛车游戏场景进行了实现。原本在C#中很方便地...

    Edison Zhou
  • 用 React 分页显示数据用react分页显示数据

    展示一下主要三个组件:父组件listBox、列表组件List、按钮组件PageButton

    一个会写诗的程序员
  • vue封装带提示框的单选/多选文本框组件

    在web开发中,经常会遇到公共模块复用的问题,例如页头、页脚、导航条等,传统的后端视图引擎如smarty、服务器配置SSI、或是纯前端的嵌套iframe、js请...

    csxiaoyao

扫码关注云+社区

领取腾讯云代金券