1.Vue概述

一、Vue的创建者及Vue的历史

尤雨溪老师：Vue.js的创建者

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

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

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

二、Vue概述

(1)渐进式的JavaScript框架

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

(2)优点

　　(2.1)易用:熟悉HTML、CSS、JavaScript之后，可以快速上手Vue

　　(2.2)灵活:在一个库和一套完整框架之间自如伸缩

　　(2.3)高效:20kb运行大小，超快虚拟DOM

三、Vue的基本使用

　　(1) Vue的Hello World之基本步骤

 1 <div id="app">
 2         <div>{{msg}}</div>
 3         <!-- 插值表达式 -->
 4         <div>{{1+2}}</div>
 5         <div>{{msg + '------' + 123}}</div>
 6     </div>
 7     <script src="./js/vue.js"></script>
 8     <script>
 9         /*
10             Vue的基本使用步骤
11             1、需要引入提供标签用于填充数据
12             2、引入vue.js文件
13             3、可以使用vue的语法做功能
14             4、把vue提供的数据填充到标签里
15          */
16
17         var vm = new Vue({
18             el:'#app',
19             /* 把数据填充到哪个标签 */
20             data:{
21                 msg:'Hello Vue'
22             }
23         })
24     </script>

　　(2) Vue的Hello World之细节分析

　　　　(2.1)通过new Vue({})的方式定义了一个Vue实例，其中的实例参数为el和data

　　　　　　el:元素的挂载位置(值可以是CSS选择器或DOM元素)

　　　　　　data:模型数据(值是一个对象)

　　　　

　　　　(2.2)插值表达式的用法

　　　　　　将数据填充到HTML标签中

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

　　　　(2.3)Vue代码运行原理分析

　　　　　　Vue代码通过Vue框架编译成原生的JS代码