zoukankan      html  css  js  c++  java
  • 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)

  • 相关阅读:
    台州 OJ 3847 Mowing the Lawn 线性DP 单调队列
    洛谷 OJ P1417 烹调方案 01背包
    快速幂取模
    台州 OJ 2649 More is better 并查集
    UVa 1640
    UVa 11971
    UVa 10900
    UVa 11346
    UVa 10288
    UVa 1639
  • 原文地址:https://www.cnblogs.com/airen123/p/10036687.html
Copyright © 2011-2022 走看看