前端四要素

1. 逻辑：
   • 判断 if
   • 循环 for
2. 事件

• 浏览器事件：window document
• Dom事件： 增 删 遍历 修改节点元素内容
• jQuery
  • jQuery 是一个轻量级、开源、免费的 JavaScript 工具库
  • 他是JS框架
  • 专门用来简化原生 JavaScript 的开发，解决网页交互、DOM 操作、浏览器兼容等问题
  • jQuery 本质就是对原生 JavaScript（下称原生 JS）的封装，是一个基于原生 JS 编写的轻量级前端工具库，它的所有功能底层最终都会转化为原生 JS 代码在浏览器中执行，核心目的就是把原生 JS 中常用、繁琐、兼容性差的代码封装成简洁易用的 API，让开发者用更少的代码实现需求（呼应其核心宗旨 Write Less, Do More）。

3. 视图
   • html
   • css： 是难点 但是可以使用BootStrap（他是CSS框架，通过拖拽的方式创建好看的页面）
   • js
4. 通信
   • Ajax
   • axios 是Ajax的封装，最常用

Vue学习线路大体介绍

视图：html CSS JS (给用户看的，刷新后台给数据)

网络通信：axios

页面跳转： vue-router

状态管理： VUE

Vue-UI: ICE

补充模块化开发是后端提出来的他将后端的MVC（后端的V现在都是交给前端用Vue或者React实现）转变为了MVVM View 视图 DATA vm: 数据双向绑定

前端三大框架

UI框架

JS构建工具

vue特点

补充

真正工作中前端是不会去写CSS的

前端打包工具：webpack

ES6就是一种js的语法规范，类似与java8和java的关系

TS是JS的升级，他的效果更好。但是在编译后还是JS

后端需要学习

分布式，微服务，大数据

第一个Vue程序

VUE的实现逻辑

视图<------逻辑（双向绑定） ---------->数据

双向绑定特点

vue七大对象

1. el:element 元素
2. data: 数据
3. methods

Vue实质

viewModel 就是双向绑定的

Vue基本语法

就三种逻辑

1. 本来就要显示的
2. if 条件
3. for: 循环

因为vue都是从model中拿取数据的，而数据都是存放在data中的

for使用

if使用

DOM 和 BOM

DOM：管页面内容的，让 JS 能 “操作网页标签”；管理页面的标签，内容和样式

BOM：管浏览器本身的，让 JS 能 “控制浏览器”；

二者关系：DOM 在 BOM 里面，通过 BOM 的顶层对象window才能访问 DOM。

Vue绑定

v-bind（缩写 :）：绑定DOM 元素的属性 / 特性，关联 “数据→视图”，核心是 “传数据”；

v-on（缩写 @）：绑定DOM 元素的事件，关联 “视图→逻辑”，核心是 “响应用户操作”；

二者是 Vue 模板中最基础的两个指令，分别处理 “数据渲染” 和 “交互逻辑”，是 Vue 响应式开发的核心基础。

v-on 的核心作用是给 HTML 元素绑定事件监听器（比如点击、输入、鼠标移动等交互行为），当事件触发时，执行 Vue 实例中对应的方法 / 逻辑，是 “视图→逻辑” 的交互关联。

v-bind 的核心作用是把 Vue 实例中的数据动态绑定到 HTML 元素的属性上（比如 src、href、class、style、自定义属性等），数据变则属性值变，是 “数据→视图” 的单向关联。

v-on 绑定事件 v-on:

绑定什么（绑定一个点击事件）事件： 使用 v-on: click="方法名字"

双向绑定

实现方法 ：使用v-model

Vue组件

vue组件就是自定义标签。同时把组件也看成是一个模版

Vue.component 定义组件，组件里面有两个属性

1. props:能接收参数
2. template: 能定义模版

组件能接收东西，能定义模版就ok了

Axios通信技术

axios是让前后端的数据可以互通，以下讲解的是通过axios将将josn数据展示在前端

实现方案

1. 先创建一个data.json文件

