Vue+Element-UI快速搭建前端界面

Vue+Element-UI快速搭建前端界面

---

主要参考：

• Vue官方文档
• Element-UI官方文档

---

Vue主要使用总结

概述

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，因为其组件化的框架，还便于与第三方库或既有项目整合。

另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

组成

一个.vue文件主要分成三个层：template+script+style，在我的理解上，这其实是将html+js+css整合成一个组件，方便组件化，自底向上逐层设计。下面介绍几个项目开发中比较常用到的点：

v-model绑定数据

v-model是将view视图和持有的viewmodel数据给绑定起来的核心。参考样例：

<el-input class='login-input' v-model="loginForm.username" placeholder="用户名" autocomplete="off"></el-input>

data() {
   
    //...
    return {
   
        loginForm: {
   
            username: '',
            password: ''
        },
        //...
    };
}

比如这里就是将data数据中loginForm字典中username的值与view视图中的一个输入框显示内容双向绑定。无论是data端修改数据还是输入框在浏览器中修改输入，都会导致loginForm.username值的改变。

v-for循环构造

比如项目中要展示评论队列信息，我们可以不用一个个手动添加控件，我们使用一个v-for循环构造，示例：

<el-select v-model="userInfoForm.major" slot="prepend" placeholder="学院">
  <el-option v-for