Vue

介绍💞

• Vue3

• Vue-Cli

• npm install -g @vue/cli

教程🐟

插槽slot🍏

• 用于在组件中传递元素或内容
• 示例

<div class="layout">
    <!-- 用于接受子组件的内容  -->
    <slot></slot>
</div>

复用组件🐯

• 抽离重复的组件出来进行封装服用
• 分页组件
• 示例

<template>
  <div class="page">
    <el-card :class="animBounceInUp">
      <el-pagination
          v-model:currentPage="page.page"
          v-model:page-size="page.size"
          v-model:total="total"
          :page-sizes="[10, 20, 30, 50]"
          background
          :layout="'total, sizes, prev, pager, next, jumper'"
          :total="400" @size-change="onChange" @current-change="onChange"/>
    </el-card>
  </div>
</template>

<script setup>
// 分页组件的实现
import {animBounceInUp} from "@/assets/anim";
defineProps({total:Number})
import {reactive} from 'vue'
const page = reactive({
  page:1,
  size:10,
})
const emit = defineEmits(['onChange'])
const onChange = () => {
  emit('onChange', page)
}
// 初始化回调
onChange()
</script>

<style scoped lang="scss">
.page{
  display: flex;
  align-items: center;
  height: 75px;
  .el-card{
    width: 100%;
  }
}
</style>

插件🍎

• https://element-plus.gitee.io/zh-CN/
• https://vuex.vuejs.org/zh/index.html
• https://router.vuejs.org/zh/index.html

桌面端🐯

• https://element-plus.gitee.io/zh-CN/

移动端😎

• https://vant-contrib.gitee.io/vant/#/zh-CN
• https://nutui.jd.com/#/zh-CN/component/button

可视化组件💢

• 非vue组件库

• https://echarts.apache.org/zh/index.html

• http://antv.antfin.com/zh-cn/index.html

• vue组件

• https://viserjs.github.io/

创建项目😄

• https://github.com/electron-vite/electron-vite-vue

事件👏

指针事件😃

• @mouseover 移动到某元素上触发事件
• @mouseleave 从某元素上移出触发事件
• @mouseover="onload(true)" @mouseleave="onload(false)"
• 标签的hover属性,当鼠标移动到上面则应用该属性a:hover{}

组件库🍊

VueCss⭐

• https://aminerman.com/kinesis/#/

Markdown👻

• npm install mavon-editor --save
• https://github.com/hinesboy/mavonEditor
• 导入 main.js

//md文档格式引入
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)

• 使用

<template>
  <el-row>
    <el-col>
      <el-card shadow="hover" style="height:  100%">
        <span>标题</span>
        <el-input v-model="model.title" label="标题"></el-input>
        <!--md标签 -->
        <mavon-editor class="md" v-model="model.content"></mavon-editor>
        <el-button type="primary" size="small" @click="submit(model)">发表</el-button>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
    export default {
        name: "ArticleList",
        data: function () {
            return {
                model: {
                    title: "",
                    content: ""
                }
            }
        },
        methods: {
            submit: function (par) {
                console.log(par);
            }
        }
    }
</script>

<style scoped>
  .md {
    height: 100%;
  }
</style>

复制工具🍊

• 安装 npm install clipboard --save

<el-button @click="copy(scope.row.tel)" class="btn" data-clipboard-target="#foo" id="foo">
  {{ scope.row.tel }}
</el-button>

copy(v) {
    Toast.success(`${v}复制成功`);
    let clipboard = new ClipboardJS(".btn", {
      text:(e)=>{return v}
    });
    clipboard.on("success", e => {
      // 释放内存
      clipboard.destroy();
    });
    clipboard.on("error", e => {
      // 释放内存
      clipboard.destroy();
    });
}