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提供的语法进行讲解。