vue.js是什么
Vue (读音 /vju:/, 类似view) 是一套用于构建用户界面的渐进式框架。与其他框架不同，vue 被设计为可以自底向上逐层应用。Vue的核心库只关心视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
起步
创建一个 .html 文件，然后通过如下方式引入 Vue：
<script src="https://cdn.jsdelivr.net/npm/vue">
声明式渲染
vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM系统：
<div id="app">
{{message}}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
});
Hello， Vue！
上述代码成功创建了一个Vue 应用！ 看起来这跟渲染一个字符串模板非常类似，但是Vue 在背后做了大量工作。 现在数据已经跟DOM建立了关联，所有东西都是响应式的。可以在浏览器控制台，并修改app.message的值，页面上的值将会动态更新。
<div id="app-time" v-bind:title="message">
鼠标悬停查看提示信息！
</div>
var app = new Vue({
el: '#app-time',
data: {
message: '页面加载于：'+new Date().toLocalString()
}
});
> v-bind特性被称为**指令**。指令带有 *v-* 前缀，以表示它们是Vue提供的特殊特性。它们会在渲染的DOM 上应用特殊的响应式行为。在这里，该指令的意思是：”将这个元素节点的 title特性和 Vue实例的message属性保持一致。”
####条件与循环
控制一个元素是否显示也相当简单：
<div id="app-3">
<p v-if="seen"> visible</p>
</div>
var app3 = new Vue({
el:'#app-3',
data:{
seen:true
}
});
> visible
> 在控制台输入 app3.seen = false , 原本页面显示的消息将会消失。
> 例子中表明，我们不仅可以将数据绑定到DOM 文本或特性，还可以绑定到DOM结构。此外，Vue 也提供了一个强大的过渡效果系统，可以在 Vue插入/更新/移除元素时自动应用**过渡效果**；
循环输出：
> v-for 指令可以绑定数组的数据来渲染一个项目列表：
<div class="loop">
<ol>
<li v-for="todo in todos">{{ todo.text }} </li>
</ol>
</div>
app.loop = new Vue({
el:'.loop',
data:{
todos:[
{
text:'学习javascript'
},
{
text:'学习 Vue'
},
{
text:'整个牛项目'
}
]
}
});
控制台中，输入app4.todos.push({text:'新项目'}); enter
处理用户输入
v-on 指令添加一个事件监听器，可以通过它调用在vue 实例中定义的方法：
<div class="on">
<p>{{msg}}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
app.reverseMsg = new Vue({
el:'.on',
data:{
msg:'Hello Vue.js'
},
methods:{
reverseMessage:function () {
this.msg = this.msg.split('').reverse().join('');
}
}
});
⚠️ 注意在reverseMessage 方法中，更新了应用状态，但是没有去触碰DOM–所有的DOM 操作都由Vue来处理，所编写代码只需要关注逻辑层即可。
Vue 还提供了 v-model 指令，他能轻松实现表单输入和应用状态之间的双向绑定。
<div class="input">
<input type="text" v-model="input">
{{input}}
</div>
app.input = new Vue({
el:'.input',
data:{
input:''
}
});
组件化应用构建
组件系统是 Vue的另一个重要概念，因为它是一种抽象，允许我们使用小型的、独立和通常可复用的组件构建大型应用。几乎任意类型的的应用界面都可以抽象为一个组件树。
<div class="component">
<ol>
<todo-item></todo-item>
</ol>
</div>
Vue.component('todo-item',{
template:"<li>这是一个待办事项</li>"
});
app.component = new Vue({
el:'.component'
});
加强版：
<div class="component">
<ol>
<todo-item v-bind:todo="todo" v-for="todo in todos" v-bind:key="todo.id">
</ol>
</div>
Vue.component('todo-item',{
props:['todo'],
template:'<li>{{todo.text}}</li>'
});
app.component = new Vue({
el:'.component',
data:{
todos:[
{id:0,text:'学习javascript'},
{id:1,text:'学习vue'},
{id:2,text:'学习node'}
]
}
});
尽管这是特意设计的例子，但是已经可以将应用分为两个更小的单元。子单元通过prop接口与父单元进行良好的解耦，可以更进一步的改进 <todo-item> 组件，提供更为复杂的模板和逻辑，而不会影响父单元。
在一个大型的应用中，有必要将整个应用程序划分为组件，以便开发更易管理。
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>
与自定义元素的关系
Vue组件非常类似于自定义元素–它是Web组件规范的一部分，Vue组件语法部分参考了该规范。关键区别：
- web组件规范仍然处于草案阶段，并且未被所有浏览器原生实现。相比之下，Vue组件不需要任何的polyfill，并且在所有支持的浏览器中（IE9及更高版本）表现一致。必要时，Vue 组件也可以包装于原生自定义元素之内。
- Vue组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通讯以及构建工具集成。