[转]vue数据绑定(数据,样式,事件)

时间  2019-12-07
标签 vue 数据 绑定 样式 事件 繁體版
原文   原文链接

1.mounted 与 methods 与 computed 与 watched区别

From:https://blog.csdn.net/qinlulucsdn/article/details/80473382html

首先讲一下vue的生命周期前端

beforecreate : 举个栗子：能够在这加个loading事件 vue

created ：在这结束loading，还作一些初始化，实现函数自执行   （data数据已经初始化 可是 dom结构渲染完成 组件没有加载）git

mounted ： 在这发起后端请求，拿回数据，配合路由钩子作一些事情  （dom渲染完成 组件挂载完成 ）github

beforeDestroy： 你确认删除XX吗？（简单来讲  就是组件还存在）chrome

 destroyed ：当前组件已被删除，清空相关内容  （组件已经销毁 ）express

 

因此说  mounted 是生命周期方法之一，会在对应生命周期时执行。json

而   methods 是Vue实例对象上绑定的方法，供当前Vue组件做用域内使用，未调用不会执行。后端

而 computed 是计算属性  属性 method是 方法 api

在使用时   computed函数直接使用  method须要加上（）【如method（）】来执行 

computed计算的结果若是不发生改变就不会触发。而methods中通常都是定义的须要事件触发的一些函数。每次只要触发事件，就会执行对应的方法。若是把computed中的方法写到method中会浪费性能。computed必须返回一个值页面绑定的才能取得值，而methods中能够只执行逻辑代码，能够有返回值，也能够没有。

对于watched 属性 监听 须要本身手动去写监听的值 会大大的浪费必定性能去作监听这种事情 不像computed是自动的

 

 

2.1. 什么是双向绑定？

From:https://www.cnblogs.com/fly_dragon/p/6218675.html

Vue框架很核心的功能就是双向的数据绑定。 双向是指：HTML标签数据 绑定到 Vue对象，另外反方向数据也是绑定的。通俗点说就是，Vue对象的改变会直接影响到HTML的标签的变化，并且标签的变化也会反过来影响Vue对象的属性的变化。
这样以来，就完全变革了以前Dom的开发方式，以前Dom驱动的开发方式尤为是以jQuery为主的开发时代，都是dom变化后，触发js事件，而后在事件中经过js代码取得标签的变化，再跟后台进行交互，而后根据后台返回的结果再更新HTML标签，异常的繁琐。有了Vue这种双向绑定，让开发人员只须要关心json数据的变化便可，Vue自动映射到HTML上，并且HTML的变化也会映射回js对象上，开发方式直接变革成了前端由数据驱动的 开发时代，远远抛弃了Dom开发主导的时代了。

2.2. Vue绑定文本

数据绑定最多见的形式就是使用 “Mustache” 语法（双大括号）的文本插值，好比模板引擎：handlebars中就是用的{{}}.
建立的Vue对象中的data属性就是用来绑定数据到HTML的。参考以下代码：

<span>Message: {{ msg }}</span>
<script>
  var app = new Vue({         // 建立Vue对象。Vue的核心对象。
    el: '#app',               // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
    data: {                   // data: 是Vue对象中绑定的数据
      msg: 'Hello Vue!'   // message 自定义的数据
    }
  });
</script>

2.3. 绑定数据中使用JavaScript表达式

对于全部的数据绑定， Vue.js 都提供了彻底的 JavaScript 表达式支持。

<span>Message: {{ msg + ' - ' + name }}</span>
<script>
  var app = new Vue({         // 建立Vue对象。Vue的核心对象。
    el: '#app',               // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
    data: {                   // data: 是Vue对象中绑定的数据
      msg: 'Hi',              // message 自定义的数据
      name: 'flydragon'       // name自定义的属性，vue能够多个自定义属性，属性类型也但是复杂类型
    }
  });
</script>

结果：

Hi - flydragon

