上海做淘宝网站,wordpress转织梦,wordpress4.9.4漏洞,番禺人才网一、认识h函数 Vue推荐在绝大数情况下使用模板来创建你的HTML#xff0c;然后一些特殊的场景#xff0c;你真的需要JavaScript的完全编程的能力#xff0c;这个时候你可以使用渲染函数 #xff0c;它比模板更接近编译器#xff1b; 前面我们讲解过VNode和VDOM的改变#…一、认识h函数 Vue推荐在绝大数情况下使用模板来创建你的HTML然后一些特殊的场景你真的需要JavaScript的完全编程的能力这个时候你可以使用渲染函数 它比模板更接近编译器 前面我们讲解过VNode和VDOM的改变
Vue在生成真实的DOM之前会将我们的节点转换成VNode而VNode组合在一起形成一颗树结构就是虚 拟DOMVDOM事实上我们之前编写的 template 中的HTML 最终也是使用渲染函数生成对应的VNode那么如果你想充分的利用JavaScript的编程能力我们可以自己来编写 createVNode 函数生成对应的VNode
那么我们应该怎么来做呢使用 h()函数
h() 函数是一个用于创建 vnode 的一个函数其实更准确的命名是 createVNode() 函数但是为了简便在Vue将之简化为 h() 函数
二、h()函数 如何使用呢
h()函数 如何使用呢它接受三个参数 注意事项
如果没有props那么通常可以将children作为第二个参数传入如果会产生歧义可以将null作为第二个参数传入将children作为第三个参数传入
三、h函数的基本使用
h函数可以在两个地方使用 render函数选项中 setup函数选项中setup本身需要是一个函数类型所有需要在箭头函数中再返回h函数创建的VNode
render函数实现计数器 script
import {h} from vue;export default {data() {return {counter: 0}},render() {return h(div, {class: app}, [h(h2, null, 当前计数${this.counter}),h(button, {onClick: () this.counter}, 1),h(button, {onClick: () this.counter--}, -1)])}
}
/scriptstyle scoped
/style
setup函数实现计数器 script
import {h, ref} from vue;export default {// data() {// return {// counter: 0// }// },setup() {const counter ref(0)return () {return h(div, {class: app}, [h(h2, null, 当前计数${counter.value}),h(button, {onClick: () counter.value}, 1),h(button, {onClick: () counter.value--}, -1)])}}
}
/scriptstyle scoped
/style
四、函数组件和插槽的使用 Home.vue:
script
import {h, ref} from vue;
import HelloWorld from ./HelloWorld.vue;export default {render() {return h(HelloWorld, null, {default: props h(span, null, app传到HelloWorld组件中的内容: ${props.name})})}
}
/scriptstyle scoped
/style
HelloWorld.vue:
script
import {h} from vue;export default {render() {return h(div, null, [h(h2, null, Hello World!),this.$slots.default ? this.$slots.default({name: zep}) : h(span, null, 我是hellowrold插槽的默认值)])}
}
/scriptstyle scoped/style
五、jsx的babel配置
如果我们希望在项目中使用jsx那么我们需要添加对jsx的支持
jsx我们通常会通过Babel来进行转换React编写的jsx就是通过babel转换的对于Vue来说我们只需要在Babel中配置对应的插件即可
注意新版本的vue-cli中不需要进行安装和配置操作了 安装Babel支持Vue的jsx插件
npm install vue/babel-plugin-jsx -D在babel.config.js配置文件中配置插件 六、jsx计数器案例 script
import {ref} from vue;export default {setup() {const counter ref(0)const increment () {counter.value}const decrement () {counter.value--}return {counter,increment,decrement}},render() {return (divdiv当前计数: {this.counter}/divbutton onClick{this.increment}1/buttonbutton onClick{this.decrement}-1/button/div)}
}
/scriptstyle scoped
/style
七、jsx组件的使用
