AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

vue 在线聊天实战范例（含选择发送表情、图片、视频、音频，自定义右键快捷菜单，一键复制，左右聊天气泡）

2024-07-04 320
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： vue 在线聊天实战范例（含选择发送表情、图片、视频、音频，自定义右键快捷菜单，一键复制，左右聊天气泡）

最终效果

完整代码

index.vue

<template>
  <div class="page">
    <div class="leftBox">
      <h1>访客</h1>
      <div class="chatBox">
        <div class="chatRecordBox">
          <div v-for="(item, index) in chatRecordList" :key="index">
            <RightRole
              v-if="item.role === '访客'"
              :type="item.type"
              :content="item.content"
              :avatarURL="visitorAvatarURL"
              @openMenu="openMenu($event, index, true)"
            />
            <LeftRole
              v-if="item.role === '客服'"
              :type="item.type"
              :content="item.content"
              :avatarURL="serviceAvatarURL"
              @openMenu="openMenu($event, index)"
            />
          </div>
        </div>
        <div class="toolBox">
          <ChooseEmotion @getEmo="chooseEmo($event, 'visitor')" />
          <img
            @click="chooseImg('visitor')"
            class="imgIcon"
            src="@/assets/images/图片.svg"
          />
          <img
            @click="chooseVideo('visitor')"
            class="videoIcon"
            src="@/assets/images/视频.svg"
          />
          <img
            @click="chooseAudio('visitor')"
            class="audioIcon"
            src="@/assets/images/音频.svg"
          />
        </div>
        <div
          ref="visitorSendContentBox_Ref"
          contenteditable="true"
          class="sendContentBox"
        ></div>
        <div class="btnBox">
          <el-button @click="visitorSend" size="small">发送</el-button>
        </div>
      </div>
    </div>
    <div class="rightBox">
      <h1>客服</h1>
      <div class="chatBox">
        <div class="chatRecordBox">
          <div v-for="(item, index) in chatRecordList" :key="index">
            <LeftRole
              v-if="item.role === '访客'"
              :type="item.type"
              :content="item.content"
              :avatarURL="visitorAvatarURL"
              @openMenu="openMenu($event, index)"
            />
            <RightRole
              v-if="item.role === '客服'"
              :type="item.type"
              :content="item.content"
              :avatarURL="serviceAvatarURL"
              @openMenu="openMenu($event, index, true)"
            />
          </div>
        </div>
        <div class="toolBox">
          <ChooseEmotion @getEmo="chooseEmo($event, 'service')" />
          <img
            @click="chooseImg('service')"
            class="imgIcon"
            src="@/assets/images/图片.svg"
          />
          <img
            @click="chooseVideo('service')"
            class="videoIcon"
            src="@/assets/images/视频.svg"
          />
          <img
            @click="chooseAudio('service')"
            class="audioIcon"
            src="@/assets/images/音频.svg"
          />
        </div>
        <div
          ref="serviceSendContentBox_Ref"
          contenteditable="true"
          class="sendContentBox"
        ></div>
        <div class="btnBox">
          <el-button @click="serviceSend" size="small">发送</el-button>
        </div>
      </div>

      <el-dialog
        title="图片预览"
        :visible.sync="showPreviewImgWin"
        style="text-align: center"
      >
        <el-image
          style="height: 400px"
          :preview-src-list="[imgSrc]"
          :src="imgSrc"
          fit="contain"
        />
      </el-dialog>

      <!-- 右键快捷菜单 -->
      <ul
        v-show="quickMenuVisible"
        :style="{ left: quickMenu_left + 'px', top: quickMenu_top + 'px' }"
        class="contextmenu"
      >
        <li v-show="ifCan_rollBack" @click="rollBack">撤回</li>
        <li @click="copy">复制</li>
      </ul>
    </div>
  </div>
</template>

<script>
import LeftRole from "./components/leftRole.vue";
import RightRole from "./components/rightRole.vue";
import ChooseEmotion from "./components/chooseEmotion.vue";
import visitorAvatarURL from "@/assets/images/访客.svg";
import serviceAvatarURL from "@/assets/images/客服.svg";

