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

wsuo

发布于 2020-10-26 14:38:23

1.1K0

发布于 2020-10-26 14:38:23

文章被收录于专栏：技术进阶之路技术进阶之路

本文以一个后端开发人员的视角去总结 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：引入子组件；
created 和 mounted 都是钩子函数，他们都可以完成一些初始化操作，两者的区别在后面会再讲。
methods：定义自定的函数，在页面部分使用 @click="login()" 绑定要触发的函数。
watch：用来监视对象的变化，如 route 就是监视路由的变化，一旦发生变化就触发 handler 函数，nextTick 是一个回调函数，我们可以通过 _this.

关于 package.json 和 package-lock.json，前者是定义组件的版本号的：

"vue-router": "^3.4.6"

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

二、钩子函数

Vue 中的钩子函数有 created 和 mounted ：

二者的区别在于：

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"/>

其中绑定的 list 和 itemCount 都需要定义在 子组件 的 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 中定义的值。

$refs 是 vue 的内置属性，pagination 是组件的 name 值，它也可以用来调用方法，如：

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

六、执行流程

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/10/12 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

vue.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

javascript

vue.js

登录后参与评论

0 条评论

热度