Vue的入门使用

1. Vue完整版和非完整版的区别

1. 特点：完整版有编译器，非完整版没有。由于编译器的存在，完整版比非完整版体积大30%。
2. 视图：完整版写在Html里或者template，非完整版写在render函数里用h来创建标签。
3. cdn引入：完整版文件名为vue.js,非完整版文件名为vue.runtime.js。生产环境使用后缀名为.mim.js。
4. webpack引入：默认使用非完整版，若要使用完整版，需配置alias，配置繁琐，不推荐使用此方法引入。
5. @vue/cli引入：默认使用非完整版，若要使用完整版，需要额外配置。

推荐的实践方式：使用非完整版，搭配vue-loader和vue文件使用。可保证用户体验，用户下载的JS文件体积小，且开发者可以在Vue文件里写HTML标签。

2. template和render的使用

2.1 render

render里有一个函数h，这个h的作用是将单文件组件进行虚拟DOM的创建，然后再通过render进行解析。h就是createElement()方法：createElement(标签名称,属性配置,children)

2.2 template

<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>
<style scoped>
    .red {
        color: red;
    }
</style>

使用template最终还是需要通过render的方式渲染。

3.快速使用Vue

可以进入codesandbox.io创建一个Vue沙盒，可以快速体验Vue,旁边还有实时预览的功能，写完代码后可以导出成.zip文件，解压即可。