VUE前端开发小结(2)

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

接上文，总结一些在接到需求后自己开发的过程中学到的前端 VUE 小知识点

这里主要总结一下 VUE 中的基本的语法

- v-bind

它的意思是：“将这个元素节点的 Title 和 Vue 实例中的的 message 属性保持一致”。即将两者绑定在了一起，随时改动前者，后者随时更新。

- v-if v-else v-else-if

这个比较简单，有了一般的开发语言知识的基础，很容易理解这是“如果”、“否则”的意思。
这里注意一点，如果想要在这类标签中判断相等，要使用 “===”。

- v-for

<div id="app"> 
    <li v-for="(item,index) in items"> 
    {{item.message}}---{{index}} 
</li> </div>

items 是数组，item 是数组每一项的别名。

- v-on

v-on 监听事件
事件有 Vue 的事件、和前端页面本身的一些事件。比如一个点击事件click 是 vue 的事件， 那么 click 就可以绑定到 Vue 中的 methods 中的方法事件。

我在画页面时，用的是 Element-UI(因为前辈们也是用的这个)，然后主要实现的效果就是将之前后台返回的 Service -- Model -- Monitors 三者之间的包含关系用类似菜单的形式展开来，最后只显示 Monitors 中的数据(这些数据要调用另一个接口来获取)。

所以我用了 Element-UI 中的导航菜单

<el-menu 
    default-active="2" 
    class="el-menu-vertical-demo" 
    @open="handleOpen" 
    @close="handleClose"> 
    <el-submenu index="1"> 
        <template slot="title"> 
            <i class="el-icon-location"></i> 
            <span>导航一</span> 
        </template> 
        <el-menu-item-group> 
            <template slot="title">分组一</template> 
            <el-menu-item index="1-1">选项1</el-menu-item> 
            <el-menu-item index="1-2">选项2</el-menu-item> 
        </el-menu-item-group> 
        <el-menu-item-group title="分组2"> 
            <el-menu-item index="1-3">选项3</el-menu-item> 
        </el-menu-item-group> 
        <el-submenu index="1-4"> 
            <template slot="title">选项4</template> 
                <el-menu-item index="1-4-1">选项1</el-menu-item> 
            </el-submenu> 
    </el-submenu> 
    <el-menu-item index="2">
        <i class="el-icon-menu"></i> 
        <span slot="title">导航二</span> 
    </el-menu-item> 
    <el-menu-item index="3" disabled> 
        <i class="el-icon-document"></i> 
        <span slot="title">导航三</span> 
    </el-menu-item> <el-menu-item index="4"> 
        <i class="el-icon-setting"></i> 
        <span slot="title">导航四</span> 
    </el-menu-item> 
</el-menu>

就是在这个的基础上改的........................