Vuejs
2022-01-17 11:43:23 11 举报AI智能生成
为你推荐
查看更多
小白整理的vuejs的webpack、vue-cli、vue-router等
作者其他创作
大纲/内容
对原有项目使用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
计算属性在多次使用时，只会调用一次自带缓存，性能高
<!--通过定义methods--> <h2>{{getFullName()}}</h2> <h2>{{getFullName()}}</h2> <h2>{{getFullName()}}</h2> <hr> <!--通过定义computed（缓存，只调用一次函数便能显示三次名字）--> <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)
<!--在调用方法时，手动获取浏览器event对象:$event--> <button @click=\
调用方法的方式
v-on参数
<div @click=\"divClick\"> <button @click.stop=\"btnClick\">按钮</button> </div>divClick(){ console.log(\"divClick\
event.stop修饰符
<form action=\"baidu\"> <input type=\"submit\" value=\"提交\" @click.prevent=\"submitClick\"> </form>
.prevent修饰符
<input type=\"text\" @keyup=\"keyUp\"><br> <input type=\"text\" @keyup.enter=\"keyUp\">
监听某个键盘的键帽
<input type=\"button\" value=\"按钮二\" @click.once=\"keyUp\">
.once修饰符的使用
.navitive
v-on修饰符
3、事件监听
<!--在运行input输入用户账户切换登录邮箱类型登录后用户账户内容依旧存在的问题（vue底层虚拟dom）--> <span v-if=\"isUser\"> <!--label for 页面点击“用户账号”直接光标键入input文本框--> <label for=\"username\">用户账号</label> <!--key 解决本章问题（在两个input中设置不同的key即可）--> <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
<div> <h2 v-if=\"score>=90\">优秀</h2> <h2 v-else-if=\"score>=70\">良好</h2> <h2 v-else-if=\"score>=60\">及格</h2> <h2 v-else>差</h2> </div>
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、条件判断
<ul> <li v-for=\"i in movie\">{{i}}</li> </ul>
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原理
<!--注意使用input中的name属性相同则radio只能选中男女中的一个--> <!--加入v-model后可省略name=\"sex\"--> <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\
值绑定
<input type=\"text\" v-model.lazy=\"message\">
1、lazy
<input type=\"number\" v-model.number=\"age\">
2、number
<input type=\"text\" v-model.trim=\"name\">
3、trim
修饰符
7、表单输入绑定
二、Vue基础语法
复杂问题拆解成多个小问题如果将一个页面中所有的处理逻辑全都放在一起，处理起来就会变得非常复杂，不利于后续管理及扩展。但是通过拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能
什么是组件化
组件是可复用的 Vue 实例
Vue组件化思想
认识组件化
//1、创建组件构造器对象 const cpnC = Vue.extend({ template: ` <div> <h2>我是标题</h2> <p>我是内容，哈哈</p> <p>我是内容，呵呵</p> </div>` });
1、创建组件构造器
注册的基本步骤
注册组件语法糖
组件的其他属性
2、注册组件
<!--3、使用组件--> <my-cpn v-for=\"item in 3\"></my-cpn>
3、使用组件（注：在Vue全局作用域中才有效）
组件的基本使用
全局组件
components: { //局部组件 //cpn使用时组件的标签名 cpn: cpnC }
局部组件
全局和局部组件
父组件和子组件
<script type=\"text/x-template\" id=\"cpn\"> <div> <h2>我是标题</h2> <p>我是内容1</p> <p>我是内容2</p> </div></script>
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 v-for=\"item in slot.mydata\">{{item}}-</span>--> <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
职业：本科
0 条评论
回复 删除
下一页
