Vue入门到关门之组件

已于 2024-04-30 21:57:50 修改
阅读量1k 收藏 26
点赞数 25
分类专栏： Vue框架 文章标签： vue.js 前端 javascript
于 2024-04-30 21:44:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xiao20000101/article/details/138357566
版权

一、组件

1、什么是组件

在Vue.js中，组件是构建用户界面的可重用和独立的模块。每个Vue组件都封装了自己的模板、逻辑和样式，使得代码可以更加模块化、可维护性更高。通过组件化，你可以将界面拆分成独立的、可复用的部分，每个部分都有自己的功能和样式，这样可以更容易地管理复杂的界面，并且提高了代码的可读性和可维护性。

通俗来说，组件就是把一个很大的界面拆分为多个小的界面, 每一个小的界面就是一个组件，将大界面拆分成小界面就是组件化。而组件化开发指的就是根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。

在这里插入图片描述

2、组件的分类

  • 按作用范围分类
    • 全局组件：项目中所有地方都可以的组件称为全局组件
    • 局部组件(私有组件)：仅有该组件才能使用的组件称为局部组件
  • 按照用途来分
    • 页面组件
    • 自定义组件

工程化开发之后：1个组件 就是1个xx.vue。 在vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。

以CSDN为例，如果使用组件化开发的话：

在这里插入图片描述

3、组件的内容

在Vue中，一个组件可以包括以下内容：

  1. **模板（Template）：**定义了组件的结构和布局，使用HTML和Vue的模板语法来描述界面的外观。

  2. **脚本（Script）：**包含了组件的逻辑，例如数据处理、事件处理、生命周期钩子等。通常使用JavaScript或TypeScript编写。

  3. **样式（Style）：**定义了组件的样式，可以使用CSS、Sass、Less等来编写。

通过组件，你可以将页面划分成多个独立的部分，每个部分都有自己的功能和样式，并且可以在需要的地方进行重复使用。其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。

（1）template

  • 当前组件的DOM结构，需要定义到template标签的内部
template:`
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
`

注意：

  • template 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素，后面的 v-slot 会使用到这个标签
  • template 中只能包含唯一的根节点

（2）script

  • 之后与组件相关的data数据、methods方法等，都需要定义到export default所导出的对象中
data() {
    return {
        message: 'Hello, Vue!'
    };
},
methods: {
    changeMessage() {
        this.message = 'Hello, World!';
    }
}

注意：

.vue 组件中的 data 必须是函数

vue 规定：.vue 组件中的 data 必须是一个函数，不能直接指向一个数据对象。

因此在组件中定义 data 数据节点时，下面的方式是错误的，但是在根组件这样写是可以的

data:{
    count:0
}

（3）style

  • 还是按照css的语法来写就好
<style>
h1 {
  color: blue;
}
</style>

总的来说，Vue组件是Vue.js框架中用于构建用户界面的独立模块，它们可以被组合和嵌套，从而构建出复杂的界面。

二、组件使用

1、全局组件

全局组件是在Vue应用程序中全局注册的组件，可以在应用的任何地方使用。一旦注册为全局组件，它就可以在整个应用程序中的任何Vue实例的模板中使用。

（1）注册全局组件

在Vue中，你可以使用Vue.component方法来注册全局组件。例如：

// 全局注册一个名为 'my-component' 的组件
Vue.component('my-component', {
  // ... 组件的选项
})

（2）使用全局组件

一旦注册为全局组件，你可以在任何Vue实例的模板中使用它：

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

（3）完整示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./JS/vue.js"></script>

</head>
<body>
<div id="app">
    <h1>全局组件的使用</h1>
    <button @click="handleClick">点我</button>


    <hr>
    <xiao></xiao>
    <hr>
    <h1>我是全局组件</h1>
    <xiao></xiao>
</div>
</body>
<script>
    // 1、定义全局组件
    Vue.component('xiao', {
        template: `<div>
            <h1>{{ name }}</h1>
            <button @click="handleClick">点我换名字</button>
          </div>`,
        data() {
            return {
                name: 'xiao'
            }
        },
        methods: {
            handleClick() {
                this.name = '彭于晏'
            }
        }
    })
    
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            handleClick() {
                alert('美女吧')
            }
        }
    })
</script>
</html>

2、局部组件

局部组件是在Vue实例（或者其他组件）的组件选项中注册的组件。它只能在注册它的实例或者组件内部使用。

（1）注册局部组件

