Vue3
VUE.3
1.前端工程化：
- 小白视角
- 会写HTML、 css、JavaScript就会前端开发
- 需要美化页面的样式，就拽一个bootstrap来
- 需要操作DOM或者发起Ajax请求，就再拽一个Jquery过来
- 需要渲染模板结构，就用art-template模板
- 实际的前端开发：
- 模块化（js模块化，css的模块化，其他资源的模块化）
- 组件化（复用现有的UI结构、样式、行为）
- 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）
- 自动化（自动化构建、自动部署、自动化测试）
前端工程化：
- 工具
- 技术
- 流程
- 经验
主流的：
- webpack
- parcel
webpack
webpack是前端项目工程化的具体方案
- 前端模块化开发
- 代码压缩混淆
- 处理浏览器的JavaScript的兼容性
- 性能优化
操作：
1初始化
npm init -y
2.引入jquery
npm i jquery -S
问题：ES6的兼容性问题：
Uncaught SyntaxError: Cannot use import statement outside a module
安装webpack
npm i webpack@5.5.1 webpack-cli@4.2.0 -D
项目中配置webpack
1.创建webpack的配置文件
webpack.config.js
module.exports={
mode:'development'
}
2.新增脚本dev
"scripts": {
"dev":"webpack"//scrip节点下的脚本可以通过 npm run 执行 例如npm run dev
},
mode的可选值
development
- 开发环境
- 不会对打包生成的文件进行压缩和性能优化
- 打包速度快，适合在开发阶段
production
- 生产环境
- 会对打包的生成的文件进行代码压缩和性能优化
- 打包速度很慢，仅适合在项目发布阶段使用
webpack.config.js
- 打包前会先读取配置文件的内容，基于配置文件打包
- webpack是基于node.js开发出来的打包工具，因此在它的配置文件中，支持使用node.js相关的语法和模块进行webpack的配置
webpack的默认约定
- 默认打包的入口文件为：src-->index.js
- 默认的输出为文件路径为dist---->main.js
entry-->指定打包的入口
output----->指定打包的出口
webpack的插件
拓展webpack的能力
- webpack-dev-server
- 类似与node.js阶段用到的nodemon工具
- 每当修改了代码，webpack都会自动的进行项目的打包
- html-webpack-plugin
- webpack中的html插件（类似模板引擎插件）
- 可以通过此插件来自定制index.htm页面的内容
webpack-dev-server自动监听
npm i webpack-dev-server@3.11.0 -D
1.需要修改webpack中的dev命令
"scripts": {
"dev": "webpack serve"
},
打包的文件去哪了？
1.不配置会放到物理磁盘上
2.打包的会放到内存上，默认放到项目的根目录中
<script src="/bundle.js"></script>
html-webpack-plugin
npm i html-webpack-plugin@4.5.0 -D
配置：
const path = require('path');
//导入html插件，得到一个构造函数
const HtmlPlugin =require('html-webpack-plugin');
//创建HTML的插件实例对象
const htmlPlugin = new HtmlPlugin({
template:'./src/index.html',//源文件的存放路径
filename:'./index.html',//指定生成文件的存放路径
})
module.exports={
mode:'development',
entry:path.join(__dirname,'./src/index.js'),
output:{
path:path.join(__dirname,'./dist'),
filename:'bundle.js'
},
plugins:[htmlPlugin]
}
注意点：
1.也是将index.html放到了内存中，会自动的注入webpack-dev-server生成的js文件
2.删除dist文件不会影响正常运行
devServer节点
devServer:{
open:true,
host:'127.0.0.1',
port:80
}
Loader
webpack只能默认打包处理.js后缀的结尾的文件
协助webpack打包处理特定的文件模块
css-loader可以打包处理.css相关的文件
npm i style-loader@2.0.0 css-loader@5.0.1 -D
module:{
rules:[//文件后缀名的匹配规则
{
test:/.css不能识别此Latex公式:
/,use:['style-loader','css-loader']
}
]
}
顺序不能反，先后后前。先css-loader然后是style-loaderless-loader可以打包处理.less相关的文件
npm i less-loader@7.1.0 less@3.12.2 -Dbabel-loader可以打包处理webpack无法处理的高级的js语法babel/core@7.12.3 @babel/plugin-proposal-class-propertries@7.12.1 -D
解决url的资源
npm i url-loader@4.1.1 file-loader@6.2.0 -D
小图片变成base64
npm i babel-loader@8.2.1
为什么要打包？
因为要把内存的文件变成实际的文件
"scripts": {
"dev": "webpack serve",
"build":"webpack --mode production"
},
1.自动清理dist文件
npm install claen-webpack-plugin@3.0.0 -D
企业打包发布：生成打包报告，根据报告分析具体的报告
为第三方库启用CON加载
配置组件的按需加载
开启路由懒加载
自定首页内容
source map
devtool:"eval-source-map",
实际又不用配置webpack
CUI工具
VUE
构建用户界面的前段框架
- 构建用户界面
- 编写页面结构
- 美化格式
- 处理交互
一：传统的
1.传统的：jQuery+模版引擎
- 需要定义大量的模版结构
- 缺少语法高亮
- 数据变化时要重行调用编译的函数，否则页面不会更新
2.基础的CSS样式美化页面的可视化效果
3.基于jQuery技术，处理用户和网页之间的交互
- 大量的时间在处理都dom的操作上，而不是业务
vue
1.基于使用vue中提供的指令，可以方便的渲染页面结构。
- 数据驱动视图
- PS指令是vue为开发者提供的模版语法，用来辅助开发者渲染页面的结构
2.基础的CSS样式，美化页面的可视化效果
3.基于vue提供的时间绑定，可以轻松的处理用户和页面之间的交互行为
框架
提供了构建用户界面的一整套的解决方案
- vue（核心库）
- vue-router（路由方案）
- vuex（状态管理）
- vue组件库（快速搭建页面的ui效果的方案）
辅助配置工具
- vue-cli
- vue-devtools
vue的特性
- 数据驱动视图
vue会监听数据的变化，从而自动从星的渲染页面的结构自动渲染页面-------单向数据绑定
双向数据绑定：
MVVM：实现数据驱动和双向绑定的核心---是vue的实例
View----ViewModel----Model
（自动更新/监听DOM的变化）（监听数据的变化/自动同步）
vue的版本
- 新增：组合API、多根节点组件、更好的TypeScript的支持
- 废弃了：过滤器、不在支持、on、off、和
event
addCount(2,$event)
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{count}}</p>
<button @click="addCount(2,$event)">+1</button>
</div>
<script src="./lib/vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
count:0,
},
methods:{
addCount(dept,e){
const nowBgcolor=e.target.style.backgroundColor
// console.log(nowBgcolor)
e.target.style.backgroundColor=nowBgcolor=='red'?'':'red'
this.count+=dept
}
}
})
</script>
</body>
</html>
事务修饰符
事务修饰符 说明
.prevent 阻止默认行为（例如，阻止a连接的跳转、阻止表单的提交等）
.stop 阻止事件冒泡
.capture 以捕获模式触发当前的事件函数（先执行捕获的）
.once 绑定的事件只触发一次
.self 只有在event.target是当前元素自身是触发事件处理函数
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.inner{
line-height: 100px;
background-color: aliceblue;
font-size: 13px;
text-align: center;
}
.outer{
background-color: bisque;
padding: 50px;
font-size: 13px;
}
.box{
background-color: coral;
padding: 50px;
}
</style>
</head>
<body>
<div id="app">
<h4>1.prevent事件修饰符的应用场景</h4>
<a href="https://www.baidu.com/" @click.prevent="onLinkClick">百度首页</a>
<hr>
<h4>2.stop事件修饰符的应用场景</h4>
<div class="outer" @click="onOuterClick">
外部的div
<div class="inner" @click.stop="onInnerClick">内部的</div>
</div>
<hr>
<h4>3.capture事件修饰符的应用场景</h4>
<div class="outer" @click.capture="onOuterClick">
外部的div
<div class="inner" @click="onInnerClick">内部的</div>
</div>
<hr>
<h4>4.once事件修饰符的应用场景</h4>
<div class="inner" @click.once="onInnerClick">内部的</div>
<hr>
<h4>3.capture事件修饰符的应用场景</h4>
<div class="box" @click="onBoxClick">
<div class="outer" @click.self="onOuterClick">
外部的div
<div class="inner" @click="onInnerClick">内部的</div>
</div>
</div>
<hr>
</div>
<script src="./lib/vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
count:0,
},
methods:{
onLinkClick(){
console.log("点击了超链接")
},
onOuterClick(){
console.log("点击了外部的")
},
onInnerClick(){
console.log("点击了内部的")
},
onBoxClick(){
console.log("点击了盒子")
}
}
})
</script>
</body>
</html>
按键修饰符
@key.enter=“”
@keyup.esc=""
@keydown
只能和键盘相关的事件使用
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" @keyup.enter="submit" @keyup.esc="clearInput">
</div>
<script src="./lib/vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
count:0,
},
methods:{
submit(e){
console.log("按下了enter键"+e.target.value)
},
clearInput(e){
e.target.value=""
}
}
})
</script>
</body>
</html>
双向绑定
v-model
指令修饰符：
修饰符 作用 示例
.number 自动将用户的输入值转变为数值型
.trim 自动过滤用户输入的首尾空白的字符
.lazy 在“chang”时而非“input”时更新
例子1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>用户名是：{{username}}</p>
<input type="text" v-model="username">
<hr>
<p>选中的省份是：{{province}}</p>
<select v-model="province">
<option value="">请选择</option>
<option value="1">北京</option>
<option value="2">河北</option>
<option value="3">黑龙江</option>
</select>
</div>
<script src="./lib/vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
username:"郝泾钊",
province:"1"
},
methods:{
submit(e){
console.log("按下了enter键"+e.target.value)
},
clearInput(e){
e.target.value=""
}
}
})
</script>
</body>
</html>
例子2：
问题：
1.
TypeError: Class constructor ServeCommand cannot be invoked without 'new'
解决方法：
需要更新webpack-cli 只要输入
npm install webpack-cli
Vue3的更多相关文章
- 10.vue router 带参数跳转
vue router 带参数跳转 发送:this.$router.push({path:'/news',query:{id:row.id}}) 接收:var id=this.$route.query. ...
- Vue中this.$router.push参数获取
传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效.需要用name来 ...
- vue2 如何通过router传递参数
当需要router-link传递参数的时候 vue2 如何做 记录下来备忘 1.通过vue页面传递参数 <router-link :to="{ path:'./attachment', ...
- Vue中this.$router.push参数获取（通过路由传参）【路由跳转的方法】
传递参数的方法: 1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用nam ...
- vue router 传递参数
vue-router 传参的方式 query 和params query 类似于get请求的传参方法 就是 ? 这种形式的 https://i.cnblogs.com/EditPosts.aspx?o ...
- Vue文件跳转$router传参数
<button @click = "func()">跳转</button> //js <script> export default{ meth ...
- vue-router query和params传参(接收参数)，$router、$route的区别
链接:https://segmentfault.com/a/1190000012735168 1.query方式传参和接收参数 传参: this.$router.push({ path:'/xxx' ...
- vue-router query和params传参(接收参数)$router $route的区别
今天做项目时踩到了vue-router传参的坑(query和params),所以决定总结一下二者的区别. 直接总结干货!!! 1.query方式传参和接收参数 传参: this.$router.pus ...
- 【原创】ui.router源码解析
Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...
- ngRoute 与ui.router区别
angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...
随机推荐
- 基于python的数学建模---高阶样条插值
为了满足对函数光滑性的需要,我们可以使用一种有弹性的长条(称之为样条),强迫它弯曲通过样本点. import numpy as npimport matplotlib.pylab as plfrom ...
- mysql 多个结构不同表查询 返回相同字段名
( select ID,数据库原字段名1 AS 统一字段名1,数据库原字段名2 AS 统一字段名2 from 第一个表名 WHERE 1) UNION(联合表查询)( select ID,数据库原字段 ...
- 第二十五节：scrapy爬虫识别验证码（四）手绘验证码识别
一.介绍 今天主要介绍的是微博客户端在登录时出现的四宫格手绘验证码,不多说直接看看验证码长成什么样. 二.思路 1.由于微博上的手绘验证码只有四个宫格,且每个宫格之间都有有向线段连接,所 ...
- 【每日一题】【map、数组、二维数组排序、静态函数和库函数】2022年2月24日-NC97 字符串出现次数的TopK问题
描述给定一个字符串数组,再给定整数 k ,请返回出现次数前k名的字符串和对应的次数.返回的答案应该按字符串出现频率由高到低排序.如果不同的字符串有相同出现频率,按字典序排序.对于两个字符串,大小关系取 ...
- Vue快速上门(2)-模板语法
VUE家族系列: Vue快速上门(1)-基础知识 Vue快速上门(2)-模板语法 Vue快速上门(3)-组件与复用 01.模板语法 1.1.template模板 <template>是H5 ...
- RocketMQ Connect 构建流式数据处理平台
本文作者:孙晓健,Apache RocketMQ Committer 01 RocketMQ Connect RocketMQ Connect 是一款可扩展的在 RocketMQ 与其他系统之间做流式 ...
- JavaScript：操作符：逻辑运算符及其隐式转换数据类型
逻辑非! 用来对布尔值进行取反,即!true = false: 当取反的变量不是布尔值,会进行隐式转换为布尔值: 非0的数字,都转换为true 非空字符串,转换为true 非空对象,转换为true I ...
- Windows上使用QEMU创建银河麒麟ARM64虚拟机完全手册
"好记性不如烂笔头." -- 张溥 0x00 大纲 目录 0x00 大纲 0x01 前言 0x02 物料准备 0x03 安装 QEMU 0x04 创建虚拟磁盘 0x05 安装麒麟系 ...
- 常用 Git 命令行操作
本文记录了一些常用 Git 命令行操作的具体使用方式 git clone git clone REPOSITORY_URL 拉取仓库,并使用仓库名作为本地文件名 git clone REPOSITOR ...
- kafka详解(04) - kafka监控 可视化工具
kafka详解(04) - kafka监控 可视化工具 Kafka监控Eagle 1)修改kafka启动命令 修改kafka-server-start.sh命令中 if [ "x$KAFKA ...