首页  思维导图  详情

Vuejs

2022-01-17 11:43:23   11  举报





AI智能生成

为你推荐

查看更多



VUE和React——ES6基础

VueJs

Vuejs

vue

小白整理的vuejs的webpack、vue-cli、vue-router等

vue

作者其他创作

大纲/内容

对原有项目使用Vue进行重构

新项目界定使用Vue的技术栈

为什么学习vue，其它流行前端框架angular、recat

Vue是一个JavaScript的渐进式框架渐进式：意味着可以将Vue作为你应用的一部分陷入其中，带来更丰富的交互体验。又或者你希望将更多地业务逻辑使用Vue实现，那么Vue的何新库以及其生态系统。如：Core+Vue+Router+Vuex，可满足各种需求

认识Vue

解耦视图和数据

可复用的组件

前端路由技术

状态管理

虚拟DOM

Vue特点和Web开发中常见的高级功能

1、遇见vue

<script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>

<script src=\"https://cdn.jsdelivr.net/npm/vue\"></script>

直接CDN引入

开发环境：https://vuejs.org/js/vue.js生产环境：https://vuejs.org/js/vue.min.js

下载和引入

后续通过webpack和CLI的使用，我们使用该方式。

npm install vue --save

1、runtime-only->代码中，不可以有任何的template

2、runtime-compiler->代码中，可以有template，因为有compiler可用于编译template

NPM安装(Node Package包 Manager管理器)(代码仓库)

源码：debug/release

前端代码规范：缩减2个空格

2、安装Vuejs

Mustache->体验响应式

Hello Vuejs

v-for

后面给数组追加元素的时候，新的元素也可以在界面中渲染出来

Vue显示列表

事件监听”click->methods

实现计数器

3、体验Vuejs

data和Vue对象的分离

创建vue实例传入的options放的内容：el：类型：string/htmlElement。作用：决定之后vue实例会管理那个dom。data：类型：object/Function（组件当中data必须是一个函数）作用：vue实例对应的数据对象。methods：类型：{[key:string]：Function} 作用：定义属于vue的一些方法，可在其他地方调用，也能在指令中使用。生命周期函数

4、MVVM架构

this

方法：method

函数：function

5、函数和方法的区别

生命周期：事务从诞生到消亡的整个过程

6、Vue的生命周期

一、邂逅Vuejs

<div id=\"app\"> {{message}}</div><script src=\"../js/vue.js\

0、template模板

最常用，可插入变量和表达式

Mustache 语法不能作用在 HTML attribute 上，需要v-bind动态绑定

Mustache语法

当数据改变时，插值处的内容不会更新。

例：<h2 v-once>{{message}}</h2>

v-once

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html

例：<h2>{{url}}</h2><h2 v-html=\"url\

v-html

v-text

写什么显示什么

例：<h2>{{message}}</h2><h2 v-pre>{{message}}</h2>

v-pre

斗篷

例：<style> [v-cloak] { display: none; }</style><div id=\"app\

v-block

1、插值语法

v-bind:属性名

:属性名

v-bind的语法糖

v-bind的介绍

v-bind基础

例：创建一个列表，点击列表中的一项，该项文字变成红字<style> .active { color: red; } </style><h2 :class=\"{active:1}\">{{message}}</h2> <ul> <li :class=\"{active:index===isActive}\" v-for=\

绑定class

<h2 :style=\

对象语法绑定

数组语法绑定

绑定样式

简单使用

复杂使用

计算属性的完整写法setter(一般不希望写)和getter

计算属性在多次使用时，只会调用一次自带缓存，性能高

<h2>{{getFullName()}}</h2> <h2>{{getFullName()}}</h2> <h2>{{getFullName()}}</h2> <hr>  <h2>{{fullName}}</h2> <h2>{{fullName}}</h2> <h2>{{fullName}}</h2>

计算属性和methods方法对比

计算属性

在ES5之前，只有函数有作用域，if、for没有块级作用域概念

ES6加入了let有块级作用域

let块级作用域

使用const修饰的标识符为常量，必须初始化，之后不可再赋值，保证数据安全性

建议优先使用const，只有需要改变某个标识符时才使用let

注：指向的对象不能修改，但可以改变对象内部的属性

const

作用域

属性的增强写法

函数的增强写法

对象字面量的增强写法

扩充：ES6

2、动态绑定属性

v-on:click=\"counter++\"

@click=\"counter++\"

语法糖

v-on介绍

v-on基础

btnClick

