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:在
posted @ 2020-02-01 10:48  keep250  阅读(151)  评论(0编辑  收藏  举报