vue概述

发布时间：#

2014年2月，Vue.js正式发布

2015年10月27日，正式发布1.0.0

2016年4月27日，发布2.0的预览版本

Vue：渐进式JavaScript框架#

声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建

官网：https://cn.vuejs.org/v2/guide/

vue特点：#

易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue

灵活：在一个库和一套完整框架之间自如伸缩

高效：20kB运行大小，超快虚拟 DOM

传统开发模式对比#

原生js:

<div id="msg"></div>
<script type="text/javascript">
　　var msg = 'Hello World';
　　var div = document.getElementById('msg');
　　div.innerHTML = msg;
</script>

jQuery:

<div id="msg"></div>
<script type="text/javascript" src="js/jquery.js"></script>  
<script type="text/javascript">
    var msg = 'Hello World';
    $('#msg').html(msg);
</script>

vue.js之HelloWorld实现：

<div id="app">
    <div>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script> 
<script type="text/javascript">
    new Vue({
        el: '#app',
    　　data: {
        msg: 'HelloWorld'
         }
    })
</script>    

Vue.js之HelloWorld细节分析#

1. 实例参数分析

　　el： 元素的挂载位置（值可以是CSS选择器或者DOM元素）

　　data：模型数据（值是一个对象）

2. 插值表达式用法

　　将数据填充到HTML标签中

　　插值表达式支持基本的计算操作

3. Vue代码运行原理分析

　　概述编译过程的概念（Vue语法→原生语法）

详细分析：