vue.js使用心得——el-select，el-table数据处理，css样式穿透以及增删改查

    这个假期接触了网页前端的又一个利器，vue.js,它的主要特点在于对数据的双向绑定。想想之前用最原始的js的时候，我们更改页面上的数据，经常会用到InnerHTML，getElementById的代码，它实际上是在对DOM元素进行添加或修改，包括jQuery,也是通过查找页面源代码中的DOM标签，达到了动态效果的实现，当我们确定要对页面上某一元素进行修改的时候，会用id或name 进行元素查找，然后再找到它对应的value，text去改变它的值。但接触了vue.js之后我再也没有对元素添加过id和name，而是大部分在使用v-bind v-on还有语法糖v-model,以及{{}}。下面的文章中都会有所提到。我主要从 控件 方面，CSS 方面，以及 事件 三方面说起。

一、element-ui控件

组件用的是element-ui，因为它和vue切合度最好。

el-select（选择框）

<el-select v-model="">
    <el-option v-for=""
    :label=""
    :key=""
    :value=""
    >
    </el-option>
</el-select>

以上是一个选择框的基本结构。:label(即v-bind:label="")等同于在<el-option>标签之间写{{}}，但也不完全一样，:label还有一个功能，就是在select框内显示初始值，因为是单向绑定数据。value表示的是select框展开后的每一选项的值。v-model和value实现双向绑定。总而言之，当用户点击选择框选项时，vue通过用户点击的选项的索引值，先改变value与label,因为v-model与value双向绑定，所以value是什么值，v-model就对应是什么值，这样v-model中对应的data1就改变了。

<template>
...
<el-select v-model="data1">
    <el-option v-for="item in options"
    :label="item.text"
    :key="item.value"
    :value="item.value"
    >
    </el-option>
</el-select>
...
</template>
...
<script>
...
export default{
    data(){
        return{
            data1:1,
            options:[
            {value:1,text:"A"},
            {value:2,text:"B"},
            {value:3,text:"C"}
            ]
        }    
    }
}
</script>

以上这个例子，因为data1初始值为1，所以:value的值为1，即:label显示的item.text为“A”,想要获取value值很容易，只要事件里加个console.log(data1),你就能在控制台里看到你选中元素的value值了。我刚才想了想，我不但想要获得value的值，还想获得text的值。。但是v-model只能绑定value中的值，也就是说我只能从v-model中获取一个数字。所以我想到了一个方法。

<el-select v-model="data1">
    <el-option v-for="item in options"
    :label="item.text"
    :key="item.value"
    :value="item.value+' '+item.text"
    >
    </el-option>
</el-select>

感觉有点傻，但是这样返回的data1就是1 A;2 B;3 C了，将得到的数据用正则表达式处理一下就好了吧，哈哈哈哈，不过这样赋初值不好赋，所以最好还是别一块取了，别的方法也可以，比如说再定义一个具有键值的数组，让<数组名>[1]="A",这样似乎是最好的办法。

一般，选择框离不开联动。在这里介绍一下两个选择框的联动。原来用C#实现表单联动，option得一个一个往里面加，拿vue的联动甚是简单啊！因为已经实现了数据绑定，所以添加一个事件，当select1中选择值等于x时，select2绑定的options数据整体发生变化，写一个数组即可实现。

el-table（表格）

看这个之前，你需要一个API。因为这个例子前端和后台分离，所以我衔接的是Django REST framework的API。我也用它举例。

看一下这张图。显然这是个json格式的数据列表。我现在只留下了title和id,下面我会用它与我的表格进行连接。

这是表格代码。

<template>
...
<el-table 
        :data="tableData"
        >        
        <el-table-column
        label="标题">
        <template slot-scope="scope">
            <span>{{ scope.row.title}}</span>
        </template>
        </el-table-column>

        <el-table-column
        label="ID">
        <template slot-scope="scope">
            <span>{{ scope.row.id}}</span>
        </template>
        </el-table-column>
     
        <el-table-column>
            <template slot-scope="scope">
                <el-button @click="TellMeId(scope.row.id)">TellMe</el-button> 
            </template>
        </el-table-column>
</el-table>
...
</template>
...
<script>
...
export default{
    data(){
        return{
           tableData:[] 
        }
    },
    methods:{
        TellMeId(num){
            console.log(num)
        }
    }
}
...
</script>

