一、起步 <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生产环境版本，优化了尺寸和速度 --> <script src="http://cdn.jsdelivr.net/npm/vue"></script>
开始从下面的几个Vue的使用场景中熟悉Vue：
声明式渲染
<!DOCTYPE html> <html> <head> <title>Vue</title> <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div> {{ message }} </div> </body> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); </script> </html>看起来就像是简单的模板渲染，但其实Vue已经做了大量工作，这个时候的数据和DOM已经是“响应式”
的了。可以打开浏览器控制台修改app实例，如app.message = 'Hello World!'，然后你可以发现html页面也会随之变化。
条件与循环
使用Vue的指令v-if来决定是否创建该元素。
<div> <p v-if="seen">现在你能看到我</p> </div> var app = new Vue({ el: '#app', data: { seen: true } });使用v-for指令来实现循环：
<div> <ul> <li v-for="list in lists"> {{ list.text }} </li> </ul> </div> var app = new Vue({ el: '#app', data: { lists:[ {text: '学习js'}, {text: '学习vue'}, {text: '学习...'} ] } });
处理用户输入
使用v-on指令为元素绑定指定事件：
<div> <p> {{message}} </p> <button v-on:click="reverseMessage">翻转字符串</button> </div> var app = new Vue({ el: '#app', data: { message: '双向绑定' }, methods: { reverseMessage: function(){ this.message = this.message.split('').reverse().join(''); } } });使用v-model表单输入和应用状态之间的双向绑定：
<div> <p> {{message}} </p> <input type="text" v-model="message"> </div> var app = new Vue({ el: '#app', data: { message: '双向绑定' } });
组件化应用的构建
具体请参考：
二、指令大全Vue.js提供了一些指令来方便我们操作页面，而不用我们再去操作Dom，具体详情可移步官网：
v-text更新元素的textContent。如果要更新部分的textContent，需要使用 {{ Mustache }} 插值。
v-html更新元素的innerHtml。注意内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。
v-show根据表达式的真假切换元素的display:none。
v-if根据表达式的真假决定是否创建（渲染）元素。
注意：当和 v-for 一起使用时，v-for 的优先级比 v-if 更高。
v-else & v-else-if结合v-if使用。
v-for使用特定语法alias in expression，多次渲染元素或模块。
可使用的表达式：Array | Object | number | string
v-model限制
表单控件：input | texteara | selecte
组件
修饰符
.lazy：取代input监听change事件。
.number：将输入的字符串转化为数字。
.trim：将输入的字符串过滤掉首位空格。
作用
在表单控件或组件上创建双向绑定。
无表达式，v-cloak指令保持到元素结束编译，与css规则如：[cloak]:{display: none;}一起使用，使元素在编译完成前保持“影藏”状态。这样做的目的是，元素编译结束后再显示出来，可以解决页面编译渲染时出现的闪烁情况。
v-pre无表达式，使用v-pre可跳过元素及其子元素的编译过程，加快渲染速度。
v-once无表达式，使用v-once指令后元素只会编译渲染一次。这样可以在某些场景下提升性能。
v-bind
作用
为元素动态地绑定一个或多个特性（attributes + properties）；或绑定一个组件的prop到表达式中。
缩写：:
修饰符
.prop：被用来绑定DOM的property。（）
.camel：(2.1.0+) 将 kebab-case 特性名转换为 camelCase。
.sync： (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。
特殊
在绑定class或style属性时支持数组或对象等特殊类型。
v-on
作用
为元素绑定事件监听。
缩写：@
期望
Function | Inline Statement | Object
修饰符
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
三、练习我们可以通过一些实际的例子来熟悉一下Vue指令的相关用法。
文字跑马灯需求：让文字滚动起来。