在vue中点击按钮新增一个div_《浅析Vue两个的版本》

5a8b38220ada555f911d2387f776d34f.png

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)
    }
})

最佳实践

总是使用非完整版，然后配合vue-loader和vue文件

思路

  1. 保证用户体验，用户下载的JS文件d体积更小，但只支持h函数
  2. 保证开发体验，开发者可直接在vue文件里写HTML标签，而不是h函数
  3. vue-loader把vue文件里的HTML转为h函数

使用codesandbox.io写 Vue 代码

  1. 点击右上角的Create Sandbox按钮
  2. 在Official Templates中点击Vue即可创建Vue项目
  3. 编辑完后点击file按钮，选择Export to ZIP即可下载压缩包到本地
版权声明：本文为weixin_34173125原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。