Vue的功能是为视图提供响应的数据绑定及视图组件，Vue是数据驱动式的，不直接修改DOM而是直接操作数据实现对界面进行修改。
首先我们需要在script中定义一个Vue实例，定义方法如下：
var vm =new Vue({ el: '#app', props:{} data: { }， methods:{}, computed:{}, watch:{}, component:{}, template: {}， directive：{}， beforecreate:{} created:{}, beforemount:{}, mounted:{}, filter:{}, //后面进行补充 })
以上除el外其他项均可为空，或直接不包含。
el:挂载点，通常我们会将Vue实例挂载点一个同id的Div，就像下面这个
<div id=”app”>
</div>
data:属性，采用键值对的方式进行声明。示例：
data: {
text:'123,456',
message: 'Runoob!'
},
在组件内部方法可通过this.text来访问text属性
另外data还可以使用外部声明的对象，比如如下语句：
var mydata =
{
site: "小牛",
url: "www.baidu.com",
alexa: 10000
}
var vm = new Vue({
el: '#vue_det',
data: mydata
})
此处与mydata对象为同一地址，修改会相互影响，可直接通过vm.site来进行访问。
props:参数，props 可以是数组或对象，用于接收来自父组件的数据。
<div id="app1">
<child my-message="hello!"></child> //父组件中设置子组件参数
<child :my-message=" message "></child> //子组件参数绑定到父组件中的message属性
</div>
<script>
Vue.component('child', {
// 在 JavaScript 中使用 camelCase
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
new Vue({
el:"#app1"，
data:{
message: 'Runoob!'
}
})
</script>
特别注意：js中用驼峰式命名，在html中需替换成短横线分隔式命名
methods:方法，提供可供内部或者外部调用的接口，可带参也可不带参,可有返回值也可没有返回值，示例如下：
不带参：
reverseMessage:function(){
this.message = this.message.split('').reverse().join('')
}
带参：
reverseMessage:function(num){
this.message = this.message+num
}
有返回：
reverseMessage:function(){
return this.message.split('').reverse().join('')
}
computed:计算属性，计算属性是一种只读属性，示例如下：
reverseMessage:function(){
return this.message.split('').reverse().join('')
}
会发现计算属性与有返回的Vue方法相似，不过区别在与，Vue方法在每次渲染均会重新运算，但计算属性只会在依赖项变化后才会重新运算。
watch:属性监听，可对实例的属性进行监听，出现变化便运行指定的方法,例如：
不带参：
message:function(){
this.text = this.text + this.message
}
带一个参：此时的参数val即为被监听属性message的新值
message:function(val){
this.text = this.text + val
}
带两个参：参数分别为被监听属性的新值和旧值
message:function(newval,oldval){
this.text = this.text + newval + oldval
}
另外我们还可以在Vue外部对属性进行监听，方式如下：
vm.$watch('kilometers', function (newValue, oldValue) {
、、、、//此处省略一万字
})
component:组件，提供模板，在Vue内部注册的为局部模板，方式如下
局部组件
可以在Vue外部定义一个模板变量,例如
var Child = { template: '<h1>自定义组件!</h1>' }
再在Vue内部进行声明，例如：
components: { // <runoob> 将只在父模板可用
'runoob': Child
}：
全局组件
在Vue外部定义全局的模板，例如：
Vue.component('runoob',{ template: '<h1>自定义组件!</h1>' })
这样在不同的Vue挂载点下均可以使用该组件，如何使用component呢，可以参考下面的示例：
<div id="app">
<runoob></runoob>
<h1>哈哈哈哈</h1>
</div>
另外component也是一个Vue实例，我们可以在里面添加参数props、方法methods等均可。
例如：
Vue.component('button-counter', {
template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
incrementHandler: function () {
this.counter += 1
this.$emit('increment')
}
},
})
template:模板，如果为空，则挂载点下的元素就为模板，如果挂载点下元素不为空，则采用挂载点下的元素作为模板，即template模板无效，例如
template: '<h1>自定义组件!</h1>'
此时如果挂载点下包含元素，例如
<div id="app1">
<h1>dfsdfsdf</h1>
</div>
则该template无效，
directive：自定义指令，可以全局注册也可以局部注册，例如下面的示例，可以让DOM元素在加载时获取光标。
局部注册，挂载点默认加载时获得焦点
directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } }
也可以采用全局注册的方式：
// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } })
然后通过在节点元素添加v-focus即可使用，例如：
<input v-focus>
生命周期
下面是一个有关生命周期的Vue示例，
var myVue=new Vue({ el:"#app-8", data:{ data:"aaaaa", info:"nono" }, beforeCreate:function(){ console.log("创建前========") }, created:function(){ console.log("已创建========") }, beforeMount:function(){ console.log("mount之前========") }, mounted:function(){ console.log("mounted========") }, beforeUpdate:function(){ console.log("更新前========"); }, updated:function(){ console.log("更新完成========"); }, beforeDestroy:function(){ console.log("销毁前========") }, destroyed:function(){ console.log("已销毁========") } })
不同的时间节点，页面所处的状态不一样，例如：
Beforecreate:Vue实例的挂载点及数据data均还未初始化
Create:Vue实例的数据data已经初始化，但挂载点还未初始化
Beforemounted:Vue实例的挂载点的DOM还是虚拟的，比如{{data}},就是虚拟DOM
Mounted:此时Vue实例的挂载点已经是真实的DOM。可进行有关挂载点节点的相关操作。
上诉即为Vue定义的内容，因为时间关系明天会对该博客进行补充，后面还将对Vue提供的语法进行讲解。
