• vuejs API总结


    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的值。

    具体见代码:

    [html] view plain copy
    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;支持字符串的变化,如代码:

    [javascript] view plain copy
    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这个属性的值变化时所触发的。例如:

    [javascript] view plain copy
    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标签里:

    [html] view plain copy
    1. v-bind:class="{'green':a,'red':b}"  

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

    如代码:

    [html] view plain copy
    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里。

    方式:

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

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

    优点:

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

    如代码:

    [html] view plain copy
    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的数组语法和表达式:

    写法:

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

    效果:

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

    如代码:

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

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

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

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

    数组格式如下:

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

    data属性如下:

    [javascript] view plain copy
    1. data: {  
    2.     classG: "G",  
    3.     classR: true,  
    4.     classS: true  
    5. },  

    解释:

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

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

    ⑤绑定内联样式:

    格式:

    [html] view plain copy
    1. <div v-bind:style="{fontSize:TheSize}">内联样式</div>  

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

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

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

    [html] view plain copy
    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>  

    渲染结果是:

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

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

    ⑥内联样式的数组写法:

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

    例如:

    [html] view plain copy
    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下无需添加。

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

    在chrome浏览器下,变为:

        -webkit-filter: grayscale(1);

    在Edge浏览器下变为:

    filter: grayscale(1)

  • 相关阅读:
    字典常用操作复习
    列表常用方法复习
    爬虫流程复习
    协程解决素数
    yield 复习
    多线程复习2
    多线程复习1
    异常 巩固3
    logging日志基础示例
    2019最新百度网盘不限速下载教程
  • 原文地址:https://www.cnblogs.com/airen123/p/10036687.html
Copyright © 2020-2023  润新知