Vue入门之数据绑定(小结)

1. 什么是双向绑定?

Vue框架很核心的功能就是双向的数据绑定。 双向是指:HTML标签数据 绑定到 Vue对象,另外反方向数据也是绑定的。通俗点说就是,Vue对象的改变会直接影响到HTML的标签的变化,而且标签的变化也会反过来影响Vue对象的属性的变化。

这样以来,就彻底变革了之前Dom的开发方式,之前Dom驱动的开发方式尤其是以jQuery为主的开发时代,都是dom变化后,触发js事件,然后在事件中通过js代码取得标签的变化,再跟后台进行交互,然后根据后台返回的结果再更新HTML标签,异常的繁琐。有了Vue这种双向绑定,让开发人员只需要关心json数据的变化即可,Vue自动映射到HTML上,而且HTML的变化也会映射回js对象上,开发方式直接变革成了前端由数据驱动的 开发时代,远远抛弃了Dom开发主导的时代了。

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>

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>

      

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/221.html