Utiliser le rendu Vue à partir de zéro

Cette fois, je vais vous montrer comment utiliser le rendu Vue à partir de zéro. Quelles sont les précautions à prendre pour utiliser le rendu Vue à partir de zéro ? Ce qui suit est un cas pratique, jetons un coup d'œil.

Introduction

Lors de l'utilisation de Vue pour le développement, dans la plupart des cas, un modèle est utilisé pour le développement. L'utilisation d'un modèle est simple, pratique et rapide, mais elle est parfois nécessaire. n'est pas très approprié pour utiliser un modèle dans des scénarios spéciaux. Donc, afin de bien utiliser la fonction de rendu, j'ai décidé d'y regarder de plus près. Si vous pensez que ce qui est écrit ci-dessous est incorrect, veuillez le signaler. Votre interaction avec moi est la plus grande motivation pour écrire.

Scénario

Scénario décrit sur le site officiel Lorsque l'on commence à écrire un composant qui génère dynamiquement une balise de titre via un prop de niveau, vous pouvez rapidement penser à l'implémenter comme ceci :

<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
  }
 }
})

Utiliser un modèle dans ce scénario n'est pas le meilleur choix : tout d'abord, le code est verbeux, et afin d'insérer des éléments d'ancrage dans différents niveaux d'en-têtes, nous devons utilisez à plusieurs reprises .

Bien que les modèles fonctionnent très bien dans la plupart des composants, ici, ils ne sont pas très propres. Essayons donc de réécrire l’exemple ci-dessus en utilisant la fonction render :

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

Beaucoup plus simple et plus clair ! Pour faire simple, ce code est beaucoup plus simple, mais il nécessite de bien connaître les propriétés des instances de Vue. Dans cet exemple, vous devez savoir que lorsque vous transmettez du contenu à un composant sans utiliser l'attribut slot, tel que Hello world! dans l'en-tête ancré, ces éléments enfants sont stockés dans $slots.default dans l'instance du composant.

Introduction aux paramètres createElement

La prochaine chose avec laquelle vous devez vous familiariser est la façon de générer des modèles dans la fonction createElement. Voici les arguments acceptés par createElement :

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

Exploration de l'objet de données

Une chose à noter : comme dans la syntaxe du modèle, v-bind : class et v -bind:style seront traités spécialement dans l'objet de données VNode, les noms d'attribut suivants sont les champs de niveau le plus élevé. Cet objet vous permet également de lier des attributs HTML normaux, comme les propriétés DOM, telles que innerHTML (cela remplace la directive 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'
}

Rendu conditionnel

Maintenant que nous sommes familiers avec l'API ci-dessus, faisons quelques combats pratiques.

Avant d'écrire comme ça

//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
  }
});

rendre l'écriture comme ça

//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
  }
});

Rendu de liste

a été écrit comme ça auparavant, et le modèle v-for doit être enveloppé par une balise

//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
    }]
  }
});

le rendu a été écrit comme ceci

//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

La méthode d'écriture précédente

//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: '', 
  }
});

le rendu s'écrit comme ceci

//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: '', 
  }
});

Résumé

La fonction de rendu utilise toutes les capacités de programmation de JavaScript, ce qui présente un avantage absolu en termes de performances. L'éditeur ne fait que l'analyser. Quant au projet lui-même, la méthode que vous choisissez pour le rendu doit encore être déterminée en fonction de votre projet et des conditions réelles.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment json-server génère des données back-end

Explication détaillée de l'utilisation de l'état vuex gestion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!