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

随机推荐

Git基操记录
小结说多了都是泪,最近在整理Java的笔记,记笔记我比较喜欢使用markdown(当时使用Hexo的原因之一),毕竟作为刚入门槛一点点的程序小白,还没用上Idea(很多大佬都推荐这个),目前还在使用 ...
bugku web基础$_GET
让我们通过url传入what的值,让其等于flag 直接构造url就得到flag了
项目上的业务《接收一个xml信息包进行解析，xml中包含base64解析为电子文件》
我就直接贴代码了,不太会说,附上注释. ps:需要根据系统字段和xml里面的标签字段进行建表,之后把xml标签的值进行添加.创建表的方法就是拼的sql. // 在线接收接口 @Transactiona ...
python3爬取CSDN个人所有文章列表页
前言我之前写了下载单篇文章的接口函数,结合这篇写的,就可以下载所有个人的所有文章了代码实现没什么技术含量就是简单的 xpath 处理,不过有意思的是有一位csdn 员工将自己的博客地址写到源码里 ...
easui 两个combobox相互选中时至对方为空的解决方案
combobox HTML: <select id="monthplan" class="zxui-combobox" name="monthp ...
【实时数仓】Day02-DWD、DIM层数据准备：各层职能、行为日志DWD层、业务日志DWD层及分流（Phoenix和HBASE）
一.需求分析及实现思路 1.分层需求建立数仓目的:增加数据计算的复用性可以从半成品继续加工而成从kafka的ODS层(数据一开始就读到了kafka)读用户行为数据和业务数据,并写回到kafka的 ...
10分钟看懂Docker和K8S，docker k8s 区别
10分钟看懂Docker和K8S,docker k8s 区别 2010年,几个搞IT的年轻人,在美国旧金山成立了一家名叫"dotCloud"的公司. 这家公司主要提供基于PaaS的 ...
day37-文件上传和下载
文件上传下载 1.基本介绍在Web应用中,文件上传和下载是非常常见的功能如果是传输大文件一般用专门的工具或者插件文件上传和下载需要用到两个包:commons-fileupload.jar和com ...
模板层之标签自定义过滤器及标签模板的继承与导入模型层之前期准备 ORM常用关键字
目录模板层之标签 if判断 for循环自定义过滤器.标签及inclusion_tag(了解) 前期三步骤自定义过滤器(最大只能接收两个参数) 自定义标签(参数没有限制) 自定义inclusion ...
week_2
Andrew Ng 机器学习笔记 ---by OrangeStar Week_2 1.Multiple Features 更有效的线性回归形式此时,h函数已经不是二阶了. \[ X = \begin ...

Vue3

Vue3的更多相关文章

随机推荐

热门专题