Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue核心库只关注视图层，不仅易于上手，还便于与第三方库和既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页面应用提供驱动。
Vue.js的核心是一个允许采用简洁的模板语法来声明式将数据渲染进DOM系统。
<div id="app"> <p id="content">{{msg}}</p> </div> <script> var vm=new Vue({ //表示当前Vue实例控制的是页面上的那块区域 el:"#app", //data属性中存放的是el中要用到的数据 data:{ msg:"欢迎学习Vue" } }); </script>这是一个简单的Vue实例，看起来跟渲染一个字符串模板非常类似，但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联，所有东西都是响应式的。
v-cloak 这个指令保持在元素上直到关联实例结束编译。和CSS规则如[v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的Mustache 标签直到实例准备完毕。
<style> [v-cloak]{ display: none; } </style> <div id="app"> <p id="content" v-cloak>{{msg}}</p> </div>不会显示，直到编译结束 v-text 更新元素的textContent。如果要更新部分textContext。需要使用{{Mustache}}插值。
<span v-text="msg">+++</span> <br> da <span>++++{{msg}}---</span>v-html 更新元素的innerHTML。注意：内容按普通HTML插入-不会作为Vue模板进行编译。如果试图使用v-html组合模板，可以重新考虑是否通过组件来替代。
<div v-html="html"></div>v-bind 动态地绑定一个或多个特性，或一个组件prop到表达式。在绑定class或style特性时，支持其它类型的值，如数组或对象，在绑定prop时，prop必须在子组件中声明。可以用修饰符指定不同的类型。没有参数时，可以绑定到一个包含键值对的对象。注意此时class和style绑定不支持数组和对象。
<input type="button" value="按钮" v-bind:title="mytitle"> data:{ mytitle:'自定义title' }.camel修饰符允许在使用DOM模板时将v-bind属性名称驼峰化，例如SVG的viewBox属性
<svg :view.box.camel="viewBox"></svg>v-on 绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句。如果没有修饰符也可以省略。用在普通元素上时，只能监听原生DOM事件，用在自定义元素组件上时，也可以监听子组件触发的自定义事件。在监听原生DOM事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个$event 属性：v-on:click="handle('ok', $event)"。
<button v-on:click="doThis">按钮</button> methods:{ doThis:function () { alert("Hello") } }事件修饰符：
.stop阻止冒泡.prevent阻止默认事件.capture添加事件侦听器时使用事件捕获机制.self只有当事件在该元素本身（比如不是子元素）触发时触发回调.once事件只触发一次v-model 一个组件上的v-model默认会利用名为value的prop和名为input的事件，但是像单选框、复选框等类型的输入控件可能会将value特性用于不同的目的。model选项可以用来避免这样的冲突。
<!--使用v-model指令可以实现表单元素和model中数据的双向绑定--> <input type="text" style="width: 100%" v-model="something"> data:{ something:"xxx" }v-for 可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名
data{ items: [ { message: 'Foo' }, { message: 'Bar' } ] } <ul id="example-1"> <li v-for="item in items"> {{item.message}} </li> </ul>在v-for块中，可以访问所有父作用域的属性，v-for还支持一个可选的第二个参数，即当前的索引。
<ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul> data{ parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] }也可以用v-for来遍历一个对象的属性
data:{ object:{ title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } <ul id="v-for-object" class="demo"> <li v-for="value in object"> {{ value }} </li> </ul>可以使用提供的第二个参数为property 名称
<div v-for="(value, name) in object"> {{ name }}: {{ value }} </div>还可以用第三个参数作为索引
<div v-for="(value, name, index) in object"> {{ index }}. {{ name }}: {{ value }} </div>使用v-for迭代数字
<p v-for="count in 4">这是第{{count}}个数字</p>v-if v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回true值的时候被渲染。
<h1 v-if="awesome">Vue is awesome!</h1> data:{ awesome:true }也可以用v-else添加一个else块
<h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no 😢</h1>v-show 用于根据条件展示元素的选项
<h1 v-show="ok">Hello!</h1> data:{ ok:true }不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
使用class样式 1.数组
<h1 :class="['red','thin']">这是一个样式引用</h1>2.在数组中使用三元表达式
<h1 :class="['red','thin',isactive?'active':'']">三元表达式样式引用</h1>3.数组中嵌套对象
<h1 :class="['red','thin',{’active‘:isactive}]">嵌套对象</h1>4.直接使用对象
<h1 :class="{red:true,thin:true,active:true,italic:true}">使用对象</h1>使用内联样式 1.直接在元素上通过:style的样式，书写样式对象
<h1 :class="{color:'red','font-size':'40px'}">行内样式</h1>2.将样式对象，定义到data中，并直接引用到.style中
在data上定义样式 data{ h1StyleObj:{color:'red','font-size':'40px','font-weight':'200'} } 在元素中，通过属性绑定的形式，将样式对象应用到元素中 <h1 :style="h1StyleObj">引用data样式对象</h1>3.在:style中通过数组，引用多个data上的样式对象
在data上定义样式 data{ h1StyleObj:{color:'red','font-size':'40px','font-weight':'200'}, h1StyleObj2:{fontStyle:'italic'} } 在元素中，通过属性绑定的形式，将样式对象应用到元素中去 <h1 :style="[h1StyleObj,h1StyleObj2]">引用多个样式对象</h1>