vue--day36--render函数

1.脚手架里面为什么main.js 里面，使用了render 函数/**

* 该文件是整个项目的入口文件

*/

//引入Vue

import Vue from 'vue'

// 引入App 组件 他是所有组件的父组件

import App from './App.vue'

//关闭vue 的生产提示

Vue.config.productionTip = false

// 创建Vue 实例对象--vm

new Vue({

// //将 app 组件放入到容器中

 render: h => h(App),

 }).$mount('#app')

 

2. 以前单文件为main.js 里面 写法

/**

* 该文件是整个项目的入口文件

*/

//引入Vue

import Vue from 'vue'

// 引入App 组件 他是所有组件的父组件

import App from './App.vue'

//关闭vue 的生产提示

Vue.config.productionTip = false

// 创建Vue 实例对象--vm

 

new Vue({

el:'#app',

template:`<App>你好呀</App>`,

comments:{App}

})

 

 

运行后会报错

Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.(found in <Root>

你正在使用运行版本的 vue（残缺的 vue 没有获取到模板解析器） 并且模板解析器没有成功获取到.

解决方法使用 render 函数，，或者使用完整版的 vue。

 那是因为在main.js 里面引入了。import Vue from 'vue' 引入第三方库，引入的都是残缺的vue。

 

 

 

/**

* 该文件是整个项目的入口文件

*/

//引入Vue

import Vue from 'vue/dist/vue'   // 引入了完整的vue

// 引入App 组件 他是所有组件的父组件

//import App from './App.vue'

//关闭vue 的生产提示

Vue.config.productionTip = false

// 创建Vue 实例对象--vm

 

new Vue({

el:'#app',

template:`<h1>你好呀</h1>`,

//comments:{App}

})

可以显示运行，没有问题。

 

引入残缺版本的vue 怎么解决

/**

* 该文件是整个项目的入口文件

*/

//引入Vue

import Vue from 'vue'

// 引入App 组件 他是所有组件的父组件

//import App from './App.vue'

//关闭vue 的生产提示

Vue.config.productionTip = false

// 创建Vue 实例对象--vm

// new Vue({

// //将 app 组件放入到容器中

// render: h => h(App),

// }).$mount('#app')

new Vue({

el:'#app',

　// 第一步　   

   //render(createElement){

   //console.log('vue调用render'+createElement);

   //return createElement('h1','你是谁呀');

   //}

   // 第二步  render 里面没有this,,可以简写为箭头函数

   // render:(createElement)=>{

      // return createElement('h1','你是谁呀');

   // }

   // 第三步 箭头函数左边只有一个参数，可以把 （）省掉

    

    //render:createElement=>{

       //return createElement('h1','你是谁呀');

   // }

 

// 第四步 箭头函数只有一个函数题，并且还想return 

    

    render:createElement=>return createElement('h1','你是谁呀'); 这样就和 render: h => h(App)差步多了。

    

    

//comments:{App}

})

 

 

不同版本的Vue

1. vue.js 和 vue.runtime.xxx.js 的区别

1）vue.js 是完整版的vue 包含核心功能和模板解析器

2）vue.runtime.xxx.js 是运行版的vue 只包含核心功能 没有模板解析器

2. 因为vue.runtime.xxx.js没有模板解析器 所以不能使用 template配置项

需要使用render函数接收到createElement 函数去指定具体内容

3. 组件中的template 标签是 使用 vue-template-compiler 解析的