从本质上讲，Vue.js 是一个允许使用简约模板语法将数据声明式渲染到 DOM 中的系统：
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
{{ 信息 }}
我们已经成功创建了我们的第一个 Vue 应用程序！ 它看起来与渲染字符串模板非常相似，但 Vue 在幕后做了很多工作。 现在数据和 DOM 已经构建并关联起来，一切都是响应式的。 我们如何确认呢？ 打开浏览器的 JavaScript 控制台（位于此页面上），然后更改 app.message 的值，您将看到上面的示例相应更新。
请注意，我们不再直接与 HTML 交互。 Vue 应用程序会将其安装在 DOM 元素上（在本例中为#app）并完全控制它。 该 HTML 是我们的入口点，但其余部分将在新创建的 Vue 实例内发生。
除了文本注册之外，我们还可以像这样绑定元素属性：
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
鼠标悬停几秒可以在这里查看动态绑定的提示信息！
在这里我们遇到了一些新的东西。 您看到的 v-bind 属性称为指令。 指令以 v- 为前缀，表示它们是 Vue 提供的特殊属性。 正如您可能已经猜到的ecmascript5新特性，它们在渲染的 DOM 上应用特殊的响应行为。 这里，指令的意思是：“保持该元素节点的title属性与Vue实例的message属性一致”。
如果再次打开浏览器的 JavaScript 控制台并输入 app2.message = 'new message'，您将看到绑定到 title 属性的 HTML 已再次更新。
条件和循环
控制是否切换元素的显示也非常简单：
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
现在你看到我了
继续在控制台输入app3.seen = false，你会发现之前显示的消息消失了。
这个反例演示了除了 DOM 文本或属性之外，我们还可以将数据绑定到 DOM 结构。 此外ecmascript5新特性，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: '整个牛项目' }
]
}
})
{{ 待办事项 }}
在控制台输入app4.todos.push({ text: 'new item' })，你会发现最后的列表中多了一个新的item。
处理用户输入
为了允许用户与您的应用程序交互，我们可以使用 v-on 指令添加一个 Storm 监听器，该指令调用 Vue 实例中定义的方法：
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
{{ 信息 }}
反向消息
请注意，在reverseMessage方法中，我们更新应用程序的状态，但不触及DOM——所有DOM操作都由Vue处理，您编写的代码只需要关注逻辑级别。
Vue 还提供了 v-model 指令，可以轻松实现表单输入和应用程序状态之间的单向绑定。
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
{{ 信息 }}
组件应用程序创建
组件系统是 Vue 的另一个重要概念，因为它是一种允许我们使用大型、独立且通常可重用的组件构建小型应用程序的表示形式。 仔细想想，几乎任何类型的应用程序接口都可以表示为组件树：
在 Vue 中，组件本质上是具有预定义选项的 Vue 实例。 在 Vue 中注册组件很简单：
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
template: '这是个待办项 '
})
var app = new Vue(...)
现在您可以使用它来构建另一个组件模板：
<ol>
<todo-item></todo-item>
</ol>
但这会为每个待办事项呈现相同的文本，这看起来不太酷。 我们应该能够将数据从父作用域传递到子组件。 让我们更改组件的定义，使其接受一个：
Vue.component('todo-item', {
// todo-item 组件现在接受一个
// "prop"，类似于一个自定义 attribute。
// 这个 prop 名为 todo。
props: ['todo'],
template: '{{ todo.text }} '
})
现在，我们可以使用 v-bind 指令将待办事项传递给循环输出的每个组件：
<div id="app-7">
<ol>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '{{ todo.text }} '
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
尽管这是一个故意的反例，但我们已经设法将应用程序分成两个较小的单元。 子单元通过 prop 接口可以很好地前馈到父单元。 我们现在可以进一步改进组件以提供更复杂的模板和逻辑，而不会影响父单元。
在小型应用程序中，有必要将整个应用程序定义为组件，以使开发更易于管理。 我们将在后面的教程中介绍组件，但这里有一个（假设的）示例来展示使用组件的应用程序模板的外观：
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>
与自定义元素的关系
您可能已经注意到，Vue 组件与自定义元素非常相似 - 它是 Web 组件规范的一部分，这是因为 Vue 的组件语法部分引用了该规范。 例如，Vue组件实现了Slot API并且是属性。 但是，存在一些关键差异：
Web 组件规范已最终确定并采用，但并非所有浏览器都原生实现。 目前 Safari 10.1+、Chrome 54+ 和 Firefox 63+ 原生支持 Web 组件。 相比之下，Vue 组件不需要任何 polyfill，并且在所有支持的浏览器（IE9 及更高版本）中表现一致。 必要时，Vue 组件也可以包装在原生自定义元素中。
Vue 组件提供了一些纯自定义元素所没有的重要功能，最显着的是跨组件数据流、自定义事件通信和构建工具集成。
虽然 Vue 内部不使用自定义元素，但是当应用程序使用自定义元素或者以自定义元素的形式发布时，. Vue CLI 还支持将 Vue 组件构建为原生自定义元素。
你准备好了吗？
我们刚刚触及了 Vue 核心的最基本功能 - 本教程的其余部分将更详细地介绍此功能和其他中间功能，因此请务必阅读整个教程！
← 安装 Vue 实例→
发现错误？ 想成为一名编辑吗？ 在 GitHub 上编辑此页面！
发表评论