Update html & raw & svg
parent
44f5424597
commit
0d5ca7465c
|
@ -1 +1,67 @@
|
||||||
Welcome to the Wiki.
|
# html & raw & svg
|
||||||
|
> 这几个方法, 功能比较简单, 就是将字符串html模板生成框架需要的模板对象。另外就是配合`string-html-css`插件来实现语法高亮。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```js
|
||||||
|
|
||||||
|
|
||||||
|
// 普通的html结构
|
||||||
|
html`<div>hello world!</div>`
|
||||||
|
|
||||||
|
// 不可写成
|
||||||
|
html(`<div>hello world!</div>`)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
由于`SVG`的特殊性, 一些属性不能按`html`节点来处理, 所以这种情况就需要换`svg函数`了
|
||||||
|
|
||||||
|
```js
|
||||||
|
|
||||||
|
svg`<svg><path d=""></svg>`
|
||||||
|
|
||||||
|
// 但是, 如果svg节点是被包在其他html节点中的话, 可以不用svg函数
|
||||||
|
// 这样也是可以正常解析的
|
||||||
|
html`<div><svg><path d=""></svg></div>`
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
以上2个函数, 有个特点, 那就是**节点结构**都是明确的, 无法根据现有的**html文本**来创建模板对象。
|
||||||
|
|
||||||
|
```js
|
||||||
|
|
||||||
|
let somethingFromOther = '<h1>hello</h1>'
|
||||||
|
|
||||||
|
// 这样的结果, 只会原样输出 '<h1>hello</h1>' 字符串, 而不是 h1节点
|
||||||
|
html`<div>${somethingFromOther}</div>`
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
这种情况, 就是`raw函数`该出场了。
|
||||||
|
|
||||||
|
|
||||||
|
```js
|
||||||
|
|
||||||
|
let somethingFromOther = '<h1>hello</h1>'
|
||||||
|
|
||||||
|
// 这样即可达到你想要的效果
|
||||||
|
html`<div>${raw(somethingFromOther)}</div>`
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue