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

末蓝、 2022-12-13 11:22 123阅读 0赞

> 本文以一个后端开发人员的视角去总结 `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.$route.name` 获取路由的名字。

关于 `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` 的内容通常如下：

其中 `<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` 一样，直接调用具体的请求方法即可。

我们也可以使用 `axios` 制作拦截器：

axios.interceptors.request.use(function (config) { 
      console.log("请求: ",config);
      return config;
    }, error => { });
    
    axios.interceptors.response.use(function (response) { 
      console.log("返回结果: ", response);
      return response;
    }, error => { });

请求过来的参数通常是数组，我们可以通过遍历的方式获取其中的值，还可以使用 `filter` 过滤，这里的例子使用过滤只获取当前课程的讲师。

<div v-for="teacher in teachers.filter(t => { return t.id === course.teacherId })"
          class="profile-activity clearfix">
       <div>
         <img v-show="!teacher.image" class="pull-left" src="/ace/assets/images/avatars/avatar5.png">
         <img v-show="teacher.image" class="pull-left" v-bind:src="teacher.image">
         <a class="user" href="#"> { { teacher.name}} </a>
         <br>
         { { teacher.position}}
       </div>
     </div>

## 五、父子组件传值 ##

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

<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);

## 六、执行流程 ##

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0MTM2NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/d7bf95ea99164258a5ca2f4fc1f30ec7.png