export default {
  watch: {
    quickMenuVisible(value) {
      if (value) {
        document.body.addEventListener("click", this.closeMenu);
      } else {
        document.body.removeEventListener("click", this.closeMenu);
      }
    },
  },
  components: { LeftRole, RightRole, ChooseEmotion },
  mounted() {
    let that = this;

    // 点击图片放大预览
    window.addEventListener("click", function (e) {
      let { target } = e;
      let nodeName = target.nodeName;

      if (nodeName === "IMG") {
        // 获取自定义的属性 preview
        let preview = target.getAttribute("preview");
        // 无 preview 属性的图片，不支持点击放大预览
        if (!preview) {
          return;
        }
        that.imgSrc = target.currentSrc;
        that.showPreviewImgWin = true;
      }
    });
  },
  data() {
    return {
      ifCan_rollBack: false,
      index: null,
      quickMenu_left: 0,
      quickMenu_top: 0,
      quickMenuVisible: false,
      imgSrc: "",
      showPreviewImgWin: false,
      visitorAvatarURL,
      serviceAvatarURL,
      chatRecordList: [],
    };
  },
  methods: {
    // 撤回消息
    rollBack() {
      this.chatRecordList.splice(this.index, 1);
    },
    // js 点击复制到剪贴板函数
    copy() {
      let content = this.chatRecordList[this.index].content;

      if (window.clipboardData) {
        window.clipboardData.setData("text", content);
      } else {
        (function (content) {
          document.oncopy = function (e) {
            e.clipboardData.setData("text", content);
            e.preventDefault();
            document.oncopy = null;
          };
        })(content);
        document.execCommand("Copy");
      }
    },
    // 显示右键快捷菜单
    openMenu(e, index, ifCan_rollBack) {
      this.ifCan_rollBack = ifCan_rollBack;
      this.index = index;
      this.quickMenu_top = e.pageY;
      this.quickMenu_left = e.pageX;
      this.quickMenuVisible = true;
    },
    // 隐藏右键快捷菜单
    closeMenu() {
      this.quickMenuVisible = false;
    },
    // 根据角色，确定编辑框
    getSendContentBox_Ref(role) {
      if (role === "visitor") {
        return "visitorSendContentBox_Ref";
      }
      if (role === "service") {
        return "serviceSendContentBox_Ref";
      }
    },
    // 在编辑框中插入内容
    sendContentBox_insert(role, insertContent) {
      let sendContentBox_Ref = this.getSendContentBox_Ref(role);
      let content = JSON.parse(
        JSON.stringify(this.$refs[sendContentBox_Ref].innerHTML)
      );

      let newContent = "";

      // 光标在编辑框内时
      if (window.getSelection().anchorNode) {
        // 获取光标在编辑框中的下标
        let startIndex = window.getSelection().anchorOffset;
        let ednIndex = window.getSelection().focusOffset;

        newContent =
          content.substring(0, startIndex) +
          insertContent +
          content.substring(ednIndex);
      } else {
        // 光标不在编辑框内时
        newContent = content + insertContent;
      }

      this.$refs[sendContentBox_Ref].innerHTML = newContent;
    },
    chooseEmo(emo, role) {
      this.sendContentBox_insert(role, emo);
    },
    // 访客发送消息
    visitorSend() {
      let content = this.$refs.visitorSendContentBox_Ref.innerHTML;
      if (!content) {
        this.$message({
          message: "请输入发送内容！",
          type: "warning",
        });
        return;
      }

      this.chatRecordList.push({
        role: "访客",
        content: content,
        type: "text",
      });

      // 发送后，清空发送框的内容
      this.$refs.visitorSendContentBox_Ref.innerHTML = "";
    },
    // 客服发送消息
    serviceSend() {
      let content = this.$refs.serviceSendContentBox_Ref.innerHTML;
      if (!content) {
        this.$message({
          message: "请输入发送内容！",
          type: "warning",
        });
        return;
      }

      this.chatRecordList.push({
        role: "客服",
        content: content,
        type: "text",
      });

      // 发送后，清空发送框的内容
      this.$refs.serviceSendContentBox_Ref.innerHTML = "";
    },
    // 选择图片
    chooseImg(role) {
      let that = this;
      let input = document.createElement("input");
      input.setAttribute("type", "file");
      // 支持多选
      input.setAttribute("multiple", "multiple");
      input.accept = "image/*";
      input.addEventListener("change", (e) => {
        let file = e.path[0].files[0];
        // 浏览器兼容性处理（有的浏览器仅存在 Window.URL）
        const windowURL = window.URL || window.webkitURL;
        // createObjectURL 函数会根据传入的参数创建一个指向该参数对象的URL
        let filePath = windowURL.createObjectURL(file);

        let tmp_imgDom = document.createElement("img");
        tmp_imgDom.setAttribute("src", filePath);
        tmp_imgDom.setAttribute("height", 30);
        tmp_imgDom.setAttribute("preview", true);
        tmp_imgDom.style.cursor = "pointer";

        let tmp_divDom = document.createElement("div");
        tmp_divDom.appendChild(tmp_imgDom);

        that.chatRecordList.push({
          role: role === "visitor" ? "访客" : "客服",
          content: tmp_divDom.innerHTML,
          type: "img",
        });
      });
      input.click();
    },
    // 选择视频
    chooseVideo(role) {
      let that = this;
      let input = document.createElement("input");
      input.setAttribute("type", "file");
      // 支持多选
      input.setAttribute("multiple", "multiple");
      input.accept = "video/*";
      input.addEventListener("change", (e) => {
        let file = e.path[0].files[0];
        // 浏览器兼容性处理（有的浏览器仅存在 Window.URL）
        const windowURL = window.URL || window.webkitURL;
        // createObjectURL 函数会根据传入的参数创建一个指向该参数对象的URL
        let filePath = windowURL.createObjectURL(file);

        let tmp_videoDom = document.createElement("video");

        tmp_videoDom.setAttribute("src", filePath);
        tmp_videoDom.setAttribute("height", 100);
        tmp_videoDom.setAttribute("controls", "controls");
        tmp_videoDom.style.cursor = "pointer";

        let tmp_divDom = document.createElement("div");
        tmp_divDom.appendChild(tmp_videoDom);

        that.chatRecordList.push({
          role: role === "visitor" ? "访客" : "客服",
          content: tmp_divDom.innerHTML,
          type: "video",
        });
      });
      input.click();
    },

    // 选择音频
    chooseAudio(role) {
      let that = this;
      let input = document.createElement("input");
      input.setAttribute("type", "file");
      // 支持多选
      input.setAttribute("multiple", "multiple");
      input.accept = "audio/*";
      input.addEventListener("change", (e) => {
        let file = e.path[0].files[0];
        // 浏览器兼容性处理（有的浏览器仅存在 Window.URL）
        const windowURL = window.URL || window.webkitURL;
        // createObjectURL 函数会根据传入的参数创建一个指向该参数对象的URL
        let filePath = windowURL.createObjectURL(file);

        let tmp_audioDom = document.createElement("audio");

        tmp_audioDom.setAttribute("src", filePath);
        tmp_audioDom.setAttribute("height", 30);
        tmp_audioDom.setAttribute("controls", "controls");
        tmp_audioDom.style.cursor = "pointer";
        let tmp_divDom = document.createElement("div");
        tmp_divDom.appendChild(tmp_audioDom);

        that.chatRecordList.push({
          role: role === "visitor" ? "访客" : "客服",
          content: tmp_divDom.innerHTML,
          type: "audio",
        });
      });
      input.click();
    },
  },
};
</script>

