vue学习笔记

atennis003

已于 2022-03-19 14:59:21 修改

阅读量1.1k

点赞数

分类专栏：前端文章标签： vue

于 2022-03-13 09:30:44 首次发布

本文链接：https://blog.csdn.net/qq_43013492/article/details/123454490

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了Vue中父组件和子组件的概念，重点剖析了`<template slot>`和`v-for`的插槽用法，并详细讲解了`v-decorator`验证和`select-option`的选择项绑定。通过实例演示，展示了如何在Vue中有效组织组件和处理数据验证。

摘要由CSDN通过智能技术生成

0、提问

   <div class="dashboard disfc">
后面这个disfc是什么意思？是否固定写法

一、组件

什么是父组件
什么是子组件
在menu.vue这个例子中哪个是父、子组件

二、插槽

<div slot="left"></div>
<div slot="right"></div> 是啥意思

<template slot="module" slot-scope="module"> 
//此处slot,slot-scope 为啥都要写，真正被tableColumns.scopedSlots引用的是哪个值？
   <a-tag color="#f50">
   	  {{module.name}}
   </a-tag>
</template>

三、select-option

<a-select-option v-for="item in modules" v-bind:key="item.id" :value="item.id" :label="item.name">
{{item.name}}
</a-select-option>
v-bind:是啥用途？

四、v-decorator

用于验证输入内容是否有效

1.v-decorator 
<a-input v-decorator="['name', { rules: [{ required: true, message: '请输入菜单名称' }] }]"
 placeholder="请输入菜单名称"
/>
<a-input v-decorator="['name']" placeholder="请输入名字" @change="changeMe"></a-input>
methods: {
    changeMe(selectedValue) {
//selectedValue就是当前触发字段的值，也可以用下getFieldValue获取
//但是有些组件好像获取在赋值前，可能需要加延迟
        this.form.getFieldValue('name')
     } 
}
methods: {
    changeMe(selectedValue) {
        this.form.setFieldsValue({
             name: "值",//
             id: res.result.id,//最后一个逗号随意
           });
     } 
}
7.pattern--调用外部函数校验数据有效性
<a-input-number style="width: 100%;" :min="1" :max="9999"                      placeholder="请输入排序" v-decorator="['sorter',{
rules: [{message: '请输入正整数',pattern: new RegExp('^[0-9]*[1-9][0-9]*$', 'g'),                                  },],},]"/>

vue语法

1.变量的引用，使用两对{{变量}}读取
  {{ province }}
2.循环,下例item为变量，modules为数组
  v-for="item in modules"
3.v-if v-else-if v-else 
  本例中level为变量
  <template v-if="level == '二'">
    <a-tag color="green">二级菜单</a-tag>
  </template>
  <template v-else-if="level == '三'">
    <a-tag color="blue">三级菜单</a-tag>
  </template>
  <template v-else>
    <a-tag color="red">四级菜单</a-tag>
  </template>