vuejs总结:

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的等式右边;

对象的值改变,将实时影响内联样式;

对于某些样式,可以针对浏览器加前缀(但某些不能对所有浏览器兼容);

(16)①简单来说,假如data里面有属性a=1,然后你需要一个变量跟着a变化,例如b=a+1,那么就需要用到计算属性,Vue实例的computed属性中,设置b为其属性,其表现为一个函数,返回值是b的值。

具体见代码:

  1. <div id="app">
  2. <table>
  3. <tr>
  4. <td>a</td>
  5. <td>b=a+1</td>
  6. </tr>
  7. <tr>
  8. <td>{{a}}</td>
  9. <td>{{b}}</td>
  10. </tr>
  11. </table>
  12. <button @click="add">a = a + 1</button>
  13. </div>
  14. <script>
  15. var vm = new Vue({
  16. el: "#app",
  17. data: {
  18. a: 1
  19. },
  20. methods: {
  21. add: function () {
  22. this.a++;
  23. }
  24. },
  25. computed: {
  26. b: function () {
  27. return this.a + 1;
  28. }
  29. }
  30. })
  31. </script>

效果:

初始a的值为1,b的值为2。

点击按钮,会让a的值增加1(注意,没有动b的值)。

但由于b和a是相关的(这里的this.a指的是a),因此,在a的值改变后,b的值也会跟着改变。

之所以这么做,回想一下,Vuejs禁止在变量绑定时输入一个函数,因此如果表达式比较复杂,那么就必须这么做,好处是可以防止模板太重(放很大的表达式在模板中)。

②vm.$watch(“属性”, function(newVal, oldVal){

//回调函数的具体内容

})

用于观察Vue实例上的数据变动;

【1】可以监视data属性中的某个属性(比如上面的a);

【2】可以监视computed属性中,某个属性的值,例如上面的b;支持字符串的变化,如代码:

  1. var vm = new Vue({
  2. el: "#app",
  3. data: {
  4. a: 1
  5. },
  6. methods: {
  7. add: function () {
  8. this.a++;
  9. }
  10. },
  11. computed: {
  12. b: function () {
  13. var str = "";
  14. for (var i = 0; i < this.a; i++) {
  15. str += String(i);
  16. }
  17. return str;
  18. }
  19. }
  20. })
  21. vm.$watch("b", function (val) {
  22. alert(val);
  23. })

这里的监视b是有效的。

但假如b返回的是一个固定的字符串,或者值,那么则不会触发(因为值没有改变)

【3】另外,在$watch的回调函数中,第一个参数val的值是新值(即变动后的值),他也可以有第二个参数,而第二个参数的值是旧值(即变动前的值)。

【4】watch的回调函数里,this指向的是vm这个对象;

③setter

计算属性默认是getter(写作get),可以这么理解,他监视某个值,那个值变化时会触发这个回调函数;

但也可以设置为setter(写作set),setter和getter的区别在于,setter是当computed这个属性的值变化时所触发的。例如:

  1. <div id="app">
  2. <input v-model="firstName"/>
  3. <input v-model="lastName"/>
  4. <input v-model="fullName"/>
  5. </div>
  6. <script>
  7. var vm = new Vue({
  8. el: '#app',
  9. data: {
  10. firstName: 'Foo',
  11. lastName: 'Bar'
  12. },
  13. computed: {
  14. fullName: {
  15. // getter
  16. get: function () {
  17. return this.firstName + ' ' + this.lastName
  18. },
  19. // setter
  20. set: function (newValue) {
  21. var names = newValue.split(' ')
  22. this.firstName = names[0]
  23. this.lastName = names[names.length - 1]
  24. }
  25. }
  26. }
  27. })
  28. </script>

我们修改前两个输入框的值,将影响第三个输入框的值;

我们也可以修改第三个输入框的值,来影响前两个输入框的值。

另外,由于这种绑定形式,我们将无法让fullName的名字是三个单词,原因在于,set触发了lastName的改变(获取最后一个单词),而lastName的改变又会触发getter(将firstName和lastName拼接起来),因此只会保留第一个单词和最后一个单词。

(17)①简单来说,就是用一个变量来控制某个class是否存在与dom之中,这样不需要直接操纵dom的class属性。

如果不想要他影响某个属性,那么就将他放在class里面,而不是绑定的class里面。

具体方法如下,将以下内容放到html标签里:

  1. v-bind:class="{'green':a,'red':b}"

效果是,假如变量a的值是true(或者可以被隐式转换为true),那么class属性里则添加green,如果b为true,那么red也会被添加。注意,这二者不是互斥的。

如代码:

  1. <style>
  2. .green {
  3. background-color: green;
  4. }
  5. .red {
  6. background-color: red;
  7. }
  8. </style>
  9. <div id="app">
  10. <div v-bind:class="{'green':a,'red':b}">背景颜色</div>
  11. <button @click="change">变色</button>
  12. </div>
  13. <script>
  14. var vm = new Vue({
  15. el: '#app',
  16. data: {
  17. a: true,
  18. b: false
  19. },
  20. methods: {
  21. change: function () {
  22. this.a = !this.a;
  23. this.b = !this.b;
  24. }
  25. }
  26. })
  27. </script>

