vue入门(二) ——监听属性，样式绑定

时间 2019-11-16

标签 vue 入门监听属性样式绑定繁體版

原文原文链接

感受写博客好麻烦的.... 有的很小的知识点，我看的时候是记在笔记本上的，可是如今要再用博客写一遍，就会整理好久，就想着干脆简单一点写一点笼统的。以及一些须要时间思考的代码，写出逻辑javascript

监听属性css

用$watch响应数据变化学vue最大的感受就是感受不少指令啊属性啊跟监听是同样的意思，都能实时的感觉到数据，交互性能真的很好，可是久了会有点难区分区别, 先看下面这个例子，是菜鸟给的第一个最简单的例子html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
 6 <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
 7 </head>
 8 <body>
 9 <div id = "app">
10  <p style = "font-size:25px;">计数器: {{ counter }}</p>
11  <button @click = "counter++" style = "font-size:25px;">点我</button>
12 </div>
13 <script type = "text/javascript">
14  var vm = new Vue({
15     el: '#app',
16     data: {
17        counter: 1
18     }
19  });
20  vm.$watch('counter', function(nval, oval) {
21     alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
22  });
23 </script>
24 </body>
25 </html>

在button按钮给了一个click事件绑的counter++ ，即直接点击就counter++，这个时候 counter的监听那些指令就作不到了，由于它不是在js逻辑里加一，而是在button直接++了，因此能够用watch来响应数据变化前与变化后。（这里的代码形式是 vm.$watch(){} ）vue

由于对这种监听还不是很能理解，看到菜鸟的一个demo是这样的：java

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
 6     <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
 7 </head>
 8    <body>
 9       <div id = "computed_props">
10          公里 : <input type = "text" v-model = "kilometers">
11          米 : <input type = "text" v-model = "meters">
12       </div>
13        <p id="info"></p>
14       <script type = "text/javascript">
15          var vm = new Vue({
16             el: '#computed_props',
17             data: {
18                kilometers : 0,
19                meters:0
20             },
21             methods: {
22             },
23             computed :{
24             },
25             watch : {
26                kilometers:function(val) {
27                   this.kilometers = val;
28                   this.meters = val * 1000;
29                },
30                meters : function (val) {
31                   this.kilometers = val/ 1000;
32                   this.meters = val;
33                }
34             }
35          });
36          // $watch 是一个实例方法
37         vm.$watch('kilometers', function (newValue, oldValue) {
38             // 这个回调将在 vm.kilometers 改变后调用
39             document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
40         })
41       </script>
42    </body>
43 </html>

而后我想了一下，我以为v-model也能够作到，就本身写了一个同样功能的demo：数组

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
 6     <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
 7 </head>
 8    <body>
 9       <div id = "computed_props">
10          公里 : <input type = "text" v-model = "kilometers" v-on:input="ki">
11          米 : <input type = "text" v-model = "meters" v-on:input="me">
12       </div>
13 
14       <script type="text/javascript">
15          var vm = new Vue({
16             el:'#computed_props',
17             data:{
18                kilometers:0,
19                meters:0
20             },
21             methods:{
22                ki: function(){
23                   this.meters = this.kilometers*1000
24                },
25                me: function(){
26                   this.kilometers = this.meters/1000
27                }
28             }
29          })
30       </script>
31    </body>
32 </html>

首先 v-on 一开始感受只见到了跟click搭配，可是我这里是想当我在input框里输值的时候触发事件，因此查了一下，能够v-on:input ，若是我是在公里那里触发事件，那我就处理meter的值，对米的触发同理缓存

watch监听的区别就是，我监听它，而且保持了他们之间的数量关系，就不须要我触发事件这种事情，它会时刻监听，不须要特别的去处理数据，且watch是有两个参数的，就能够获得以前的值和后来改变以后的值。因此若是这种状况要用v-model的话，应该处理的就很复杂，由于改变以前还须要存起来..之类的。app

ps: 非vue的时候，有一个是oninput 跟click一个意思，就是输入的时候触发事件，可是在vue里这样写是没有做用的，且@oninput v-on:oninput 都是不能够的函数

看了一下别人的博客，讲一下本身对于watch method co的区别的理解和别人的博客理解（捂脸...又照搬，看着口语化的部分就是我写的可能）性能

computed：计算属性将被混入到 Vue 实例中。全部 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
methods：methods 将被混入到 Vue 实例中。能够直接经过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
watch：是一种更通用的方式来观察和响应 Vue 实例上的数据变更。一个对象，键是须要观察的表达式，值是对应回调函数。值也能够是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每个属性。

