element ui
element ui 在我的认知里,其是将我们实际要用到的标签放入已经定义了style的div标签中
下面是我的学习练习的emo细节,如果想直接到重点,请直接往下拖到最后
例子:(我想用一个好看点的输入框,不会前端的我只能找ui工具了…)
<el-input v-model="bookname" placeholder="请输入书名" style="width: 15%;"></el-input>
实际:(这个输入框的style都封装在了div的 class="el-input"属性中,以及input的class="el-input__inner"属性中,
忽略style="width: 15%;"这是我手动调节的输入框宽度)
<div class="el-input" style="width: 15%;">
<input type="text" autocomplete="off" placeholder="请输入书名" class="el-input__inner">
</div>
也就是说如果我们对el-input标签所做的所有操作,都会转变为对input标签的外层的div标签的操作,。
再举个例子:
在element的el-table-column标签中,如果需要用到管道,以下这两个方式都是错误的,是调用不到formatDate 这个过滤器的:(因为这样是绑定不到data区域里的变量的)
<el-table-column label="更新时间" prop="upDate|formatDate "></el-table-column>
<el-table-column label="更新时间" v-model="upDate|formatDate "></el-table-column>
想要调用到过滤器只能获取div中实际包裹的标签才行:
例如这样:(在el-table-colum标签内再定一个template 标签,slot-scope="scope"获取我们真正需要的对象,双引号内的名字可以自定义,这样获取到的对象就是我们想要的对象)
<el-table :data="search(keywords)" style="text-align:center">
<el-table-column label="更新时间" prop="upDate">
<template slot-scope="scope">
{
{
scope.row.upDate | formatDate }}
</template>
</el-table-column>
</el-table>
<!-- =================================我是分割线============================== -->
var vm = new Vue({
el: '#app',
data: {
id: '',
bookname: '',
author: '',
keywords: '',
upDate: '',
books: [{
id: 1,
bookname: '离骚',
author: '屈原',
upDate: new Date().getTime()
}...]}})
在单纯只用vue的时候,v-model="upDate|