<style scoped>
.page {
  display: flex;
  justify-content: space-around;
}
.chatBox {
  width: 400px;
  padding: 10px;
  background: #409eff;
  border-radius: 10px;
}
.chatRecordBox {
  padding: 10px;
  height: 400px;
  border-radius: 10px;
  background: white;
  overflow: auto;
}

.sendContentBox {
  height: 100px;
  padding: 10px;
  background: white;
  overflow: auto;
  border: 1px solid rgb(195, 187, 187);
}
.btnBox {
  padding-top: 10px;
  text-align: right;
}

h1 {
  line-height: 40px;
  font-weight: bold;
}
.toolBox {
  padding: 4px;
  background: white;
  margin-top: 10px;
  display: flex;
  align-items: center;
}

img {
  cursor: pointer !important;
  display: inline-block;
}
.imgIcon {
  margin-left: 4px;
  height: 20px;
  cursor: pointer;
}
.videoIcon {
  width: 22px;
  cursor: pointer;
  margin-left: 4px;
}
.audioIcon {
  width: 18px;
  cursor: pointer;
  margin-left: 4px;
  border-radius: 4px;
}
/* 右键快捷菜单的样式 */
.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}

.contextmenu li {
  margin: 0;
  padding: 7px 16px;
  cursor: pointer;
}

