【Vue】Vue初体验

目录

  • Vue简介
    • Vue的特点
      • MVVM 概念
        • MVVM 的工作原理
      • 虚拟DOM和Diff算法
    • 与其他 JS 框架的关联
    • Vue 周边库
    • vue 的特性
      • 1.数据驱动视图
      • 2.双向数据绑定
    • 开发工具
  • Vue快速上手
    • 1.搭建Vue开发环境
    • 2.创建Vue实例
      • 内容解析
      • 注意
      • data的两种写法
    • 3.Vue模板语法
      • 插值语法
      • 指令语法
      • 代码示例
    • 4.Vue数据绑定
      • 单向数据绑定
      • 双向数据绑定
      • 代码示例
    • 5.MVVM模型
      • Model-View-ViewModel 是一种软件架构模式
      • vue实例中data所有的属性，最后都出现在了vm身上
      • vm身上所有的属性，在Vue模板中都可以直接使用
    • 6.Vue事件处理
      • 注意事项
      • 事件修饰符
      • 代码示例
    • 7.Vue事件处理
      • 键盘事件
        • 代码示例
      • exact 修饰符
        • 代码示例
      • 鼠标按钮修饰符
        • 代码示例

Vue简介

  • Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
  • vue是轻量级的，它有很多独立的功能或库，我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染，我就只用vue的声明渲染，而我们要用他的组件系统，我们可以引用它的组件系统。
  • 作者：尤雨溪
    在这里插入图片描述
  • Vue官网
    1. 英文官网: https://vuejs.org/
    2. 中文官网: https://cn.vuejs.org/
  • 发展历史：
    在这里插入图片描述

Vue的特点

  1. 遵循 MVVM 模式
  2. 编码简洁，体积小，运行效率高，适合 移动/PC 端开发
  3. 它本身只关注 UI，可以轻松引入 vue 插件或其它第三方库开发项目
  4. 采用组件化模式，提高代码复用率、且让代码更好维护
  5. 声明式编码，让编码人员无需直接操作DOM，提高开发效率
  6. 使用 虚拟DOM和 Diff算法，尽量复用DOM节点

MVVM 概念

  • Model 表示当前页面渲染时所依赖的数据源。
  • View 表示当前页面所渲染的 DOM 结构。
  • ViewModel 表示 vue 的实例，它是 MVVM 的核心
MVVM 的工作原理

  • MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。

  • MVVM 指的是 Model、View 和 ViewModel， 它把每个 HTML 页面都拆分成了这三个部分
    在这里插入图片描述

  • ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。
    在这里插入图片描述

  • 当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构，当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中

虚拟DOM和Diff算法

在这里插入图片描述

与其他 JS 框架的关联

  • 借鉴 angular 的 模板 和 数据绑定 技术
  • 借鉴 react 的 组件化 和 虚拟DOM 技术

Vue 周边库

  1. vue-cli：vue 脚手架
  2. vue-resource(axios)：ajax 请求
  3. vue-router：路由
  4. vuex：状态管理（它是 vue 的插件但是没有用 vue-xxx 的命名规则）
  5. vue-lazyload：图片懒加载
  6. vue-scroller：页面滑动相关
  7. mint-ui：基于 vue 的 UI 组件库（移动端）
  8. element-ui：基于 vue 的 UI 组件库（PC 端）

vue 的特性

1.数据驱动视图

  • 在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构
    在这里插入图片描述- 当页面数据发生变化时，页面会自动重新渲染
  • 注意：数据驱动视图是单向的数据绑定

2.双向数据绑定

  • 在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源 中
    在这里插入图片描述

开发工具

在这里插入图片描述

Vue快速上手

  • 前置工作：给浏览器安装 Vue Devtools 插件(这里使用的是火狐浏览器)
    在这里插入图片描述
  1. 搭建Vue开发环境
  2. 创建Vue对象
  3. Vue 模板语法的概念
  4. 双向数据绑定
  5. Vue的MVVM实现
  6. VUE中的数据代理

