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

vue学习第十章(组件开发）

2024-11-22 129
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容，适合前端开发者学习参考。持续更新中，期待您的关注！🎉🎉🎉

🎉🎉🎉欢迎来到我的博客,我是一名自学了2年半前端的大一学生,熟悉的技术是JavaScript与Vue.目前正在往全栈方向前进, 如果我的博客给您带来了帮助欢迎您关注我,我将会持续不断的更新文章!!!🙏🙏🙏

@[toc]

1. 组件的基本使用

​ 简单的组件示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- 3.使用组件 -->
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <cpnc></cpnc>
</div>
<script src="../js/vue.js"></script>
<script>
  // 1.创建组件构造器对象
  const cpnc = Vue.extend({
    
    template:`
        <div>
          <h2>标题</h2>
          <p>内容1...<p>
          <p>内容2...<p>
        </div>`
  })
  // 2.全局注册组件
  Vue.component('my-cpn', cpnc)
  const app = new Vue({
    
    el:"#app",
    data:{
    
    },
    components:{
    
      //局部组件创建
      cpnc:cpnc
    }
  })
</script>
</body>
</html>

​ 组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 my-cpn。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用： <my-cpn></my-cpn>。

1.1 创建组件构造器对象

template中是组件的DOM元素内容。

1.2 注册组件

  1. 全局注册，通过 Vue.component。
  2. 局部注册，通过 components:{cpnc:cpnc}。

1.3 使用组件

​ 像使用html标签一样使用。

  <div id="app">
    <!-- 3.使用组件 -->
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
    <cpnc></cpnc>
  </div>

2. 全局组件和局部组件

​ 组件的注册方式有两种，一种是全局组件一种是局部组件。

  <div id="app">
    <h2>全局组件</h2>
    <my-cpn></my-cpn>
    <h2>局部组件</h2>
    <cpnc></cpnc>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    // 1.创建组件构造器对象
    const cpnc = Vue.extend({
    
      template:`
        <div>
          <h2>标题</h2>
          <p>内容1</p>
          <p>内容2</p>
        </div>`
    })
    // 2.注册组件（全局组件，可以在多个vue实例中使用）
    Vue.component('my-cpn', cpnc)

    const app = new Vue({
    
      el:"#app",
      components:{
    //局部组件创建
        cpnc:cpnc
      }
    })
  </script>

2.1 全局组件

​ 全局组件，可以在多个vue实例中使用，类似于全局变量。

​ 使用Vue.component('my-cpn', cpnc)方式注册，直接使用<my-cpn></my-cpn>调用。my-cpn是全局组件的名字，cpnc是定义的组件对象。

2.2 局部组件

​ 局部组件，只能在当前vue实例挂载的对象中使用，类似于局部变量，有块级作用域。

​ 注册方式

    const app = new Vue({
   
      el:"#app",
      components:{
   //局部组件创建
        cpnc:cpnc
      }
    })

​ 使用方式与全局变量一样，直接使用<cpnc></cpnc>调用。cpnc:cpnc第一个cpnc是给组件命名的名字，第二个是定义的组件对象。如果俩个同名也可以直接使用es6语法：

components:{
   //局部组件创建
        cpnc
}

3. 父组件和子组件的区别

  <div id="app">
    <cpn2></cpn2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    // 1.创建组件构造器对象
    const cpn1 = Vue.extend({
    
      template:`
        <div>
          <h2>标题1</h2>
          <p>组件1</p>
        </div>`
    })
    // 组件2中使用组件1
    const cpn2 = Vue.extend({
    
      template:`
        <div>
          <h2>标题2</h2>
          <p>组件2</p>
          <cpn1></cpn1>
        </div>`,
      components:{
    
        cpn1:cpn1
      }
    })

    const app = new Vue({
    
      el:"#app",
      components:{
    //局部组件创建
        cpn2:cpn2
      }
    })
  </script>

​ 上述代码中定义了两个组件对象cpn1和cpn2，在组件cpn2中使用局部组件注册了cpn1，并在template中使用了注册的cpn1，然后在vue实例中使用注册了局部组件cpn2，在vue实例挂载的div中调用了cpn2，cpn2与cpn1形成父子组件关系。

注意：组件就是一个vue实例，vue实例的属性，组件也可以有，例如data、methods、computed等。

4. 注册组件的语法糖

  <div id="app">
    <cpn1></cpn1>
    <cpn2></cpn2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    // 1.注册全局组件语法糖
    Vue.component('cpn1', {
    
      template:`
        <div>
          <h2>全局组件语法糖</h2>
          <p>全局组件语法糖</p>
        </div>`
    })

    const app = new Vue({
    
      el:"#app",
      components:{
    //局部组件创建
        cpn2:{
    
          template:`
        <div>
          <h2>局部组件语法糖</h2>
          <p>局部组件语法糖</p>
        </div>`
        }
      }
    })
  </script>

注册组件时候可以不实例化组件对象，直接在注册的时候实例化。{}就是一个组件对象。

5. 组件模板的分离写法

5.1 script标签

​ 使用script标签定义组件的模板，script标签注意类型是text/x-template。

  <!-- 1.script标签注意类型是text/x-template -->
  <script type="text/x-template" id="cpn1">
    <div>
        <h2>组件模板的分离写法</h2>
        <p>script标签注意类型是text/x-template</p>
      </div>
  </script>

5.2 template标签

​ 使用template标签，将内容写在标签内。

  <!-- 2.template标签 -->
  <template id="cpn2">
    <div>
      <h2>组件模板的分离写法</h2>
      <p>template标签</p>
    </div>
  </template>

调用分离的模板，使用template:'#cpn1'

  <script src="../js/vue.js"></script>
  <script>

    const app = new Vue({
    
      el: "#app",
      components: {
     //局部组件创建
        cpn1:{
    
          template:'#cpn1'
        },
        cpn2: {
    
          template: '#cpn2'
        }
      }
    })
  </script>

6. 组件的数据

6.1 存放问题

​ 前面说过vue组件就是一个vue实例，相应的vue组件也有data属性来存放数据。

  <div id="app">
    <cpn1></cpn1>
  </div>

  <script src="../js/vue.js"></script>
  <script>

    const app = new Vue({
    
      el: "#app",
      components: {
     //局部组件创建
        cpn1:{
    
          template:'<div>{
    {msg}}</div>',
          data(){
    
            return {
    
              msg:"组件的数据存放必须要是一个函数"
            }
          }
        }
      }
    })
  </script>