效果:

点击按钮可以变换a和b的值,从而可以带动class的变化,于是背景颜色也会变。

②另外一种绑定方法,将class的值放置在data里。

方式:

  1. <div v-bind:class="itsClass">背景颜色</div>
  2. //略
  3. data: {
  4. itsClass: {
  5. green: true
  6. }
  7. },

即将变量名放在指令里,然后通过修改属性的值来控制class

优点:

如果需要添加一个class时,只需要在变量里添加属性,并设置该属性为true即可。相对来说更加自由。

如代码:

  1. <div id="app">
  2. <div v-bind:class="itsClass">背景颜色</div>
  3. <button @click="change">变色</button>
  4. </div>
  5. <script>
  6. var vm = new Vue({
  7. el: '#app',
  8. data: {
  9. itsClass: {
  10. green: true
  11. }
  12. },
  13. methods: {
  14. change: function () {
  15. this.itsClass.green = false;
  16. this.itsClass.red = true;
  17. }
  18. }
  19. })
  20. </script>

点击按钮,虽然原本itsClass这个变量并没有red这个属性,但后续添加这个属性也会在该div里添加red这个class类名。所以,背景颜色从绿色变为红色。

进阶使用:

假如需要当一个值存在时,拥有特殊的样式,那么这个值的变量名可以和样式名一致,并通过这样的方式,当该值存在时,其被隐式转换为true,因此样式为我们需要的样式。

③class的数组语法和表达式:

写法:

  1. <div v-bind:class="[g,r?r:s]">颜色</div>

效果:

g、r、s都是变量名,使用的时候取该变量的值;

如代码:

  1. <style>
  2. .fontGreen {
  3. color: green;
  4. }
  5. .backRed {
  6. background-color: red;
  7. }
  8. .fontSize {
  9. font-size: 50px;
  10. }
  11. </style>
  12. <div id="app">
  13. <div v-bind:class="[g,r?r:s]">颜色</div>
  14. <button @click="change">变换</button>
  15. </div>
  16. <script>
  17. var vm = new Vue({
  18. el: '#app',
  19. data: {
  20. g: "fontGreen",
  21. r: "backRed",
  22. s: "fontSize"
  23. },
  24. methods: {
  25. change: function () {
  26. this.r = false;
  27. }
  28. }
  29. })
  30. </script>

首先他是数组,因此第一个g存在,因此他有样式名fontGreen,其次,是一个三元表达式,他会判断r的值,如果为true(或隐式转换为true),那么就绘将r的值添加到数组,否则添加s的值。

因此,初始表现是绿色红色背景;点击按钮后,显示的是绿色的大字体。

④在1.0.19+版本里,可以在数组语法中使用对象。

数组格式如下:

  1. <div v-bind:class="[classG, {R:classR,S:classS}]">颜色</div>

data属性如下:

  1. data: {
  2. classG: "G",
  3. classR: true,
  4. classS: true
  5. },

解释:

【1】    数组形式(如classG),需要放置的是变量名,类名是变量名的值;

【2】    对象形式(如{R:classR,S:classS}),对象的key是类名,value用于控制该类是否存在(true或者false);

⑤绑定内联样式:

格式:

  1. <div v-bind:style="{fontSize:TheSize}">内联样式</div>

【1】    首先,其内是一个对象,key为样式名(如fontSize),value为样式的值(如TheSize,他是data里面的一个变量);

【2】    其不是css,因此不能像css那样写,事实上是一个js的对象,需要采用驼峰写法(教程说可以用短横分隔符命名,但我失败了,例如font-size是不行的);

【3】    可以直接将变量(如果是一个有效对象)放置在这里,例如:

  1. <div id="app">
  2. <div v-bind:style="TheStyle">内联样式</div>
  3. </div>
  4. <script>
  5. var vm = new Vue({
  6. el: '#app',
  7. data: {
  8. TheStyle: {
  9. fontSize: "30px",
  10. color: "red",
  11. backgroundColor: "#aaa"
  12. }
  13. }
  14. })
  15. </script>

渲染结果是:

  1. <div style="font-size: 30px; color: red; background-color: rgb(170, 170, 170);">内联样式</div>

【4】    另外,假如绑定的对象的值被更改,那么内联样式也会被实时更改。

⑥内联样式的数组写法:

非常简单,使用数组,然后把对象放在其中即可。

例如:

  1. <div v-bind:style="[TheStyle, AnotherStyle]">内联样式</div>
  2. //略
  3. data: {
  4. TheStyle: {
  5. fontSize: "30px"
  6. },
  7. AnotherStyle: {
  8. color: "red",
  9. backgroundColor: "#aaa"
  10. }
  11. },

该div会自动合并两个对象的值并添加到标签中。