1.搭建Vue开发环境

  • 不建议初学者直接使用vue-cli脚手架
  • 不建议初学者使用开发工具直接创建Vue工程
  • 直接在html中用script引入
    • CDN链接引入（不建议）：
      <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>//完整版(包含完整的警告和调试模式)
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>//压缩版(删除了警告)
    • vue.js文件引入
      <script src="js/vue.js"></script>//完整版(包含完整的警告和调试模式)
<script src="js/vue.min.js"></script>//压缩版(删除了警告)

2.创建Vue实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue初体验</title><!-- 1.引入Vue --><script src="../js/vue.js"></script>
</head>
<body><!-- 2.准备一个容器 --><div id="root"><h1>Hello,{{name}}</h1><h1>1 + 9 = {{m + n}}</h1><h1>今天是：{{Date.now()}}</h1><!-- Date.now()会显示为时间戳 --></div><script><!-- 3.创建Vue实例 -->const vm = new Vue({el:'#root',data:{name:'Vue',m:1,n:9}});</script>
</body>
</html>

内容解析

  • el：el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
  • data：data中用于存储数据，数据供el所指定的容器去使用，这里将data的值暂时写成一个对象

注意

区分：js表达式 和 js代码(语句)

  • 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
    • a
    • a+b
    • demo(1)//函数 这里呈现的是返回值
    • x === y ? ‘a’ : ‘b’
  • js代码(语句)
    • if(){}
    • for(){}

data的两种写法

  1. 对象式：
    data: {name: '张三'
}
  2. 函数式：
    data(){return {name: '张三'}
}
  • 如何选择？
    目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

3.Vue模板语法

插值语法

  • 功能：用于解析标签体内容
  • 写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性

指令语法

  • 功能：用于解析标签(包括：标签属性、标签体内容、绑定事件…)
  • 写法：例如：v-bind:href="xxx"或省略v-bind，xxx同样要写js表达式，且可以直接读取data中的所有属性，Vue中有很多的指令，且形式都是：v-???，此处只是拿v-bind举例子
  • Vue 中有有很多的指令，此处只是用 v-bind 举个例子

代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue初体验</title><!-- 1.引入Vue --><script src="../js/vue.js"></script>
</head>
<body><!-- 2.准备一个容器 --><div id="root"><!-- 插值语法 --><h1>Hello,{{name}}</h1><hr><!-- 指令语法 --><p><a v-bind:href="myUrl">点击进入我的个人主页-1</a></p><p><a :href="myUrl">点击进入我的个人主页-2</a></p></div><script><!-- 3.创建Vue实例 -->const vm = new Vue({el:'#root',data:{name:'Vue',myUrl:'https://zhoujl.blog.csdn.net'}});</script>
</body>
</html>

4.Vue数据绑定

单向数据绑定

  • 语法：v-bind:href ="xxx" 或简写为 :href
  • 特点：数据只能从 data 流向页面

双向数据绑定

  • 语法：v-mode:value="xxx" 或简写为 v-model="xxx"
  • 特点：数据不仅能从 data 流向页面，还能从页面流向 data
  • v-model只能应用在表单类元素（输入类元素）上，即有value值的元素，因为其默认与value绑定

代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue初体验</title><!-- 1.引入Vue --><script src="../js/vue.js"></script>
</head>
<body><!-- 2.准备一个容器 --><div id="root"><!-- 插值语法 --><h1>Hello,{{name}}</h1><hr><!-- 单向数据绑定 --><input type="text" :value="name"><!-- 双向数据绑定 --><input type="text" v-model="name"><!-- 以下代码是错误的,因为v-model表单类元素(输入类元素)上，即有value值的元素，因为其默认与value绑定 --><h1 v-model:content="name">Hello,</h1><!-- <h1 v-model="name">: v-model is not supported on this element type. If you are working with contenteditable, it's recommended to wrap a library dedicated for that purpose inside a custom component. --></div><script><!-- 3.创建Vue实例 -->const vm = new Vue({el:'#root',data:{name:'Vue',}});</script>
</body>
</html>

