详解 vue.js用法和特性(2)

<div id="app-3">
 <p v-if="seen">现在你可以看到我</p>
</div>
var app3 = new Vue({
 el: '#app-3',
 data: {
 seen: true
 }
})

　　继续在控制台输入 app3.seen = false，你应该会看到 span 消失。

　　这个示例表明，我们不只是可以将数据绑定到文本和属性，也可以将数据绑定到 DOM 结构。而且，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/删除元素时，自动使用过渡效果。

　　还有其它一些指令，每个都具有各自不同的特殊功能。例如，v-for 指令，可以使用数组中的数据来展示一个项目列表：

<div id="app-4">
 <ol>
 <li v-for="todo in todos">
  {{ todo.text }}
 </li>
 </ol>
</div>
var app4 = new Vue({
 el: '#app-4',
 data: {
 todos: [
  { text: '学习 JavaScript' },
  { text: '学习 Vue' },
  { text: '创建激动人心的代码' }
 ]
 }
})

3 、vue实例

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

var vm = new Vue({
 // 选项
})

　　尽管没有完全遵循 MVVM 模式，但是 Vue 的设计仍然受到了它的启发。作为约定，通常我们使用变量 vm (ViewModel 的简称) 来表示 Vue 实例。

3.1data 和 methods

　　在创建 Vue 实例时，会将所有在 data 对象中找到的属性，都添加到 Vue 的响应式系统中。每当这些属性的值发生变化时，视图都会“及时响应”，并更新相应的新值。

// data 对象
var data = { a: 1 }
// 此对象将会添加到 Vue 实例上
var vm = new Vue({
 data: data
})
// 这里引用了同一个对象！
vm.a === data.a // => true
// 设置实例上的属性，
// 也会影响原始数据
vm.a = 2
data.a // => 2
// ... 反之亦然
data.a = 3
vm.a // => 3

　　每当 data 对象发生变化，都会触发视图重新渲染。值得注意的是，如果实例已经创建，那么只有那些 data 中的原本就已经存在的属性，才是响应式的。也就是说，如果在实例创建之后，添加一个新的属性，例如：

vm.b = 'hi'

　　然后，修改 b 不会触发任何视图更新。如果你已经提前知道，之后将会用到一个开始是空的或不存在的属性，你就需要预先设置一些初始值。例如：

data: {
 newTodoText: '',
 visitCount: 0,
 hideCompletedTodos: false,
 todos: [],
 error: null
}

　　除了 data 属性， Vue 实例还暴露了一些有用的实例属性和方法。这些属性与方法都具有前缀 $，以便与用户定义(user-defined)的属性有所区分。例如：