Vue 学习笔记中遇到的问题
问题引入
原因分析
- 在 vue 中 Home 组件中声明了 多个 相同的key 属性
汉字转拼音的需求
自我学习,了解到有一个插件(js-pinyin)可以实现此功能:
以下是我的实践过程:
基于vue 项目的安装方式之一(npm 安装形式)~ 命令如下:
npm i js-pinyin --save
js-pinyin 插件的基本使用
基本引用
import pinyin from 'js-pinyin'
pinyin (Object类型)
属性
1. char_dict (string类型)
2. full_dict (Object类型)
3. options (Object类型)
4. polyphone(Object类型)
方法
1. setOptions
2. getFullChars // 获取全拼
3. getCamelChars // 获取拼音首字母
方法详解
1. setOptions方法的使用
pinyin.setOptions(obj) 该方法需要传递一个对象类型的入参
obj: {
charCase: 0 // 字符大小写 (0-首字母大写;1-全小写;2-全大写)
checkPolyphone: false // 是否检查多音字
}
vue 插槽使用
111
动态插槽使用
<template v-slot:[aaa]="{ row }" v-for="(aaa) in ['col-overHandleSet', 'col-overDutySet', 'col-dutyBonusPenaltySet', 'col-handleBonusPenaltySet', 'col-satisfiedBonusPenaltySet', ]">
<span v-html="`${ row[`${ aaa || '' }`.replaceAll(/col-/g, '')] || '' }`.replaceAll(/(\n|;|;)/g, '<br />')" v-show="row[`${ aaa || '' }`.replaceAll(/col-/g, '')]"></span>
<span v-show="!row[`${ aaa || '' }`.replaceAll(/col-/g, '')]">-</span>
</template>
可选链式语法的使用(?.属性,比如obj?.name)
npm install --save-dev @babel/plugin-proposal-optional-chaining// 解析可选链式语法
module.exports = {
presets: [
["@babel/preset-env", {
modules: false,
useBuiltIns: "usage",
}],
['@vue/app', {
useBuiltIns: "entry",//添加
}],
],
plugins: [
["component", {
"libraryName": "mint-ui",
"style": true,
}],
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true,
}],
["@babel/plugin-proposal-optional-chaining", {// 解析可选链式语法
}],
],
}
父组件和子孙组件中间的数据交互
···
v-on="
l
i
s
t
e
n
e
r
s
"
可以方便进行子组件、甚至子孙子组件向父组件的父组件传递数据(调用
t
h
i
s
.
listeners" 可以方便进行子组件、甚至子孙子组件向父组件的父组件传递数据(调用this.
listeners"可以方便进行子组件、甚至子孙子组件向父组件的父组件传递数据(调用this.emit(‘定义的方法名称’,参数【需要传递的数据】))
···