Vue 렌더 개발 예시에 대한 자세한 설명

이번에는 Vue 렌더 개발 사례에 대해 자세히 설명드리겠습니다. Vue 렌더 개발 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

소개

Vue를 개발에 사용할 때 대부분 템플릿을 사용하여 개발하는 것은 간단하고 편리하며 빠르지만 때로는 특별한 시나리오에는 템플릿이 적합하지 않은 경우도 있습니다. 그래서 렌더 기능을 잘 활용하기 위해 좀 더 자세히 살펴보기로 했습니다. 아래에 쓴 내용이 잘못되었다고 생각하시면 지적해 주시기 바랍니다. 저와의 교류가 글을 쓰게 된 가장 큰 동기가 됩니다.

Scenario

공식 웹사이트에 설명된 시나리오 레벨 소품을 통해 제목 태그를 동적으로 생성하는 구성 요소를 작성하기 시작하면 다음과 같이 구현하는 것을 빨리 생각할 수 있습니다.

<script type="text/x-template" id="anchored-heading-template">
 <h1 v-if="level === 1">
  <slot></slot>
 </h1>
 <h2 v-else-if="level === 2">
  <slot></slot>
 </h2>
 <h3 v-else-if="level === 3">
  <slot></slot>
 </h3>
 <h4 v-else-if="level === 4">
  <slot></slot>
 </h4>
 <h5 v-else-if="level === 5">
  <slot></slot>
 </h5>
 <h6 v-else-if="level === 6">
  <slot></slot>
 </h6>
</script>

Vue.component('anchored-heading', {
 template: '#anchored-heading-template',
 props: {
  level: {
   type: Number,
   required: true
  }
 }
})

이 시나리오에서 템플릿을 사용하는 것은 그렇지 않습니다. 최선의 선택: 우선 코드가 장황합니다. 다양한 수준의 제목에 anchor 요소를 삽입하려면 을 반복적으로 사용해야 합니다.

템플릿은 대부분의 구성 요소에서 훌륭하게 작동하지만 여기서는 그다지 깨끗하지 않습니다. 이제 렌더링 함수를 사용하여 위의 예를 다시 작성해 보겠습니다.

Vue.component('anchored-heading', {
 render: function (createElement) {
  return createElement(
   'h' + this.level,  // tag name 标签名称
   this.$slots.default // 子组件中的阵列
  )
 },
 props: {
  level: {
   type: Number,
   required: true
  }
 }
})

훨씬 더 간단하고 명확해졌습니다! 간단히 말해서 이 코드는 훨씬 간단하지만 Vue의 인스턴스 속성에 매우 익숙해야 합니다. 이 예에서는 고정 제목의 Hello world!와 같은 슬롯 속성을 사용하지 않고 구성 요소에 콘텐츠를 전달할 때 해당 하위 요소가 구성 요소 인스턴스의 $slots.default에 저장된다는 점을 알아야 합니다.

createElement 매개변수 소개

다음으로 숙지해야 할 것은 createElement 함수에서 템플릿을 생성하는 방법입니다. createElement에서 허용하는 매개변수는 다음과 같습니다.

createElement(
 // {String | Object | Function}
 // 一个 HTML 标签字符串，组件选项对象，或者
 // 解析上述任何一种的一个 async 异步函数，必要参数。
 'p',
 // {Object}
 // 一个包含模板相关属性的数据对象
 // 这样，您可以在 template 中使用这些属性。可选参数。
 {
  // (详情见下一节)
 },
 // {String | Array}
 // 子节点 (VNodes)，由 `createElement()` 构建而成，
 // 或使用字符串来生成“文本节点”。可选参数。
 [
  '先写一些文字',
  createElement('h1', '一则头条'),
  createElement(MyComponent, {
   props: {
    someProp: 'foobar'
   }
  })
 ]
)

데이터 객체에 대한 심층 분석

한 가지 주의할 점: 템플릿 구문과 마찬가지로 v-bind:class 및 v-bind:style은 다음에서 특별히 처리됩니다. VNode 데이터 개체에서 다음 속성 이름은 최고 수준 필드입니다. 또한 이 객체를 사용하면 innerHTML과 같은 DOM 속성과 같은 일반 HTML 속성을 바인딩할 수 있습니다(이것은 v-html 지시어를 대체합니다).

{
 // 和`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
   }
  }
 ],
 // Scoped slots in the form of
 // { name: props => VNode | Array<VNode> }
 scopedSlots: {
  default: props => createElement('span', props.text)
 },
 // 如果组件是其他组件的子组件，需为插槽指定名称
 slot: 'name-of-slot',
 // 其他特殊顶层属性
 key: 'myKey',
 ref: 'myRef'
}

