渲染函数-深刻 data 对象

时间 2019-12-22

标签渲染函数深刻 data 对象繁體版

原文原文链接

咱们平时在家是不多看电视的，最近看了几期最强大脑，真的被震惊到了，为何他们的大脑容量那么大呢？而且很是机敏。海量的信息能够在很短的时间内记住，真是最遥远的距离莫过于我还没弄明白题目，别人已经答案出来了。感受对他们来讲，考上清华北大真是太容易了。我就想纵然我不能记住不少的信息，难道我认真些，努力些还不能记住几行代码吗？javascript

言归正传，深刻 data 对象在官网上没有完整的例子，可能对初学者真正透传的理解是有些难度的，这里展现data对象的完整例子。html

官网原文：vue

有一件事要注意：正如在模板语法中，v-bind:class 和 v-bind:style ，会被特别对待同样，在 VNode 数据对象中，下列属性名是级别最高的字段。该对象也容许你绑定普通的 HTML 特性，就像 DOM 属性同样，好比 innerHTML (这会取代 v-html 指令)java

{
  // 和`v-bind:class`同样的 API
  // 接收一个字符串、对象或字符串和对象组成的数组
  'class': {
    foo: true,
    bar: false
  },
  // 和`v-bind:style`同样的 API
  // 接收一个字符串、对象或对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 正常的 HTML 特性
  attrs: {
    id: 'foo'
  },
  // 组件 props
  props: {
    myProp: 'bar'
  },
  // DOM 属性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器基于 `on`
  // 因此再也不支持如 `v-on:keyup.enter` 修饰器
  // 须要手动匹配 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅对于组件，用于监听原生事件，而不是组件内部使用
  // `vm.$emit` 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意，你没法对 `binding` 中的 `oldValue`
  // 赋值，由于 Vue 已经自动为你进行了同步。
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 做用域插槽格式
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 若是组件是其余组件的子组件，需为插槽指定名称
  slot: 'name-of-slot',
  // 其余特殊顶层属性
  key: 'myKey',
  ref: 'myRef'
}

例1express

<body class="">
    <div id="app">
        <anchored-heading :level="2">hello world</anchored-heading>
    </div>
    <script src="js/vue.js"></script>
    <script>
    Vue.component("anchored-heading", {
        render: function(createElement) {
            return createElement("nav" + this.level, {
                    'class': {
                        foo: true,
                        bar: false
                    },
                    style: {
                        color: 'red',
                        fontSize: '14px'
                    },
                    attrs: {
                        id: 'foo'
                    },
                    props: {
                        myProp: 'bar' //能够传给子组件的属性
                    },
                    nativeOn: {
                        click: this.nativeClickHander
                    },
                   /* scopedSlots: {
                        default: props => createElement("span", props.text)
                    }*/

                },

                this.$slots.default)
        },

        //props:["level"] 也能够
        props: {

            level: {
                type: Number,
                required: true,
                myProp: 'bar'
            }
        },
        methods: {
            nativeClickHander: function() {
                alert("you click native Event")
            }
        }
    })
    Vue.component("nav2", {
        props: ["myProp"],
        //template:`<h2>{{myProp}}</h2>`
        render: function(createElement) {
            return createElement("h2", [createElement("div", this.$slots.default), this.myProp])
        }
    })
    var app = new Vue({
        el: "#app"
    })
   
    </script>
</body>

渲染函数最终渲染出来的div元素，其实跟template写出的字符串模板同样的
上例子anchored-heading组件定义了渲染函数（相似模板）和props属性（level），level是接收父级传递过来的的值，其中渲染函数渲染出的也是一个组件（从"nav" + this.level能够看出是nav2元素组件），为nav2组件定义了class与props属性，nav2的props{myProp: 'bar'}是用来传递myProp的值给它的子组件，class属性是能够从父级传给子组件的，因此最终HTML渲染为数组

<h2 class="foo"><div>hello world</div>bar</h2>