5.MVVM模型

Model-View-ViewModel 是一种软件架构模式

  • M：Model 对应data中的数据
  • V： 视图(View) 模板，即模板代码（不是静态页面） （两个语法：指令，大括号表达式）
  • VM：视图模式(ViewModel) Vue实例对象

vue实例中data所有的属性，最后都出现在了vm身上

  • vue实例本身，vm只是一个代称

vm身上所有的属性，在Vue模板中都可以直接使用

  • 如{{$options}} {{$emit}}均有结果出现。
    在这里插入图片描述在这里插入图片描述

6.Vue事件处理

注意事项

  1. 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
  2. 事件的回调需要配置在methods对象中，最终会在vm上 (无需做数据代理)；
  3. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
  4. @click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；
  5. 默认事件形参: event， 隐含属性对象: $event

事件修饰符

  1. prevent：阻止默认事件（常用）；
  2. stop：阻止事件冒泡（常用）；
  3. once：事件只触发一次（常用）；
  4. capture：使用事件的捕获模式；
  5. self：只有event.target是当前操作的元素时才触发事件；
  6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue初体验</title><!-- 1.引入Vue --><script src="../js/vue.js"></script><style>.demo1{background-color: red;}.box1{width: 200px;height: 200px;background-color: skyblue;}.box2{width: 100px;height: 100px;background-color: pink;}</style>
</head>
<body><!-- 2.准备一个容器 --><div id="root"><h1>Hello,{{name}}</h1><hr><!-- 01.阻止默认事件(常用) --><a href="http://www.baidu.com" @click.prevent="show">点我</a><!-- 02.阻止事件冒泡(常用) --><div class="demo1" @click="show"><a href="http://www.baidu.com" @click.stop="show">点我</a><!-- 在哪一层加了阻止事件冒泡，哪一层外面的所有祖先冒泡都会被阻止 --><!-- 修饰符可以连续写 --><a href="http://www.baidu.com" @click.prevent.stop="show">点我</a></div><!-- 03.事件只触发一次(常用) --><button @click.once="show">点我</button><!-- 04.使用事件的捕获模式让事件在捕获阶段就执行(传统方式是先捕获再冒泡，在冒泡阶段执行函数)--><div class="box1" @click.capture="showMsg(1)">div1<div class="box2" @click="showMsg(2)">div2</div></div><!-- 05.只有event.target是当前操作的元素时才触发事件--><div class="demo1" @click.self="show"><button @click="show">点我</button></div></div><script><!-- 3.创建Vue实例 -->const vm = new Vue({el:'#root',data:{name:'Vue',},methods:{show(e){alert('你好！')console.log(e.target);},showMsg(msg){console.log('showMsg',msg);}}});</script>
</body>
</html>

7.Vue事件处理

键盘事件

  • Vue中常用的按键别名：
    • 删除：delete(“删除”和“退格”)，
    • 回车：enter，退出：esc，空格：space，
    • 换行：tab (必须配合keydown去使用)，
    • 上：up，下：down，左：left，右：right
  • Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
  • 系统修饰键（用法特殊）：ctrl、alt、shift、meta
    • 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
    • 配合keydown使用：正常触发事件。
  • 也可以使用keyCode去指定具体的按键（不推荐）
  • Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
代码示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue初体验</title><!-- 1.引入Vue --><script src="../js/vue.js"></script>
</head>
<body><!-- 2.准备一个容器 --><div id="root"><h1>hello, {{name}}</h1><hr><input type="text" placeholder="按下回车提示输入1" @keydown.13="show"><input type="text" placeholder="按下回车提示输入2" @keydown.huiche="show"><input type="text" placeholder="按下回车提示输入3" @keydown.enter="show"><input type="text" placeholder="按下ctrl+alt提示输入4" @keydown.ctrl.alt="show"></div><script>Vue.config.keyCodes.huiche = 13 // 自定义一个回车键的keyCode别名按键//3.创建Vue实例const vm = new Vue({el:'#root',data:{name:'Vue',},methods:{show(event){console.log(event.key,event.keyCode);console.log(event.target.value);}}});</script>
</body>
</html>