在Vue实例或者其他组件中，你可以通过components选项来注册局部组件。例如：

<template>
  <div>
    <my-local-component></my-local-component>
  </div>
</template>

<script>
// 通过ES6的import将自定义的组件引入进来
import MyLocalComponent from './MyLocalComponent.vue';

export default {
  // 注册组件
  components: {
    'my-local-component': MyLocalComponent
  }
}
</script>

（2）使用局部组件

一旦在实例或者组件中注册了局部组件，你可以在该实例或者组件的模板中使用它：

<template>
  <div>
    <my-local-component></my-local-component>
  </div>
</template>

（3）完整示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./JS/vue.js"></script>

</head>
<body>
<div id="app">
    <h1>局部组件的使用</h1>
    <button @click="handleClick">点我</button>
    <hr>
    <xiao></xiao>
</div>
</body>
<script>
    var xiao = {
        template: `
          <div>
            <h2>我是局部组件</h2>
          </div>
        `,
        data() {
            return {}
        },
        methods: {}
    }

    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            handleClick() {
                alert('美女吧')
            }
        },
        components: {
            xiao:xiao
        }
    })
</script>
</html>

3、全局和局部混合使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./JS/vue.js"></script>

</head>
<body>
<div id="app">
    <h1>局部组件的使用</h1>
    <button @click="handleClick">点我</button>

    <hr>
    <child></child>
</div>
</body>
<script>
    var xiao = {
        template: `
          <div>
            <h2>我是局部组件</h2>
          </div>
        `,
        data() {
            return {}
        },
        methods: {}
    }

    //  全局组件
    Vue.component('child', {
        template: `
          <div>
            <h1>我是全局组件</h1>
            <xiao></xiao>
            <xiao></xiao>
            <xiao></xiao>
          </div>
        `,
        // 局部组件
        components: {
            // 第一种方法
            // xiao: {
            //     template: `
            //       <div>
            //         <h2>我是局部组件</h2>
            //       </div>
            //     `,
            //     data() {
            //         return {}
            //     },
            //     methods: {}
            // }

            // 第二种方法
            xiao
        }
    })

    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            handleClick() {
                alert('美女吧')
            }
        },
        components: {
            xiao
        }
    })
</script>
</html>

4、总结

  • 全局组件可以在整个应用程序中的任何地方使用，而局部组件只能在注册它的实例或者组件内部使用。
  • 全局组件适合用于在整个应用中频繁使用的通用组件，而局部组件适合用于特定页面或者组件内部的组件。
  • 全局组件的注册是通过Vue.component方法进行，而局部组件的注册是通过组件选项中的components属性进行。
  • 注意：组件中的数据，事件在没有额外参数的影响下都是独立的

了解elementui：

  • Element UI是一个基于Vue.js的组件库，提供了丰富的UI组件，如按钮、表格、弹窗等，可以帮助开发者快速构建美观、功能完善的前端界面。
  • 使用Element UI不仅可以减少开发工作量，而且它的组件都经过优化和测试，在性能和用户体验方面表现较好。
  • 通过引入Element UI的全局组件，开发者可以更加高效地开发出具有一致风格的界面。

三、组件间通信

在这里插入图片描述

1、父子通信之父传子-自定义属性

（1）父组件向子组件通信的步骤

  1. 在父组件中定义变量
data: {
    'url': './img/a.jpg'
}
  1. 把变量传递个子组件 ==> 自定义属性:myurl
<Child1 :myurl="url"></Child1>
  1. 在子组件中，拿到属性
props:['myurl']
  1. 以后在子组件中使用父组件的属性
this.myurl

（2）完整示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./JS/vue.js"></script>
    <script src="./JS/axios.js"></script>
</head>
<body>
<div id="app">
    <h1>组件间通信之父传子：自定义属性</h1>
    <h2>父组件中的名字{{myname}}</h2>
    <div style="background-color: pink">
        <child :name="myname" yy="xx"></child>
    </div>
</div>
</body>
<script>
    // 全局组件
    Vue.component('child', {
        template: `
          <div>
            <h2>我是child组件</h2>
            <h3>父组件传递给子组件的{{ name }}---{{ yy }}</h3>
          </div>`,
        data() {
            return {}
        },
        props: ['name', 'yy']
    })

    var vm = new Vue({
        el: '#app',
        data: {
            myname: '彭于晏'
        },
    })
</script>
</html>

运行结果：

在这里插入图片描述

2、父子通信之子传父—自定义事件

