Python用于解析 XML 数据之untangle使用详解-CFANZ编程社区

整个渲染过程了解

VM与VC关系：

render()函数

why？

在没有用Vue-CLI脚手架构建项目时，我们直接引用的是全版的Vue.js库（即包括Vue核心和模板解析器）。此时可以用以下方式进行构造VC

new Vue({
    template:"<h1>模板解析器可解析我/h1>",
    components:{APP}
})

然而，当用脚手架构建时默认引入的是残缺版的Vue.js，此时就需要借助render()将模板渲染，构建虚拟DOM

what?

render() 函数是一个创建虚拟 DOM 树的强大工具，它允许你使用 JavaScript 直接编写组件的模板。尽管 Vue 的模板系统（基于 HTML 的模板）非常强大且易于使用，但在某些复杂或需要更高灵活性的情况下，使用 render() 函数可能是更好的选择。

基本用法

render() 函数是一个组件选项，它接收一个创建元素的函数作为参数。这个函数接收一个 createElement 方法作为第一个参数，该方法用于创建虚拟 DOM 元素。

Vue.component('my-component', {  
  render: function (createElement) {  
    // 返回一个虚拟 DOM 元素  
    return createElement(  
      'div', // 元素的名称  
      this.$slots.default, // 子节点（如果有的话）  
      'Hello, Vue!' // 元素的文本内容  
    )  
  }  
})

在上面的例子中，我们创建了一个名为 my-component 的 Vue 组件，它使用 render() 函数返回一个虚拟 DOM 元素。这个元素是一个 div，它的内容是 'Hello, Vue!'。

createElement 参数

createElement 方法接受三个参数：

标签名或组件对象：可以是 HTML 标签名、组件对象或其他有效的 Vue 组件（例如，使用 Vue.extend() 创建的组件）。
数据对象：一个包含模板相关属性的数据对象。你可以在这里设置如 class、style、attrs（属性）、props（对于组件）、domProps（如 innerHTML 和 textContent）、on（事件监听器）、scopedSlots（对于组件的插槽）等。
子虚拟节点：一个子虚拟节点数组（例如，由 createElement() 创建的虚拟节点）。

Vue.component('my-button', {  
  props: ['size', 'type'],  
  render: function (createElement) {  
    // 创建一个带有类名、属性和子节点的按钮元素  
    return createElement(  
      'button',  
      {  
        class: {  
          'btn': true,  
          'btn-large': this.size === 'large',  
          'btn-primary': this.type === 'primary'  
        },  
        attrs: {  
          type: 'button'  
        },  
        on: {  
          click: this.handleClick  
        }  
      },  
      this.$slots.default // 使用默认插槽作为按钮的文本或内容  
    )  
  },  
  methods: {  
    handleClick: function () {  
      console.log('Button clicked!')  
    }  
  }  
})