前言
最近在公司工作时，需要针对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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
1.进入Vue官网
2.创建html页面
3.导入Vue所需要的包在html页面中
-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Vue 入门，声明式渲染</title>
</head>
<body>
</body>
</html>
2.创建Div标签，创建Vue实例对象
<body>
<div id="step1">
</div>
<!--
1.相当于创建了一个vue对象
2.使用选择器，赋值给el，绑定了id为step1的div标签
3.相当于step1Vue绑定了 id为step1的标签对象，可以用此对象操作标签
-->
<script type='text/javaScript'>
var step1Vue = new Vue({
el: '#step1'
})
</script>
</body>
3.使用声明式渲染
<body>
<div id="step1">
{{ message }}
</div>
<!--
1.使用data(数据对象)，并且创建key(message)以及对应的value
2.在div标签下使用 {{}} 双大括号，里面写入key值
3.具体渲染出来的效果可以在下面看到
-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type='text/javaScript'>
var step1Vue = new Vue({
el: '#step1',
data: {
message: '这个就是所展现的内容，可以赋值'
}
})
</script>
</body>
以下为效果图：
可以看到，data { message }，message里面的value值赋值在div中，并且展现了出来，第一个vue程序就做完了
el(挂载点)、data(数据对象解析)
首先抛出两个问题
1.vue实例的el是什么
2.为什么创建在data里面的message能赋值在div中
el挂载点
概念
挂载点，就相当于在创建Vue对象的时候，使用 el: 选择器 可以绑定某一个标签，如 <div id=“app”> 则可以使用 el: ‘#app’ 来绑定id为app的div标签，从而创建了此div标签的vue实例。可以对此div以及内部标签进行操作
作用范围
对于作用范围来说，vue对象挂载了某一个标签，在vue实例里面，只能对挂载标签以及挂载标签的内部进行操作，不能对挂载标签的外部进行操作，如下面代码。
<body>
<!-- 挂载在id为step1的标签，作用范围也只能在内部，而不能在外部 -->
{{ message }}
<div id="step1">
{{ message }}
<span>
{{ message }}
</span>
</div>
<script type='text/javaScript'>
var step1Vue = new Vue({
el: '#step1',
data: {
message: '这个就是所展现的内容，可以赋值'
}
})
</script>
</body>
选择器
el: 选择器 那么el又是如何对div进行绑定呢，内部原理使用的就是css的选择器，在css设置元素的时候，可以使用css的选择器来绑定选择的哪个标签，el也是一样，至于选择器如何使用，请看此教程：https://www.w3school.com.cn/cssref/css_selectors.asp
挂载元素
简单提一下，el挂载的可以挂载在 <div> <h2> <span>等多种标签页中，但是要注意的是不能挂载在 <body> <html> 这两个标签中
data数据对象
概念
data概念很简单，其实主要就是vue所用到的数据，都在data里面定义
可以定义哪种类型
data根据key:value来进行数据的定义，在标签中可以使用key，然后展现的是value值，上面简单的事例定义了 key:string的类型，data不只是只能定义string类型，而是可以定义任何类型，主要符合规范就可以
如何使用复杂类型
由于data可以定义任何类型，则复杂类型如何使用呢，如object、array类型，其实使用很简单，遵循js的规范使用就行，例子如下。
<body>
<!-- 挂载在id为step1的标签，作用范围也只能在内部，而不能在外部 -->
{{ message }}
<div id="step1">
{{ message }}
<span>
{{ message }}
</span>
<h2>
{{ messageObject.name1 }}
</h2>
<ul>
<li>
{{ messageArray[0] }}
{{ messageArray[2] }}
</li>
</ul>
</div>
<script type='text/javaScript'>
var step1Vue = new Vue({
el: '#step1',
data: {
message: '这个就是所展现的内容，可以赋值',
messageObject: {
name1: '我是名称1',
name2: '我是名称2'
},
messageArray: ['我是数组1', '我是数组2', '我是数组3']
}
})
</script>
</body>
总结
对于Vue的入门并且搭建一个简单的项目是经搞定了，其实这篇文章没学到什么新概念，但是能基础的了解vue最开始的是如何做的，如何定义的，以及如何搭建第一个Vue框架。
后面的话将会记录Vue框架的指令，如v-bind,v-if等。
扫一扫
1259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
