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.1     babel/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)

例子：


<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>Documenttitle>
head>
<body>
    <div id="app">
        <p>{{count}}p>
        <button @click="addCount(2,$event)">+1button>
    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是当前元素自身是触发事件处理函数

例子：


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

只能和键盘相关的事件使用

例子：


<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>Documenttitle>
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：


<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>Documenttitle>
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
Vue的学习

相关

Vue的学习

Vue的学习

Vue的学习

Vue的学习

标签