vuejs不是API。vuejs是一套用于构建用户界面的渐进式JavaScript框架,旨在更好地组织与简化Web开发。而API是指应用程序编程接口,是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力。
本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。
vuejs不是API。
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架,旨在更好地组织与简化Web开发。 与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用(SPA)提供驱动。
Vue.js 还提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API,其目标是通过尽可能简单的 API 实现响应式的数据绑定和可组合的视图组件。
而API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。
vuejs中的一些API
vm指new Vue获取的实例
(1)当dom标签里的值和data里的值绑定后,更改data对应的值可以实时更新标签里的值;
但后续添加的值是无效的(绑定失败)。
(2)将可以将对象直接作为data的一个属性,是有效的(因为对象按值传递);
所以该属性和该对象是全等的;
(3)vm的接口有:
vm.$data是vm的data属性;
vm.$el是el属性指向的dom结点;
vm.$watch是监视属性变化(比如data里的值)(参照(九))
(4)vue实例的声明周期,有几个关键函数:
created:事件绑定结束后,函数直接在声明vue实例的时候,作为vue实例中的一个属性,下同。
vm.$mount:挂载dom结点;
beforeCompile:加载模板之前;
compiled:加载模板之后;
ready:完成之后(我猜的);
beforeDestroy:摧毁之前;
destroyed:摧毁之后;
(5)vm.$mount(挂载的id或者类名)
在new Vue实例的时候,不加el,则表示不挂载只生成,生成之后,可以通过该方法来手动挂载到某个地方,如果符合条件的有多个,则挂载到第一个地方;
(6)v-for遍历数组、对象,可以创建多个标签;比如用于创建表格;
(7)转义:{{}} 两个大括号,不会转义值的html标签;
{{{}}} 三个大括号,会将值的html标签转义,即变为html文本;
不能在值内再放入绑定数据(除非使用partials,但我还不会);
(8)在插值的大括号内,可以放入表达式(不能放函数);
(9)在插值的大括号内,加入管道符|,可以使用过滤器;
capitalize就是将首字母大写的过滤器;
过滤器只能放在表达式最后,不能成为表达式的一部分;
过滤器可以加参数;
过滤器可以自定义(但目前还不知道自定义的方法);
(10)指令:
v-if=”变量名” 当某个值为true时存在;
v-bind:属性名=”变量名” 将等号后的变量名(指向vm的data属性里的同名属性),和该标签的html属性绑定在一起。
v-on:事件类型=”函数名” 触发事件类型时,执行methods里的函数;
v-on的缩写是@;v-bind的缩写是:(冒号);
(11)计算属性computed
这里的属性,可以当做data属性里的使用;优点是data里的数值变更时,这里会跟着一起改变;
可以使用更复杂的表达式(插值里只能使用简单的表达式);
(12)计算属性的setter和getter
默认是getter(对象的get属性),即当某个值改变时,触发回调函数(或get方法);
当计算属性改变时,需要改变某些值(比如改变10个值,在其他地方写监听这个值就不好),那么则需要设置setter(对象的set属性),即当计算属性改变时,触发set方法;
(13)监视属性vm.$watch(被监视的属性, 回调函数)
监视的是data属性;
回调函数的第一个参数是改变后的值,第二个参数是改变前的值;
属性的值改变时触发;
(14)class绑定:
用v-bind:class
class使用对象形式,key为class类名,值表示是否显示这个class类;
可以直接将一个object对象放置在v-bind:class的值中,并将这个对象放置在data属性中,这样设置这个object对象的属性即可;
class的数组写法:数组里的成员为变量名,如果该变量不是object对象,则变量的值为类名;如果是对象时,对象的key是类名,值表示是否显示;
(15)style绑定:
用v-bind:style
形式是一个对象,对象的key是样式名(如fontSize,注意样式名需要采用驼峰式而不是css式),值是样式的值;
可以直接将对象名放在v-bind:style的等式右边;
对象的值改变,将实时影响内联样式;
对于某些样式,可以针对浏览器加前缀(但某些不能对所有浏览器兼容);