vue render return html对象错误_Vue的安装

安装，然后创建一个Vue的文件，安装链接下图所示：

安装 | Vue CLI​cli.vuejs.org

用空格选择选项，用回车确认，其余默认都是回车即可。

进入目录，运行

yarn serve

开启webpack-dev-server

创建Vue的实例

• vue使用时，有两个版本，一个是完整版（后缀是vue.js或者vue.min.js），另一个是非完整版（后缀是vue.runtime.js或者vue.runtime.min.js）
• 注意：一定安装vue2，不是vue3

完整版——通过HTML得到视图

HTML

<div id="app">
      {{n}}
    </div>

main.js:将HTML里面的{{n}}换成0

new Vue({
    el:'#app',
    data:{
        n:0
    }
})

非完整版——通过JS得到视图

不能通过操作HTML显示页面，通过JS实现显示页面

main.js:在页面显示n，并且在后面加一个按钮

new Vue({
    el:'#app',
    render(createElement){
        const h=createElement
        //拿到n，在n后面添加一个按钮，按钮的文本内容是“+1”
        return h('div',[this.n,h('button',{on:{click:this.add}},'+1')])
    },
    data:{
        n:0
    },
    methods:{
        add(){
            this.n+=1
        }
    }
})

优点：较完整版相比，可以给用户省将近40%的空间

使用vue-loader

会把vue文件翻译成带有h函数的对象

HTML

<div id="app">
      
    </div>

main.js

import demo from './Demo.vue'

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

新建一个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>

<style scoped>
.red{
    color: red;
}
</style>>

一个vue文件里面有三个标签，分别是template、script、style。这个方法又叫做单文件组件，网页生成的结果是通过main.js和Demo.vue渲染进入的，而html文件里面的内容是空的，所以这种方法会导致SEO不友好。

注意

import Demo from './Demo.vue'

render(h){
    return h(Demo)
}

可以替换成：

import Demo from './Demo.vue'

render:h=>h(Demo)

完整版与非完整版的区别

小结：

• 简单来说，template是给完整版用的，render是给非完整版用的
• 如何实践：使用非完整版，然后配合vue-loader和vue文件

实践思路：

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