Vue基础之指令部分

前言

因工作包含一部分的前端工作，所以博主又得开始学点前端技术来应付应付了。由于长时间没有接触前端了，发现自己连简单的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 ！！