须要知道当你不使用slot属性向组件中传递内容时，这些子元素被存储在组件实例中的$slots.default中，本例中没有使用slot属性像子组件中传递内容，因此父组件的内容被存储在this.$slots.default中app

例2：含有scopedSlots的例子dom

<body class="">
    <div id="app">
        <anchored-heading :level="2">hello world</anchored-heading>
    </div>
    <script src="js/vue-2.5.13.js"></script>
    <script>
    Vue.component("anchored-heading", {
        render: function(createElement) {
            return createElement("nav" + this.level, {
                    scopedSlots:{
                        //default:props => createElement("span",props.text)
                        default:function(props){
                            return createElement("span",props.text)
                        }
                    }
                },
                this.$slots.default)
        },
        //props:["level"] 也能够
        props: {

            level: {
                type: Number,
                required: true,
                myProp: 'bar'
            }
        },
        
    })
    Vue.component("nav2", {
        props: ["myProp"],
        
        render:function(createElement){
            return createElement("h2",[createElement('b',[this.$scopedSlots.default({text:'我是组件'})]),createElement("div",this.$slots.default),this.myProp])
        }
     
    })
    var app = new Vue({
        el: "#app"
    })
</script>
</body>

渲染为：ide

<body class="">
    <div id="app">
        <h2>
            <b><span>我是组件</span></b>
            <div>hello world</div>
        </h2>
    </div>
</body>

例3：含有on和domProps的例子函数

<body class="">
    <div id="app">
        <anchored-heading :level="2"><div>hello world</div></anchored-heading>
    </div>
    <script src="js/vue.js"></script>
    <script>
    Vue.component("anchored-heading", {
        render: function(createElement) {
            return createElement("h" + this.level, {
                    'class': {
                        foo: true,
                        bar: false
                    },
                    style:{
                        color:'red',
                        fontSize:'14px'
                    },
                    attrs:{
                        id:'foo'
                    },
                    domProps:{
                        innerHTML:"BAZ"
                    },
                    on:{
                        click:this.clickHander // on 与 nativeOn的区别是，nativeOn是加在组件上，它是父级还有字组件
                    },
                    //slot:"header"

                },

                this.$slots.default)
        },

        //props:["level"] 也能够
        props: {

            level: {
                type: Number,
                required: true,
                myProp: 'bar'
            }
        },
        methods:{
            clickHander:function(){
                alert("you clicked me")
            }
        }
    })
    
    var app = new Vue({
        el: "#app"
    })
    //domProps的优先级高，此时就再也不显示this.$slots.default的内容
    </script>
</body>

渲染成：

<div id="app"><h2 id="foo" class="foo" style="color: red; font-size: 14px;">BAZ</h2></div>

例4：含有slot和ref的例子：

<body class="">
    <div id="app">
        <anchored-heading :level="2"><div slot="header">hello world</div></anchored-heading>
    </div>
    <script src="js/vue.js"></script>
    <script>
    Vue.component("anchored-heading", {
        render: function(createElement) {
            return createElement("h" + this.level, {
                    slot:"header",
                    ref:"myRef"
                },

                this.$slots.header)
        },
        //props:["level"] 也能够
        props: {

            level: {
                type: Number,
                required: true,
                myProp: 'bar'
            }
        },
        methods:{
            clickHander:function(){
                console.log(this.$refs.myRef.innerHTML)
            }
        }
    })
    var app = new Vue({
        el: "#app"
    })
    </script>
</body>

1. Vue渲染函数
2. data渲染
3. Vue 渲染函数
4. Vue源码--深刻模板渲染
5. vue 数组和对象渲染问题
6. Vue - 渲染函数render
7. Vue的渲染函数
8. vue渲染函数&JSX
9. 深刻了解JavaScript对象（2）--函数、对象
10. iview,用render函数渲染
更多相关文章...
• jQuery Mobile Data 属性 - jQuery Mobile 教程
• XMLHttpRequest 对象 - XML DOM 教程
• 算法总结-深度优先算法
• Flink 数据传输及反压详解