（1）子组件向父组件通信的步骤

  1. 在父组件中定义变量，用来接收子组件传入的变量
data: {
    text:''
},
  1. 在父组件使用子组件时候，自定义事件 myevent，名字随便取
<Child1 @myevent="handleMyEvent"></Child1>
  1. 在父组件中定义函数，跟自定义事件绑定
handleMyEvent(childText){
    this.text=childText
}
  1. 在子组件中 ==> 触发自定义事件执行
this.$emit('自定义事件名字',this.mytext)

（2）完整示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./JS/vue.js"></script>
    <script src="./JS/axios.js"></script>
</head>
<body>
<div id="app">
    <h1>组件间通信之子传父：自定义事件</h1>
    <h2>我是父组件</h2>
    子组件传给父组件的值===> {{p_name}}
    <hr>
    <div style="background-color:pink">
        <child @myevent="handleEvent"></child>
    </div>
</div>
</body>
<script>
    // 全局组件
    Vue.component('child', {
        template: `
          <div>
            <h2>我是child组件</h2>
            <input type="text" v-model="name">--> {{name}}
            <button @click="handleSend">传给父</button>
          </div>`,
        data() {
            return {
                name:''
            }
        },
        methods:{
            handleSend(){
                this.$emit('myevent',this.name)
            }
        }
    })

    var vm = new Vue({
        el: '#app',
        data: {
p_name:''
        },
        methods: {
            handleEvent(name){
                // name 是子组件中调用this.$emit('myevent',this.name)传过来的
                this.p_name = name
            }
        },
    })
</script>
</html>

运行结果：

在这里插入图片描述

3、ref属性（父子通信）

  • ref 是个属性， 如果在普通的DOM元素上，引用指向的就是该DOM元素;
  • 如果在子组件上，引用的指向就是子组件实例，然后父组件就可以通过 ref 主动获取子组件的属性或者调用子组件的方法

（1）放在普通标签上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./JS/vue.js"></script>
    <script src="./JS/axios.js"></script>

</head>
<body>
<div id="app">
    <h2>ref属性放在普通标签上</h2>
    <input type="text" v-model="name" ref="myinput">
    <img src="./img/2.jpg" alt="" ref="myimg">
    <button @click="handleClick">点我执行代码</button>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: ''
        },
        methods: {
            handleClick() {
                console.log(this.$refs)
                // 根据ref指定的名字，取出原生dom对象，然后就可以操作dom对象了
                var i = this.$refs['myinput']
                console.log(i)
                i.value = "你好"
                // 改图片
                var i = this.$refs['myimg']
                i.src = './img/3.jpg'
            }
        }
    })
</script>
</html>

（2）放在组件上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./JS/vue.js"></script>
    <script src="./JS/axios.js"></script>
</head>
<body>
<div id="app">
    <div style="background-color: antiquewhite">
        <h2>ref属性放在组件上</h2>
        <child ref="mychild"></child>
    </div>
</div>
</body>
<script>
    // 定义全局组件
    Vue.component('child', {
        template: `
          <div>
            <img :src="url" alt="">
            <button @click="handleClick('子组件传入的')">点我弹窗</button>
          </div>
        `,
        data() {
            return {
                url: './img/1.jpg'
            }
        },
        methods: {
            handleClick(name) {
                alert(name)
            }
        },
    })

    var vm = new Vue({
        el: '#app',
        data: {
            name: ''
        },
        methods: {
            handleClick() {
                // 操作组件对象
                var i = this.$refs['mychild']
                console.log(i.url)
                // 改图片
                i.url = './img/4.jpg'
                // 改执行方法
                i.handleClick('xiao')

                // 子传父
                this.name = i.url
            }
        }
    })
</script>
</html>

四、动态组件

1、概念

动态组件就是允许你根据当前的数据来动态地切换显示不同的组件。

  • Vue内部提供的组件component组件作用是：实现动态的渲染组件，按需显示组件。

  • component 标签是 vue 内置的，作用：组件的占位符

  • 其中is 属性的值，表示要渲染的组件的名字

  • is 属性的值，应该是组件在 components 节点下的注册名称

