2、Vue 双向数据绑定及模版语法

一、双向数据绑定简介

Vue最核心的功能时双向数据绑定和组件模块化。

双向绑定：

当视图(View)的值发生改变时会自动更新Model的值；
当model的值发生改变时会自动更新视图(View);

这里的视图View是指html中的标签元素，也就是DOM元素；这里的model就是指JavaScript中的对象，也就是用object{foo: bar}。

二、双向数据绑定JS实现

下面示例写了一个基本双向数据绑定的实现，打开控制台Console我们可以看到，当在input中输入值时也就是input的值发生改变时，input中的value值会自动赋值给user对象的username属性；当对象user的username属性的值发生改变时也会改变input标签的value值，即View也会跟着改变。

<html>
<head>
	<title>双向数据绑定</title>
	<script type="text/javascript">
		// model
		var user = {username: ''};

		// 当view(DOM元素)发生了改变也会更改model的值
		function viewChangeModel() {
			// 更改model的值
			var newValue = document.getElementById("view").value;
			user.username = newValue;
			console.log(newValue);
		}

		// 改变model的值会被监听监听到，然后更改view(DOM元素)
		function modelChangeView() {
			user.username = 'mengday';
		}

		// 监听器：监听属性的改变
		// 当model发生改变时也会更新view
		Object.defineProperty(user, 'username', {
    		set:function(value){
          		//此处拦截了设置请求
          		console.log('newValue=' + value);
          		document.getElementById("view").value = value;
     		}
		});
	</script>
</head>
<body>
	Username <input id="view" type="text" name="username" oninput="viewChangeModel()"><br/> 
	<button onclick="modelChangeView()">user.username='mengday'</button>
</body>
</html>

三、双向数据绑定Vue实现

上面示例实现双向数据绑定需要额外写代码来实现，但是在Vue中这些功能就能轻易实现。Vue实现双向数据绑定是通过以下两个功能来实现的：
2、Vue 双向数据绑定及模版语法
Vue.js主要负责的是上图绿色正方体ViewModel的部分，其在View层（即DOM层）与Model层（即JS逻辑层）之间通过ViewModel绑定了DOM Listeners与Data Bingings两个相当于监听器的东西。当View层的视图发生改变时，Vue会通过DOM Listeners来监听并改变Model层的数据。

相反，当Model层的数据发生改变时，其也会通过Data Bingings来监听并改变View层的展示。这样便实现了一个双向数据绑定的功能，也是Vue.js数据驱动的原理所在。

DOM Listeners(DOM 监听器)：监听DOM元素(也就是html标签)的改变，当DOM发生改变时会自动更新model的值；
Data Bindings(数据绑定)：当model的值发生改变时会自动更新DOM元素的展示；

Vue.js是一款轻量级的以数据驱动的前端JS框架，通过数据的改变来实现页面的更新与展示。与jQuery最大的不同点在于jQuery通过操作DOM来改变页面的显示，而Vue通过操作数据来。相比而言改变数据操作更加简单。

使用Vue演示双向数据绑定

HelloWorld.vue
<template>
  <div>
     Usernanme <input v-model="username"/> {{username}} <br/>
     <button @click="changeModel">this.username='mengday'</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      username: ''
    }
  },
  methods: {
    changeModel() {
      this.username = 'mengday'
    }
  }
}
</script>

在input中每输入一个字符username的值都会发生改变，通过点击按钮来触发username改变，可以看到input中展示也会跟着同步改变。

五、模版语法

1、插值（Interpolations）

（1）文本(Text)

数据绑定最基本的形式，就是使用 “mustache” 语法（双花括号）的文本插值(text interpolation)：

<span>Message: {{ msg }}</span>

mustache 标签将会被替换为 data 对象上对应的 msg 属性的值。只要绑定的数据对象上的 msg 属性发生改变，插值内容也会随之更新。

也可以通过使用 v-once指令，执行一次性插值，也就是说，在数据改变时，插值内容不会随之更新。但是请牢记，这也将影响到同一节点上的其他所有绑定：

<span v-once>这里的值永远不会改变：{{ msg }}</span>

（2）原始HTML（Raw HTML）

双花括号语法，会将数据中的 HTML 转为纯文本后再进行插值。为了输出真正的 HTML，你需要使用 v-html 指令：

<p>使用双花括号语法：{{ rawHtml }}</p>
<p>使用 v-html 指令：<span v-html="rawHtml"></span></p>

span 中的内容，将会被替换为 rawHtml 属性的值，并且作为原始 HTML 插入 - 会忽略解析属性值中的数据绑定。

请注意，无法使用 v-html 来组合局部模板，这是因为 Vue 不是基于字符串(string-based)的模板引擎。反之，对于用户界面(UI)，组件更适合作为可重用和可组合的基本单位。

<div id="app">
    <div v-html="message"></div>
    //<p>{{ message }}</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>Hello Vue</h1>'
  }
})
</script>

（3）属性（Attributes）

不能在 Vue 模板中的 HTML 属性上使用双花括号语法(mustache)。而是应该使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

在属性是布尔类型的一些情况中，v-bind 的作用有点不同，只要值存在就会隐含为 true。在这个例子中：

<button v-bind:disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值为 null, undefined 或 false，disabled 属性甚至不会被包含在渲染后的<button>元素中。

<div id="app">
    <button v-bind:disabled="isButtonDisabled">Button</button>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    isButtonDisabled: false
  }
})
</script>

（4）使用JavaScript表达式

到目前为止，我们只实现了将模板绑定到基本的属性键上。然而，Vue.js 实际上能够支持通过完整的 JavaScript 表达式，将模板与任意的数据绑定在一起：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

这些表达式，将在所属的 Vue 实例的数据作用域下，作为 JavaScript 取值。有个限制是，每个绑定都只能包含单个表达式，所以以下示例都无法运行：

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也无法运行，请使用三元表达式 -->
{{ if (ok) { return message } }}