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

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

监听属性

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

 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(){} ）

因为对这种监听还不是很能理解，看到菜鸟的一个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">
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的话，应该处理的就很复杂，因为改变之前还需要存起来..之类的。

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 会自动侦测并添加相应的前缀。

posted @ 2018-09-29 09:35 -xw 阅读(3900) 评论(4) 编辑收藏举报

刷新页面返回顶部

- xw -

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

公告