Vue.js入门

Vue.js入门

Vue.js是什么

是一个渐进式JavaScript快速开发框架、学习之前需要掌握的基础知识有：HTML、CSS、JavaScript、AJAX。它可以简化Dom操作（DOM(HTML Document Object Model)是什么），有响应式数据驱动特性。了解一个框架最好去看一下它的官网：Vue.js官网

面向初学者的教程可以看看这里：4个小时带你快速入门vue

API接口

环境

安装教程网上有很多了，直接去搜索即可。IDE选用WebStorm。

标签

1. v-text：作用是设置标签的文本值(textContent)。官网使用“插值表达式”（官网样例写法），表示为缩写{{ }}。
2. v-html：作用是设置标签的innerHTML。相对于v-text指令无论什么内容，都只会被解析为文本，不同之处在于内容中有html结构会被解析为标签。
3. v-on：作用是为元素绑定事件，传递自定义参数，事件修饰符。事件名不需要写on，指令可以简写为@，有@click、@dblclick、@keyup等，被绑定的方法在methods中，方法内部通过this关键字可以访问定义在data中的数据。事件绑定的方法写成函数调用的形式，可以传入自定义参数，定义方法时需要定义形参来接收传入的实参，世界的后面跟上“.修饰符”可以对事件进行限制，“.enter”可以限制触发的案件为回车。
4. v-show：作用是根据表达式的真假切换元素的显示和隐藏。原理是修改元素的display实现显示和隐藏，指令后面的内容最终都会解析为布尔值，值为true则显示元素，为false则隐藏元素。
5. v-if：作用是根据表达式的真假切换元素的显示和隐藏。它和v-show的不同在于它直接操纵dom元素（注意：操作dom元素对性能的消耗比较大，所以频繁操作应该用v-show），表达式的值为true时，元素存在于dom树中，为false时从dom树中移除。
6. v-bind：作用是设置元素的属性（属性名比如：src、title、class）。完整使用格式为“v-bind:属性名=表达式”，简写为“:属性名=表达式”。
7. v-for：作用是根据数据生成列表结构。数组经常和v-for结合使用，语法是(item,index) in 数据。item和index可以结合其他指令一起使用，数组长度的更新会通过不到页面上，是响应式的。
8. v-model：作用是便捷获取和设置表单元素的值（双向数据绑定）。绑定的数据会和表单元素值关联实现双向绑定。

Axios

Axios官网

纯本地应用基本已经很少了，所以前端基本都要连接网络，这就需要Vue.js有网络请求库的支持。网络请求库有axios、flyjs等，这里讲的是axios。

它帮助Vue结合网络数据开发应用。它功能单一，就是发送请求，所以容量很小，并且能很方便的和其它框架或者库结合。所以有axios+vue这个技术栈。

axios必须先导入才可以使用，使用get或post方法即可发送对应的请求，then方法中的回调函数会在请求成功或失败时触发，通过回调函数的形参可以获取响应内容或错误信息。

调试

1. console.log(?)：可以在前端控制台输出运行过程中的结果。
2. debugger：在