btnClick(event)

<button @click=\

调用方法的方式

v-on参数

<div @click=\"divClick\"> <button @click.stop=\"btnClick\">按钮</button> </div>divClick(){ console.log(\"divClick\

event.stop修饰符

.prevent修饰符

监听某个键盘的键帽

.once修饰符的使用

.navitive

v-on修饰符

3、事件监听

<span v-if=\"isUser\">  <label for=\"username\">用户账号</label>  <input type=\"text\" id=\"username\" placeholder=\"用户账户\" key=\"username\"> </span> <span v-else> <label for=\"email\">用户邮箱</label> <input type=\"text\" id=\"email\" placeholder=\"用户邮箱\" key=\"email\"> </span> <button v-on:click=\"change\">切换类型</button>

用户登录方式切换案例问题

v-if

v-else-if

v-else

推荐使用computed计算属性来做

条件

v-if：当条件为false时，包含v-if指令的元素，根本就不会存在dom中

v-show：当条件为false时，v-show只是给我们的元素增加了一个行内样式:display:none

1、当需要在显示与隐藏之间切片很频繁时，使用v-show2、当只有一次切换时，通过使用v-if(居多)

这两种方式如何选择

v-if和v-show对比

4、条件判断

v-for指令

遍历数组

value

value，key

value，key，index

遍历对象

push()、pop()、shift()、unshift()、splice()、sort()、reverse()

数组哪些方法是响应式的

5、循环遍历

书籍购物车案例

let numbers = nums.filter(function (n) { return n < 100;});console.log(numbers)

1、filter

