vue入门使用
admin
2023-08-01 10:40:08
0

vue的介绍官网都很清楚,连接在此:http://cn.vuejs.org/v2/guide/

我是做java后端开发,对于前台的框架我理解都是像jquery这样的,引入一个js文件,就可以使用了,但用vue的时候却蒙了,又是安装又是编译的,不管怎么说折腾了一番也能使用了,记录一下

vue.js是处理页面数据渲染的,还有个vue-resource.js是处理和后台交互的,似乎大家都会两个配合使用,我开始不知道就用jquery出路交互的部分,做起来感觉vue.js多余又难受

对于页面每一块(一个大标签算一块)数据渲染,一个大标签里面的html代码为要显示的内容,都需要new Vue({

    el:'#xxx',

    data:{

        'key':'value'

    }

})

这样新创建一个vue对象,el后面#跟的是打标签的id属性,表示这个vue对象和这个大标签绑定,vue对象的属性key,是要在大标签内显示的数据,在显示的位置用`key`这种双大括号

所以整个流程就是这样的:

页面一加载就用Vue.http.get或者Vue.http.post发送请求(这个请求格式百度vue-resource的文档有很多介绍,这里就不再重复写了),拿到数据后,创建vue对象,把返回的数据给vue对象的data赋值,或者data中的key赋值(这取决于取数据的方式和返回数据的格式)

:返回数据是一个user对象(对象有name,mobile属性)

new Vue({

    el:'#example',

    data:response.body

})

response是返回成功的方法的参数(vue-resource请求来的数据放在response.body中,还有好多其他信息可以打印response出来看),

页面代码:

    `name` / `mobile`

这样就能显示出来user的信息


vue每创建一个对象都对应一个标签,同一个标签不需要重复创建vue对象,也就是这个vue对象是可以复用的,还是上面那个例子,如果经过修改操作信息要更新,在第一次创建vue对象的时候用一个变量去接收

var user;(申明全局变量)

...

user  = new Vue({

    el:'#example',

    data:response.body

})


全局变量user被赋值,需要修改的时候把新的值赋值给user

Vue.set(user,'name','newname');

Vue.set(user,'mobile','newmobile');

这样页面会显示新值,vue支持双向绑定,所以改变vue对象的属性值,与其绑定的标签显示值也会得到改变


还有一种常见的使用就是列表渲染,从后台取出一个user的集合,还是上面的user对象,现在我假设user多一个属性status,表示用户的在职状态,主要说明一个数据存储的是数字,在页面显示时用文字的情况

例:

页面的table中的代码:




    
        
        `emp`.`name`
        `emp`.`idcardno`
        `emp`.`mobile`
        `emp`.`email`
        在职
        休假
        离职
    



从后台请求成功后,js中代码:


table_employee_list = new Vue({
    el:'#table_employee_list',
    data:{
        'employee_list':emp_result.body
    }
});


v-for是遍历集合指令,emp是集合中单个对象,index是对象的排列序号,:class是给tr标签绑定class属性,后面的意思是index是偶数时class属性设置成active,是奇数时class属性设置成info,td标签后面三个都是用的v-if条件判断,他们三个只能有一个成立,所以这虽然是三个标签,但实际显示的时候只有一个,status是user的属性,而emp又代表单个user对象,所以这里用emp.status取值判断



上面记录的是我用vue时觉得卡住走弯路的地方,主要帮助和我一样刚接触vue的人,如果有vue老司机还不吝赐教。


相关内容

热门资讯

轻薄长续航加全能好屏,最值得买... 看最值得买的折叠屏手机推荐,核心要抓轻薄手感、续航底气、屏幕素质和AI办公完整度,这几项直接决定日常...
风声|肖鹰和蒋方舟的战争:警惕... 作者丨洪昭资深媒体评论员最近一周,清华大学肖鹰教授举报青年作家蒋方舟人大硕士论文造假一事持续霸榜热搜...
“调查因凡蒂诺”,72名欧洲议... 【环球网报道 记者 李梓瑜】据“政治新闻网”欧洲版报道,当地时间8日,72名欧洲议会议员联名致信欧盟...
内鬼受贿2千万致公司损失1个亿... 澎湃新闻记者 朱远祥经历两次立案、两次撤案之后,商人尚选玉近日被海南警方重新立案侦查。海口市公安局的...
加拿大载10名华人渔船离奇沉没... 加拿大不列颠哥伦布省一艘全是华人的商业海钓包船6月底出海后突然沉没。据悉,船上共有10人,均为华人,...
广西回应六蓝水库现状:水位下降... 今天,广西南宁防汛救灾发布会通报:位于横州市的六蓝、云表两座水库都建于1958年,属于中型水库,坝体...
干搜索12年,前百度老兵实话:... 入行12年,我算是妥妥的搜索圈老兵。毕业直接入职百度服务商公司,深耕搜索营销,前十年死磕SEO优化,...
一滴水的48载“长征” 48载俯身田间,一项项节水专利技术研发出来,一条条滴灌管线延伸开来,一片片作物丰腴起来。 48载,青...
河南移动:以“智为先”书写AI... 【大河财立方 记者 王楠 通讯员 王静】“智汇中原,数创未来”,2026河南省人工智能大会7月9日启...
原创 乱... 提效还是背锅? 定焦One(dingjiaoone)原创 作者 |金玙璠 陈丹 王汉星 李梦冉 雷晶...