初始VUE
目录
什么是vue
vue的特点
前置js基础知识
vue2
安装vue devtools
搭建开发环境
Vue对象的el及data写法
el的处理
data的处理
特点
什么是js表达式，js代码（语句）
vue脚手架（vue cli）
使用说明
具体步骤
脚手架项目解析
index页面中代码部分解析
总结
vue.js和vue.runtime.xxx.js的区别
什么是vue
用官网的一句话就是：我是一套用于构建用户界面的渐进式JavaScript框架。！
渐进式：vue可以自底向上逐层的应用。
简单应用：只需要一个轻量小乔的核心库即可；
复制应用：引入各式各样的vue插件组合
vue的特点
1、组件化的模式，提高了代码的复用率，并且使得代码更好的维护
2、声明式的编码，使得编码人员不需要直接操作DOM，提高了程序员的开发效率
3、Diff比较算法以及虚拟DOM，尽可能高的去服用DOM节点信息。
前置js基础知识
ES6的语法规范、ES6的模块化、包管理器、原型以及原型连、数组常用方法、axios、promise等等
vue2
vue2文档
安装vue devtools
进入其github主页：https://github.com/vuejs/devtools#vue-devtools
可以看到右侧，根据自己选择浏览器的适配。
搭建开发环境
我们参考vue2文档中，可以参考最简单的使用方式，通过<script>标签引入vue
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
在webstorm中创建一个空白项目，这里的工具使用默认大家都是完全掌握的。创建了helloWordl.html
初学一门开发语言，往往是从hello world开始的。
具体内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
<div id="firstvue">
<h1>hello {{name}}</h1>
</div>
<script type="text/javascript">
// 创建一个Vue实例
new Vue({
el:'#firstvue',
data:{ 写为一个对象。
name:'world123'
}
})
</script>
</body>
</html>
第一个helloworld我们就这么完成了，其实这里面没有涉及太多的vue支持，接下来我们看一下这个demo中你要了解的内容：
Vue对象的el及data写法
el的处理
vue给我们提供了2种关于el的写法：
1）、new Vue的时候就将el属性配置上，如上方代码所写
2）、我们只是创建了Vue示例，但是没有配置el属性，在我们想要配置el属性的时候，使用代码vm.$mount('css选择器')来进行el的指定挂载。
data的处理
vue给也为我们提供了2种关于data的写法
1）、对象的形式，如上方代码所写
2）、函数式的形式，在学习的过程中可以采用1的形式，但是在使用到组件的时候，data'就需要使用函数式来写了，
注意：这里我们需要了解，由Vue管理的这些函数，一定不能用箭头函数，只要我们用了箭头函数，this他指的就不是我们Vue实例了。
特点
1、我们如果想让vue去工作，则我们必须要去创建一个vue实例，并且配置一个配置对象；
2、root容器里面的代码他是必然符合html规范的，他只不过是混入了一些特殊的vue语法；
3、root容器里面的代码，我们是统称为“vue模板”
4、花括号中可以接受js表达式和js代码（语句）
5、vue实例他适合容易一一对应的
6、真是开发中只有一个vue实例的，并且会配合着一些组件去使用的
7、{{abc}}中的abc是要写js表达式，并且abc他可以自动读取到data中的所有属性信息
8、我们data中国你的数据一旦发生了改变的话，name页面中用到这个数据的地方他会自动进行更新操作
什么是js表达式，js代码（语句）
1、表达式： 一个表达式会生成一个值，可以放在任何一个需要值得地方；
1）、a
2）、a+b
3）、sub(1)
4）、a === b？c:d
2、js代码（语句）
1）、if(){}
2）、for(){}
vue脚手架（vue cli）
使用说明
1、Vue脚手架是Vue官方给我们提供的标准化开发工具（平台）
2、文档地址：https://cli.vuejs.org/zh/
具体步骤
1、全局安装@vue/cli（只有在第一次安装的时候执行即可）
npm install -g @vue/cli
2、切换到我们要创想项目的目录中，在执行下面的命令
vue create 项目名称
3、启动项目
npm run serve
脚手架项目解析
package-lock.json 包版本控制
package.json 包的说明书
README.md 项目使用及升级记录或者笔记
public
index.html 主页面
src
assets 存放静态资源文件
当执行npm run serve后，会执行src下的main.js
index页面中代码部分解析
<!--针对IE浏览器的一个特殊配置，是使得IE的浏览器以最高的渲染级别渲染页面-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--开启移动端的理想视口-->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--<%= BASE_URL %>指的是public所在的路径-->
<!--配置页签的图标-->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!--配置网页的标题-->
<!--htmlWebpackPlugin.options.title 这一段是找的package.json中找到name-->
<title><%= htmlWebpackPlugin.options.title %></title>
<noscript><!--如果浏览器不支持js则这段代码会显示出来，否则不显示-->总结
vue.js和vue.runtime.xxx.js的区别
1、vue.js他是一个完整的Vue。其中包含了核心功能以及模板解析器
2、vue.runtime.xxx.js是我们的运行版本的Vue。他只包含了核心功能组件，不包含核心模板接卸器
正式因为vue.runtime.xxx.js去掉了模板解析器，所以才导致了他不能够使用template这个配置项。
因此，官方给我们提供了render函数，他可以接受到createElement函数，并且用来指定具体的内容。
好了，初始vue就到这里。
欢迎大家点击下方卡片，关注《coder练习生》