固然Vue还能够支持表达中的任何计算、函数处理等。参考下面的综合点的案例。

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之数据绑定-表达式运算</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{ msg + ' - ' + name }}
    <p>
      {{ isOk ? '123' : '456' }}
    </p>
    <p>个人年龄是： {{ age *2 }}</p>
  </div>

  <script>
  var app = new Vue({         // 建立Vue对象。Vue的核心对象。
    el: '#app',               // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
    data: {                   // data: 是Vue对象中绑定的数据
      msg: 'Hi',              // message 自定义的数据
      name: 'flydragon',
      isOk: true,
      age: 18
    }
  });
  </script>
</body>
</html>

2.4. Vue属性绑定

Vue中不能直接使用{{ expression }} 语法进行绑定html的标签，而是用它特有的v-bind指令（就是一种写法，先按照格式走，具体指令是什么能够后续再了解）。

绑定的语法结构：

<标签 v-bind:属性名="要绑定的Vue对象的data里的属性名"></标签>
例如:
<span v-bind:id="menuId">{{ menuName }}</span>

参考以下代码案例：

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之数据绑定--属性绑定</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <div v-bind:id="MenuContaineId">
      <a href="#" v-bind:class="MenuClass">首页</a>
      <a href="#" v-bind:class="MenuClass">产品</a>
      <a href="#" v-bind:class="MenuClass">服务</a>
      <a href="#" v-bind:class="MenuClass">关于</a>
    </div>
  </div>

  <script>
    var app = new Vue({         
      el: '#app',               
      data: {                   // data: 是Vue对象中绑定的数据
        MenuClass: 'top-menu',
        MenuContaineId: 'sitemenu'
      }
    });
  </script>
</body>
</html>

2.5. 属性绑定简写

因为v-bind 使用很是频繁，因此Vue提供了简单的写法，能够去掉v-bind直接使用:便可。

例如：
<div :id="MenuContaineId">
等价于
<div v-bind:id="MenuContaineId">

2.6. 输出纯HTML

因为Vue对于输出绑定的内容作了提早encode，保障在绑定到页面上显示的时候不至于被xss攻击。但某些场景下，咱们确保后台数据是安全的，那么咱们就要在网页中显示原生的HTML标签。Vue提供了v-html指令。

<div id="app">
  <div v-bind:id="MenuContaineId" v-html="MenuBody">
  </div>
</div>
<script>
  var app = new Vue({         
    el: '#app',               
    data: {                   // data: 是Vue对象中绑定的数据
      MenuContaineId: 'menu',
      MenuBody: '<p>这里是菜单的内容</p>'
    }
  });
</script>

结果：

<div id="app">
  <div id="menu">
    <p>这里是菜单的内容</p>
  </div>
</div>

2.7. 样式绑定

对于普通的属性的绑定，只能用上面的讲的绑定属性的方式。而Vue专门增强了class和style的属性的绑定。能够有复杂的对象绑定、数组绑定样式和类。

2.7.1. 绑定样式对象

常常咱们须要对样式进行切换，好比：div的显示和隐藏，某些标签active等。Vue提供的对象绑定样式的方式就很容作这些事情。

代码：
<div v-bind:class="{ active: isActive }"></div>
解释：
当 isActive为 true时， div就会具备了active样式类，若是 isActive为false，那么div就去掉active样式类。
<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之绑定样式类</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <style>
  .active {
    background-color: #ccc;
  }
  </style>
</head>
<body>
  <div id="app">
    <div v-bind:id="MenuContaineId" v-bind:class="{ active: isActive }">
      绑定颜色类
    </div>
  </div>
  <script>
    var app = new Vue({         
      el: '#app',               
      data: {                   // data: 是Vue对象中绑定的数据
        MenuContaineId: 'menu',
        isActive: true
      }
    });
  </script>
</body>
</html>

2.7.2. 混合普通的HTML标签样式类及绑定样式对象

v-bind:class 指令能够与普通的 class 属性共存。

<div id="app">
  <div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
  </div>
</div>
<script>
  var app = new Vue({         
    el: '#app',               
    data: {                   // data: 是Vue对象中绑定的数据
      isActive: true,
      hasError: false
    }
  });
</script>

结果：

<div id="app">
  <div class="static active">
  </div>  