let maps = numbers.map(function (n) { return n * 2;});console.log(\"maps=\

2、map

3、reduce

4、filter/map/reduce一步到位

5、最简版

高阶函数

6、阶段案例

例：<input type=\"text\" v-model=\"message\">

实现表单元素和数据的双向绑定

基本使用

1、v-bind(:)绑定一个value属性

2、v-on(@)指令给当前元素绑定input事件

v-model原理

<label for=\"male\"> <input type=\"radio\" id=\"male\" value=\"男\" v-model=\"sex\">男 </label> <label for=\"female\"> <input type=\"radio\" id=\"female\" value=\"女\" v-model=\"sex\">女 </label> <h2>你选择的性别是：{{sex}}</h2>

v-model结合radio类型

<label for=\"protocol\"> <input type=\"checkbox\" v-model=\"active\" id=\"protocol\">同意协议 </label> <h2>当前状态：{{active}}</h2> <button :disabled=\"!active\">下一步</button>

单选框

<input type=\"checkbox\" value=\"篮球\" v-model=\"hobbies\">篮球 <input type=\"checkbox\" value=\"足球\" v-model=\"hobbies\">足球 <input type=\"checkbox\" value=\"乒乓球\" v-model=\"hobbies\">乒乓球 <input type=\"checkbox\" value=\"羽毛球\" v-model=\"hobbies\">羽毛球 <h2>您的爱好是：{{hobbies}}</h2>

多选框

v-model结合checkbox类型

<select name=\"oneFruit\" v-model=\"fruit\"> <option value=\"苹果\">苹果</option> <option value=\"香蕉\">香蕉</option> <option value=\"榴莲\">榴莲</option> <option value=\"葡萄\">葡萄</option> </select> <h2>您选择的水果是：{{fruit}}</h2>

选择一个

<select name=\"moreFruit\" v-model=\"fruits\" multiple> <option value=\"苹果\">苹果</option> <option value=\"香蕉\">香蕉</option> <option value=\"榴莲\">榴莲</option> <option value=\"葡萄\">葡萄</option> </select> <h2>您选择的水果是：{{fruits}}</h2>

选择多个

v-model结合select类型

其他类型

<lable v-for=\"item in originHobbies\" for=\"item\"> <input type=\"checkbox\" v-bind:value=\"item\" :id=\"item\" v-model=\"hobbies\

值绑定

1、lazy

2、number

3、trim

修饰符

7、表单输入绑定

二、Vue基础语法

复杂问题拆解成多个小问题如果将一个页面中所有的处理逻辑全都放在一起，处理起来就会变得非常复杂，不利于后续管理及扩展。但是通过拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能

什么是组件化

组件是可复用的 Vue 实例

Vue组件化思想

认识组件化

//1、创建组件构造器对象 const cpnC = Vue.extend({ template: ` <div> <h2>我是标题</h2> <p>我是内容，哈哈</p> <p>我是内容，呵呵</p> </div>` });

1、创建组件构造器

注册的基本步骤

注册组件语法糖

组件的其他属性

2、注册组件

<my-cpn v-for=\"item in 3\"></my-cpn>

3、使用组件（注：在Vue全局作用域中才有效）

组件的基本使用

全局组件

components: { //局部组件 //cpn使用时组件的标签名 cpn: cpnC }

局部组件

全局和局部组件

父组件和子组件

1、script分离写法，类型是text/x-template

<template id=\"templateCpn\"> <div> <h2>{{title}}</h2> <p>我是内容1</p> <p>我是内容2</p> </div></template>

2、template分离写法

模板的分离写法

子组件是不能引用父组件或Vue实例的数据的

在开发中，往往一些数据需要从上层传递到下层：比如在一个页面中，我们从服务器请求到了很多的数据。其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。此时，并不会让子组件再次发送一个网络请求，而是直接让大组件(父组件)将数据传递给小组件(子组件)。

通过事件向父组件发送消息

需要用到自定义事件（之前学的v-on不仅可以监听dom事件，也可以用于组件间的自定义事件）

在子组件中，通过$emit()来触发事件

在父组件中，通过v-on来监听子组件事件

自定义事件流程

子级向父级传递

String、Number、Boolean、Array、Object、Date、Function、Symbol

props类型验证支持的类型

通过props向子组件传递数据

父级向子级传递

$children

$refs

父访问子

this.$parent这是一个数组类型

子访问父

父子组建的访问方式

非父子组件通信

父子组件的通信(数据传递)

https://github.com/coderwhy/HYMall

步骤：1、npm install 2、npm run serve

github项目

为什么使用slot

slot的基本使用

slot的具名插槽

编译作用域

父组件替换插槽的标签，但是内容由子组件来提供

<template slot-scope=\"slot\"> <span>{{slot.mydata.join(\" - \")}}</span> </template>——————————————————————————<template id=\"cpn\"> <div> <slot :mydata=\"planguages\"> <ul> <li v-for=\"item in planguages\

slot作用域插槽

插槽slot

组件化高级

组件生命周期

三、组件化开发

早期JS做一些简单的表单验证或动画实现随着ajax异步请求的出现，形成了前后端分离，客户端需要完成的事情变多

前端代码复杂带来的问题

(function(){})()

1、匿名对象函数

导出：var moduleA = (function () {})()

2、最基础的模块化

解决

JavaScript原始功能

CommonJS

AMD

CMD

ES6的Modules

常见的模块化规范

导出

导入

模块化的两个核心

模块化开发

模块

打包

从本质上讲，webpack是一个现代的JavaScript应用的静态模块打包工具

webpack自动处理js之间的相关依赖

什么是webpack

可以配置一系列的task，并且定义task要处理的事务（例如ES6、ts转化、图片压缩、scss转成css）之后让grunt/gulp来依次执行这些task，而且让整个流程自动化所以grunt/gulp也被称为前端自动化任务管理工具

什么是grunt/gulp

webpack更强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能（如果项目使用了模块化管理，相互依赖强，就用更强大的webpack）

grunt/gulp更加强调的是前端流程的自动化，模块化不是它的核心（如果工程模块依赖简单或简单的压缩合并，就用gulp）

webpack和grunt/gulp对比

webpack模块化打包webpack为了可以正常运行必须依赖node环境node环境为了可以正常的执行很多代码，必须其中包含各种依赖包npm管理包的工具（node packages manager）

1、安装Node.js（16.13.1）Node.js自带软件包管理工具npm(8.1.2)

2、配置环境变量查看node版本：node -v npm ：npm -v

3、全局安装webpack(5.65.0) webpack -cli(4.9.1) webpack-dev-server not installed

npm config set prefix \"D:\odejs\ode_global\" npm config set cache \"D:\odejs\ode_cache\"npm install express -gnpm install webpack@3.6.0 -gwebpack -vwebpack ./src/main.js -o ./dist/bundle.js（在webpack4+之后需要 -o）npm init——添加package.jsonnpm install --save-dev webpack //本地开发环境(非全局)npm run build

webpack安装

package.json//增加脚本\"build\":\"webpack\"

手动webpack配置

在webpack能处理js间依赖，但是现在需要对加载css、图片、ES6转ES5代码、TypeScript转ES5代码、scss/less转css、.jsx/.vue转成js文件等

npm install --save-dev css-loader

npm install style-loader --save-dev

1、通过npm安装需要使用的loader

2、在webpack.config.js中的modules关键字下进行配置注：webpack.config.js配置中style-loader在css-loader前面(因为顺序从右向左)

npm install --save-dev less-loader less

3、less-loader下载配置

npm install --save-dev url-loader

当加载的图片，小于limit时，会将图片编译成base64字符串形式

当加载的图片，大于limit时，webpack会选择file-loader对该图片进行打包。

4、url-loader下载配置

npm install file-loader --save-dev

5、file-loader下载配置

6、ES6转ES5：babel-loader

使用

loader：webpack的核心概念，扩展

在每个生成的 chunk 顶部添加 banner

BannerPlugin

简单创建 HTML 文件，用于服务器访问

npm install --save-dev html-webpack-plugin

https://www.webpackjs.com/plugins/

HtmlWebpackPlugin

UglifyjsWebpackPlugin

plugin插件

npm install --save-dev webpack-dev-server

package.json中：\"dev\": \"webpack-dev-server\"

安装本地服务器

webpack

如果是简单几个Vue的Demo，就不需要Vue CLI

需考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。手动完成效率低，所以通常使用脚手架来完成

如果是开发大型项目，必然需要Vue CLI

CLI全称Command-Line Interface，译为命令行界面，俗称脚手架

Vue CLI则是vue.js项目脚手架，使用vue-cli可快速搭建Vue开发环境以及对应的webpack配置

是什么

安装NodeJS(网址：http://nodejs.cn/download/)

依赖环境

如果出错可以执行npm clean cache --force删除npm-cache文件夹也可以直接去C:\\Users\\SH-T-C-Public\\AppData\\Roaming查找

npm install -g @vue/cli本例：（vue4.5.15）

安装

Vue CLI

vue create 项目名

vuecli3创建

vue init webpack 项目名

vuecli2创建

初始化项目的两种方式

配置过程

目录结构

runtime-compiler(v1)template——>ast——>render——>vdom——>UIruntime-only(v2)(性能高，代码少)render——>vdom——>UI

runtime-compiler和runtime-only的区别

Vue渲染过程

render函数的使用

入口文件详解

Vue CLI2的使用

Vue CLI3初始化项目vue create my-project

? Please pick a preset: Manually select features? Check the features needed for your project:>( ) Choose Vue version (*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support ( ) Router ( ) Vuex ( ) CSS Pre-processors ( ) Linter / Formatter ( ) Unit Testing ( ) E2E Testing

1、vue-cli3是基于webpack4打造，vue-cli2还是webpack3

2、vue-cli3的设计原则是“0配置”，移除的配置文件根目录下的build和config等目录

3、vue-cli3提供了vue ui命令，提供了可视化配置，更加人性化

4、移除了static文件夹，新增了public文件夹，并将index.html移动到public中

vue3和vue2的区别

Vue CKU配置修改

vue ui(用户页面)

配置存放路径

添加新的别名

Vue UI

Vue CLI3的使用

四、Vue CUI详解

路由是网络工程中的术语，通过互联的网络把信息从源地址传输到目的地址的活动

什么是路由routing

决定数据包从来源到目的地的路径

路由

将输入端的数据转移到合适的输出端

转送

路由器做什么的？

路由表本质上就是一个映射表，决定了数据包的指向

路由中有个非常重要的概念叫路由表

后端路由：后端处理URL和页面之间的映射关系

后端路由阶段早期的网站开发整个HTML页是由服务器来渲染的服务器直接生产渲染好对应的HTML页面，返回给客户端进行展示

缺点：整个页面的模块由后端人员来编写和维护的另一张情况是前端开发人员如果要开发页面，需要通过PHP和JAVA等语言来编写页面代码而且通常情况下HTML代码和数据以及对应的逻辑会混在一起，不易编写和维护

1、后端渲染：jsp(java serve page)/phphtml+css+javajava代码作用是从数据库中读取数据，并且将它动态渲染在页面上

2、前后端分离阶段（前端路由阶段）（后端只负责提供数据，不负责任何阶段的内容）：随着Ajax的出现，有了前后端分离的开发模式后端只提供API来返回数据，前端通过Ajax获取数据，并且可以通过JavaScript将数据渲染到页面上并且当移动端(IOS/Android)出现后，后端不需要进行任何处理，依然使用之前的一套API即可目前很多网站依然采用此模式

前端路由：url：不通过java中controller，而是通过js(hash)判断抽取全部资源中的一部分资源（映射组件）核心：改变URL，但是页面不进行整体刷新

1、location.hash(默认)

等价于history.go(-1)

history.back()

等价于history.go(1)

history.forward()

2、history

前端路由改变URL不整体刷新的方式

3、单页面富应用阶段：1、SPA(Single Page Web Application)最主要的特点就是在前后端分离的基础上加了一层前端路由2、即前端来维护一套路由规则整个页面只有一个html页面

前端渲染/后端渲染/前后端分离/前端路由/后端路由

Angular的ngRouter

ReactRouter

Vue的vue-router

流行的三大框架各自的路由

认识路由

1、安装npm install vue-router --save

a、导入路由对象，并且调用Vue.use(VueRouter)

b、创建路由实例，并且传入路由映射配置

c、在Vue实例中挂载创建的路由实例

2、在模块化工程中使用(因为是一个插件，so可以通过Vue.use()来安装路由功能)

a、创建路由组件

b、配置路由映射，组件和路径映射关系

<router-link to=\"/home\">首页</router-link><router-link to=\"/about\">关于</router-link><router-view></router-view>

mode: 'history'

tag：按钮显示，replace相当于history.replaceState用户不能通过浏览器后退<router-link to=\"/home\" tag=\"button\" replace>首页</router-link>

单个：active-class=\"active\"批量：linkActiveClass: 'active'

router-link补充

c、使用路由：通过<router-link>和<router-view>

//通过代码的方式修改路由vue-router // this.$router.push('/home') this.$router.go(-1) // this.$router.replace('/home')

通过代码跳转路由

app.hash.js当前应用程序开发的所有代码(业务代码)

manifest.hash.js为了打包的代码做底层支撑

vendor.hash.js(提供第三方vue/vue-router/axios/bs)

动态路由

一次性从服务器请求下来这个页面，需要花费一定的时间，甚至用户电脑上还出现了短暂的空白

由来

将路由对应的组件打包成一个个的js代码块

作用

1、结合Vue的异步组件和Webpack的代码分析

2、AMD写法

3、在ES6中，我们可以有简单的写法来组织Vue异步组件和Webpack的代码分割const Home=()=>import('../components/Home.vue')

方式

路由的懒加载

使用vue-router步骤

例如：通过/home/news和/home/message访问一些内容一个路径映射一个组件，访问这两个路径也会分别渲染两个组件

1、创建对应的子组件，并且在路由映射中配置对应的子路由

2、在组件内部使用<router-view>标签

实现步骤

嵌套路由

协议类型：[//服务器地址(主机)[：端口号]][/资源层级UNIX文件路径]文件名[?查询][#片段ID]scheme://host:port/path?query#fragment

统一资源定位符(URL)

配置路由格式：/router/:id

传递的方式：在path后面跟上对应的值

传递后形成的路径：/router/123，/router/abc

1、params的类型

配置路由格式：/router，即普通配置

传递的方式：对象中使用query的key作为传递方式(数据量大的时候推荐)

2、query的类型

参数传递

导航守卫

keep-alive

五、vue-router

vuex是做什么的

单页面状态管理

多页面状态管理

vuex状态管理图例

为什么使用vuex

代码组织

count案例的实现

Vuex基本使用

state

getter

mutation

action

module

Vue的核心概念

项目组织结构

TODOLIST练习

六、Vuex详解

选择一：传统的Ajax是基于XMLHttpRequest(XHR)选择二：在前面的学习中，我们经常会使用Query-Ajax选择三：官方在Ver1.x的时候，推出了Vue-resource。选择四：Vue作者推荐的axios

网络模块选择

JSON原理回顾

JSON代码的封装

JSON的封装

为什么选择axios

axiox请求方式

认识axios

发送get请求

发送并发请求

axios全局配置

常见配置选项

发送请求

为什么创建axios实例

如何创建axios实例

axuis的封装

请求拦截器

响应拦截器

axios的拦截器

axios实例

axios的使用

七、网络封装

八、项目实战

windows上NGINX安装

项目的打包过程

修改配置和部署

1、windows上NGINX部署

centos上NGINX安装

2、远程Linux上NGINX部署

九、项目部署

响应式原理（双向绑定）

源码

十、原理相关

Vuejs

 收藏

立即使用

OA系统

 收藏

立即使用

MySQL8

 收藏

立即使用

ApacheShiro

 收藏

立即使用

SpringBoot

TestForTruth

职业：本科

去主页





0 条评论

回复删除



取消

下一页