2、完整示例

  • 比如我们这里有三个组件，需求：在app根组件中点击不同按钮可以按需显示组件。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>
    <style>
        .item {
            width: 150px;
            height: 50px;
            background-color: pink;
            font-size: 25px;
            margin: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .top {
            display: flex;
            justify-content: center;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>动态组件</h1>
    <div class="top">
        <div class="item" @click="current='goods'">
            <span>商品</span>
        </div>
        <div class="item" @click="current='order'">
            <span>订单</span>
        </div>
        <div class="item" @click="current='user'">
            <span>用户</span>
        </div>
    </div>
    <div>
<!--        不使用动态组件-->
<!--        <goods v-if="current=='goods'"></goods>-->
<!--        <order v-else-if="current=='order'"></order>-->
<!--        <user v-else></user>-->

<!--        使用动态组件-->
        <component :is="current"></component>
    </div>
</div>
</body>

<script>
    // 1 定义出 商品，订单，用户 三个组件
    Vue.component('goods', {
        template: `<div>
                        <h3>商品页面</h3>
                        商品列表
                        <br>
                        商品列表
                    </div>`,
    })

    Vue.component('order', {
        template: `<div>
                        <h3>订单页面</h3>
                        订单内容
                    </div>`,
    })

    Vue.component('user', {
        template: `<div>
                        <h3>用户页面</h3>
                        用户信息
                    </div>`,
    })

    var vm = new Vue({
        el: '#app',
        data: {
            current: 'goods'
        },
    })
</script>
</html>

3、内部组件keep-alive组件的使用

  • keep-alive 会把内部的组件进行缓存，而不是销毁组件；

  • 在使用 keep-alive 的时候，可以通过 include 指定哪些组件需要被缓存；

  • 或者，通过 exclude 属性指定哪些组件不需要被缓存；但是：不要同时使用 include 和 exclude 这两个属性

<keep-alive exclude="goods">
     <component :is="current"></component>
</keep-alive>

五、插槽

1、介绍

slot的官方定义是用于组件内容分发，简单通俗的解释就是在组件化开发中，虽然组件是一样的，但是在不同的使用场景，组件的某一部分需要有不同的内容显示。slot就好比组件开发时定义的一个参数，如果不传入值就当默认值使用，如果传入了新值，在组件调用时就会替换定义时的slot默认值。

一般情况下，编写完1个组件之后，组件的内容都是写死的，需要加数据 只能去组件中修改，扩展性很差。然后就出现了插槽这个概念，只需在组件中添加<slot></slot>，就可以在body的组件标签中添加内容。

2、匿名插槽

  • 匿名插槽插入不同的内容类似for循环一样，使用插槽一次就要全部再来一遍，例如下面使用了两个不同内容但是匿名插槽一样，所以会有两次完整的组件形成。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./JS/vue.js"></script>
    <script src="./JS/axios.js"></script>

</head>
<body>
<div id="app">
    <h1>插槽使用</h1>
    <div>
        <Home style="background-color:greenyellow">
            <div>
                <img src="./img/1.jpg" alt="">
            </div>
        </Home>
    </div>
    <hr>
    <div>
        <Home style="background-color:orange">
            <div>
                <img src="./img/2.jpg" alt="">
            </div>
        </Home>
    </div>
</div>
</body>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            who: 'Home'
        },
        components: {
            Home: {
                template: `<div>
                                <h3>我是首页</h3>
                                <slot></slot>
                                <h3>结束了</h3>
                        </div>`
            },
        }
    })
</script>
</html>

在这里插入图片描述

2、具名插槽

  • 在使用相同的具名插槽的时候，并没有再次形成完整的组件内容，而是将插槽里面的内容直接放到组件中对应插槽的位置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./JS/vue.js"></script>
    <script src="./JS/axios.js"></script>
</head>
<body>
<div id="app">
    <h1>插槽使用</h1>
    <div>
        <Home style="background-color:greenyellow">
            <div slot="middle">
                <img src="./img/1.jpg" alt="">
            </div>
            <div slot="middle">
                <img src="./img/1.jpg" alt="">
            </div>
            <div slot="bottom">
                <a href="">点我看mm</a>
            </div>
        </Home>
    </div>
    <hr>
</div>
</body>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            who: 'Home'
        },
        components: {
            Home: {
                template: `<div>
                                <h3>我是首页</h3>
                                <slot name="middle"></slot>
                                <h3>结束了</h3>
                                <slot name="bottom"></slot>
                        </div>`
            },
        }
    })
</script>
</html>

在这里插入图片描述