.contextmenu li:hover {
  background: #eee;
}
</style>

components/leftRole.vue

<template>
  <div class="leftRoleBox">
    <div>
      <img class="avatar" :src="avatarURL" />
    </div>
    <!-- 左侧的聊天气泡尖角 -->
    <div v-if="type === 'text'" class="triangle-top-left">
      <div class="triangle-top-left2"></div>
    </div>
    <!-- 聊天气泡 -->
    <div
      @contextmenu.prevent="openMenu($event)"
      v-html="content"
      :class="type === 'text' ? 'bubble-left' : 'multimediaBox'"
    ></div>
  </div>
</template>

<script>
export default {
  props: {
    type: String,
    content: String,
    avatarURL: String,
  },
  methods: {
    openMenu(e) {
      this.$emit("openMenu", e);
    },
  },
};
</script>

<style scoped>
.leftRoleBox {
  display: flex;
  align-items: flex-start;
}

.avatar {
  width: 30px;
}

.triangle-top-left {
  position: relative;
  border-top: 4px solid #409eff;
  border-left: 4px solid transparent;
  margin-top: 20px;
  margin-left: 2px;
}

.triangle-top-left2 {
  top: -2px;
  left: 0px;
  position: absolute;
  border-top: 4px solid #ffffff;
  border-left: 4px solid transparent;
}

.bubble-left {
  text-align: justify;
  border-radius: 4px;
  padding: 4px;
  border: 2px solid #409eff;
  font-size: 12px;
  line-height: 16px;
  margin-top: 10px;
}

.multimediaBox {
  padding: 10px;
}
</style>

components/rightRole.vue

<template>
  <div class="rightRoleBox">
    <div>
      <img class="avatar" :src="avatarURL" />
    </div>

    <!-- 左侧的聊天气泡尖角 -->
    <div v-if="type === 'text'" class="triangle-top-right">
      <div class="triangle-top-right2"></div>
    </div>
    <!-- 聊天气泡 -->
    <div
      @contextmenu.prevent="openMenu($event)"
      v-html="content"
      :class="type === 'text' ? 'bubble-right' : 'multimediaBox'"
    ></div>
  </div>
</template>

<script>
export default {
  props: {
    type: String,
    content: String,
    avatarURL: String,
  },
  methods: {
    openMenu(e) {
      this.$emit("openMenu", e);
    },
  },
};
</script>

<style scoped>
.rightRoleBox {
  display: flex;
  align-items: flex-start;
  flex-direction: row-reverse;
}

.avatar {
  width: 30px;
}

.triangle-top-right {
  position: relative;
  border-top: 4px solid #409eff;
  border-right: 4px solid transparent;
  margin-top: 20px;
  margin-right: 2px;
}

.triangle-top-right2 {
  top: -2px;
  right: 0px;
  position: absolute;
  border-top: 4px solid #ffffff;
  border-right: 4px solid transparent;
}

.bubble-right {
  text-align: justify;
  border-radius: 4px;
  padding: 4px;
  border: 2px solid #409eff;
  font-size: 12px;
  line-height: 16px;
  margin-top: 10px;
}
.multimediaBox {
  padding: 10px;
}
</style>

components/chooseEmotion.vue

<template>
  <div class="chatIcon">
    <el-popover placement="top-start" width="400" trigger="hover">
      <div class="emotionList">
        <a
          href="javascript:void(0);"
          @click="getEmo(index)"
          v-for="(item, index) in faceList"
          :key="index"
          class="emotionItem"
          >{{ item }}</a
        >
      </div>
      <img height="20" slot="reference" src="@/assets/images/表情.svg" />
    </el-popover>
  </div>
</template>
<script>
import emojiData from "@/assets/data/emoji.json";
export default {
  mounted() {
    for (let i in emojiData) {
      this.faceList.push(emojiData[i].char);
    }
  },
  data() {
    return {
      faceList: [],
    };
  },
  methods: {
    getEmo(index) {
      this.$emit("getEmo", this.faceList[index]);
    },
  },
};
</script>

  
<style scoped>
.chatIcon {
  font-size: 25px;
}
.emotionList {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
}

