Notes et applications d'étude de base de Vue
1. Connaissances de base
1.1 Passage de paramètres
Code de référence : méthode de transfert de valeur entre les composants de la vue
1.1.1 Composant parent vers composant enfant
- composant parent :
<template>
<div class="parent">
<h2>{
{
msg }}</h2>
<son psMsg="父传子的内容:叫爸爸"></son> <!-- 子组件绑定psMsg变量-->
</div>
</template>
<script>
import son from './Son' //引入子组件
export default {
name: 'HelloWorld',
data () {
return {
msg: '父组件',
}
},
components:{
son},
}
</script>
- Sous-ensemble
<template>
<div class="son">
<p>{
{
sonMsg }}</p>
<p>子组件接收到内容：{
{
psMsg }}</p>
</div>
</template>
<script>
export default {
name: "son",
data(){
return {
sonMsg:'子组件',
}
},
props:['psMsg'],//接手psMsg值
}
</script>
1.1.2 passage de paramètre de routeur
Les trois manières de base de passer des paramètres dans le routage de vue
utilisent principalement ceci : (les paramètres spécifiques ne seront pas affichés dans l'url)
this.$router.push(
{
path: '/file',
params: {
path: ...
}
}
)
Obtenir les paramètres dans la page /file :
this.$route.params.path
1.2 Supprimer le hashtag # du routage Web
rejoindre router/index.js_mode:'history'
const router = new Router({
mode: 'history', // 去掉#，需要路由模式改为history
routes: routes
})
1.3 requête synchrone axios
Utilisez async/wait in vue pour traiter les requêtes asynchrones axios de manière synchrone
besoin:
- Fonction A : appeler l'interface pour obtenir la valeur
- Fonction B : appelez la fonction A pour obtenir la valeur et l'affecter aux diagrammes
Aysnc et await impliquant deux parties :
fonction A :
async setChart () {
// echart初始化
var myChart = echarts.init(...)
myChart.showLoading()
var obj = Object
// 等待获得值完成后再将值传递给obj
await this.getJsonData().then(function (result) {
obj = result
})
...
}
fonctionB :
async getJsonData () {
let obj = {
}
let response = await request({
method: 'post',
url: '/key/getKeyMap'
})
obj = response.data.data
...
return obj
}
2. Candidature
2.1 Contrôle d'autorité des pages Web
Voir mon autre article de blog pour plus de détails : [Apprentissage frontal] Contrôle des autorisations d'affichage de la connexion (jeton) dans Vue
2.2 Capture d'écran de la page Web Vue : plug-in Kscreenshot
Code de référence : plug-in de capture d'écran kscreenshot
Il peut être appliqué très simplement :
installez kscreenshot :
npm install kscreenshot --save
Code spécifique :
import kscreenshot from 'kscreenshot'
export default {
data () {
return {
ocr_result: 'OCR识别结果',
// eslint-disable-next-line new-cap
KscreenShot: new kscreenshot(
{
key: 65,
toolShow: {
complete: true,
quit: true,
back: false,
arrow: false,
drawLine: false,
rect: false,
ellipse: false,
text: false,
color: false
},
endCB: this.endShot
}
)
}
},
methods: {
// 回调函数执行的是OCR识别的功能
endShot (e) {
let formData = new FormData()
// e里面是base64编码的图片
// 上传的话，要把开头的base64...去掉
formData.append('img', e.split(',')[1])
let result = ''
let _this = this
_this.loading = true
axios.post(
'/readPic',
formData,
{
'Content-Type': 'application/x-www-form-urlencoded'}
).then(function (response) {
// 获得回传数据
})
}
}
}
3. Applications liées à Ant-design-vue
3.1 Vérification du select selector mode=tag
<a-form-item label="作者">
<a-select
mode="tags"
placeholder="输入作者，回车键添加下一个"
v-decorator="[
'author',
{
rules: [{
required: true,
message: '请添加作者',
}, {
validator: confirmAuthor
}],
},
]">
</a-select>
</a-form-item>
Ajoutez ensuite la fonction confirmAuthor dans les méthodes :
// 验证作者输入框的验证器
confirmAuthor (rule, value, callback) {
if (value.length > 10) {
// eslint-disable-next-line standard/no-callback-literal
callback('输入的作者数量不得超过10个')
return
}
for (var i = 0; i < value.length; i++) {
if (value[i].length < 2 || value[i].length > 20) {
// eslint-disable-next-line standard/no-callback-literal
callback('输入的作者姓名必须大于2个字符且小于20个字符')
return
}
}
callback()
},
La raison de ne pas ajouter de vérification de répétabilité : le mode de sélection en balise est accompagné d'une vérification de la répétabilité de la chaîne d'entrée
4. Les pièges des plug-ins
4.1 vue-pdf
4.1.1 TypeError : impossible de lire les propriétés de undefined (lecture de 'catch')
Lien de référence : La réponse à cette question sur github
La solution spécifique consiste à réduire la version.
cnpm uninstall vue-pdf
Installez ensuite la version inférieure de vue-pdf
cnpm install [email protected] --save