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>
js获取json的key和value</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=""
: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显⽰的为“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=""
:key="item.value"
:
value="item.value+' '+"
>
</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，下⾯我会⽤它与我的表格进⾏连接。
这是表格代码。
>
<el-table-column
label="标题">
<template slot-scope="scope">
<span>{{ w.title}}</span>
</template>
</el-table-column>
<el-table-column
label="ID">
<template slot-scope="scope">
<span>{{ w.id}}</span>
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<el-button @click="w.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。
>
<el-table-column
label="标题">
<template slot-scope="scope">
<span>{{ w.title}}</span>
</template>
</el-table-column>
<el-table-column
label="ID">
<template slot-scope="scope">
<span>{{ w.id}}</span>
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<el-button @click="w.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(){
<('/user',{
params:{
xx:'',
xxx:''
xxxx: Item('XXXX')
//可以写⼀个字符串常量也可以是⼀个函数或表达式。
//params的数量有多少看你的，实际上就是在⽹址后⾯携带这些参数。
//⽐如说我这样加得到的结果就是xxxxx/user?xx=''&xxx=''&xxxx="......"
//我的Item意思是我已经存了⼀个叫XXXX名字的session，现在将其取出。
},
}).then(request=>{
var Data=request.data//这句话意思就是请求数据。
tableData=Data.data//上去看图看到写在title,id前⾯的data了么？得到的就是它
})
}
我先是带着这些参数来到了user这个⽹站上（此⽹站就是个API接⼝），接着（then），我获取了这个API的数据，取出了它的data，放在了我的tableData⾥⾯。这个时候，你再打开你的项⽬，你已经能看到表格上密密⿇⿇的数据了，因为就在刚才，tableData中的数据到了我的w.title和w.id，并且根据title,id这两个名称（你可以在上⾯那个⽩⾊图中看到），为表格中的每⼀⾏分配了数据，这个时候，你点⼀下按钮吧，F12打开控制台，就能分别看到每⼀⾏数据对应的id了。el-table就说到这⾥。
那么其他的控件也感觉没有说的必要了，⾃⼰再去百度⼀下吧
⼆、CSS样式（⽤scoped覆盖原css样式）
vue中的css样式设定基本上跟html相同，元素中加⼊，或加⼊class="",class中的样式在<style>中定义，其语法与css相同。
<template>
</template>
<style>
//css写⼊位置
</style>
<script>
</script>
值得⼀提的是，在于element-ui的结合中，我们往往会觉得element-ui控件⼤⼩啊或者颜⾊字体等等样式不合适，那么我们需要对其进⾏样式穿透。但是样式穿透也是偶尔，⽐如下⾯这个代码，并不需要进⾏所谓的穿透，我可以通过style改变输⼊框内字体的⼤⼩。
<el-input
v-model="Text"
></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块状元素的⼤⼩。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。