.emotionItem {
  width: 10%;
  font-size: 20px;
  text-align: center;
}
/*包含以下四种的链接*/
.emotionItem {
  text-decoration: none;
}
/*正常的未被访问过的链接*/
.emotionItem:link {
  text-decoration: none;
}
/*已经访问过的链接*/
.emotionItem:visited {
  text-decoration: none;
}
/*鼠标划过(停留)的链接*/
.emotionItem:hover {
  text-decoration: none;
}
/* 正在点击的链接*/
.emotionItem:active {
  text-decoration: none;
}
</style>

src\assets\data\emoji.json

[
  {
    "codes": "1F600",
    "char": "😀",
    "name": "grinning face"
  },
  {
    "codes": "1F603",
    "char": "😃",
    "name": "grinning face with big eyes"
  },
  {
    "codes": "1F604",
    "char": "😄",
    "name": "grinning face with smiling eyes"
  },
  {
    "codes": "1F601",
    "char": "😁",
    "name": "beaming face with smiling eyes"
  },
  {
    "codes": "1F606",
    "char": "😆",
    "name": "grinning squinting face"
  },
  {
    "codes": "1F605",
    "char": "😅",
    "name": "grinning face with sweat"
  },
  {
    "codes": "1F923",
    "char": "🤣",
    "name": "rolling on the floor laughing"
  },
  {
    "codes": "1F602",
    "char": "😂",
    "name": "face with tears of joy"
  },
  {
    "codes": "1F642",
    "char": "🙂",
    "name": "slightly smiling face"
  },
  {
    "codes": "1F643",
    "char": "🙃",
    "name": "upside-down face"
  },
  {
    "codes": "1F609",
    "char": "😉",
    "name": "winking face"
  },
  {
    "codes": "1F60A",
    "char": "😊",
    "name": "smiling face with smiling eyes"
  },
  {
    "codes": "1F607",
    "char": "😇",
    "name": "smiling face with halo"
  },
  {
    "codes": "1F970",
    "char": "🥰",
    "name": "smiling face with hearts"
  },
  {
    "codes": "1F60D",
    "char": "😍",
    "name": "smiling face with heart-eyes"
  },
  {
    "codes": "1F929",
    "char": "🤩",
    "name": "star-struck"
  },
  {
    "codes": "1F618",
    "char": "😘",
    "name": "face blowing a kiss"
  },
  {
    "codes": "1F617",
    "char": "😗",
    "name": "kissing face"
  },
  {
    "codes": "1F61A",
    "char": "😚",
    "name": "kissing face with closed eyes"
  },
  {
    "codes": "1F619",
    "char": "😙",
    "name": "kissing face with smiling eyes"
  },
  {
    "codes": "1F44B",
    "char": "👋",
    "name": "waving hand"
  },
  {
    "codes": "1F91A",
    "char": "🤚",
    "name": "raised back of hand"
  },
  {
    "codes": "1F590",
    "char": "🖐",
    "name": "hand with fingers splayed"
  },
  {
    "codes": "270B",
    "char": "✋",
    "name": "raised hand"
  },
  {
    "codes": "1F596",
    "char": "🖖",
    "name": "vulcan salute"
  },
  {
    "codes": "1F44C",
    "char": "👌",
    "name": "OK hand"
  },
  {
    "codes": "1F90F",
    "char": "🤏",
    "name": "pinching hand"
  },
  {
    "codes": "270C",
    "char": "✌",
    "name": "victory hand"
  },
  {
    "codes": "1F91E",
    "char": "🤞",
    "name": "crossed fingers"
  },
  {
    "codes": "1F91F",
    "char": "🤟",
    "name": "love-you gesture"
  },
  {
    "codes": "1F918",
    "char": "🤘",
    "name": "sign of the horns"
  },
  {
    "codes": "1F919",
    "char": "🤙",
    "name": "call me hand"
  },
  {
    "codes": "1F448",
    "char": "👈",
    "name": "backhand index pointing left"
  },
  {
    "codes": "1F449",
    "char": "👉",
    "name": "backhand index pointing right"
  },
  {
    "codes": "1F446",
    "char": "👆",
    "name": "backhand index pointing up"
  },
  {
    "codes": "1F595",
    "char": "🖕",
    "name": "middle finger"
  },
  {
    "codes": "1F447",
    "char": "👇",
    "name": "backhand index pointing down"
  },
  {
    "codes": "261D FE0F",
    "char": "☝️",
    "name": "index pointing up"
  },
  {
    "codes": "1F44D",
    "char": "👍",
    "name": "thumbs up"
  },
  {
    "codes": "1F44E",
    "char": "👎",
    "name": "thumbs down"
  },
  {
    "codes": "270A",
    "char": "✊",
    "name": "raised fist"
  },
  {
    "codes": "1F44A",
    "char": "👊",
    "name": "oncoming fist"
  },
  {
    "codes": "1F91B",
    "char": "🤛",
    "name": "left-facing fist"
  },
  {
    "codes": "1F91C",
    "char": "🤜",
    "name": "right-facing fist"
  }
]