</div>

2.7.3. 绑定data中的样式对象

直接在html属性中的双引号内写对象，仍是很不爽，也没有智能提示，很容易写错。 Vue可让咱们直接把绑定的class字符串指向data的一个对象，这样就很是方便了，既能够有智能提示，又能够很复杂进行编辑，不用担忧烦人的""了。

<div id="app">
  <div class="static"
     v-bind:class="classObject">
  </div>
</div>
<script>
  var app = new Vue({         
    el: '#app',               
    data: {
      classObject: {
        active: true,
        'text-danger': false
      }
    }
  });
</script>

结果：

<div id="app">
  <div class="static active">
  </div>
</div>

2.7.4. 绑定样式数组

其实绑定数组，就是绑定样式对象的延续，看官网的例子代码吧。

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

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

固然还有不少其余颇有趣的支持，就不赘述了。

例如:
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
<div v-bind:class="[{ active: isActive }, errorClass]">

2.7.5. 内联样式绑定

内联样式的绑定，很是相似于样式类的操做。v-bind:style 的对象语法十分直观——看着很是像 CSS ，其实它是一个 JavaScript 对象。 CSS属性名能够用驼峰式（camelCase）或短横分隔命名（kebab-case）。

看个例子：

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之htmlraw</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <div v-bind:style="{fontSize: size + 'px', backgroundColor: bgcolor, width: width}">
      vue 入门系列教程
    </div>
  </div>
  <script>
    var app = new Vue({         
      el: '#app',               
      data: {                   
        size: 19,
        width: 200,
        bgcolor: 'red'
      }
    });
  </script>
</body>
</html>

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

2.8. 计算属性

在作数据的绑定的时候,数据要进行处理以后才能展现到html页面上，虽然vue提供了很是好的表达式绑定的方法，可是只能应对低强度的需求。好比： 把一个日期按照规定格式进行输出，可能就须要咱们对日期对象作一些格式化的出来，表达式可能就捉襟见肘了。

Vue对象提供的computed属性，可让咱们开发者在里面能够放置一些方法，协助咱们绑定数据操做，这些方法能够跟data中的属性同样用，注意这些方法用的时候不要加()。 例子来了：

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之htmlraw</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <table>
      <tr>
        <!-- computed里面的函数能够直接当成data里面的属性用，很是方便，注意没有括号！！！-->
        <td>生日</td><td>{{ getBirthday }}</td>
      </tr>
      <tr>
        <td>年龄</td><td>{{ age }}</td>
      </tr>      
      <tr>
        <td>地址</td><td>{{ address }}</td>
      </tr>
    </table>
  </div>
  <script>
    var app = new Vue({         
      el: '#app',               
      data: {                   
        birthday: 914228510514,     // 这是一个日期对象的值：1998年11月1日
        age: 19,
        address: '北京昌平区龙泽飞龙'
      },
      computed: {
        // 把日期换成 常见规格格式的字符串。
        getBirthday: function () {
          var m = new Date(this.birthday);
          return m.getFullYear() + '年' + m.getMonth() +'月'+ m.getDay()+'日';
        }
      }
    });
  </script>
</body>
</html>

2.9. 绑定的数据过滤器

过滤器本质就是数据在呈现以前先进行过滤和筛选。官网上写的不错，我就再也不赘述，下面是官网的描述。

Vue.js 容许你自定义过滤器，被用做一些常见的文本格式化。过滤器应该被添加在 mustache 插值的尾部，由“管道符”指示：

{{ message | capitalize }}
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
Vue 2.x 中，过滤器只能在 mustache 绑定和 v-bind 表达式（从 2.1.0 开始支持）中使用，由于过滤器设计目的就是用于文本转换。为了在其余指令中实现更复杂的数据变换，你应该使用计算属性。

过滤器函数总接受表达式的值做为第一个参数。
new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
过滤器能够串联：
{{ message | filterA | filterB }}
过滤器是 JavaScript 函数，所以能够接受参数：
{{ message | filterA('arg1', arg2) }}
这里，字符串 'arg1' 将传给过滤器做为第二个参数， arg2 表达式的值将被求值而后传给过滤器做为第三个参数。

