Vue入门学习总结一：Vue定义

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