唯一需要注意的是,假如有一个对象的值是无效的,那么这个标签的其他对象的值也无法作用到标签上。

⑦内联样式的自动添加浏览器前缀适应:

最简单的例子,滤镜功能在chrome下是必须添加-webkit-前缀的,否则无效,但IE下无需添加。

  1. <div v-bind:style="TheStyle">内联样式</div>
  2. //略
  3. TheStyle: {
  4. filter: "grayscale(1)"
  5. }

在chrome浏览器下,变为:

-webkit-filter: grayscale(1);

在Edge浏览器下变为:

filter: grayscale(1)

vuejs API总结的更多相关文章

  1. 【S】【S】【S】一大波前端干货整合(一)

      前端交流站点 大前端       http://www.daqianduan.com/ V2EX       http://www.v2ex.com/ W3cplus    http://www. ...

  2. 急速JavaScript全栈教程

    3 天前  ·  3k 次阅读 急速JavaScript全栈教程 javascript node.js  mongodb 140 自从一年前发布了Vuejs小书的电子书,也有些日子没有碰过它们了,现在 ...

  3. vuejs目录结构启动项目安装nodejs命令,api配置信息思维导图版

    vuejs目录结构启动项目安装nodejs命令,api配置信息思维导图版 vuejs技术交流QQ群:458915921 有兴趣的可以加入 vuejs 目录结构 build build.js check ...

  4. vuejs全局api

    全局api set 增加数组 vm.$set 实例化方法 全局api delete 删除数组 vm.$delete 实例化方法 全局 api 组件component 实例化方法 components ...

  5. vuejs全局api概念

    什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在构造 ...

  6. VueJS第2天 初阅API(初识MarkDown)

    指令是带有前缀 v-,以表示它们是 Vue 提供的特殊特性.可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为 v-bind --> 数据绑定 v-for --> 循环 v- ...

  7. 使用vuejs框架进行列表渲染

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6170706.html 1.通过Script引入Vuejs框架 <script t ...

  8. Vuejs——(2)Vue生命周期,数据,手动挂载,指令,过滤器

    (八)传入的数据绑定 先创建一个对象(假如是obj),然后将他传入Vue实例中,作为data属性的值,那么 ①obj的值的变化,将影响Vue实例中的值的变化: ②相反一样: ③可以在Vue实例外面操纵 ...

  9. Vuejs使用笔记 --- component内部实现

    现在来系统地学习一下Vue(参考vue.js官方文档): Vue.js是一个构建数据驱动的web界面的库,其目标是实现响应的数据绑定和组合的试图组件. Vue.js拥抱数据驱动的视图概念,这意味着我们 ...

随机推荐

  1. (转)ashx 使用Session

    本文转载自:http://www.cnblogs.com/TivonStone/archive/2012/04/06/2434796.html 最近做一个项目,调用ashx文件,其中ashx文件里面有 ...

  2. springmvc----demo---login---bai

    web.xml配置: <?xml version="1.0" encoding="UTF-8"?> <web-app version=&quo ...

  3. Celery-4.1 用户指南: Optimizing (优化)

    简介 默认的配置做了很多折中考虑.它不是针对某个情况优化的,但是大多数情况下都工作的非常好. 基于一个特殊的使用场景,有很多优化可以做. 优化可以应用到运行环境的不同属性,可以是任务执行的时间,使用的 ...

  4. 渗透测试框架-Fsociety

    下载项目并赋予权限,打开 ┌─[root@sch01ar]─[/sch01ar] └──╼ #git clone https://github.com/Manisso/fsociety ┌─[root ...

  5. PHP中交换两个变量的值

    首先,采用php的list数据结构.上代码,然后再解析 function swap(&$a, &$b) { list ( $a, $b ) = array ($b, $a ); } l ...

  6. QT5提示can not find -lGL的解决方法

    这是由于 Qt5.0 默认将OpenGL加入了工程,但是在机器上没有安装OpenGL,所以jonas只需要在机器上安装OpenGL即可 .   安装建立基本编译环境 首先不可或缺的,就是编译器与基本的 ...

  7. EF事务封装

    public class EFTransaction:ITransaction { DbContextTransaction originalTransaction = null; MyDbConte ...

  8. dubbo错误排查之No provider available for the service

    今天搞的一个dubbo服务,暴漏出来了,但是consumer端启动就报这个错,排查过程记录一下 一.启动zkCli 利用命令查看 ls / ls /dubbo 继续查看 ls /dubbo/com.w ...

  9. 《Android应用性能优化》 第5章 多线程和同步

    1.DDMS中可以看见的系统线程(Andorid3.1的Galaxy Tab 10.1为例): main HeapWorker 执行finalize函数和引用对象清理 GC Garbage Colle ...

  10. 24-Fibonacci(dfs+剪枝)

    http://acm.hdu.edu.cn/showproblem.php?pid=5167 Fibonacci Time Limit: 2000/1000 MS (Java/Others)    M ...