2.10. 核心：自动响应对象的变化到HTML标签

上面的例子都是 数据对象是写死在建立的Vue对像上，那若是数据（data）发生改变时会怎样呢？ 让咱们用chrome把上面例子的页面打开，并打开发者工具控制台,输入：app.age = 20 会有什么状况发生呢？

 

在页面中添加一个按钮，动态的增长年龄：

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之htmlraw</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <table>
      <tr>
        <!-- computed里面的函数能够直接当成data里面的属性用，很是方便，注意没有括号！！！-->
        <td>生日</td><td>{{ getBirthday }}</td>
      </tr>
      <tr>
        <td>年龄</td><td>{{ age }}</td>
      </tr>      
      <tr>
        <td>地址</td><td>{{ address }}</td>
      </tr>
    </table>
  </div>

  <!-- 添加下面这行代码，动态增长 年龄，页面会有怎样的变化呢？？ -->
  <button type="button" onclick="app.age+=1;" >加加</button>
  <script>
    var app = new Vue({         
      el: '#app',               
      data: {                   
        birthday: 914228510514,     // 这是一个日期对象的值：1998年11月1日
        age: 19,
        address: '北京昌平区龙泽飞龙'
      },
      computed: {
        // 把日期换成 常见规格格式的字符串。
        getBirthday: function () {
          var m = new Date(this.birthday);
          return m.getFullYear() + '年' + m.getMonth() +'月'+ m.getDay()+'日';
        }
      }
    });
  </script>
</body>
</html>

2.11. 双向数据绑定

上面的例子咱们大多讲的是单向的 js对象向 HTML数据进行绑定，那HTML怎样向js进行反馈数据呢？ HTML中只有表达能接受用户的输入，最简单的演示双向绑定的就是文本框了。

Vue提供了一个新的指令：v-model进行双向数据的绑定，注意不是v-bind。

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之htmlraw</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- v-model能够直接指向data中的属性，双向绑定就创建了 -->
    <input type="text" name="txt" v-model="msg">
    <p>您输入的信息是：{{ msg }}</p>
  </div>
  <script>
    var app = new Vue({         
      el: '#app',               
      data: {                   
        msg: '双向数据绑定的例子'
      }
    });
  </script>
</body>
</html>

最终的结果就是：你改变input文本框的内容的时候，p标签中的内容会跟着进行改变，哇是否是很神奇呢...

关于其余表单的绑定的语法我就不赘述了，仍是参考官网吧，我这里大部分例子也是来自官网。

2.12. 数据绑定总结

vue提供了大量的绑定的语法和方法，很是方便咱们进行数据的绑定，尤为它是双向的数据绑定，极大的减小了咱们dom操做的麻烦程度。可能你愈来愈喜欢它了吧...

 

Github地址：源码下载 

其余详情请参考：http://aicoder.com/vue/preview/all.html

 

3 .事件绑定

From:https://www.cnblogs.com/zhanghuiyun/p/6237090.html

一、内联方式：

A：将事件处理器绑定到一个方法中，如下全部事件都以click事件做为案例

注意：内联方式下事件处理器只能绑定一个方法，要是想要绑定多个方法，依旧仍是使用js中的addEventListener方法进行绑定

 

 B：与原生的js相似，不只能够绑定到一个方法上，还可使用内联js语句

 

二、点击事件绑定的方法，在Vue实例中，存放在method属性中

注意：methods中定义的方法内的this始终指向建立的Vue实例中

 

 三、$event的应用：须要访问元素DOM事件，用其传入方法中

 

四、事件处理器中的修饰符

A：使用串联

 

B：只有修饰符而不绑定事件

 

C：.prevent  ==>  event.prventDefault() 

　  .stop ==> event.stopPropagation()

　  .capture ==> 表示添加事件侦听器时采用capture即捕获模式

　　.self ==> 表示只当事件在该元素自己（而不是子元素）触发时触发回调

 

五、按键事件

 

 

六、v-on变动

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程