2. 使用钩子函数mounted()： mounted(){ axios.get('../data.json').then(response => (this.info=response.data));} mounted() 使用方法 上面的写法是链式编程，ES6新特性

   • axios.get("json文件的相对位置") 通过get方法获取到data.json数据
   • .then表示获取到数据后我们要做什么（then(response => (this.info=response.data))） 我们要做的是将响应数据拿出来，放到info属性中，之后我们就可以通过info展示data.json文件中的数据了

3. 使用vue对象的data()方法（注意不是data属性）return表示要返回的东西是什么，下图表示的意思就是我要将info中name和url返回出去。返回出去后前端的视图模块就可以展示信息了

4. 现在json数据就可以渲染在前端了

5. 特别注意：如果使用了超链接跳转href前面要加上v-bind进行绑定。 info中的内容（请求的返回参数）必须要和json字符串一样

   ​

计算属性

计算属性： 计算出来的结果，保存在属性中。并且在内存中运行（利用了虚拟Dom） 可以把他看作是从缓存中拿取值

使用方式

1. 调用vue对象的computed方法，然后写入一个计算时间的方法进行测试
2. 视图在展示的时候，直接写属性名字，而不用写方法的名字。
3. 特点： 每次调用的时候都是从缓存中拿数据，加快了访问速度。但是当调用新的内容的时候，缓存会被打破 他会重新加载（缓存失效，重新计算）
4. 对于结果不经常变换的计算，可以使用计算属性

插槽Slot

形象类别

可以在凹槽中配置各种东西

使用方法

1. 创建vue对象
2. 创建多个组件，其中在创建插槽所使用的组件时，要在定义模版内容的时候格外注意 通过使用 \ 进行换行
3. 在组件标签中定义绑定关系和调用关系

下图所示为数据的传递方向

实际上只要理解了数据是如何传递的， 绑定关系是如何建立的 ， 是怎么调用数据的，理解插槽就会更加的简单，他无非就是多了一个模版写法而已。下面来介绍一下这三种方式是如何实现的。

1. vue对象里面通过data属性创建了数据源，用于后期视图进行展示
2. 定义的组件件对象，通过props属性和vue对象中data中的数据建立联系。当这层联系建立后，数据源中的数据就可以 以props作为媒介，将数据传输给组件对象的template属性
3. 组件对象的template有了数据后，就可以通过组件标签进行数据展示了。
4. 数据流向：根实例 data（vm） → **父组件模板绑定（ 内部的绑定，父传子的 props 绑定关系）**→ 子组件 props（todo-title/todo-items） → 子组件模板展示

注意：最顶层的 “父” 是 Vue 根实例（var vm = new Vue({ el: "#app" ... })），它对应的模板就是 <div id="app"> 里的所有内容

slot="xxx" 只是给这两个子组件 “标记归属的插槽位置”，不改变 props 绑定的父传子本质。

自定义事件内容分发

v-bind（缩写 :）：绑定DOM 元素的属性 / 特性，关联 “数据→视图”，核心是 “传数据”；

v-on（缩写 @）：绑定DOM 元素的事件，关联 “视图→逻辑”，核心是 “响应用户操作”；

二者是 Vue 模板中最基础的两个指令，分别处理 “数据渲染” 和 “交互逻辑”，是 Vue 响应式开发的核心基础。

达到效果

让子组件的消息模版可以删除vue对象中的数据。原来是只有父组件的消息模版可以删除vue对象中的数据

效果图

效果图

前端通过el属性和Vue对象建立联系

前端通过插槽（slot）和 组件建立联系

但是我们想要在组件中删除Vue对象的数据是做不到的。要想实现需要借助自定义事件这个中间桥梁

自定义事件的实现方法

1. 在vue对象中创建删除方法
2. 在组件中定义自定义事件方法 （使用 this.$emit(事件名)）
3. 在前端通过@事件名（因为他也是一个方法所以使用@） 和 组件进行绑定， 通过 @事件名="vue对象的方法名称" 和vue对象建立联系

