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之基本步骤

<div id="app">
        <div>{{msg}}</div>
        <!-- 插值表达式 -->
        <div>{{1+2}}</div>
        <div>{{msg + '------' + 123}}</div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        /* 
            Vue的基本使用步骤
            1、需要引入提供标签用于填充数据
            2、引入vue.js文件
            3、可以使用vue的语法做功能
            4、把vue提供的数据填充到标签里
         */

        var vm = new Vue({
            el:'#app',
            /* 把数据填充到哪个标签 */
            data:{
                msg:'Hello Vue'
            }
        })
    </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代码