本篇内容主要总结了vue最核心的基本功能，内容梳理都是按照官网来的。建议初学者跟着官网实例都敲一遍，会加深印象。
一. Vue 声明式渲染
vue.js的核心是一个允许采用简洁的模版语法来声明式地将数据渲染进Dom系统
<div id="app"> //必须要有一个根结点来包裹元素
{{ message}} //打印输出 hello world！
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message: 'hello world! '
}
})
</script>现在data数据和Dom元素就被创建了关联，所有的东西都是响应式的，我们可以修改data
里面message的值，对应的Dom元素中会做相应的改变。
除了文本插值，我们还可以绑定元素特性(v-bind:属性值 指令)：
<div id="app">
<span v-bind:title="message">
鼠标停留显示提示文字
</span>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
message:'提示文字'
}
})
</script>此处给span标签绑定了title属性，属性值为data数据中message属性的值。下图为页面显示效果：
二. Vue条件与循环
控制一个元素是否显示（v-if 指令）
<div id="app">
<span v-if="seen">
现在你可以看到我了
</span>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
seen: true //值为true，则span可以显示，为false则隐藏
}
})
</script>这个例子说明了我们不仅可以像上面把数据绑定到Dom元素的文本上，还可以控制Dom的结构。
还有其他很多的指令，例如v-for可以绑定数组数据来渲染一个项目列表：
<div id="app">
<ul>
<li v-for="todo in todos">{{todo.text}}</li>
</ul>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
todos:[
{text:'学习npm指令'},
{text:'学习Ecmascript5'},
{text:'学习Vue'}
]
}
})
</script>页面展示如下图所示：
三. vue添加事件
为vue添加事件，我们可以使用v-on指令
<div id="app">
<span>{{message}}</span>
<button v-on:click="reverseMessage">逆转信息</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:'hi Vue!'
},
methods:{
reverseMessage:function(){
this.message = this.message.split('').reverse().join('')
}
}
})
</script>使用vue为元素添加事件，首先需要在html中可以使用v-on:事件名称 = 方法名，其次需要在js中使用 methods属性定义方法
页面展示如下图所示：
vue还提供了双向绑定的功能，可以使用指令v-model
<div id="app">
<span>{{message}}</span>
<input v-model = "message" />
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"hello world!"
}
})
</script>页面展示如下图所示：
四. 组件化应用构建
组件系统是vue的另一个重要的概念，允许我们使用小型、独立和通常可复用的组件构建大型应用。在vue中，一个组件本质上是一个拥有预定义选项的vue实例。在vue中注册组件可以使用如下代码：
//定义一个名为'todo-item'的组件实例
Vue.component('todo-item',{
template:'<li>这是代办项</li>'
})vue的组件非常类似自定义元素—它是web组件规范的一部分，这是因为web的组件语法部分参考了该规范。里面还有一些关键差别，你可以参考官网的介绍。
vue官网连接：https://cn.vuejs.org/v2/guide/index.html