第一个Vue-Cli项目

1. 搭建步骤

   1. 下载node版本并安装
   2. 在控制台输入npm install cnpm -g(安装 cnpm 的核心目的是解决国内访问 npm 官方仓库速度慢、甚至下载失败的问题) 安装Node.js淘宝镜像加速器（cnpm）
   3. 配置node镜像，加速node访问：npm install --registry=https://registry.npm.taobao.org
   4. 安装vue-cli（全局安装）：cnpm install vue-cli -g
   5. 使用vue list：查看可以基于哪些模版创建vue应用程序，我们选择webpack （但是现在的项目使用vite来代替webpack） 这里介绍一下webpack:
   • wepback是用于构建和打包的，类似java中的maven
   • 为什么使用webpack :因为vue是基于ES6的，但是大多数网站用的是ES5。通过webpack进行打包降级从而让大多数完整使用vue程序 6.创建一个基于webpack模版的vue应用程序： vue init webpack myvue (文件夹的名字)
   7. 然后一路选no(我这是为了学习，实际开发根据需求选择)
   8. 切换目录，切换到创建的vue目录
   9. 进入目录：cd myvue
   10. npm installl 安装依赖（他是根据package.json来安装的）
   11. 如果在安装依赖的时候，报了错误，他会给修复报错的指令比如说：npm audit fix
   12. npm run dev 启动项目

WebPack学习

webpack的定义

webPack是一个模块加载器兼打包工具。他可以把各种资源（JS JSX ES6 图片） 作为模块来处理和使用

安装webPack

1. 安装打包工具： npm install webpack -g
2. 安装客户端: npm install webpack-cli -g
3. 测试是否安装成功： webpack -v , webpack-cli -v

练习

1. 创建一个项目

2. 创建一个叫modules的目录，用于放置JS模块等资源文件

3. 在modules下创建模块文件，如hello.js 用于编写JS模块相关的代码

   ▼
   text
   复制代码
   //暴露一个方法：sayHello:
   exports.sayHello=function(){
      document.write("<h1>Vue基础笔记</h1>");
   }
   

4. 在modules下创建一个名字叫main.js的入口文件，用于打包时设置entry属性

   ▼
   text
   复制代码
   // require 导入一个模块，就可以调用这个模块中的方法了
   var hello = require("/hello");
   hello.sayHello();
   

5. 在项目目录下创建webpack.config.js 配置文件，使用webpack命令打包（如果显示未找到webpack则以管理员身份运行webpack）

   ▼
   text
   复制代码
   module.exports={
    //进入路径  
     entry: "./modules/main.js",
    // 输出路径 
     output: {
       filename: "./js/budle.js"
     }
   }
   

   ​

6. 在项目目录下创建HTML页面，如index.html, 导入webPack打包后的JS文件

   ▼
   text
   复制代码
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Vue学习</title>
   </head>
   <body>
   <!--通过html文件就可以直接运行打包后的文件了-->
   <script src="dist/js/bundle.js"></script>
   </body>
   </html>
   

   ​

7. 运行HTML查看效果

8. 最终效果的得到的感悟： 可以将打包后的js文件通过html启动，然后直接运行

9. 补充： 参数 --watch用于监听变化 webpack --watch

vue-router路由

功能

vue-router实现多个页面跳转

实现方法

1. 定义组件（每个组件文件分为三个部分：template，style(书写vue逻辑比如导入逻辑和导出逻辑)，style(如果加上scope属性则表示样式效果只在该文件中生效)）

2. 创建路由文件，路由文件存放在router目录下。路由文件的结构为：

   • 引入插件（vue,vue-router）
   • 安装/注册插件
   • 配置和导出插件：有路由数组参数里面可以写路由路径，路由名字（可以不写），跳转的组件

3. 在main.js文件中（在 Vue 2 项目里，main.js 是整个应用的入口文件，是程序执行的起点）

   • 导入路由

   • 配置路由

4. 在App.vue文件中配置路由路径（router-link to=跳转的路径）和路由视图（router-view展示内容）

