在vue中点击按钮新增一个div_《浅析Vue两个的版本》-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_34173125/article/details/112753000

本文探讨Vue的完整版与非完整版的区别，详细解释了如何在不同版本下实现动态添加div元素的需求。建议使用非完整版结合render函数以减小体积，同时提供了在codesandbox.io上编写和下载Vue项目的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue的两个版本

在我们使用Vue时，我们可以引用两个不同版本的Vue ，分别是Vue完整版（vue.js）和Vue（vue.runtime.js）非完整版。如果要部署给用户，则使用生产环境后缀为.mini.js。

cdn引入完整版（vue.js）

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script>

cdn引入非完整版（vue.runtime.js）

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.runtime.min.js"></script>

两者版本区别

Vue完整版

有compiler
视图写在HTML里或者写在template选项

Vue非完整版

没有compiler
视图写在render函数里，用h来创建标签

注意

compiler占40%体积。
h函数是Vue作者尤雨溪写好传给render的

`template`和`render`怎么用

假设我们有这样一个需求，用vue在HTML里写入一个div，里面有数字0，有一个button按钮，当用户点击button按钮数字+1

使用`Vue`完整版在`js`文件写入`template`

//html代码
<body>
    <div id="app"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</body>


//js代码
new Vue({
    el:'#app',
    template:`
        <div>{{n}}<button @click="add">+1</button></div>
    `,
    data:{
        n:0
    },
    methods:{
        add(){
            this.n += 1
        }
    }
})

使用`Vue`非完整版在`js`写入`render`

//html代码
<body>
    <div id="app"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.runtime.min.js"></script>
</body>


//js代码
new Vue({
    el:'#app',
    render (h) {     //h即createElement
        return h('div', [this.n, h('button', {on:{click:this.add}}, '+1')])
    },
    data:{
        n:0
    },
    methods:{
        add(){
            this.n += 1
        }
    }
})

使用`Vue`单文件组件实现需求

//html代码
<body>
    <div id="app"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.runtime.min.js"></script>
</body>



//Demo.vue代码
//视图
<template>
    <div class="red">
        {{n}}
        <button @click="add">+1</button>
    </div>
</template>

//视图以外其他的选项
<script>
    export default {
        data() {
            return {
                n: 0
            }
        },
        methods: {
            add() {
                this.n += 1
            }

        }
    }
</script>



//main.js代码
//引入Demo.vue赋值给变量Demo
import Demo form './Demo.vue'

new Vue({
    el:'#app',
    render (h) {
        return h(Demo)
    }
})