在template中使用组件内部的数据msg。

6.2 组件的data为什么必须要是函数

​ 组件的思想是复用，定义组件当然是把通用的公共的东西抽出来复用。

<div id="app">
    <h2>data不使用函数</h2>
    <cpn1></cpn1>
    <cpn1></cpn1>
    <hr>
    <h2>data使用函数</h2>
    <cpn2></cpn2>
    <cpn2></cpn2>
    <hr>
  </div>
  <script src="../js/vue.js"></script>
  <template id="cpn1">
    <div>
      <button @click="count--">-</button>
      当前计数：{
  {count}}
      <button @click="count++">+</button>
    </div>
  </template>
  <template id="cpn2">
    <div>
      <button @click="count--">-</button>
      当前计数：{
  {count}}
      <button @click="count++">+</button>
    </div>
  </template>
  <script>
    const obj = {
    
      count:0
    };
    const app = new Vue({
    
      el: "#app",
      components: {
     //局部组件创建
        cpn1: {
    
          template: '#cpn1',
          data() {
    
            return obj;
          }
        },
        cpn2: {
    
          template: '#cpn2',
          data() {
    
            return {
    
              count: 0
            }
          }
        }
      }
    })
  </script>

上述代码中定义了两个组件cpn1和cpn2，都是定义了两个计数器，con1的data虽然使用了函数，但是为了模拟data:{count:0}，使用了常量obj来返回count。

图中可以看到，不使用函数data的好像共用一个count属性，而使用函数的data的count是各自用各自的，像局部变量一样有块级作用域，这个块级就是vue组件的作用域。

