搭建环境

npm init 初始化项目

npm i -D snabbdom 安装

npm i -D webpack@5 webpack-cli@3 webpack-dev-server@3

简单介绍

snabbdom 是一个DOM库.[重要]

不能够直接运行在Node环境中，

我们需要搭建一个webpack和webpack-dev-server的开发环境

需要注意的是必须安装webpck5. 不能够安装webpack4.

因为webpck4中没有读取 exports的能力哈

然后安装：目的是搭建开发的运行环境

npm i -D webpack@5 webpack-cli@3 webpack-dev-server@3

这个千万不忘记配置呀

创建 webpack.config文件

//这个webpack.config文件在项目的根目录下

// 安装官网配置直接复制 https://webpack.js.org/ 然后做简单的修改

const path = require('path');

module.exports = {

    // 入口，需要靠你去创建

    entry: './src/index.js',

    // 出口

    output: {

      // path: path.resolve(__dirname, 'dist'),

      //虚拟的打包路径 也就是说文件夹不会真正的生成，而是在8080端口虚拟生成的

      // xuni 这个不会真正的生成，在内存中，打包后的文件名是 bundle

      publicPath:'xuni',

      filename: 'bundle.js',

    },

    <!-- 配置的是 开发服务 -->

    devServer: {

        port: 8080, //端口

        // 静态资源文件夹,你创建一个，跟src 同级，

        contentBase:'www'

    }

};

需要创建的文件

根据上面的配置要求。

我们需要在项目的跟目录下创建 src文件夹，src下有index.js文件

我们需要在项目的跟目录下创建 www文件夹，src下有index.html文件

我们在index.js文件中写

console.log("你好啊，环境已经搭建ok,我好高兴")

这个文件打包后对应的虚拟文件是bundle.js

我们在index.html文件中写

<body>

  <h1>你好啊！</h1>

  <!--

    这个container 在我们等会使用snabbdom的时候需要，

    我们现在就将他创建好

    -->

  <div id="container"></div>

</body>

<!--

 bundle.js 是我们生成在内存中的，在物理上看不见。

 我们等会写的xuni/bundle.js 是打包后的。

 它打包前的是 src下有index.js文件

 -->

<script src="xuni/bundle.js"></script>

</html>

更改 package.json 文件配置

在package.json文件中。

我们需要更改一下配置

"scripts": {

   "test": "echo \"Error: no test specified\" && exit 1"

},

更改为

  "scripts": {

  "dev": "webpack-dev-server"

},

这样我们执行 npm  run dev 就会将,

我们下载的 webpack-dev-server服务启动起来

然后简单去走一下 snabbdom的流程

snabbdom的地址：https://github.com/snabbdom/snabbdom

复制Example。到我们的 index.js文件中

我们会发现有

const container = document.getElementById("container");

所以我们需要在index.html中去创建

这就解释了为啥我们的index.html需要有一个id为container

不过我们刚刚已经创建了

然后我们会发现有两个函数报错 someFn is not  undefined

anotherEventHandler is not  undefined

我们将这两个函数更改为普通函数 就ok了

index.js简单使用h函数

import {

  init,

  classModule,

  propsModule,

  styleModule,

  eventListenersModule,

  h,

} from "snabbdom";

let myVnode1 = h

(

  'a',

  { props:

    { href: 'https://www.cnblogs.com/IwishIcould/' }

  },

  '我的博客'

)

console.log("myVnode1", myVnode1) //输出来的内容就是虚拟dom节点

这行代码说明了: h函数产生虚拟dom节点

区别

<div>

    <p>123</p>

</div>

转化为这个

let obj={

  'tag':'div',

  'child':[

      'tag':'p',

      'text':'123'

  ]

}

不是h函数做的。

而是模板编译原理做的

使用patch函数让虚拟dom节点上树

import {

  init,

  classModule,

  propsModule,

  styleModule,

  eventListenersModule,

  h,

} from "snabbdom";

let myVnode1 = h('a', { props: { href: 'https://www.cnblogs.com/IwishIcould/' } }, '我的博客')

console.log("myVnode1", myVnode1) //输出来的内容就是虚拟dom节点

// 使用init函数创建 patch函数

const patch = init([classModule, propsModule, styleModule, eventListenersModule])

const container = document.getElementById('container')

// 让虚拟节点上树

patch(container,myVnode1)

init函数创建patch函数

使用init函数创建patch函数 ,init函数接受4个参数。

const patch = init([classModule, propsModule, styleModule, eventListenersModule])

[类模块，属性模块，style模块，事件模块 ]

patch函数让虚拟dom节点上树

// 让虚拟节点上树

patch(container,myVnode1)

patch函数接受两个参数，上树到哪一个容器下，上树的虚拟节点

一个容器让多个虚拟节点上树，可以使用h函数的嵌套

let myVnode1 = h('ul', {}, [

  h('li', {}, '姓名'),

  h('li', {}, '年龄'),

  h('li', {}, '爱好'),

])

console.log("myVnode1", myVnode1) //输出来的内容就是虚拟dom节点

// 使用init函数创建 patch函数

const patch = init([classModule, propsModule, styleModule, eventListenersModule])

const container = document.getElementById('container')

// 让虚拟节点上树

patch(container, myVnode1)

console.log("上树后", myVnode1) //输出来的内容就是虚拟dom节点

webapck搭建环境，让你知道vue中的h函数的作用和虚拟节点如何上树！的更多相关文章

  1. 图解vue中 v-for 的 :key 的作用，虚拟dom Diff算法

    其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性. 要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了. 我们知道,vue和react都实现了一套虚拟D ...

  2. vue中动态样式不起作用？ scoped了解一下

    vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped

  3. Vue中render: h => h(App)的含义

    // ES5 (function (h) { return h(App); }); // ES6 h => h(App); 官方文档 render: function (createElemen ...

  4. 【转】vue中的钩子函数。。

    前言 在vue开发SPA应用的过程中,多数情况下我们需要解决一个问题 就是在路由跳转的过程中需要更新你SPA应用的 title , 这一节不说其他,就展示如何使用 vue-router 的 导航钩子  ...

  5. vue中render: h => h(App)的详细解释

    2018年06月20日 10:54:32 H-L 阅读数 5369   render: h => h(App) 是下面内容的缩写:   render: function (createEleme ...

  6. vue中的render函数介绍

    简介:对于不了解slot的用法(参考:大白话vue-slot的用法)又刚接触render函数的同学来说,官网的解释无疑一脸懵逼,这里就整理下个人对render函数的理解 问题: 1.render函数是 ...

  7. vue中使用watch函数，当数据改变时自动引发事件

    本来我的需求是这样的,使用ElementUI的日期选择器,当日期选择器被更改时需要根据新日期来向服务器获取新数据,但是发现这个日期选择器没有change事件,后来终于发现vue有个watch函数就是用 ...

  8. 2016年JD工作遇到的问题：1-5，搭建环境和熟悉项目过程中的坑

    1.更新不需要权限的项目A,却提示没有权限. 先从Git上更新项目A的代码,提示没有权限. 然后从Git上更新其它项目B的代码,正常. 再更新项目A的代码,正常了. 奇葩问题! 2.Eclipse中, ...

  9. vue中的钩子函数的理解

    接下来我们对几个钩子函数进行解释 beforeCreated:这个钩子函数实在vue实例创建后,触发的.这个时候还没有进行data里的数据监听和事件的初始化 其实大家很多时候都会在created钩子函 ...

随机推荐

  1. 问题 A: 大数阶乘

    题目描述 我们都知道如何计算一个数的阶乘,可是,如果这个数很大呢,我们该如何去计算它并输出它? 输入 输入一个整数m(0<m<=5000) 输出 输出m的阶乘,并在输出结束之后输入一个换行 ...

  2. 《手把手教你》系列技巧篇（四十二）-java+ selenium自动化测试 - 处理iframe -下篇（详解教程）

    1.简介 经过宏哥长时间的查找,终于找到了一个含有iframe的网页.所以今天这一篇的主要内容就是用这个网页的iframe,宏哥给小伙伴或者童鞋们演示一下,在处理过程中遇到的问题以及宏哥是如何解决的. ...

  3. Django笔记&教程 6-1 表单（Form）介绍

    Django 自学笔记兼学习教程第6章第1节--表单(Form)介绍 点击查看教程总目录 1 介绍 如果网站要让用户输入并提交数据(比如注册登录),则需要用到表单. 单纯的html也能写出表单,格式一 ...

  4. PAT A1091——BFS

    Acute Stroke One important factor to identify acute stroke (急性脑卒中) is the volume of the stroke core. ...

  5. [nfls338]基本字典子串

    1.前置知识 以下数字未特殊说明,取值范围均与$N$​​​取交 以下字符串未特殊说明,下标均从1开始,且均为非空串,复杂度中的$n$​​​指字符串长度 周期和border 对于非空集合$S$,定义$\ ...

  6. [cf700D]Huffman Coding on Segment

    令$tot_{i}$为区间$[l,r]$中满足$a_{j}=i$的$j$的个数,将所有非0的$tot_{i}$取出,得到可重集$S$ 显然,有以下贪心:不断取出$S$中最小的两个元素,删除这两个元素并 ...

  7. [gym102511K]Traffic Blights

    为了方便,对于集合$S$,称$k\equiv S(mod\ M)$当且仅当存在$x\in S$使得$k\equiv x(mod\ M)$ 枚举红绿灯,对每一个点即限制$k$对$g_{i}+r_{i}$ ...

  8. [bzoj5417]你的名字

    先考虑l=1,r=|s|的部分分,需要求出t每一个前缀的不是s子串的最长后缀,记作pp[k],有以下限制:1.pp[pos[k]]<len(pos[k]表示k的某一个结束位置),因为不能被匹配 ...

  9. Go Micro Dashboard - 简介

    前言 使用Go Micro开发微服务系统很久了,但是一直没有很好的可视化工具用于开发和监控微服务系统. 所以基于go-micro和ng-alain开发了Go Micro Dashboard,目前已经支 ...

  10. 从零开始学Kotlin第七课

    1.强制类型转换需要在后面加两个感叹号 2.如果需要在java代码调用kotlin的方法时候使用文件名+kt.方法 3.object 类名 是创建匿名内部类的写法 调用 传入class对象 4.在to ...