computed 计算属性，是页面加载以后就能够执行的，赋值什么的（给我一种onload函数的感受，我也不是很清楚）

methods 是要触发才执行的一些函数如上述代码里的

watch就是响应数据变化，对应一个对象，键是观察表达式，值是对应回调。值也能够是方法名，或者是对象，包含选项。

因此他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。（由于这个时候早就加载完了）

最类似的就是watch和computed，他们两个对数据都挺敏感，当某一个数据（称它为依赖数据）发生变化的时候，全部依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变更。

computed 计算属性只有在相关的数据发生变化时才会改变要计算的属性，当相关数据没有变化是，它会读取缓存。而没必要想 motheds方法和 watch 方法是的每次都去执行函数。因此有一些数据响应仍是用computed会更好（人家博客的例子）

样式绑定

class属性绑定：（其实在上一篇里提到了一个demo v-bind的那个）

v-bind:class 设置对象，能够动态的切换class true就绑定这个选择器，用这种样式

也能够在对象中传入更多属性用来动态切换多个 class 。跟绑定一个有一点点区别，贴上代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
 6 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
 7 <style>
 8 .active {
 9     width: 100px;
10     height: 100px;
11     background: green;
12 }
13 .text-danger {
14     background: red;
15 }
16 </style>
17 </head>
18 <body>
19 <div id="app">
20   <div class="static"  v-bind:class="{ 'active': isActive,'text-danger': hasError }">
21   </div>
23 </div>
24 
25 <script>
26 new Vue({
27   el: '#app',
28   data: {
29     isActive: true,
30     hasError: true
31   }
32 })
33 </script>
34 </body>
35 </html>

第20行是想对两个选择器都切换，若是都是true就至关于

1 <div class="static active text-danger"></div

的意思，可是active能够加引号，也能够不加，通过实践，后面的那个选择器必须得加引号。

也能够直接绑定数据里的一个对象：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
 6 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
 7 <style>
 8 .active {
 9     width: 100px;
10     height: 100px;
11     background: green;
12 }
13 .text-danger {
14     background: red;
15 }
16 </style>
17 </head>
18 <body>
19 <div id="app">
20   <div v-bind:class="classObject"></div>
21 </div>
22 
23 <script>
24 new Vue({
25   el: '#app',
26   data: {
27     classObject: {
28       active: true,
29       'text-danger': true
30     }
31   }
32 })
33 </script>
34 </body>
35 </html>

我乍一看的时候，忽然有点看不太懂。如今这个意思就是我直接绑了个classObject（说到了这个，以前看书的时候想起来有个地方驼峰写法会自动转化为），而后把以前那两个选择器放在data下面classObject里

也能够在这里绑定返回对象的计算属性，进阶版demo：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
 6 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
 7 <style>
 8 .active {
 9     width: 100px;
10     height: 100px;
11     background: green;
12 }
13 .text-danger {
14     background: red;
15 }
16 </style>
17 </head>
18 <body>
19 <div id="app">
20   <div v-bind:class="classObject"></div>
21 </div>
22 
23 <script>
24 new Vue({
25   el: '#app',
26   data: {
27   isActive: true,
28   error: null
29   },
30   computed: {
31     classObject: function () {
32       return {
33         active: this.isActive && !this.error,
34         'text-danger': this.error && this.error.type === 'fatal',
35       }
36     }
37   }
38 })
39 </script>
40 </body>
41 </html>

==用于通常比较，===用于严格比较，==在比较的时候能够转换数据类型，===严格比较，只要类型不匹配就返回flase。

能够看到这里，data里没有我所要的选择器，只有一些判断用的值（我不知道怎么描述）而后我经过return的时候计算属性，（即 this.谁谁巴拉巴拉）而后给选择器真或假，至于绑定仍是用的classObject 返回对象的计算属性。（说它是经常使用且强大的计算模式，我暂时想不到它能够干吗用，还没想到他有啥很好的地方）

能够把一个数组传给 v-bind:class 这个很容易理解，activeClass, errorClass所对应的类名在data里会赋值的，就不涉及true false 直接类

1 <div v-bind:class="[activeClass, errorClass]"></div>

三元来作这个切换也能够

1 <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>//errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类

能够在 v-bind:style 直接设置样式（内联）

1 <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>

也能够直接绑定到一个样式对象，v-bind:style 也可使用数组将多个样式对象应用到一个元素上

注意：当 v-bind:style 使用须要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。