Vue入门学习（上）

本篇用作记录自己初次学习Vue的一个过程，尝试用自己的方式总结Vue的常用的用法，此次也是在自己通读了Vue的文档以后，做出的一些总结，对于vue-router，以及vuex不会涉及，当然会提到一些初步使用vue-cli的构建工具。
vue的文档条理也是非常清晰，博主也是用vue文档的划分来先了解简单基础的应用，下面是按照博主自己的理解来划分的几个模块。

1. vue的生命周期
2. vue实例的创建及可选配置方法
3. 模板语法
4. 事件处理
5. 表单处理
6. vue组件
7. 过渡动画

8. 扩展及可复用性

   博主自己快速复盘一次，内容确实比较多，因此暂时分为上下两部分来加深自己的学习，如果有记录错误或者不准确的地方，也是欢迎大家指正。
   首先看第一条，一般我们学习一个新的框架，总是会最先看框架的生命周期，特别对于前端三大框架来说，相信学过react的同学也是非常的清楚了，vue也是有基本一样的生命周期钩子，下面这个是博主在文档中摘录的vue生命周期图
   

   这张图也非常容易理解，至少在博主看来比react的图更加简单，首先我们创建vue实例，通过new vue()这样的构造函数方法创建实例，创建好以后，vue则会进行初始化事件以及生命周期，下一步则是初始化依赖和动态属性，在这两步之间有一个钩子，就是beforeCreate，然后实例被创建，created钩子执行，vue会检查实例当中是否有el选项，没有的话，当调用vm.$mount(el)时，也能将实例挂在在dom上。

<!-- html -->
<div id="app">{{message}}<div>
<!-- script -->
var vm = new Vue({
    data: {
        message: 'hello vue'
    }
})
vm.$mount('#app')  

这样做实际就等于

new Vue({
    el: '#app',
    data: {
        message: 'hello vue'
    }
})

两者效果是一样的，然后会继续检查是否有template选项，有的话就编译模板字符串，没有的话，就编译el元素的outerHTML，特意查了一下这个outerHTML，其实就是将子元素变成一个字符串形式的，有兴趣的可以去这里看看。接下来就是挂载DOM在根元素上，然后收到数据变化，虚拟DOM会重新渲染，再到组件卸载，这个过程也是比较容易理解，就不多说了，总之这张图确实后期可能会解决很多问题。
下面说说vue实例的创建，看看这个简单的例子

new Vue({
    el: '#app',
    data: {
        key: 'value'
    },
    computed: {
        counter: function(){
            // 进行一些复杂的计算逻辑
        }
    },
    methods: {
        submit: function(){
            //某个动作会经常被执行，例如点击事件等等
        }
    },
    watch: {
        key: function(){
            //监听某个属性的变化
        }
    }
})

文档中关于这三个属性也做了很多介绍，其中记住一句话就可以了，计算属性是基于他们的依赖进行缓存的，即这里的counter基于data中的某个属性来计算的，如果data中的数据不改变的话，那么计算的结果也是一直不会变的，watch属性则一般用于监听异步以及开销比较大的操作时使用。
创建好我们的vue实例，接下来我们就需要去将实例当中的数据渲染到页面上，所以就有了简单的模板语法，vue的模板语法其实和Angular是非常相似的，首先是插值语法，就是用双花括号来包裹数据，这些数据不仅可以写文本，还可以写原始的HTML文本，以及js的表达式，当然对于一些比较复杂的表达式，肯定还是推荐放在方法或者是计算属性当中的，其中需要注意的地方就是如果你想为某个元素用双花括号的形式赋值文本，这个是行不通的，对于html元素上自带的属性，需要使用v-bind:id来绑定

<div v-bind:id="dynamicId"></div>

然后我们就说到了vue的指令，v-bind正是其中一个内置的指令，最后则是对于这些指令一些缩写的形式，就是vue规定的特殊形式。
指令主要有几个大类，绑定属性v-bind，绑定事件v-on，循环控制v-for，逻辑判断v-if，v-else-if，v-else，以及表单元素通常使用的v-model等，文档上面介绍的非常全面，关于指令能够接受的参数，使用的场景以及注意事项均有实例，这里也就不赘述了，明白了使用方法，会发现指令就是对一些逻辑行为的封装，后面我们也会去自己封装自定义的指令。
本篇最后也是说到了事件处理，vue的事件处理是绑定在v-on上面的，和普通的事件并无区别，需要注意的事v-on指令绑定的事件，后面可以接一个方法，或者是一个js表达式都是可以的，和上面的插值语法也是一样的。另外vue还给事件方法提供一个$event，用来访问原始的DOM事件，这个就相当于我们的event对象，例如阻止默认事件，传入这个$event参数后，我们就可以用event.preventDefault()方法了。
说到阻止默认事件，vue也给我们提供了另外一种方法，那就是修饰符，

<form v-on:submit.prevent="onSubmit"></form>    

像这样用.prevent就代表了阻止表单默认提交，感觉也是方便了许多，还有更多的事件修饰符，后续小伙伴都可以随时来翻阅vue的官方文档。目前说的也都是vue的基础知识，自己也是写这篇记录的时候也是同时将基础部分再次学了一次，也是收获了更多的东西，关于vue的高级用法，自己也是还没有能完全理解，会继续抓紧学习，来总结剩下的几点。