vue是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
1.创建项目：
vue.js 文件自行下载即可，目前这些目录都是空的。
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
编写index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
//构造一个vue实例，Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
var app = new Vue({
// vue指向的目的地
el: '#app',
// vue的数据部分
data:{
message:'hello vue!'
}
})
</script>
</body>
</html>
页面显示：
我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，
你将看到页面上也将相应地更新；
指令系统
指令带有前缀v-,以表示它们是vue提供的特殊性。它们会在渲染的DOM上应用特殊的响应式行为。
v-bind 指令
继续在index.html中添加代码：
<div id="app2" v-bind:title="message">
鼠标悬停几秒在这查看绑定的动态信息！
</div>
<script type="text/javascript">
// 使用一个指令
var app2 = new Vue({
el: '#app2',
data: {
message: '页面加载于' + new Date().toLocaleString()
}
})
</script>
效果如图：
这个指令的的意思是：将这个元素节点的title特性的vue是来的message属性保持一致。如果打开浏览器的 JavaScript 控制台，输入 app2.message = ‘新消息’，就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新。
v-if 条件
代码：
<div id="app4">
<ol>
<li v-for="data in datas">
{{ data.test }}
</li>
</ol>
</div>
<script type="text/javascript">
//v-if指令
var app3 = new Vue({
el: "#app3",
data:{
seen: true
}
})
</script>
效果如图：
继续在控制台输入app3.seen = false, 显示的Can you see me?已经消失了。这个例子演示了我们不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构。此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。
v-for指令
<div id="app4">
<ol>
<li v-for="data in datas">
{{ data.test }}
</li>
</ol>
</div>
<script type="text/javascript">
// v-for 指令
var app4 = new Vue({
el: '#app4',
data:{
datas: [
{test: 'python很棒！'},
{ test:'vue 初体验' },
{ test: 'v-for指令' },
]
}
})
</script>
效果：
在控制台里，输入 app4.todos.push({ text: ‘新项目’ })，你会发现列表最后添加了一个新项目。
v-on 指令
为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法
代码：
<div id="app5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
<script type="text/javascript">
// v-on指令
var app5 = new Vue({
el: '#app5',
data:{
message:'good vue.js'
},
methods:{
reverseMessage:function(){
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
效果图：
点击前
点击后
注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。
v-model 指令
<div id="app6">
<p>{{ message }}</p>
<input v-model="message" type="" name="">
</div>
<script type="text/javascript">
//v-model 指令
var app6 = new Vue({
el: '#app6',
data: {
message: '输入到input框中'
}
})
</script>
效果图：
v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。