前言
因工作包含一部分的前端工作,所以博主又得开始学点前端技术来应付应付了。由于长时间没有接触前端了,发现自己连简单的CSS样式都忘得一干二净了,这可真叫一个伤心啊。不过,伤心归伤心,学就完事了!!
Vue简介
众所周知,现在的前端界可谓是三分天下,主要有React,Vue,Angular这三个主流框架,介于我们公司主要还是Vue用得多,所以学习的方向还是放在Vue上。我们知道,Vue是一种js框架,而传统的js框架如Jquery,是通过操作页面的dom元素来进行页面的刷新。但是Vue不同,它采用的是数据响应式来刷新页面,从而简化dom操作。首先让我们来看看Vue的基本指令吧。
Vue指令
Vue指令主要有v-text,v-html,v-on,v-show,v-if,v-bind,v-for,v-model等常用指令。接下来博主会介绍每个指令的详细用法。
v-text
v-text指令主要是设置标签的内容textcontent,默认的写法会替换全部内容,如"<span v-text=“data中定义的变量”></span>",如果想替换部分内容,可使用差值表达式{{}},如"<span>{{data中定义的变量}}</span>"。
v-html
v-html指令是设置元素的innerhtml,内容中又html结构都会被解析为标签。
v-html和v-text相比:v-text无论是否有html结构都会解析为文本。
v-on
v-on指令是为元素绑定事件,用法为:v-on:click=“method中的方法名”,其中v-on可以用@代替,如@click=“method中的方法名”。v-on绑定的方法是写在methods中的,在methods方法内部可以用this关键字访问定义在data中的元素。v-on中事件绑定的方法可以写成函数调用形式,传入自定义参数,同时“.”修饰符可以对事件进行限制,.enter的限制可以触发为回车的事件。
v-if和v-show
v-if指令和v-show指令从用法上来看都是根据真假来切换元素的显示状态,但是本质上两者有着不同之处:v-show是修改元素的display值实现隐藏,v-show指令里面的表达式会被解析为布尔值,值为true显示,值为false隐藏。而v-if指令是通过修改dom元素来实现隐藏,当v-if里的表达式为true时,元素存在于dom树中,为false时,元素从dom树中移除。
v-bind
v-bind指令可以为元素绑定属性,完整写法是v-bind:属性名。简写可以省略v-bind,只保留:属性名,使用class时采用对象显示如{active:isActive}。
v-for
根据数据生成列表结构,数组经常和v-for一起使用,语法是v-for="(item index)in data里的数据",其中item和index可以结合其他指令一起使用。数组长度更新会同步到页面上,是响应式改变表现内容。
v-model
v-model可以便捷的设置和获取表单元素的值,绑定的数据会和表单元素值相关联,绑定的数据和表单元素值修改某一个,另一个都会改变,是一种双向绑定。
axios
axios是vue封装好的ajax请求框架,可以使用post或get方式发送请求,使用方式为axios.get(“请求地址”).then(function(response){},function(err)),then方法中的回调函数会在请求成功或失败后触发,通过回调函数可以获取响应内容或错误信息。其中axios文档为:https://github.com/axios/axios。
当axios回调函数的this已经改变,无法访问到data中的数据,使用新的变量把this保存下来,回调函数中直接访问新变量即可。
尾言
vue指令主要就是这些了,下一节的话将会介绍利用骨架搭建vue项目,并且完成一个小项目。Let‘s study now !!