我们在复用组件的时候肯定希望，各自组件用各自的变量，如果确实需要都用一样的，可以全局组件注册，也可以是用vuex来进行状态管理。

7. 父组件给子组件传递数据

7.1 使用props属性，父组件向子组件传递数据

使用组件的props属性

const cpn = {
   
  template: "#cpn",
  props: {
    
          cmessage: {
   
          type: String,
          default: 'zzzzz',
          required: true //在使用组件必传值
          }
  }
}

向cmessage对象传值

<div id="app">
    <cpn :cMessage="message"></cpn>
</div>
<script>    
const app = new Vue({
    
      el: "#app",
      data: {
    
        message: "你好",
        movies: ["复仇者联盟", "钢铁侠", "星际穿越", "哪吒传奇"]
      },
      components: {
    
        cpn
      }
    })
  </script>

7.2 props属性使用

数组写法

props: ['cmovies', 'cmessage']

对象写法

  props: {
    
          cmessage: {
   
          type: String,
          default: 'zzzzz',
          required: true //在使用组件必传值
          }
  }

props属性的类型限制

//1.类型限制(多个类使用数组)
cmovies:Array,//限制为数组类型
cmessage:String,//限制为Strin类型
cmessage:['String','Number']//限制为String或Number类型

props属性的默认值

// 2.提供一些默认值，以及必传值
        cmessage: {
   
          type: String,
          default: 'zzzzz',//默认值
        }

props属性的必传值

cmessage: {
   
          type: String,
          default: 'zzzzz',
          required: true //在使用组件必传值
        }

类型是Object/Array，默认值必须是一个函数

//类型是Object/Array，默认值必须是一个函数
cmovies: {
   
    type: Array,
    default () {
   
        return [1, 2, 3, 4]
    }
},

自定义验证函数

vaildator: function (value) {
   
    //这个传递的值必须匹配下列字符串中的一个
    return ['zzzzz', 'ttttt', 'yyy'].indexOf(value) !== -1
}

自定义类型

    function Person(firstName,lastName) {
   
      this.firstName = firstName
      this.lastName = lastName
    }
    cmessage:Person//限定了cmeessage必须是Person类型

综合使用

  <div id="app">
    <cpn :cMovies="movies" :cMessage="message"></cpn>
  </div>
  <template id="cpn">
    <div>
      <ul>
        <li v-for="(item, index) in cmovies" :key="index">{
  {item}}</li>
      </ul>
      <h2>{
  {cmessage}}</h2>
    </div>
  </template>
  <script src="../js/vue.js"></script>

  <script>
    function Person(firstName,lastName) {
    
      this.firstName = firstName
      this.lastName = lastName
    }
    // 父传子：props
    const cpn = {
    
      template: "#cpn",
      // props: ['cmovies', 'cmessage'],//数组写法
      props: {
     //对象写法
        // 1.类型限制(多个类使用数组)
        // cmovies:Array,
        // cmessage:String,
        // cmessage:['String','Number'],
        // 2.提供一些默认值，以及必传值
        cmessage: {
    
          type: String,
          default: 'zzzzz',
          required: true //在使用组件必传值
        },
        //类型是Object/Array，默认值必须是一个函数
        cmovies: {
    
          type: Array,
          default () {
    
            return [1, 2, 3, 4]
          }
        },
        // 3.自定义验证函数
        // vaildator: function (value) {
    
        //   //这个传递的值必须匹配下列字符串中的一个
        //   return ['zzzzz', 'ttttt', 'yyy'].indexOf(value) !== -1
        // }
        // 4.自定义类型
        // cmessage:Person,
      },
      data() {
    
        return {
    
        }
      },
      methods: {
    

      },
    };
    const app = new Vue({
    
      el: "#app",
      data: {
    
        message: "你好",
        movies: ["复仇者联盟", "钢铁侠", "星际穿越", "哪吒传奇"]
      },
      components: {
    
        cpn
      }
    })
  </script>

8. 组件通信

8.1 父传子（props的驼峰标识）

