本篇教程介绍了JavaScript基础教程 vue.js入门学习，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。

<

vue.js是一套构建用户界面的渐进式框架，它的核心库只关注视图层。它相比之其它的框架来说要更加的轻便，易于上手，相对与大部分的框架在性能方面要好一些。
不过也有不足的地方：比如不能支持IE8及以下的IE版本。
Vue.js的特性如下：
　　1.轻量级的框架
　　2.双向数据绑定
　　3.指令
　　4.插件化
 
Vue目前的的开发模式主要有两种：1.直接页面级的开发，script直接引入Vue2.工程性开发，webpack+loader或者直接使用脚手架工具Vue-cli，里面的文件都配置好了
webpack可以进行配置，配置多文件入口，进行多页面开发
 
渲染流程大概分以下几个步骤：

new Vue，执行初始化
挂载$mount方法，通过自定义Render方法、template、el等生成Render函数
通过Watcher监听数据的变化
当数据发生变化时，Render函数执行生成VNode对象
通过patch方法，对比新旧VNode对象，通过DOM Diff算法，添加、修改、删除真正的DOM元素


下面说一说vue的渲染模式有三种：
1、自定义的render函数





1.Vue.component('anchored-heading', {
2.    render: function (createElement) {
3.        return createElement(
4.            'h' + this.level,   // tag name 标签名称
5.            this.$slots.default // 子组件中的阵列
6.        )
7.    },
8.    props: {
9.        level: {
10.            type: Number,
11.            required: true
12.        }
13.    }
14.})

　　
2、 template写法



1.var vm = new Vue({
2.    data: {
3.        // 以一个空值声明 `msg`
4.        msg: ''
5.    },
6.    template: '<div>{{msg}}</div>'
7.})


　
3、el写法


1.var app = new Vue({
2.    el: '#app',
3.    data: {
4.        message: 'Hello Vue!'
5.    }
6.})
















这三种渲染模式最终都是要得到Render函数。只不过用户自定义的Render函数省去了程序分析的过程，等同于处理过的Render函数，而普通的template或者el只是字符串，需要解析成AST，再将AST转化为Render函数。
记住一点，无论哪种方法，都要得到Render函数。
我们在使用过程中具体要使用哪种调用方式，要根据具体的需求来。


如果是比较简单的逻辑，使用template和el比较好，因为这两种都属于声明式渲染，对用户理解比较容易，但灵活性比较差，因为最终生成的Render函数是由程序通过AST解析优化得到的；



而使用自定义Render函数相当于人已经将逻辑翻译给程序，能够胜任复杂的逻辑，灵活性高，但对于用户的理解相对差点。 




生命周期：
beforeCreate（创建前）
created（创建后）
beforeMount(载入前)
mounted（载入后）
beforeUpdate（更新前）
updated（更新后）
beforeDestroy（销毁前）
destroyed（销毁后）


   

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端JavaScript频道！