exact 修饰符

  • exact 修饰符允许你控制由精确的系统修饰符组合触发的事件
  • 系统修饰键：ctrl、alt、shit、meta
代码示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue初体验</title><!-- 1.引入Vue --><script src="../js/vue.js"></script>
</head>
<body><!-- 2.准备一个容器 --><div id="root"><h1>hello, {{name}}</h1><hr><!-- 即使alt或shift被一同按下，也会触发 --><button @click.ctrl="msg('A')">A</button><!-- 有且只有ctrl 被按下，才会触发 --><button @click.ctrl.exact="msg('B')">B</button><button @click.alt.exact="msg('C')">C</button><button @click.shift.exact="msg('D')">D</button><!-- 非系统按键被按下，才会触发 --><button @click.exact="msg('E')">E</button></div><script>//3.创建Vue实例const vm = new Vue({el:'#root',data:{name:'Vue',},methods:{msg(event){console.log(event);}}});</script>
</body>
</html>

鼠标按钮修饰符

  • 这些修饰符会限制处理函数仅响应特定的鼠标按钮
    • 左键点击
    • 右键点击
    • 左键双击
代码示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue初体验</title><!-- 1.引入Vue --><script src="../js/vue.js"></script>
</head>
<body><!-- 2.准备一个容器 --><div id="root"><h1>hello, {{name}}</h1><hr><button v-on:click="show">点我1(不传参)</button><button @click.right="show">右键点我1(不传参)</button><button @click="msg($event,66)">点我2(传参)</button><button @dblclick="msg">双击点我3(不传参)</button></div><script>//3.创建Vue实例const vm = new Vue({el:'#root',data:{name:'Vue',},methods:{show(event){console.log(event.target.innerText);console.log(this);//此处的this指向的是vm实例,可以拿到_data(data)中的数据alert('show')},msg(event,number){console.log(event,number);console.log(event.target.innerText);console.log(this);//此处的this指向的是vm实例,可以拿到_data(data)中的数据alert('msg')}}});</script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/3015575.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

Unity Shader中获取像素点深度信息

Unity Shader中获取像素点深度信息

