1.声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM。

html:  <div id="app">{{ message }}</div>;

js: var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}});

现在数据和DOM已被绑定在一起,所有的元素都是响应的

指令带有前缀V-,表示它们是vue的特殊属性,它们会在渲染的DOM上应用特殊的响应行为。

2.条件与循环

html:<div id="app-3"><p v-if="seen">现在你看到我了</p></div>;

js:var app3 = new Vue({el: '#app-3',data: {seen: true}});

我们不仅可以绑定 DOM 文本到数据,也可以绑定 DOM 结构到数据。而且,Vue 也提供一个强大的过渡效果系统,可以在 Vue 插入/更新/删除元素时自动应用过渡效果。

3.处理用户输入

可以在用户输入框,通过v-on绑定事件,vue也提供了v-model指令,实现表单输入和应用状态之间的双向绑定。

4.组件化应用构建

组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、自包含和通常可复用的组件构建大型应用。

注册组件:

Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
});