​ v-bind是 不支持使用驼峰标识的，例如cUser要改成c-User。

  <div id="app">
    <!-- v-bind不支持驼峰 :cUser改成 :c-User-->
    <!-- <cpn :cUser="user"></cpn> -->
    <cpn :c-User="user"></cpn>
    <cpn :cuser="user" ></cpn>
  </div>
  <template id="cpn">
    <div>
      <!-- 使用驼峰 -->
      <h2>{
  {cUser}}</h2>
      <!-- 不使用 -->
      <h2>{
  {cuser}}</h2>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    // 父传子：props
    const cpn = {
    
      template: "#cpn",
      props: {
     //对象写法
        //驼峰
        cUser:Object,
        //未使用驼峰
        cuser:Object
      },
      data() {
    return {
    }},
      methods: {
    },
    };
    const app = new Vue({
    
      el: "#app",
      data: {
    
        user:{
    
          name:'zzz',
          age:18,
          height:175
        }
      },
      components: {
    
        cpn
      }
    })
  </script>

8.2 子传父$emit

​ 子组件向父组件传值，使用自定义事件$emit。

  <!-- 父组件 -->
  <div id="app">
    <!-- 不写参数默认传递btnClick的item -->
    <cpn @itemclick="cpnClcik"></cpn>

  </div>

  <!-- 子组件 -->
  <template id="cpn">

    <div>
      <button v-for="(item, index) in categoties" :key="index" @click="btnClick(item)">{
  {item.name}}</button>
    </div>
  </template>

  <script src="../js/vue.js"></script>

  <script>
    const cpn = {
    
      template: "#cpn",
      data() {
    
        return {
    
          categoties: [{
    
              id: 'aaa',
              name: '热门推荐'
            },
            {
    
              id: 'bbb',
              name: '手机数码'
            },
            {
    
              id: 'ccc',
              name: '家用家电'
            },
            {
    
              id: 'ddd',
              name: '电脑办公'
            },
          ]
        }
      },
      methods: {
    
        btnClick(item) {
    
          this.$emit('itemclick', item)
        }
      },
    };
    const app = new Vue({
    
      el: "#app",
      data() {
    
        return {
    

        }
      },
      methods: {
    
        cpnClcik(item) {
    
          console.log('cpnClick'+item.name);
        }
      },
      components: {
    
        cpn
      },
    })
  </script>

1.在子组件中定义一个方法btnClick(item)，使用$emit，'itemclick'是事件名，item是传过去的值。

      methods: {
   
        btnClick(item) {
   
          this.$emit('itemclick', item)
        }
      },

2.在子组件中监听点击事件并回调此方法

<div>
      <button v-for="(item, index) in categoties" :key="index" @click="btnClick(item)">{
  {item.name}}</button>
    </div>

3.在父组件中定义一个方法cpnClcik(item)

methods: {
   
    cpnClcik(item) {
   
        console.log('cpnClick'+item.name);
    }
},

4.并在父组件（vue实例）中调用<cpn @itemclick="cpnClcik"></cpn>（不写参数默认传递btnClick的item ），父组件监听事件名为itemclick的子组件传过来的事件。

<cpn @itemclick="cpnClcik"></cpn>

8.3 父子组件通信案例

​ 实现父子组件的值双向绑定。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>组件通信-父子通信案例</title>
</head>

<body>
<!-- 父组件 -->
<div id="app">

  <h2>子组件</h2>
  <cpn :number1='num1' :number2='num2'
       @num1change="num1Change"
       @num2change="num2Change"></cpn>
  <h2>--------------</h2>

  <h2>父组件{
  {num1}}</h2>
  <input type="text" v-model="num1" >
  <h2>父组件{
  {num2}}</h2>
  <input type="text" v-model="num2">

</div>

<!-- 子组件 -->
<template id="cpn">

  <div>
    <h2>number1:{
  {number1}}</h2>
    <h2>dnumber1:{
  {dnumber1}}</h2>
    <input type="text" :value="dnumber1" @input="num1input">
    <h2>number2：{
  {number2}}</h2>
    <h2>dnumber2:{
  {dnumber2}}</h2>
    <input type="text" :value="dnumber2" @input="num2input">
  </div>