1.顶点着色器中对深度进行计算 v2f vert(appdata v) {v2f o;o.pos UnityObjectToClipPos(v.vertex);o.uv TRANSFORM_TEX(v.uv, _MainTex);o.depth (o.pos.z / o.pos.w 1.0) * 0.5; // Normalize depth to [0, 1]return o; }但是达不到预期&#xff0c;最后返回的值一直大于…
阅读更多...
QT+网络调试助手+TCP服务器

QT+网络调试助手+TCP服务器

一、UI界面设计 二、单线程 代码设计 1、 查找合法的本地地址&#xff0c;用于当作服务器的IP地址 #include <QThread> #include <QTcpSocket> #include <QNetworkInterface> #include <QMessageBox>QList<QHostAddress> ipAddressesList QNe…
阅读更多...
【iOS】——浅析CALayer

【iOS】——浅析CALayer

文章目录 一、CALayer介绍二、UIview与CALayer1.区别2.联系 三、CALayer的使用1.初始化方法2.常用属性 四.CALayer坐标系1.position属性和anchorPoint属性2.position和anchorPoint的关系3.position、anchorPoint和frame的关系 五、CALayerDelegate六、CALayer绘图机制1.绘图流程…
阅读更多...
vue2结合element-ui实现TreeSelect 树选择功能

vue2结合element-ui实现TreeSelect 树选择功能

需求背景 在日常开发中&#xff0c;我们会遇见很多不同的业务需求。如果让你用element-ui实现一个 tree-select 组件&#xff0c;你会怎么做&#xff1f; 这个组件在 element-plus 中是有这个组件存在的&#xff0c;但是在 element-ui 中是没有的。 可能你会直接使用 elemen…
阅读更多...
6、随机森林(Random forests)

6、随机森林(Random forests)

Random forests started a revolution in machine learning 20 years ago. For the first time, there was a fast and reliable algorithm which made almost no assumptions about the form of the data, and required almost no preprocessing. In today’s lesson, you’ll…
阅读更多...
全新Adobe利器：Project Neo为2D平面图像轻松添加3D立体效果

全新Adobe利器：Project Neo为2D平面图像轻松添加3D立体效果

Adobe的崭新创意工具Project Neo&#xff0c;正以其独特的3D技术为传统的2D图像设计领域带来革命性的变化。这款工具的核心功能在于&#xff0c;它能够将原本平面的2D图像巧妙地转化为立体感十足的三维作品。 想象一下&#xff0c;你手中的图标、动画插图&#xff0c;在Projec…
阅读更多...
高效项目管理：如何利用zz-plan在线甘特图工具

高效项目管理：如何利用zz-plan在线甘特图工具

作为项目管理人员&#xff0c;使用 zz-plan https://zz-plan.com/这样的在线甘特图协作软件可以极大地提高项目管理的效率和效果。以下是结合zz-plan特点的一些关键步骤&#xff1a; 1. 制定项目计划 在zz-plan上创建新的项目&#xff0c;定义项目目标、关键里程碑和最终期限。…
阅读更多...
Llama 3 模型上下文长度扩展至1048K

Llama 3 模型上下文长度扩展至1048K

AI苏妲己&#xff1a; Gradient AI 近日宣布&#xff0c;通过其创新的渐进式训练方法&#xff0c;成功将 Llama 3 系列模型的上下文长度扩展至超过100万令牌。 Llama 3 模型最初设计用于处理8000个令牌的上下文长度&#xff0c;这大约相当于6000字或10页文档。为了适应更长的…
阅读更多...
Spring中的Bean相关理解

Spring中的Bean相关理解

在Spring框架中&#xff0c;Bean是一个由Spring IoC容器实例化、配置和管理的对象。Bean是一个被Spring框架管理并且被应用程序各个部分所使用的对象。Spring IoC容器负责Bean的创建、初始化、依赖注入以及销毁等生命周期管理。 注&#xff1a;喜欢的朋友可以关注公众号“JAVA学…
阅读更多...
央国企加速新质生产力形成和发展，HR数字化工具如何推动创新内核构建？

央国企加速新质生产力形成和发展，HR数字化工具如何推动创新内核构建？

自今年两会以来&#xff0c;“新质生产力”一词获得了广泛的关注。众多专家学者对其重要性、定义及作用进行了热烈且深入的讨论&#xff0c;一致强调了新质生产力的核心地位。对于那些致力于转型为现代化国有企业的国资中央企业而言&#xff0c;培育新质生产力无疑成为了当前及…
阅读更多...
通过高效的升级计划控制云成本

通过高效的升级计划控制云成本

快速迁移到云以及使用和成本的复杂性使得公司迫切希望减少浪费并控制其支出。更糟糕的是&#xff0c;动荡的经济让决策者紧张不安&#xff0c;他们考虑削减成本措施并优先考虑锁定收入。 如果没有正式的 FinOps 或成本优化策略&#xff0c;公司很容易看到云费用如滚雪球般失控…
阅读更多...
ABAP—ALV 进阶：对展示数字要求负号提前、有千分符、有百分号

ABAP—ALV 进阶：对展示数字要求负号提前、有千分符、有百分号

1、负号提前 问题描述&#xff1a;SAP的数据&#xff0c;例如金额&#xff0c;为负数时&#xff0c;负号放在数值后面&#xff0c;不符合一般的负号在前的读数习惯&#xff0c;如何把负号放到数值前面&#xff1f; 解决办法&#xff1a;使用 CLOI_PUT_SIGN_IN_FRONT CALL FU…
阅读更多...
QSPI的使用

QSPI的使用

Quad SPI接口（QSPI）是一种同步串行数据链路，在主模式下提供与外部设备的通信。它类似于SPI协议，只是它有额外的数据线。 普通SPI有四条通信线路：芯片选择、时钟、MOSI和MISO。对于QSPI，可提供额外的数据线。因此，命令/数据/地址是根据所选模式通过单、四或双IO发送的。由…
阅读更多...
一个物业管理服务项目的思考——智慧停车场无人值守呼叫系统到电梯五方对讲再到呼叫中心

一个物业管理服务项目的思考——智慧停车场无人值守呼叫系统到电梯五方对讲再到呼叫中心

目录 起源智慧停车场无人值守呼叫系统然后电梯五方对讲系统又然后物业呼叫中心集控E控中心怎么做 起源 小区里新装了智慧停车场系统&#xff0c;马上展现出了科技化、现代化的新形象。一个显著的好处是&#xff1a;停车场的出入口&#xff0c;再也看不到司机和保安争吵的场景了…
阅读更多...
STM32F407VET6 学习笔记2：定时器、串口、自定义串口打印函数

STM32F407VET6 学习笔记2：定时器、串口、自定义串口打印函数

今日继续学习使用嘉立创购买的 立创梁山派天空星&#xff0c;芯片是 STM32F407VET6 因为已经有学习基础了&#xff0c;所以学习进度十分快&#xff0c;这次也是直接一块学习配置定时器与串口了&#xff0c;文章也愈来愈对基础的解释越来越少了...... 文章提供测试代码讲解、完…
阅读更多...
什么是企业出海？

什么是企业出海？

本文节选自Odoo亚太金牌服务机构【开源智造】所编写的《企业数字化百科大全》如需获取完整的知识内容&#xff0c;请至开源智造官网免费获取。感谢网友一键三连&#xff1a;点赞、转发、收藏&#xff0c;您的支持是我们最大的前进动力&#xff01; 企业出海是什么意思&#xff…
阅读更多...
idea Maven 插件 项目多环境打包配置

idea Maven 插件 项目多环境打包配置

背景 不同环境的配置文件不一样&#xff0c;打包方式也有差异 1. 准备配置文件 这里 local 为本地开发环境 可改为 dev 名称自定义 test 为测试环境 prod 为生产环境 根据项目业务自行定义 application.yml 配置&#xff1a; spring:profiles:#对应pom中的配置active: spring.…
阅读更多...
指代消解类方法梳理

指代消解类方法梳理

概念&#xff1a; MLM&#xff1a;带遮罩的语言模型 NSP&#xff1a;单句预测&#xff0c;任务包括两个输入序列 SBO&#xff1a;分词边界目标 1.spanBERT&#xff0c;2019 spanBERT是对bert从分词到文本跨度的优化&#xff0c;主要有两方面的优化&#xff1a;&#xff08…
阅读更多...
node报错——解决Error: error:0308010C:digital envelope routines::unsupported——亲测可用

node报错——解决Error: error:0308010C:digital envelope routines::unsupported——亲测可用

今天在打包vue2项目时&#xff0c;遇到一个报错&#xff1a; 最关键的代码如下&#xff1a; Error: error:0308010C:digital envelope routines::unsupportedat new Hash (node:internal/crypto/hash:80:19)百度后发现是node版本的问题。 在昨天我确实操作了一下node&…
阅读更多...
【Vue】pinia

【Vue】pinia

pinia 官网:https://pinia.vuejs.org/zh/ 搭建 pinia 环境 第一步&#xff1a;npm install pinia --save 第二步&#xff1a;操作src/main.ts import { createApp } from vue import App from ./App.vue/* 引入createPinia&#xff0c;用于创建pinia */ import { createP…
阅读更多...
最新文章

Copyright @ 2022~2023