【Vue】Vue入门：el挂载及data数据对象

前言

最近在公司工作时，需要针对Vue的框架修理bug，由于自身对Vue不太熟悉，所以前辈就让其去学习一下Vue，以便更好的投入到工作当中，顺便随便写个文章来记录下遇到的问题。

基础

---

简介

1.js框架
  使用之前，要先清楚，vue只是一个js的框架，而不是一个特别的语言，所以在学习vue之前，要先学会前端的三大剑客，HTML,CSS,JavaScript。而当前学习的Vue就是JavaScript的框架，为的是能更快速、方便的进行网页开发，以及与后端的交互等。
2.简化dom操作
  如果在学习或者在开发的时候，使用过html+js+jsp来进行前后端开发维护的话，就知道dom的操作有多蛋疼。
  想起以前在自学的时候，使用jsp+html+js来渲染搭建网页的时候，就会使用dom操作，比如获取某个dom对象，然后在js中用此对象来添加className，或者添加属性，并且在添加的时候不同浏览器还有不一样的限制，比如ie不支持直接使用 dom对象.xxx.属性 来添加style属性，不然也会导致不少错误。
  vue框架会自带脚手架，可以直接在.vue中，搭建html的框架，然后直接使用js的语法，以及vue封装好的框架，给html添加数据、添加css样式，并且前后端交互的时候使用ajax也不需要在jsp中添加js语法来进行交互。
3.数据更新联动页面更新
  vue搭建的时候，可以使用特定的方法来监控数据的变化，在vue中使用了html的框架，在数据的变化的时候，页面也会自动的根据数据变化而刷新数据，从而达到数据驱动页面。vue自带数据监听的方法，这个会在以后学习的时候细说。

---

简单入门（三步骤）

  简单入门vue，先用html导入vue框架简单的搭建一个页面。
1.创建html文件，导入Vue

2.创建Div标签，创建Vue实例对象

3.使用声明式渲染

    

        {{ message }}
    
    
    
    

以下为效果图：

可以看到，data { message }，message里面的value值赋值在div中，并且展现了出来，第一个vue程序就做完了

---

el(挂载点)、data(数据对象解析)

  首先抛出两个问题
1.vue实例的el是什么
2.为什么创建在data里面的message能赋值在div中

el挂载点

概念
    挂载点，就相当于在创建Vue对象的时候，使用 el: 选择器 可以绑定某一个标签，如

则可以使用 el: ‘#app’ 来绑定id为app的div标签，从而创建了此div标签的vue实例。可以对此div以及内部标签进行操作
作用范围
    对于作用范围来说，vue对象挂载了某一个标签，在vue实例里面，只能对挂载标签以及挂载标签的内部进行操作，不能对挂载标签的外部进行操作，如下面代码。

	
    {{ message }} 
    

        {{ message }}
        
        	{{ message }}
        
    

    

选择器
    el: 选择器 那么el又是如何对div进行绑定呢，内部原理使用的就是css的选择器，在css设置元素的时候，可以使用css的选择器来绑定选择的哪个标签，el也是一样，至于选择器如何使用，请看此教程：https://www.w3school.com.cn/cssref/css_selectors.asp
挂载元素
    简单提一下，el挂载的可以挂载在

等多种标签页中，但是要注意的是不能挂载在 这两个标签中

---

data数据对象

概念
    data概念很简单，其实主要就是vue所用到的数据，都在data里面定义
可以定义哪种类型
    data根据key:value来进行数据的定义，在标签中可以使用key，然后展现的是value值，上面简单的事例定义了 key:string的类型，data不只是只能定义string类型，而是可以定义任何类型，主要符合规范就可以
如何使用复杂类型
    由于data可以定义任何类型，则复杂类型如何使用呢，如object、array类型，其实使用很简单，遵循js的规范使用就行，例子如下。

   
   {{ message }} 
   

       {{ message }}
       
       	{{ message }}
       
       

           {{ messageObject.name1 }}
       
       

           

               {{ messageArray[0] }}
               {{ messageArray[2] }}
           
       
   
   

---

总结

    对于Vue的入门并且搭建一个简单的项目是经搞定了，其实这篇文章没学到什么新概念，但是能基础的了解vue最开始的是如何做的，如何定义的，以及如何搭建第一个Vue框架。
    后面的话将会记录Vue框架的指令，如v-bind,v-if等。