Vue入门

目录

1，什么Vue？

2，MVVM架构

3，Vue的基本用法

---

1，什么Vue？

        Vue是一个渐进式的JavaScript框架，目的就是简化前端开发，将后端数据快速展现到浏览器页面上。渐进式的渐：自底向上开发；进：使用各种插件库进行开发。其特点如下：

组件化	即封装，将所有HTML、CSS、JS交互脚本封装在一个容器当中
命令式	Vue底层已经将一些命令式语法进行封装，使用命令式语法快速编写代码，不用写原生JavaScript。这些命令式语法有：给标签添加属性、动态修改标签体内容等
虚拟DOM	Vue借鉴了MVVM结构，Vue作为一个中间桥梁VM使用diff算法优化DOM树，减少运算开销

        Vue使用原生JavaScript进行开发，能够识别HTML当中的特殊语法（字符串），进行把这些特殊语法（特殊字符串）进行处理，转换为真正的DOM树。

        因为Vue就是一个集成的js脚本，即.js文件，所以可以在head标签中使用script标签本地引入Vue.js文件。当引用Vue.js后，全局window就会新增一个属性window.Vue，即Vue构造函数。

        Vue的全局配置属性为：Vue.config，其为一个对象，该对象中还存在其他的属性和方法，用于控制Vue的全局配置，如下图：

Vue.config对象

2，MVVM架构

         Vue的设计者在设计Vue时参考了MVVM理念，Vue就是一个黑箱，拥有一套特定语法（用于处理特殊的HTML字符串），使用这套特定语法可以更快速地开发。由图可以看出，Vue实例的作用就是将数据与页面进行连接，并进行实时监听、实时渲染。

3，Vue的基本用法

        Vue的作用就是快速将数据展现到HTML页面，进而被浏览器渲染展现给用户。Vue可以看做是一个处理黑箱，他有一套默认的语法，然后将这套语法转换为HTML或者js语法。下面展示Vue的入门用法步骤。1.新建一个HTML容器；2，新建一个Vue实例；3，使用插值语法将数据送到HTML页面。

        在语法层面上，Vue是一个构造函数，若需要创建Vue实例则一定要使用new关键字。new会创建Vue的instance，并初始化其实例的this指向。不使用new则会把Vue()当作普通函数。

        Vue构造函数的参数是一个对象{},一般写作字面量形式。

        el属性用于指定该Vue实例用于处理哪一个容器的特殊语法（特殊字符串），他的值是一个字符串或一个node节点对象，当作为字符串时是css选择器的格式，也可以使document.getElementById('#root')获 取。

         data属性是一个对象，用于保存将要展现的HTML页面的数据，这个对象里面的属性值不能使用带引号的属性，如{'123mmd':123}，data对象里面的属性可以在el绑定的容器里面用{{}}进行使用。

        {{name}}即为Vue的插值语法，使用两个大括号{{}}将js表达式进行包围，{{}}里面必须是js表达式，即存在结果值的js语句，如：1+1，（）？x：y三元表达式。另外{{}}里面可以使用Vue实例对象的所有属性与方法，如{{config}}即展现Vue.config。

//在语法层面上，Vue是一个构造函数，若需要创建Vue实例则一定要使用new关键字
//Vue构造函数的参数是一个对象{},一般写作字面量形式
//el属性用于指定该Vue实例用于处理哪一个容器的特殊语法（特殊字符串），他的值是一个字符串或一个node节点对象，当作为字符串时是css选择器的格式，也可以使document.getElementById('#root')获取
//data属性是一个对象，用于保存将要展现的HTML页面的数据，这个对象里面的属性值不能使用带引号的属性，如{'123mmd':123}，data对象里面的属性可以在el绑定的容器里面用{{}}进行使用
//{{name}}即为Vue的插值语法，使用两个大括号{{}}将js表达式进行包围，{{}}里面必须是js表达式，即存在结果值的js语句

    

        
hello,{{name}}
    
    

        实际上，Vue({})这种传字面量对象的方式是一种类似语法糖的形式，其中el属性对应着Vue实例的mount方法。

        另外，一个Vue实例只能接管一个容器，按照代码运行顺序，如果在所有html代码之后引入script，那么最先创建的Vue实例会去接管DOM树中浅层的同名容器