- Vue核心：允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
- Vue实例中绑定的数据是响应式的：在浏览器的Console中修改app.message="hello world",网页中内容会实时改变。
- Vue文本插值：
<div id="app"> {{ message }} </div> var app = new Vue({ el: "#app", data: { message: "hello Vue!" } }) - 指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。它们会在渲染的 DOM 上应用特殊的响应式行为。
<span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息! </span>该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。在浏览器的Console中修改为该id创建的Vue实例.message="hello hello",网页中内容会实时改变。 - 条件
v-if例如：<div id="app-3"> <p v-if="seen">现在你看到我了</p> </div> var app3 = new Vue({ el: "#app-3", data:{ seen: true } }) app3.seen=false; //可以在代码中任意赋值和修改。 - 循环
v-for：使用示例<ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> var app4 = new Vue({ el: "#app-4", data:{ todos:[ {text: "learning JavaScript"}, {text: "learning Vue"}, {text: "do some project"} ] } })
对于添加或者删除元素：1)： app4.todos.push({text:"new project"}); 2)：app4.todos.pop()
- 处理用户输入：
v-on指令添加一个事件监听器<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('') } } }) - 表单输入与应用状态之间的双向绑定
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!' } }) - 组件系统：组件：小型、可复用，使用组件前先定义和注册。
// 定义名为 todo-item 的新组件 Vue.component('todo-item', { template: '<li>这是个待办项</li>' }) var app = new Vue(...)
