初识Vue

Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

1. **数据对象：data ** ，data中的元素值发生改变，视图会进行重渲染；
2. **Object.freeze() ** ，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化；
3. **方法 ** ，它们都有前缀 $，以便与用户定义的属性区分开来；
   注意：当实例被创建时就已经存在于 data 中的元素才是响应式的。创建实例后添加的元素，视图不会重新渲染

<div id="app">
  <p>{{ foo }}</p>
</div>

// 数据对象：data
var data = { foo : 1 }
// 会阻止修改现有的属性
Object.freeze(data)
// Vue实例
var vm = new Vue({
  // 绑定元素
  el: '#app',
  // 数据对象
  data: data
})

vm.$data === data // => true

模板语法

数据绑定最常见的形式就是双大括号（Mustache 语法）：

1. ** v-once 指令** ，执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定。
2. v-html 指令 ，原始HTML；双大括号会将数据解释为普通文本，而非 HTML 代码。
3. v-bind 指令 ，双大括号不能作用在HTML元素上，遇到这种情况就是用该指令。
4. JavaScript表达式，Vue.js提供了完全的JavaScript表达式支持；注意：每个绑定只能包含单个表达式
5. ** 指令**，带有’v-'前缀的属性。

<!-- 1.v-once 指令 -->
<span>消息: {{ msg }}</span><!-- 会改变 -->
<span v-once>消息: {{ msg }}</span><!-- 不会改变 -->
<!-- 2.v-html 指令 -->
<p>原样输出: {{ rawHtml }}</p><!-- 原样输出: <span style="color: red">红色</span> -->
<p>HTML: <span v-html="rawHtml"></span></p><!-- HTML: 红色    (有红色样式) -->
<!-- 3.v-bind 指令 -->
<button v-bind:disabled="isButtonDisabled">按钮</button><!-- 根据isButtonDisabled的true或false来渲染 -->
<!-- 4.JavaScript表达式 -->
<span>{{ number + 1 }}</span> <!-- 2 -->
<span>{{ ok ? 'YES' : 'NO' }}</span> <!-- YES -->
<span>{{ message.split('').reverse().join('') }}</span> <!-- E U V -->
<div v-bind:id="'list-' + id"></div> <!-- <div id="list-4"></div> -->
<!-- <span>{{ var a = 1 }}</span> 是语句，不是表达式 -->
<!-- <span>{{ if (ok) { return message } }}</span> 流控制也不会生效，请使用三元表达式 -->
<!-- 5.指令 -->
<p v-if="seen">seen</p>

var vm = new Vue({
	data: {
		msg: '文本内容',
		rawHtml: '<span style="color: red">红色</span>',
		isButtonDisabled: true,
		number: 1,
		ok: true,
		message: V U E,
		id: 4,
		seen: true,
	}
})