配套图片素材下载

链接：https://pan.baidu.com/s/170pb-MJlMxG2nRj_3Y2VFw?pwd=oknr

提取码：oknr

文章标签：
客服工作台
JavaScript
关键词：
自定义VUE.js
vue实战VUE.js
vue自定义VUE.js
vue右键VUE.js
菜单VUE.js
朝阳39
目录
相关文章
程序员彭于晏
|
1月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
36 1
阿里巴巴叫我来巡山
|
7天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统，提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性，实现用户友好的界面，方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构，确保稳定性和多功能模块设计，涵盖管理员和用户功能模块，促进物品循环使用，降低开销，提升环保意识，助力绿色校园文化建设。
阿里巴巴叫我来巡山
65 17
程序员彭于晏
|
1月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
45 0
程序员彭于晏
|
1月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
程序员彭于晏
47 0
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱前端的大一学生，专注于JavaScript与Vue，正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
43 1
vue学习第一章
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令，包括基本使用、动态绑定class及style等，希望能为你的前端学习之路提供帮助。持续关注，更多精彩内容即将呈现！🎉🎉🎉
雨溪-yuxi
30 1
雨溪-yuxi
|
1月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用，请关注我，将持续更新更多优质内容！🎉🎉🎉
雨溪-yuxi
38 1
vue学习第四章
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 算法
vue学习第7章(循环）
欢迎来到瑞雨溪的博客，一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令，包括遍历数组和对象、使用key以及数组的响应式方法等内容，并附有综合练习实例。关注我，将持续更新更多优质文章！🎉🎉🎉
雨溪-yuxi
26 1
vue学习第7章(循环）
雨溪-yuxi
|
1月前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客，我是瑞雨溪，一名热爱JavaScript与Vue的大一学生，自学前端2年半，正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
30 1
vue学习第九章(v-model)
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发）
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容，适合前端开发者学习参考。持续更新中，期待您的关注！🎉🎉🎉
雨溪-yuxi
45 1
vue学习第十章(组件开发）

热门文章

最新文章

  • 1
    Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
  • 2
    Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么？
  • 3
    基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
  • 4
    在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
  • 5
    Vue3中使用provide/inject来避免v-model的循环引用
  • 6
    Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
  • 7
    除了provide/inject，Vue3中还有哪些方式可以避免v-model的循环引用？
  • 8
    vue3使用pinia中的actions，需要调用接口的话
  • 9
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 10
    Vue3——使用v-if或v-show来实现过渡的动画效果
  • 1
    vue3使用pinia中的actions，需要调用接口的话
    18
  • 2
    基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
    65
  • 3
    除了provide/inject，Vue3中还有哪些方式可以避免v-model的循环引用？
    30
  • 4
    Vue3中使用provide/inject来避免v-model的循环引用
    38
  • 5
    Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
    33
  • 6
    Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
    129
  • 7
    在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
    51
  • 8
    Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么？
    110
  • 9
    Vue.js 框架下的性能优化策略与实践
    50
  • 10
    Vue.js 3：深入探索组合式API的实践与应用
    41

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • QQ移动页面框架优化实践

    • 相关实验场景

    更多
  • 图表样式智能美化工具
  • 快速实现摄像头视频画面的远程预览
  • ROS模板参数动态展示
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)