解释一下我的代码。我这个表格有三列，分别是 标题、ID和一个写着TellMe的按钮。 这个按钮的作用就是告诉我表格该行内容的id。接着我要用Axios(一个类似于jQuery中ajax的东西)来获取我API中的数据。在后面的事件中还会有详细说明。但前提是，你已经配好了Axios。

<template>
...
<el-table 
        :data="tableData"
        >        
        <el-table-column
        label="标题">
        <template slot-scope="scope">
            <span>{{ scope.row.title}}</span>
        </template>
        </el-table-column>

        <el-table-column
        label="ID">
        <template slot-scope="scope">
            <span>{{ scope.row.id}}</span>
        </template>
        </el-table-column>
     
        <el-table-column>
            <template slot-scope="scope">
                <el-button @click="TellMeId(scope.row.id)">TellMe</el-button> 
            </template>
        </el-table-column>
</el-table>
...
</template>
...
<script>
...
export default{
    data(){
        return{
           tableData:[] 
        }
    },
    methods:{
        TellMeId(num){
            console.log(num)
        },
        init(){
            
        }
    },
    mounted(){
        this.init()
    }
    //mounted--钩子函数，一来到该页面即执行，这里面让其执行init()函数。
}
...
</script>

上面的init()函数还是空的，我们让它使用Axios从那个API上获取我想要的数据。init()函数，我这样写。

init(){
    axios.get('/user',{
        params:{
            xx:'',
            xxx:''
            xxxx: sessionStorage.getItem('XXXX')
            //可以写一个字符串常量也可以是一个函数或表达式。
            //params的数量有多少看你的，实际上就是在网址后面携带这些参数。
            //比如说我这样加得到的结果就是http://xxxxx/user?xx=''&xxx=''&xxxx="......"
            //我的sessionStorage.getItem意思是我已经存了一个叫XXXX名字的session，现在将其取出。           
        },
    }).then(request=>{
            var Data=request.data//这句话意思就是请求数据。
            tableData=Data.data//上去看图！！！看到写在title,id前面的data了么？得到的就是它
        })
}

我先是带着这些参数来到了user这个网站上（此网站就是个API接口），接着（then），我获取了这个API的数据，取出了它的data，放在了我的tableData里面。这个时候，你再打开你的项目，你已经能看到表格上密密麻麻的数据了，因为就在刚才，tableData中的数据找到了我的scope.row.title和scope.row.id，并且根据title,id这两个名称（你可以在上面那个白色图中看到），为表格中的每一行分配了数据，这个时候，你点一下按钮吧，F12打开控制台，就能分别看到每一行数据对应的id了。el-table就说到这里。

那么其他的控件也感觉没有说的必要了，自己再去百度一下吧

二、CSS样式（用scoped覆盖原css样式）

vue中的css样式设定基本上跟html相同，元素中加入style="",或加入class="",class中的样式在<style>中定义，其语法与css相同。

<template>
</template>
<style>
//css写入位置
</style>
<script>
</script>

值得一提的是，在于element-ui的结合中，我们往往会觉得element-ui控件大小啊或者颜色字体等等样式不合适，那么我们需要对其进行样式穿透。但是样式穿透也是偶尔，比如下面这个代码，并不需要进行所谓的穿透，我可以通过style改变输入框内字体的大小。

<el-input
v-model="Text"
style="font-size:20px;"
></el-input>

el-input这个控件是一个<div>与<input>的组合，在F12下它变成了这个样子。

<div class="el-input">
    <input autocomplete="off" type="text" rows="2" validateevent="true" 
     class="el-input__inner"/>
</div>

人工加入的style改变的是表层元素，也就是说是在<div>标签中加入了style,而不是在<input>中加入style。那么什么时候加入style有作用，什么时候加入style无用呢？

其实 <div>中加入的style使得<div>内部包裹的元素的字体，字号大小发生改变，即此时，<div>中的style覆盖了input中的style。所以当<div>与<input>属性不冲突的时候我可以直接加style进行覆盖。但是发生冲突的时候。比如说<div>中有height这个样式属性,<input>中也有，这个时候我想更改input框的大小，就必须进行样式的内部穿透。不然修改的就是div块状元素的大小。

