这个假期接触了网页前端的又一个利器,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,因为它和vue切合度最好。
以上是一个选择框的基本结构。:label(即v-bind:label="")等同于在
...
...
...
以上这个例子,因为data1初始值为1,所以:value的值为1,即:label显示的item.text为“A”,想要获取value值很容易,只要事件里加个console.log(data1),你就能在控制台里看到你选中元素的value值了。我刚才想了想,我不但想要获得value的值,还想获得text的值。。但是v-model只能绑定value中的值,也就是说我只能从v-model中获取一个数字。所以我想到了一个方法。
感觉有点傻,但是这样返回的data1就是1 A;2 B;3 C了,将得到的数据用正则表达式处理一下就好了吧,哈哈哈哈,不过这样赋初值不好赋,所以最好还是别一块取了,别的方法也可以,比如说再定义一个具有键值的数组,让<数组名>[1]="A",这样似乎是最好的办法。
一般,选择框离不开联动。在这里介绍一下两个选择框的联动。原来用C#实现表单联动,option得一个一个往里面加,拿vue的联动甚是简单啊!因为已经实现了数据绑定,所以添加一个事件,当select1中选择值等于x时,select2绑定的options数据整体发生变化,写一个数组即可实现。
看这个之前,你需要一个API。因为这个例子前端和后台分离,所以我衔接的是Django REST framework的API。我也用它举例。
看一下这张图。显然这是个json格式的数据列表。我现在只留下了title和id,下面我会用它与我的表格进行连接。
这是表格代码。
...
{{ scope.row.title}}
{{ scope.row.id}}
TellMe
...
...
解释一下我的代码。我这个表格有三列,分别是 标题、ID和一个写着TellMe的按钮。 这个按钮的作用就是告诉我表格该行内容的id。接着我要用Axios(一个类似于jQuery中ajax的东西)来获取我API中的数据。在后面的事件中还会有详细说明。但前提是,你已经配好了Axios。
...
{{ scope.row.title}}
{{ scope.row.id}}
TellMe
...
...
上面的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就说到这里。
那么其他的控件也感觉没有说的必要了,自己再去百度一下吧
vue中的css样式设定基本上跟html相同,元素中加入style="",或加入class="",class中的样式在
值得一提的是,在于element-ui的结合中,我们往往会觉得element-ui控件大小啊或者颜色字体等等样式不合适,那么我们需要对其进行样式穿透。但是样式穿透也是偶尔,比如下面这个代码,并不需要进行所谓的穿透,我可以通过style改变输入框内字体的大小。
el-input这个控件是一个
人工加入的style改变的是表层元素,也就是说是在
其实
(切记,element-ui添加style或class只修改表层元素)
内部穿透代码:
最好加入important,具有更高的优先级。如何找到需要覆盖的css样式?打开node_modules,找到[email protected]@element-ui,点进去打开lib文件夹下theme-default中的input.css,这是el-input默认样式,然后根据自己想要的功能查找对应css,比如这个例子中我会用Ctrl-F搜索height,找到对应的css(有时这是个漫长的过程),之后覆盖。(新样式 和 原样式 名字不能相同,如不能.el-textarea__inner >>> .el-textarea__inner这样会出错)
查看如何覆盖时,最好的办法是F12查看后台渲染,找到真正的内层元素!!
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;
前后端分离,默契很重要!看这个之前,你先需要一个前后端分离后的中间产物API
在我做前端的时候,在这上面花的时间最长。有的时候我前端修改新增数据,跑出来一个500 internet server error,我检查代码的语法感觉都是对的,(自动忽略我把method写成methods那个智商被狗吃了的错误。)但数据就是put post不上去,我又怀疑过服务器的跨域问题,但最终也没能解决。后来发现是我的数据传输格式问题。API中要求是int类型,我却传字符串类型等等。(所以说即便错误信息是服务器错误,也有可能是前端问题)
因为后台数据库不是我写的,API也不是我生成的,我就简单说说前端代码格式。
axios.get('',{
params:{
xx:'',
xxx:'' //如登录信息
},
}).then(request=>{
var Data=request.data
<变量>=Data.
})
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('',
{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这些,更多使用的是语法糖。觉得自己以后还可以更加深入地去理解下它的原理方面的知识。