md snabbdom-demo
cd snabbdom-demo
yarn init -y
yarn add parcel-bundler
"scripts"
:
├── index.html
├── package.json
└── src
└── 01-basicusage.js
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
snabbdom-demotitle
>
head
>
>
>
div>
src=
"./src/01-basicusage.js"
>
script
>
body
>
html
>
文件位址
匯入
import
from
'snabbdom'
new
vue().
$mount
()
import snabbdom from 'snabbdom'
介紹snabbdom 中的 h() init() patch() 函式的使用
import
from
'snabbdom'
// 1. hello world
// 引數：陣列，模組
// 返回值：patch 函式，作用對比兩個 vnode 的差異更新到真實 dom
let patch =
init([
])// 第乙個引數，標籤加選擇器
// 第二個引數，如果是字串的話就是標籤中的內容
let vnode =h(
"div#container.cls"
,"hello world"
)queryselector()
// 第乙個引數：可以是 dom 元素，內部會把 dom 元素轉換成 vnode
// 第二個引數： vnode
let odlvnode =
patch
// 假設的時刻，在這個時刻我們要從伺服器獲取資料，並把資料更新到建立好的 div 中
vnode =h(
"div"
,"服務端資料"
)patch
(odlvnode, vnode)
// 2. div 中放置子元素 h1 p
import
from
"snabbdom"
let patch =
init([
])let vnode =h(
"div#container",[
h("h1#firsttitle"
,"大標題"),
h("p#titlestate"
,"標題描述")]
)queryselector()
let oldnode =
patch
// 元素替換
settimeout((
)=>
,2000
)// 元素清空
settimeout((
)=>
,2000
)
Linux的基本操作 基本介紹
一 概述 1 常見作業系統 服務端作業系統 linux unix windows server 單機作業系統 windows dos ucdos win95 win98 win2000 xp vista win7 win8 mac linux ubuntu 移動作業系統 android ios wi...
Linux的基本操作 基本介紹
一 概述 1 常見作業系統 服務端作業系統 linux unix windows server 單機作業系統 windows dos ucdos win95 win98 win2000 xp vista win7 win8 mac linux ubuntu 移動作業系統 android ios wi...
SCSS SASS 的基本使用（基本指令）
寫在前面 自己平常使用的都是less，隨著學習的進展，scss的重要性越來越大。將scss檔案編譯為css檔案 4 將css檔案引入，最終參考效果 在scss中，提供兩個指令可以實現實時監聽原始檔的變動，實時生成編輯檔案 watch a file sass watch input.scss outp...