（切记，element-ui添加style或class只修改表层元素）

内部穿透代码：

<style scoped>
.inputCSS >>> .el-input__inner{
    height:40px !important;
}
</style>
<style>
//书写普通的css
</style>

最好加入important,具有更高的优先级。如何找到需要覆盖的css样式？打开node_modules，找到_element-ui@1.4.13@element-ui，点进去打开lib文件夹下theme-default中的input.css，这是el-input默认样式,然后根据自己想要的功能查找对应css，比如这个例子中我会用Ctrl-F搜索height,找到对应的css（有时这是个漫长的过程），之后覆盖。（新样式 和 原样式 名字不能相同，如不能.el-textarea__inner >>> .el-textarea__inner这样会出错）

查看如何覆盖时，最好的办法是F12查看后台渲染，找到真正的内层元素！！

三、事件

（1）this.$router.push带参数跳转内链页面

this.$router.push不可跳转外链，必须先在router中的index.js中进行配置。配置过程略。

例子：（两种方式也有很大区别，第一种参数不会写在你网页上方的url中，第二种会以?token=XXXX&id=xxxx的方式连接在url后面）

//它有两种传参方式。

//第一种
//（传数据）
this.$router.push({name: '<写router中配置的name>',
                   params: {
                            token: XXXX,
                            id:xxxx
                            }})
//（取数据）
this.$route.params.id;
this.$route.params.token;     //一般来说，$router后接方法，$route后接属性。

//第二种
//(传数据)
this.$router.push({path: '<写router中配置的path>',
                   query: {
                            token: XXXX,
                            id:xxxx
                            }})
//(取数据)
this.$route.query.id;
this.$route.query.token; 

（2）Axios的增删改查

前后端分离，默契很重要！看这个之前，你先需要一个前后端分离后的中间产物API

在我做前端的时候，在这上面花的时间最长。有的时候我前端修改新增数据，跑出来一个500 internet server error，我检查代码的语法感觉都是对的，（自动忽略我把method写成methods那个智商被狗吃了的错误。）但数据就是put post不上去，我又怀疑过服务器的跨域问题，但最终也没能解决。后来发现是我的数据传输格式问题。API中要求是int类型，我却传字符串类型等等。（所以说即便错误信息是服务器错误，也有可能是前端问题）

因为后台数据库不是我写的，API也不是我生成的，我就简单说说前端代码格式。

获取数据

axios.get('<api url>',{
        params:{
            xx:'',
            xxx:'' //如登录信息
               },
   }).then(request=>{
            var Data=request.data
            <变量>=Data.<api中的键>
       })

增加数据

axios.request(
                url:"",
                params:{//url上要携带的参数 按照键 值写好
                       },
                method:'POST',
                data:{//要新增的数据 按照键 值写好
                     }
                ).then(response=>{
                    //新增成功传回来的信息。
                    this.$message({message:response.data.msg, type:'success'})
                    })

修改数据

axios.request(
                url:"",
                params:{//url上要携带的参数 按照键 值写好
                       },
                method:'PUT',
                data:{//要修改的数据 按照键 值写好 必须写全（没改的也写）！！
                     }
                ).then(response=>{
                    //新增成功传回来的信息。
                    this.$message({message:response.data.msg, type:'success'})
                    })

删除数据

this.$confirm('即将删除',
              '提示',
               {
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'warning'
                }).then(()=>{
                    axios.delete('<url>',
                                  {params:{//想要删除的数据 如 id:''
                                          }}
                    
                        ).then(response=>{
                              this.$message({message: response.data.msg, type : 'success'})
                                })
                }).catch(()=>{
                        this.$message({
                            type:'info',
                            message:'删除取消'
                                })
                         })

以上是一个带有提示框的删除数据代码，点击取消或者×都被catch捕捉到。给出信息。

前端的增删改查最需要注意的就是提交数据的数量及格式，格式一定要和数据库存储格式相同。

这个假期懂得了很多，但也不能说完全明白了其原理。比如我对它独具特色的生命周期了解的并不深入，大多数事件的添加也是用的element-ui里的说明，很少自己用v-bind,v-on绑定数据加入事件，也很少使用v-for,v-if这些，更多使用的是语法糖。觉得自己以后还可以更加深入地去理解下它的原理方面的知识。