要使用框架就一定要引入。这里采用CDN方式引入，一共存在两种版本。
（1）是开发环境版本，这个版本比较大，有231kb，不过它提供了命令行警告。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> (2) 是生产环境版本，该版本只有30.90KB <script src="https://cdn.jsdelivr.net/npm/vue"></script>这里引入了开发环境版本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </html>（1）首先来创建vue实例
<script> var app = new Vue({ el:"#main", data:{ msg:"hhhhh", } }) </script>其中 el 是vue实例的挂载元素，即vue实例将数据，事件等绑定在el元素或它的子孙下，它的值可以是CSS选择符或者HTML元素。data指的就是mvvm模式中的Model，你可以把data里的数据通过指令或模板语法绑定到html中。
（2）在html中使用模板语法绑定数据
<div id="main"> {{ msg }} </div>''{{ }} ''是绑定数据的模板语法， 此处的msg对应vue实例data里的msg，所以运行时便会显示 " hhhhh "。
数据量少时还能一个一个地用模板语法绑定，但是遇到大量数据时如果还是手写可以说是非常痛苦的了。所以，这就需要用上循环指令了。
首先假设这里有一个对象数组arr。
new Vue({ el:"#main", data:{ arr:[ {name:"豆浆",price:10}, {name:"鸡蛋",price:100}, {name:"油条",price:50}, {name:"热狗",price:60}, ] } })然后，用上循环指令 v-for=""
<div id="main"> <ul> <li v-for="item in arr"> {{ item.name +"-" + item.price +"$"}} </li> </ul> </div>item即指arr遍历的每一个成员。结果如图
如果你想加个判断，那就该用上条件指令 v-if
先添加一个seen变量作为判断条件
new Vue({ el:"#main", data:{ arr:[ {name:"豆浆",price:10}, {name:"鸡蛋",price:100}, {name:"油条",price:50}, {name:"热狗",price:60}, ], seen:true, } })用上v-if 指令
<ul v-if="seen"> <li v-for="item in arr"> {{ item.name +"-" + item.price +"$"}} </li> </ul>现在已经可以显示数据了。但你还是只能干看着啥也做不了，这个时候就该用上事件的绑定，让页面具有交互性。
methods:{ handleClick(index){ this.arr.splice(index,1); } }在vue实例中加入methods对象，然后定义handleClick方法。
<li v-for="(item,index) in arr"> {{ item.name +"-" + item.price +"$"}} <button @click="handleClick(index)">delete</button> </li>添加v-on:click指令，也可以用指令简写符号 @click=" "。
完成后，你就可以通过点击按钮来删除指定项目。注意，这里是从arr中删除了那一项，然后响应式地改变视图。
这时候假如你想为class添加一个样式，就需要用上 v-bind 指令。
<ul v-if="seen"> <li v-for="(item,index) in arr" v-bind:class="{ active:isActive }" @click="handleClick2()" > {{ item.name +"-" + item.price +"$"}} <button @click="handleClick(index)">delete</button> </li> </ul>想要绑定什么，就 v-bind:属性名 例如这里的 v-bind:class 。如果想绑定style属性，那就是 v-bind:style 以此类推。再绑定一个处理点击项目的事件。
isActive:falsedata中加入变量isActive。并设置为false。
methods:{ handleClick(index){ this.arr.splice(index,1); }, handleClick2(){ this.isActive = true; } }添加上handleClick2方法。
<style> .active{ color: red; } </style>设置active类。
此时点击一下任意一个项目，就会使得全部项目字体变成红色。
从文章开头到现在，全都是单向数据绑定。data中的数据变化会使得视图发生改变。那么能不能视图的数据变化使得data中的数据发生改变呢？vue正好具有双向绑定的指令 v-model 。
<input type="text" v-model="name"> <h5>{{ name }}</h5>添加这两行代码，一个是双向绑定到 name 变量的input元素，一个是用于显示 name 值的标题。
name:""在data中添加该变量。
你在input中输入的值会绑定到inputValue ，而inputValue的值一发生变化，就会重新渲染视图。所以，你输入的值会同步出现在视图中。
再修改一下代码。
name:<input type="text" v-model="name"> price:<input type="text" v-model="price"> <button @click="addItem">add</button>删除<h5>，再添加1个input，和一个按钮。
price:""data中加入price
addItem(){ this.arr.push({ name:this.name, price:this.price, }) }methods中加入方法addItem。
现在就可以填入name和price,然后点击添加按钮，来加入项目。
好吧，就这些内容而已。这都只是vue的冰山一角，详细内容还是得看官网。（流下了没技术的眼泪。。）
