做HH的网站,网站开发后台指什么,响应式网站能用dw做吗,开发个小程序多少钱Vue3认识h函数
Vue推荐在绝大数情况下使用模板来创建你的HTML#xff0c;然后一些特殊的场景#xff0c;你真的需要JavaScript的完全编程的能力#xff0c;这个时 候你可以使用 渲染函数 #xff0c;它比模板更接近编译器#xff1b;
前面我们讲解过VNode和VDOM的概念然后一些特殊的场景你真的需要JavaScript的完全编程的能力这个时 候你可以使用 渲染函数 它比模板更接近编译器
前面我们讲解过VNode和VDOM的概念
Vue在生成真实的DOM之前会将我们的节点转换成VNode而VNode组合在一起形成一颗树结构就是虚拟DOM VDOM事实上我们之前编写的 template 中的HTML 最终也是使用渲染函数生成对应的VNode那么如果你想充分的利用JavaScript的编程能力我们可以自己来编写 createVNode 函数生成对应的VNode
那么我们应该怎么来做呢使用 h()函数
h() 函数是一个用于创建 vnode 的一个函数其实更准备的命名是 createVNode() 函数但是为了简便在Vue将之简化为 h() 函数
h()函数 如何使用呢
h()函数 如何使用呢它接受三个参数
h(button, { onClick: increment }, 1)// button:标签名
// { onClick: increment } 标签里的属性
// 1 标签里的文本注意事项
如果没有props那么通常可以将children作为第二个参数传入如果会产生歧义可以将null作为第二个参数传入将children作为第三个参数传
h函数的基本使用
h函数可以在两个地方使用
render函数选项中setup函数选项中setup本身需要是一个函数类型函数再返回h函数创建的VNode
import { h } from vueexport default {render(){return h(div,{class:app},Hello App)}
}h函数计数器案例
options-Api中
script
import { h } from vue;
export default{data(){return {counter:0}},render(){return h(div,{className:app},[h(h2,null,当前计数${this.counter}),h(button,{ onClick: this.increment},1),h(button,{ onClick: this.decrement},-1),])},methods:{increment(){this.counter},decrement(){this.counter--}}
}
/scriptsetup函数中使用
scriptimport { h, ref } from vueexport default {setup() {const counter ref(0)const increment () {counter.value}const decrement () {counter.value--}return () h(div, { className: app }, [h(h2, null, 当前计数: ${counter.value}),h(button, { onClick: increment }, 1),h(button, { onClick: decrement }, -1),h(Home)])}}
/scriptComposition-Api 中
templaterender / h2内容/h2
/templatescript setupimport {ref,h} from vue;import Home from ./Home.vue;const counter ref(0)const increment () {counter.value}const decrement () {counter.value--}const render () h(div,{className:app},[h(h2,null,当前计数${counter.value}),h(button,{ onClick:increment },1),h(button,{onClick:decrement},-1),h(Home) // 引入组件])
/script
** 注意在setup中需要 **
实际开发中我们基本不用render函数如果依然想使用JavaScript的方式渲染我们一般用JSX来编写逻辑
** 感谢大家观看我们下次见 **