Vue+ElementUI

使用方法

只要根据vue-router的知识，理清楚页面的实现逻辑，使用elementUI就很简单

1. 安装依赖

   ▼
   text
   复制代码
   npm i element-ui -S
   

   ​

2. 创建组件，组件可以放在两类文件夹中 , 直接复制你看好的组件（elementUI组件）

   • view 用于存放样式类的组件
   • components 用于存放功能类的组件

3. 创建路由文件（导入插件，注册插件，配置和导出插件，将引入的ElementUI组件配置到路由中）

4. 在index.js中填写对应的信息，可以直接复制，elemntUI已经提供

5. 在App.vue中直接使用

嵌套路由

就是在路由文件中，在某个路由的下面再嵌套一层，使用的属性是：children: [{子路由},{子路由}]

视图显示效果就是，在父视图里面展示子视图

页面显示效果

我是在main路径下设置了用户列表和用户信息页面

1. 这个是main页面

2. 这个是个人信息界面（他就会在main页面的一个区域中展示对应的页面信息，而不是在一个新的页面展示）
3. 这个是用户列表界面

参数传递及重定向

参数传递实现原理

你在组件文件中，传入一个参数，然后这个参数就会通过name 和 propes 传递到路由文件中，路由文件接收后再传递给对应的组件模版，用于展示信息。

参数传递实现步骤

1. 通过 :to 和 name 绑定对应的路由路径，通过params 传递相应的参数

2. 通过name 来锁定对应组件，在path中写入 /:id 或者 /:name 来实现路径带参 ， props设置为true设置为允许参数传递。路由文件中的 path 通过设置 /:id 或者 /:name 就可以接收到对应的参数然后在页面的url路径中展示出来

3. srcipt中写入props用来接收传来的参数，然后再template中写入{{id}} 或者 {{name}} 用来展示信息 特别注意：在template中一定要在标签里面

   写对应的参数信息

实现效果

重定向实现原理

转发：上面方法中url并没有发生变化。

重定向：当url发生变化才是重定向

重定向实现方法

1. 在router文件中，给对应的组件设置 redirect(重定向参数)

2. 填充对应组件

3. 查看效果，点击对应导航栏实现跳转，然后发现url发生变化

   ​

路由更加灵活的方式：

1. 在Login页面携带参数，传递给路由文件

2. 组件传递过来的参数，通过 /:name进行接收

3. Main组件接收后，用于视图的展示

4.最终效果

路由和404

路由的实现逻辑

路由模式

通过设置routes为history 可以实现在url中省略 # 号

可以看到路径中不带#号了

路由钩子搭配Axios使用

路由钩子

from：从哪里来

to： 到哪里去

next: 如下图所示

beforeRouteEnter是在进入对应页面前生效

beforeRouteLeave是在离开对应页面后生效

使用Axios来实现在提取json数据

现在以展示json数据为例，等后期把json数据替换为对应的后端接口就可以。 然后就可以实现在页面展示后端接口传来的数据。

1. 安装axios 和 vue-axios

   ▼
   text
   复制代码
   $ npm install axios
   npm install --save axios vue-axios
   
   

   ​

2. 在路由文件中配置axios

   ▼
   text
   复制代码
   import Vue from 'vue'
   import axios from 'axios'
   import VueAxios from 'vue-axios'
   
   Vue.use(VueAxios, axios)
   

3. 进行实际的应用，注意：beforeRouteEnter中可以使用next((vm)=>{})语法

先在methods中定义方法，然后再在beforeRouteEnter中通过next进行调用 methods的url后期可以替换为后端接口路径

404页面

当url路径没有匹配的网页时，就给他设置404页面

实现方法

1. 创建页面组件

2. 配置访问路由：有访问路径的直接用路径就可以找到对应的页面，没有访问路径就配置 ***** 他就可以访问到404页面

   ▼
   text
   复制代码
   {
     path: "*",
     component: NotFound
   }
   

   3. 效果显示