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-loader


less-loader可以打包处理.less相关的文件
  npm i less-loader@7.1.0 less@3.12.2 -D

babel-loader可以打包处理webpack无法处理的高级的js语法解决url的资源 npm i url-loader@4.1.1 file-loader@6.2.0 -D 小图片变成base64 npm i babel-loader@8.2.1babel/core@7.12.3 @babel/plugin-proposal-class-propertries@7.12.1 -D
为什么要打包？
因为要把内存的文件变成实际的文件
"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：

问题：

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 而言,它自然也有 ...

随机推荐

篇(16)-Asp.Net Core入门实战-权限管理之用户创建与关联角色(ViewModel再用与模型验证二)
入门实战-权限管理之用户创建与关联角色(ViewModel再用与模型验证二) (1).在用户管理着模块中,相比较菜单功能的代码还是比较多的,设计到用户的创建,修改,角色变更和密码重置,同时都集中在列表 ...
C温故补缺(六):C反汇编常用的AT&Tx86语法
C语言反汇编用到的AT&T x86汇编语法参考:CSDN1,CSDN2 默认gcc -S汇编出的,以及反汇编出的,都是AT&T x86代码,可以用-masm=intel指定为inte ...
DRF认证流程及源码分析
认证前言用户验证用户是否合法登陆. 部分内容在DRF视图的使用及源码流程分析讲解,建议先看讲解视图的这篇文章. 使用流程认证使用的方法流程如下: 自定义认证类,继承BaseAuthenticat ...
Blender修改视野范围
首先,我不是专门的建模人员.但是有时候会拿到建模人员的制作的模型导入进行修改. 比如简单的删除某个模型,调整模型的尺寸. 还有就是调整模型的建模中心点,这点有时候显得特别重要,模型的中心点偏离较大会给 ...
【Java SE进阶】Day05 异常，线程
一.异常 1.概念程序执行过程中,出现非正常情况导致JVM的非正常停止本身是一个类,产生异常即创建并抛出一个异常对象 Java处理异常的方式是进行中断处理异常非语法错误,语法错误直接不会产生cl ...
Java第一课Hello World
java第一课 Hello World 学习新建文件夹放写的代码新建.txt文件,并写入java 输出Hello World 的代码 public class Hello{ public ...
(四) 一文搞懂 JMM - 内存模型
4.JMM - 内存模型 1.JMM内存模型 JMM与happen-before 1.可见性问题产生原因下图为x86架构下CPU缓存的布局,即在一个CPU 4核下,L1.L2.L3三级缓存与主内存的 ...
L1-064 估值一亿的AI核心代码 (20分)
L1-064 估值一亿的AI核心代码 (20分) 以上图片来自新浪微博. 本题要求你实现一个稍微更值钱一点的 AI 英文问答程序,规则是: 无论用户说什么,首先把对方说的话在一行中原样打印出来: 消除 ...
C#从实习到搬砖
日常唠唠没事就聊聊我在c#上踩过的那些坑,和一些笔记少点比较,多些谦虚会者不难原博:轩先生大冒险 2022.4.19 datagridview 修改表头 dataGridView1.Colum ...
.NET周报【12月第3期 2022-12-23】
由于众所周知的原因,大佬们纷纷加入羊群,笔者也未能幸免,体验下来这绝对不是普通感冒的症状,身体不适,熬了几天,所以本周更新比较晚:另外精力有限,对于国际板块只有链接没有简介,十分抱歉! 在这个艰难时刻 ...

Vue3

Vue3的更多相关文章

随机推荐

热门专题