</template>

<script src="../js/vue.js"></script>

<script>
  // 父传子：props
  const cpn = {
    
    template: "#cpn",
    data() {
    
      return {
    
        dnumber1:this.number1,
        dnumber2:this.number2
      }
    },
    props:{
    
      number1:[Number,String],
      number2:[Number,String],
    },
    methods: {
    
      num1input(event){
    
        this.dnumber1 = event.target.value
        this.$emit('num1change',this.dnumber1)
      },
      num2input(event){
    
        this.dnumber2 = event.target.value
        this.$emit('num2change',this.dnumber2)
      }
    },
  };
  const app = new Vue({
    
    el: "#app",
    data: {
    
      num1:1,
      num2:2
    },
    methods: {
    
      num1Change(value){
    
        this.num1=value
      },
      num2Change(value){
    
        this.num1=value
      }
    },
    components: {
    
      cpn
    },
  })
</script>
</body>

</html>

使用watch实现。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>组件通信-父子通信案例(watch实现)</title>
</head>

<body>
  <!-- 父组件 -->
  <div id="app">

    <cpn :number1='num1' :number2='num2' @num1change="num1Change" @num2change="num2Change"></cpn>

    <h2>父组件{
  {num1}}</h2>
    <input type="text" v-model="num1" >
    <h2>父组件{
  {num2}}</h2>
    <input type="text" v-model="num2">

  </div>

  <!-- 子组件 -->
  <template id="cpn">

    <div>
      <h2>{
  {number1}}</h2>
      <input type="text" v-model="dnumber1">
      <h2>{
  {number2}}</h2>
      <input type="text" v-model="dnumber2">
    </div>
  </template>

  <script src="../js/vue.js"></script>

  <script>
    // 父传子：props
    const cpn = {
    
      template: "#cpn",
      data() {
    
        return {
    
          dnumber1:this.number1,
          dnumber2:this.number2
        }
      },
      props:{
    
        number1:[Number,String],
        number2:[Number,String],
      },
      watch: {
    
        dnumber1(newValue){
    
          this.dnumber1 = newValue * 100
          this.$emit('num1change',newValue)
        },
        dnumber2(newValue){
    
          this.dnumber1 = newValue * 100
          this.$emit('num2change',newValue)
        }
      },
    };
    const app = new Vue({
    
      el: "#app",
      data() {
    
        return {
    
          num1:1,
          num2:2,
        }
      },
      methods: {
    
        num1Change(value){
    
          this.num1=value
        },
        num2Change(value){
    
          this.num1=value
        }
      },
      components: {
    
        cpn
      },
    })
  </script>
</body>

</html>

9. 父访问子（children-ref）

​ 父组件访问子组件，有时候需要直接操作子组件的方法，或是属性，此时需要用到$children和$ref。

  <!-- 父组件 -->
  <div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <cpn ref="aaa"></cpn>
    <button @click="btnClick" >按钮</button>
  </div>
  <!-- 子组件 -->
  <template id="cpn">
    <div>
      我是子组件
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    // 父传子：props
    const cpn = {
    
      template: "#cpn",
      data() {
    
        return {
    
          name:"我是子组件的name"
        }
      },
      methods: {
    
        showMessage(){
    
          console.log("showMessage");
        }
      },
    };
    const app = new Vue({
    
      el: "#app",
      data() {
    
        return {
    
          message:"hello"
        }
      },
      methods: {
    
        btnClick(){
    
          // 1.children
          // console.log(this.$children[0].showMessage)
          // for (let cpn of this.$children) {
    
          //   console.log(cpn.showMessage)
          // }
          // 2.$ref
          console.log(this.$refs.aaa.name)
        }
      },
      components: {
    
        cpn
      },
    })
  </script>

$children方式

// 1.children
console.log(this.$children[0].showMessage)
for (let cpn of this.$children) {
   
    console.log(cpn.showMessage)
}

使用this.$children直接获取当前实例的直接子组件，需要注意 $children 并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。

$refs方式

先定义子组件

<cpn ref="aaa"></cpn>

直接调用

