分页: 2/242 第一页 上页 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 下页 最后页 [ 显示模式: 摘要 | 列表 ]
Dec 13

 Vue2中的语法糖.sync:

在父组件中的
<div :title.sync="visible" ></div>
等同于: / .sync将针对于title的监听事件缩写 /
<div :title="visible" @update:title="visible = $event" ></div>
在子组件的methods中使用如下将新的value传给父级:

` handleClose() {        this.$emit('update:title', newValue)    }`

Vue3中用v-model替代了.sync修饰符和组件的model选项 / 不兼容 /:

针对于有参数的:<div v-model:title="visible" ></div>
等同于:<div :title="visible" @update:title="visible = $event" ></div>

Vue3中还针对于没有参数的v-model:

<div v-model="visible" ></div>
没有参数但却实际上在父组件内传入modelValue,类似于:
v-model:modelValue="visible" @updata:modelValue="visible =$event"
在父组件里是运用visible,在子组件里传入的props里的是modelValue.
更改参数,传入父级也是用modelValue
this.$emit('update:modelValue', newValue)

详情可以看Vue3的官方

.sync在Vue3的转变

Dec 12
先来看看Vue3的几种组件通信方式:

下面分别介绍这几种方式的写法:

1、props

2、$emit

父组件

3、expose / ref

父组件

4、attrs

父组件

5、v-model

父组件(v-model可省略)

6. provide / inject

父组件

接下来是Vue2.x 组件通信使用方法:
1、 props

父组件

2、.sync

3、v-model

4、ref

5、$emit / v-on

7、EventBus

8、Vuex(这个就不举例子了........懂的都懂!)
Dec 9

vueuse 不指定

tommyhu , 22:35 , 软件分析与设计 , 评论(0) , 引用(0) , 阅读(121) , Via 本站原创
VueUse is a collection of utility functions based on Composition API. We assume you are already familiar with the basic ideas of Composition API before you continue.
https://vueuse.org/guide/

exp:
Tags:
Dec 9
前言 (介绍 ECMAScript)
最初 JavaScript 语言有 2 份标准:

ECMA-262:主标准,由 ECMA 国际组织(Ecma International)负责管理(为了让最初的JavaScript 与最初的 JScript 能遵循同一套标准发展而诞生的 ECMAScript ,正好排到了作为 Ecma 的 262 号标准,所以得到 ECMA-262 编号。)

ISO/IEC 16262:第二标准,由国际标准化组织 ISO(International Standard Organization)和国际电子技术委员会 IEC(International Electrotechnical Commission)负责管理

出于商标版权的原因,规范标准中将这门语言称为 ECMAScript ,所以原则上 JavaScript 与 ECMAScript 指的是同一个东西,但有时也会加以区分:

JavaScript:指语言及其实现
ECMAScript:指语言标准及语言版本,比如 ES6 表示语言(标准)的第 6 版
ECMAScript 发展历史
ECMAScript 1(1997 年 6 月):规范第一版
ECMAScript 2(1998 年 6 月):为了同步 ISO 标准,引入了一些小更新
ECMAScript 3(1999 年 12 月):增加了正则表达式、字符串处理、控制语句(do-while、switch)、异常处理(try-catch)等众多核心特性
ECMAScript 4(2008 年 7 月废除):本来是一次大规模升级(静态类型、模块、命名空间等),但跨度过大,出现了分歧,最终没能推广使用
ECMAScript 5(2009 年 12 月):变化不大,加了一些标准库特性和严格模式
ECMAScript-5.1(2011 年 6 月):又一次小更新,为了同步 ISO 标准
ECMAScript 6(2015 年 6 月):一大波更新,实现了当年 ES4 的许多设想,并正式改为按年份命名规范版本
ECMAScript 2016(2016 年 6 月):第一个年度版本,与 ES6 相比,发布周期较短,新特性也相对少些
ECMAScript 2017(2017 年 6 月):第二个年度版本...
以后的 ECMAScript 版本(ES2018、ES2019、ES2020 等)都在 6 月正式获准生效
Dec 8
Dec 7
穿梭门: https://www.npmjs.com/package/vuex-persistedstate
Dec 7
一, pinia介绍
Pinia 是 Vue.js 的轻量级状态管理库,最近很受欢迎。它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库。
Pinia的成功可以归功于其管理存储数据的独特功能(可扩展性、存储模块组织、状态变化分组、多存储创建等)。

pinia优点:
符合直觉,易于学习
极轻, 仅有 1 KB
模块化设计,便于拆分状态
Pinia 没有 mutations,统一在 actions 中操作 state,通过this.xx 访问相应状态虽然可以直接操作 Store,但还是推荐在 actions 中操作,保证状态不被意外改变

store 的 action 被调度为常规的函数调用,而不是使用 dispatch 方法或 MapAction 辅助函数,这在 Vuex 中很常见
支持多个Store
支持 Vue devtools、SSR 和 webpack 代码拆分

pinia缺点:
不支持时间旅行和编辑等调试功能

yarn add [email protected]

穿梭门:
https://pinia.esm.dev/
在线demo https://stackblitz.com/github/piniajs/example-vue-3-vite
Dec 3
vscode安装json2ts插件
搜索json2ts或
https://marketplace.visualstudio.com/items?itemName=eriklynd.json-tools

或在线https://apihelper.jccore.cn/jsontool


Highslide JS
Dec 3
typescript中快速创建一个跟接口模型结构一样的对象。

vscode定义一个class implements 这个interface,然后再使用出new即可
Highslide JS

Dec 2

VUE3双向绑定 不指定

tommyhu , 17:22 , 大前端 » vue.js , 评论(0) , 引用(0) , 阅读(77) , Via 本站原创
分页: 2/242 第一页 上页 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 下页 最后页 [ 显示模式: 摘要 | 列表 ]