조건부 렌더링

이제 위 API에 익숙해졌으니 실용적인 전투를 해보겠습니다.

이전에는 이렇게 썼는데

//HTML
<p id="app">
  <p v-if="isShow">我被你发现啦！！！</p>
</p>
<vv-isshow :show="isShow"></vv-isshow>
//js
//组件形式      
Vue.component('vv-isshow', {
  props:['show'],
  template:'<p v-if="show">我被你发现啦2！！！</p>',
});
var vm = new Vue({
  el: "#app",
  data: {
    isShow:true
  }
});

render는 이렇게 썼어요

//HTML
<p id="app">
  <vv-isshow :show="isShow"><slot>我被你发现啦3！！！</slot></vv-isshow>
</p>
//js
//组件形式      
Vue.component('vv-isshow', {
  props:{
    show:{
      type: Boolean,
      default: true
    }
  },
  render:function(h){  
    if(this.show ) return h('p',this.$slots.default);
  },
});
var vm = new Vue({
  el: "#app",
  data: {
    isShow:true
  }
});

List 랜더링

이전에도 이렇게 썼는데, v-for할 때는 템플릿을 라벨로 묶어야 해요

//HTML
<p id="app">
  <vv-aside v-bind:list="list"></vv-aside>
</p>
//js
//组件形式      
Vue.component('vv-aside', {
  props:['list'],
  methods:{
    handelClick(item){
      console.log(item);
    }
  },
  template:'<p>\
         <p v-for="item in list" @click="handelClick(item)" :class="{odd:item.odd}">{{item.txt}}</p>\
       </p>',
  //template:'<p v-for="item in list" @click="handelClick(item)" :class="{odd:item.odd}">{{item.txt}}</p>',错误     
});
var vm = new Vue({
  el: "#app",
  data: {
    list: [{
      id: 1,
      txt: 'javaScript',
      odd: true
    }, {
      id: 2,
      txt: 'Vue',
      odd: false
    }, {
      id: 3,
      txt: 'React',
      odd: true
    }]
  }
});

render는 이렇게 작성했습니다

//HTML
<p id="app">
  <vv-aside v-bind:list="list"></vv-aside>
</p>
//js
//侧边栏
Vue.component('vv-aside', {
  render: function(h) {
    var _this = this,
      ayy = this.list.map((v) => {
        return h('p', {
          'class': {
            odd: v.odd
          },
          attrs: {
            title: v.txt
          },
          on: {
            click: function() {
              return _this.handelClick(v);
            }
          }
        }, v.txt);
      });
    return h('p', ayy);
  },
  props: {
    list: {
      type: Array,
      default: () => {
        return this.list || [];
      }
    }
  },
  methods: {
    handelClick: function(item) {
      console.log(item, "item");
    }
  }
});
var vm = new Vue({
  el: "#app",
  data: {
    list: [{
      id: 1,
      txt: 'javaScript',
      odd: true
    }, {
      id: 2,
      txt: 'Vue',
      odd: false
    }, {
      id: 3,
      txt: 'React',
      odd: true
    }]
  }
});

v-model

이전 작성 방법

//HTML
<p id="app">
  <vv-models v-model="txt" :txt="txt"></vv-models>
</p>
//js
//input
Vue.component('vv-models', {
  props: ['txt'],
  template: '<p>\
         <p>看官你输入的是:{{txtcout}}</p>\
         <input v-model="txtcout" type="text" />\
       </p>',
  computed: {
    txtcout:{
      get(){
        return this.txt;
      },
      set(val){
        this.$emit('input', val);
      }
      
    }
  }
});
var vm = new Vue({
  el: "#app",
  data: {
    txt: '', 
  }
});

render는 이렇게 작성했습니다

//HTML
<p id="app">
  <vv-models v-model="txt" :txt="txt"></vv-models>
</p>
//js
//input
Vue.component('vv-models', {
  props: {
    txt: {
      type: String,
      default: ''
    }
  },
  render: function(h) {
    var self=this;
    return h('p',[h('p','你猜我输入的是啥：'+this.txt),h('input',{
      on:{
        input(event){
          self.$emit('input', event.target.value);
        }
      }
    })] );
  },
});
var vm = new Vue({
  el: "#app",
  data: {
    txt: '', 
  }
});

이 사례를 읽어보시고 마스터하신 것 같아요 기사. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Angular에서 페이지의 부분 인쇄를 구현하는 단계에 대한 자세한 설명

vue의 공통 구성 요소 사용에 대한 자세한 설명

위 내용은 Vue 렌더 개발 예시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!