vue2.x的深入学习--关于h函数的说明

目录
  • 解决方案，
  • 总结：

vue项目中。写在.vue文件的template里的代码需要借助webpack的模板解析器插件才能解析。单个.html文件引入vue文件时，该vue文件顺便把模板解析器引入进来了(缺点是体积大)。

所以我们使用工程化开发项目时候，需要在package.json文件引入vue-template-compile，用于进行模板解析

如果没有模板解析器，就解析不了，但是vue-template-compile只能解析.vue文件里的模板，没办法解析.js文件里的模板：

所以当我们这么写的时候会解析不了

为什么解析不了？因为main.js文件引入的vue文件没有带模板解析器

vue.runtime.common.js是不带模板解析器的.vue文件，vue.js是带模板解析器的vue文件

如果我们在main.js引入带有模板解析器的vue.js文件，则可以解析template

为什么默认引入的是不带模板解析器的vue.js文件？
因为体积问题：

解决方案，

使用官方提供的render函数。他能够通过h函数去调用引入的vue-template-compile，也就是第九行代码↓相当于第十一行和第十二行加上loader模板解析器。

总结：

本篇文章就到这里了，希望能给你带来帮助，也希望您能够多多关注我们的更多内容！

赞 (0)

相关推荐

  • Vue2.x响应式简单讲解及示例

    Vue2.x响应式简单讲解及示例

    一.回顾Vue响应式用法 ​ vue响应式,我们都很熟悉了.当我们修改vue中data对象中的属性时,页面中引用该属性的地方就会发生相应的改变.避免了我们再去操作dom,进行数据绑定. 二.Vue响应式实现分析 对于vue的响应式原理,官网上给了出文字描述 https://cn.vuejs.org/v2/guide/reactivity.html . vue内部主要是通过数据劫持和观察者模式实现的 数据劫持: vue2.x内部使用Object.defineProperty https://dev

  • vue2.0/3.0中provide和inject的用法示例

    vue2.0/3.0中provide和inject的用法示例

    目录 1.provide/inject有什么用? 2.provide/inject使用方式 具体用法: vue3.0用法 总结 1.provide/inject有什么用? 常用的父子组件通信方式都是父组件绑定要传递给子组件的数据,子组件通过props属性接收,一旦组件层级变多时,采用这种方式一级一级传递值非常麻烦,而且代码可读性不高,不便后期维护. vue提供了provide和inject帮助我们解决多层次嵌套嵌套通信问题.在provide中指定要传递给子孙组件的数据,子孙组件通过inject注

  • vue3 与 vue2 优点对比汇总

    目录 优点1:diff算法的优化 优点2:hoistStatic 静态提升 优点3:cacheHandlers 事件侦听器缓存 优点4:ssr渲染 优点5:更好的Ts支持 优点6:Compostion API: 组合API/注入API 优点7:更先进的组件 优点8:自定义渲染API 优点9:按需编译,体积比vue2.x更小 优点10:支持多根节点组件 ​​​​​​摘要: Vue3新版本的理念成型于 2018 年末,当时的 Vue 2 已经有两岁半了.比起通用软件的生命周期来这好像也没那么久,Vu

  • Vue2.x配置路由导航守卫实现用户登录和退出

    Vue2.x配置路由导航守卫实现用户登录和退出

    目录 前言 一.配置路由导航守卫 1. 全局导航守卫 2. 局部导航守卫 二.用户登录 1. axios配置 2. 用户登录代码 三.用户退出 1. 实现代码 总结 前言 之前在Vue的学习中通过路由导航守卫控制实现了用户登录模块的功能,现在再次做项目时又要通过Vue配置路由导航守卫来实现相同的功能,在此将实现过程进行记录与总结(本文基于Vue2.x进行实现) 提示:以下是本篇文章正文内容,下面案例可供参考 一.配置路由导航守卫 1. 全局导航守卫 如果项目中只有后台的情况,在Vue中配置全局导

  • Vue3对比Vue2的优点总结

    1.为什么要有vue3 我们使用vue2常常会遇到一些体验不太好的地方,比如: 随着功能的增长,需求的增加,复杂组件的代码越来越难以维护,逻辑混乱,虽然vue2也有一些复用的方法,但是都存在一定的弊端,比如我们常常用的Mixin,特别容易发生命名冲突,暴露出来的变量意图不是很明显,重用到其他组件容易冲突. vue2对于typeScript的支持非常有限,没有考虑到ts的集成. vue3的出现就是为了解决vue2的弊端,其composition API很好的解决了逻辑复用的问题,而且vue3源码就

  • 源码揭秘为什么 Vue2 this 能够直接获取到 data 和 methods

    源码揭秘为什么 Vue2 this 能够直接获取到 data 和 methods

    目录 1. 示例:this 能够直接获取到 data 和 methods 2. 准备环境调试源码一探究竟 2.1 Vue 构造函数 2.2 _init 初始化函数 2.3 initState 初始化状态 2.4 initMethods 初始化方法 2.4.1 bind 返回一个函数,修改 this 指向 2.5 initData 初始化 data 2.5.1 getData 获取数据 2.5.2 proxy 代理 2.5.3 Object.defineProperty 定义对象属性 2.6 文中

  • vue2.x 从vue.config.js配置到项目优化

    vue2.x 从vue.config.js配置到项目优化

    vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载.你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写. 前言 在实际项目中优化也是经常需要做的事情,特别在中大型项目中降低打包体积大小,提高首屏加载时间是必不可少的,同时在面试中也是一个高频问题.本片文章我将从vue.config.js配置到项目优化前后效果

  • 手写Vue2.0 数据劫持的示例

    一:搭建webpack 简单的搭建一下webpack的配置.新建一个文件夹,然后init一下.之后新建一个webpack.config.js文件,这是webpack的配置文件.安装一下简单的依赖. npm install webpack webpack-cli webpack-dev-server -D 在同级目录下新建一个public/index.html和src/index.js,作为出口文件和入口文件. j简单配置一下webpack, 在webpack.config.js文件中: cons

  • vue2.0结合DataTable插件实现表格动态刷新的方法详解

    vue2.0结合DataTable插件实现表格动态刷新的方法详解

    本文实例讲述了vue2.0结合DataTable插件实现表格动态刷新的方法.分享给大家供大家参考,具体如下: 产品提出的需求是这样的,很普通的一个统计server端task完成率和状态的表格,要自动刷新其中的数据,并且当单个task完成的时候report给server端,看起来好easy好easy的一个需求啊!且听我说完哈! 我这边使用的是框架是vue,表格自然用v-for渲染,然后我们这边分页搜索神马的都是前端弄,也就是说后端只管把一大坨数据塞到前端,然后前端自己组装分页器和完成模糊搜索,所以

  • Vue2.x-使用防抖以及节流的示例

    Vue2.x-使用防抖以及节流的示例

    utils: // 防抖 export const debounce = (func, wait = 3000, immediate = true) => { let timeout = null; return function() { let context = this; let args = arguments; if (timeout) clearTimeout(timeout); if (immediate) { var callNow = !timeout; //点击第一次为tru

  • vue2.0/3.0的响应式原理及区别浅析

    vue2.0/3.0的响应式原理及区别浅析

    前言 自从vue3.0正式上线以来,好多小伙伴都转战vue3.0了,这里把我自己总结的3.0和2.0的原理以及他俩的区别写出来,方便自己学习. step 一,vue2.0的响应式原理 先看看官网的解释: 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty把这些属性全部转为 getter/setter.Object.defineProperty 是 ES5 中一个无法 shim 的特性

  • vue2实现provide inject传递响应式

    1. vue2 中的常规写法 // 父级组件提供 'foo' var Provider = { data(){ return { foo: 'bar' } } provide: { fooProvide: this.fooFn // 传递一个引用类型函数过去 }, methods:{ fooFn() { return this.foo } } } var Child = { inject: ['fooProvide'], computed:{ fooComputed(){ return this

随机推荐