一. Vue简介

Vue是一套用于构建用户界面的渐进式js框架，它的学习可以分为以下6个部分。

  2. Vue基础
  3. vue-cli
  4. vue-router
  5. vuex
  6. element-ui
  7. vue3

Vue有三个主要的特点：

  • 采用组件化模式，提高代码复用率、且让代码更好维护。
  • 声明式编码，让编码人员无需直接操作DOM，提高开发效率。
  • 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

理解组件化的含义，组件后缀为.vue，包括html，css，和js代码

这里推荐vue的官网，里面有文档和很多学习资源。

学习Vue之前要掌握的JavaScript基础知识包括ES6语法规范，ES6模块化，包管理器，原型、原型链，数组常用方法，axios，promise等等。

二. 搭建Vue开发环境

简单配置：

  2. 官网下载开发版本vue.js
  3. 浏览器安装vue devtools（一般浏览器插件库里可以搜到）
  4. 在html文件对vue.js进行引用即可完成一些简单的实验。

三. vue的知识点

1. vue的基本常识

入门知识

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue模板语法</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<!--
初识Vue:
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法;
3.root容器里的代码被称为Vue模板;
4.Vue实例和容器是一一对应的;
5.真实开发中只有一个Vue实例， 并且会配合着组件一起使用;
6.{{xxx}}中的xxx要写js表达式，且xx可以自动读取到data中的所有属性;
7.且data中的数据发生改变，那么模板中用到该数据的地方也会自动更新;
-->
<!-- 创建一个容器  为Vue提供模板，展示Vue的工作成果  -->
<div id="root">
<h1>插值语法</h1>
<h2>hello {{name}} {{school.address}}</h2>  <!-- {{}}是分隔符（插值语法）  里面需要是js表达式-->
<h1>指令语法</h1>
<a v-bind:href="url">百度</a>  <!--动态绑定  url就变成了js表达式-->
<a :href="url.toUpperCase()">百度</a>
</div>
<script type="text/javascript">
//修改全局配置
Vue.config.productionTip=false;//阻止Vue在启动时生成生产提示
//创建Vue实例
// const x=    Vue实际上是一个构造函数
new Vue({
el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
name:'hhh',
url:'http://www.baidu.com',
school:{
name:'法拉希',
address: '北京西路',
                }
            }
        });//只传一个参数——配置对象
//容器和实例是一一对应的关系
</script>
</body>
</html>```

</details>