vuejs的标签和API总结

向右看齐 2022-05-24 04:45 257阅读 0赞

vuejs总结：

vm指new Vue获取的实例

①当dom标签里的值和data里的值绑定后，更改data对应的值可以实时更新标签里的值；

但后续添加的值是无效的（绑定失败）。

②将可以将对象直接作为data的一个属性，是有效的（因为对象按值传递）；

所以该属性和该对象是全等的；

③vm的接口有：

vm.$data是vm的data属性；

vm.$el是el属性指向的dom结点；

vm.$watch是监视属性变化（比如data里的值）（参照（九））

④vue实例的声明周期，有几个关键函数：

created：事件绑定结束后，函数直接在声明vue实例的时候，作为vue实例中的一个属性，下同。

vm.$mount：挂载dom结点；

beforeCompile：加载模板之前；

compiled：加载模板之后；

ready：完成之后（我猜的）；

beforeDestroy：摧毁之前；

destroyed：摧毁之后；

⑤vm.$mount(挂载的id或者类名)

在new Vue实例的时候，不加el，则表示不挂载只生成，生成之后，可以通过该方法来手动挂载到某个地方，如果符合条件的有多个，则挂载到第一个地方；

⑥v-for遍历数组、对象，可以创建多个标签；比如用于创建表格；

⑦转义：\{ \{\}\} 两个大括号，不会转义值的html标签；

\{ \{ \{\}\}\}  三个大括号，会将值的html标签转义，即变为html文本；

不能在值内再放入绑定数据（除非使用partials，但我还不会）；

⑧在插值的大括号内，可以放入表达式（不能放函数）；

⑨在插值的大括号内，加入管道符|，可以使用过滤器；

capitalize就是将首字母大写的过滤器；

过滤器只能放在表达式最后，不能成为表达式的一部分；

过滤器可以加参数；

过滤器可以自定义（但目前还不知道自定义的方法）；

⑩指令：

v-if=”变量名”           当某个值为true时存在；

v-bind:属性名=”变量名”             将等号后的变量名（指向vm的data属性里的同名属性），和该标签的html属性绑定在一起。

v-on:事件类型=”函数名”            触发事件类型时，执行methods里的函数；

v-on的缩写是@；v-bind的缩写是:（冒号）；

⑪计算属性computed

这里的属性，可以当做data属性里的使用；优点是data里的数值变更时，这里会跟着一起改变；

可以使用更复杂的表达式（插值里只能使用简单的表达式）；

⑫计算属性的setter和getter

默认是getter（对象的get属性），即当某个值改变时，触发回调函数（或get方法）；

当计算属性改变时，需要改变某些值（比如改变10个值，在其他地方写监听这个值就不好），那么则需要设置setter（对象的set属性），即当计算属性改变时，触发set方法；

⑬监视属性vm.$watch(被监视的属性, 回调函数)

监视的是data属性；

回调函数的第一个参数是改变后的值，第二个参数是改变前的值；

属性的值改变时触发；

⑭class绑定：

用v-bind:class

class使用对象形式，key为class类名，值表示是否显示这个class类；

可以直接将一个object对象放置在v-bind:class的值中，并将这个对象放置在data属性中，这样设置这个object对象的属性即可；

class的数组写法：数组里的成员为变量名，如果该变量不是object对象，则变量的值为类名；如果是对象时，对象的key是类名，值表示是否显示；

⑮style绑定：

用v-bind:style

形式是一个对象，对象的key是样式名（如fontSize，注意样式名需要采用驼峰式而不是css式），值是样式的值；

可以直接将对象名放在v-bind:style的等式右边；

对象的值改变，将实时影响内联样式；

对于某些样式，可以针对浏览器加前缀（但某些不能对所有浏览器兼容）；

## （十七）计算属性 ##

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

具体见代码：

\[html\]  [view plain][]   [copy][view plain]

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

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

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拼接起来），因此只会保留第一个单词和最后一个单词。

## （十八）Class和Style绑定 ##

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

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

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

\[html\]  [view plain][]   [copy][view plain]

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

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

如代码：

\[html\]  [view plain][]   [copy][view plain]

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

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

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

优点：

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

如代码：

\[html\]  [view plain][]   [copy][view plain]

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

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

效果：

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

如代码：

\[html\]  [view plain][]   [copy][view plain]

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

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

data属性如下：

\[javascript\]  [view plain][]   [copy][view plain]

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

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

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

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

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

⑥内联样式的数组写法：

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

例如：

\[html\]  [view plain][]   [copy][view plain]

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

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

在chrome浏览器下，变为：

\-webkit-filter: grayscale(1);

在Edge浏览器下变为：

filter: grayscale(1)

[view plain]: https://blog.csdn.net/qq20004604/article/details/52371029#