浅析 Vue 起手式

完整版与非完整版

特点
1. 完整版有compiler(编译器),但是compiler(编译器)多占40%的体积
2. 非完整版没有compiler(编译器),体积较小
视图
1. 完整版可以直接写在HTML里中或者写在template选项
2. 非完整版只能写在render函数里用h来创建标签
版本使用方面
1. 完整版对于webpack需要配置alias,@vue/cli需要额外配置
2. 非完整版对于webpack,@vue/cli使用默认配置即可

完整版的template和非完整版render

完整版的template

<template>       //直接在视图中写入
    <div id="app">
        {{n}}
        <button @click="add">+1</button>
    </div>
</template>

<script>       //对视图中的 {{n}}进行操作
    import HelloWorld from './components/HelloWorld.vue'
    export default {
        name: 'App',
        data() {
            return {
                n: 0
            }
        },
        methods: {
            add() {
                this.n += 1
            }
        }
    }
</script>

非完整版render

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

codesandbox.io 写 Vue 代码

复制网址到地址栏,进入codesandbox.io
进入codesandbox.io后,千万不要登录注册,直接使用即可
使用时刻选中Vue的扩展插件即可
此时就可以展开Vue的代码书写

本文使用 mdnice 排版