Hi👋,这里是瑞雨溪一个喜欢JavaScript和Vue的大学生,如果我的文章给你带来的帮助,欢迎您关注我,我会持续不断的更新更多优质文章.你的关注就是我的动力!!!🎉🎉🎉

文章标签：
JavaScript
前端开发
开发者
关键词：
学习VUE.js
学习组件开发VUE.js
vue学习VUE.js
组件开发VUE.js
vue组件开发VUE.js
雨溪-yuxi
目录
相关文章
34789737
|
6天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中，兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线，大型项目建议使用Pinia等状态管理工具，确保数据流清晰可控，避免内存泄漏。
34789737
73 2
谢妹纸
|
3月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
谢妹纸
522 0
我们是幸福一家人
|
3月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
我们是幸福一家人
269 82
34789737
|
2月前
|
JavaScript 安全
在 Vue 中，如何在回调函数中正确使用 this？
在 Vue 中，如何在回调函数中正确使用 this？
34789737
97 0
rvblio6ca4cug
|
2月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎，秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」，成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构，实现设计到代码全流程自动化，效率提升300%，助力企业降本增效，引领“设计即生产”新时代。
rvblio6ca4cug
226 1
34789737
|
3月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件，包括基础与高级示例。组件支持分段配置（如颜色、文本）、动画效果及超出进度提示等功能。同时提供了完整的代码实现，支持全局注册，并提出了优化建议，如主题支持、响应式设计等，帮助开发者更灵活地集成和定制进度条组件。资源链接已提供，适合前端开发者参考学习。
34789737
360 17
34789737
|
3月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用，可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置（如自定义表情列表、主题定制、动画效果和懒加载）以及完整集成示例。开发者可根据需求扩展功能，例如 GIF 搜索或自定义表情上传，提升用户体验。资源链接提供进一步学习材料。
34789737
201 1
小宋1021
|
5月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
小宋1021
736 4
34789737
|
4月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑，结合D3强大的数据可视化能力，实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展（如节点类型定制、连接样式优化等），并提供了性能优化方案以应对大数据量场景。最终，展示了基础网络拓扑、实时更新拓扑等应用实例，为开发者提供了一套完整的实现思路和实践经验。
34789737
528 77
游客tsrksm3mlhq4y
|
5月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
游客tsrksm3mlhq4y
220 57

热门文章

最新文章

  • 1
    Vue中如何实现兄弟组件之间的通信
  • 2
    Vue3利用watchEffect监听实现防抖
  • 3
    vue 项目调试的三种方法和不同比较
  • 4
    惊艳！Vue 3 中使用 Suspense 实现异步组件加载，用户体验 大大大大大 提升！!
  • 5
    vue入门002~vue项目的两种创建方式
  • 6
    配置IDEA识别 vue 文件
  • 7
    vue组件终端报错： error Component name “xxx“ should always be multi-word vue/multi-word-component-names
  • 8
    springboot+vue 前后端交互实现（mysql+springboot+vue）
  • 9
    SpringBoot+VUE实现数据表格
  • 10
    element-ui报错[Vue warn]: Invalid prop: custom validator check failed for prop “index“.一个符号解决问题
  • 1
    VUE3——如何挂载全局属性和方法
    520
  • 2
    VUE——三元表达式动态渲染样式
    146
  • 3
    实现在vue中自定义主题色彩切换
    213
  • 4
    总结vue3中常用的组件间通信的方法
    124
  • 5
    Vue.js 2 项目实战（五）：水果购物车
    172
  • 6
    Vue.js 2 项目实战（四）：成绩案例
    261
  • 7
    Vue.js 2 项目实战（三）：综合案例-小黑记事本
    486
  • 8
    Vue.js 2 项目实战（二）：图书管理案例
    352
  • 9
    VUE——配置本地运行指定不同环境
    180
  • 10
    Vue.js 2 项目实战（一）：图片切换案例
    116

    • 相关课程

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

    • 相关电子书

    更多
  • 基于VUE的单页面性能优化实践
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    2025云栖大会，阿里云百炼邀请您的参与和见证