vue--render函数

  • 通常构建一个vue的项目,在开发环境搭建完成,开始写组件,大多数情况下构建每个组件的模板使用template,但是vue也推出了具有JavaScript完全编程能力的渲染函数render函数。
    +使用render函数,就不用在页面中写入template,在js文件中写入render函数。
 data() {
    return {
      text: "2222"
    };
  },
  methods: {
    clickFn(){
      console.log("click")
    }
  },
  render(h) {
    return h("div", {
      style: { backgroundColor: "#ccc", width: "200px", height: "200px" },//设置标签的样式
      attrs: { id: "der", class: "ser" },//设置普通HTML的属性
      props: {myprop: "bar"},//设置组件的属性
      on:{//绑定事件
        click:this.clickFn
      },
      ref:"tools"//设置ref
    },[h("span",{})]);
  }
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 前几天想学学Vue中怎么编写可复用的组件,提到要对Vue的render函数有所了解。可仔细一想,对于Vue的ren...
    kangaroo_v阅读 116,669评论 13赞 171
  • Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中,你真的需要 JavaS...
    O8阅读 2,521评论 0赞 3
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,484评论 0赞 6
  • 主要还是自己看的,所有内容来自官方文档。 介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 vie...
    Leonzai阅读 3,631评论 0赞 25
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,691评论 0赞 25

友情链接更多精彩内容