Xiao20000101
关注
  • 25
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue从入门到精通
03-28
vue从入门到精通适合刚入职场的小白，也适合职场多年的前端高手，为您全方位打造
Vue入门到关门之Vue高级用法
Xiao20000101的博客
05-06 906
},data() {return {
Vue入门到关门之生命周期钩子
Xiao20000101的博客
04-30 472
在软件开发中，"生命周期"通常指的是一个对象从创建到销毁的整个过程。在前端开发中，特别是在使用诸如Vue.js、React等框架的情况下，"生命周期"常常指的是组件或实例在其存在期间经历的一系列阶段。在Vue.js中，每个Vue实例都有一个生命周期，它包含了一系列的钩子函数（也称为生命周期钩子），这些钩子函数允许开发者在实例的不同阶段添加自定义逻辑。通过这些钩子函数，你可以控制实例在特定时间点执行特定的操作，比如在数据加载前执行一些初始化操作、在实例销毁前清理资源等。阶段一：创建 （创建vue实例）
Vue入门到关门之Vue介绍与使用
Xiao20000101的博客
04-27 643
模版语法也可以叫做插值表达式，插值表达式用户把vue中所定义的数据,显示在页面上.。插值表达式允许用户输入"JS代码片段"。
Vue入门到关门之前端引入
Xiao20000101的博客
04-24 1126
功能更强大的框架，还配备了更多的功能和附加的基于JavaScript的功能，但大多设计导向的和Unobtrusive JavaScript。就比如使用HTML(5)、CSS(3)、JavaScript(ES5、ES6)来编写一个个的页面，然后发给后端(PHP、Python、Go、Java) ，后端收到浏览器的请求再嵌入模板语法、渲染完数据返回数据给前端，最终在浏览器中查看。React 的核心思想是“声明式编程”，也就是说，开发人员可以专注于定义组件的外观和行为，而不必担心实现细节。
VUE组件入门
04-10
VUE组件入门，很基础的ppt，入门的同学可以看下哦！！
Vue 之孙组件向爷组件通信的实现
10-17
主要介绍了Vue 之孙组件向爷组件通信的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue从入门到精通.rar
03-30
vue入门教程系列源码，小白级别入门教程，包含12个小结的源代码。
Vue 重置组件到初始状态的方法示例
10-17
主要介绍了Vue 重置组件到初始状态的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 660
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue中的事件
weixin_43390711的博客
05-16 158
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1098
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Vue.js的发展史（一）
2301_79683791的博客
05-15 753
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
基于Vue和uni-app的增强型多选框Checkbox组件开发
chenchuang0128的博客
05-16 347
该组件通过数据驱动、支持页面正反向传值等特性，提高了组件的灵活性和可重用性。未来，我们可以继续探索组件的更多可能性和应用场景，如支持条件筛选、异步加载数据等，以满足更复杂的前端需求。该组件不仅提供了基本的复选功能，还通过数据驱动、支持页面正反向传值等特性，进一步增强了组件的灵活性和可重用性。页面正反向传值：组件应该能够支持页面正反向传值，即能够将组件的状态传递给父组件，同时也能够接收父组件传递的数据。数据驱动：组件应该能够通过数据驱动，即组件的状态和行为应该由数据决定，而不是通过直接操作DOM元素来实现。
用vue实现json模版编辑器
qq_44428688的博客
05-14 528
设想业务逻辑是拖拽控件生成表单 动手做了一个简单的demo 业务的原型图设想如下所示其中使用的技术主要是vuedragger。
Vue3实战笔记（23）—路由Vue-Router 实战指南（关于路由命名那点事儿）
山花的博客
05-15 1037
除了 path 之外，你还可以为任何路由提供 name。在 Vue Router 中，命名路由是一种通过指定名称来标识路由的方式，而不是使用路径。这为路由的跳转提供了一种更直观和易于维护的方式。命名路由特别有用，尤其是在链接到路由时，不必硬编码 URL，也不必在路由对象中查找路径字符串。},在这个例子中，我们给路径为 /user/:username的路由命名为 user。User在这两种情况下，路由将导航到路径 /user/erina。
vue+elementui省市联动选择
atregret的博客
05-17 182
看上面官方文档，最清晰。
基于Vue3 + js-tool-big-box工具库实现3个随机数字的小游戏动画，快来挑战你的非凡手气！
最新发布
xingyu_qie的专栏
05-17 834
基于Vue3 + js-tool-big-box的3个随机数字
vue入门到精通 pdf
11-23
《Vue入门到精通》是一本关于Vue.js前端框架的学习指南。本书分为入门、进阶和精通三个部分，帮助读者从零基础开始学习，并逐步掌握Vue.js的核心概念和应用技巧。 在入门部分，书中首先介绍了Vue.js的基本概念，如...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值