探索Vue.jscomponent内容实现

为了避免对整个列表进行渲染，经常会使用：track-by = "$index"，表示只对当前数组元素进行操作。　　

至此，关于Vue的最基本的东西已经介绍完，需要更多的API资料可以参考： http://cn.vuejs.org/api/ 

Vue文件的结构以及数据流的控制

在vue文件中，我们经常可以看到这样的格式：

<template>
    <div> </div>
</template>
  
<script>
    export default{
       data(){ ...
       },
       methods:{ // 自定义方法，可对data进行处理
          method1(){ ... }
          ...    
       },
       components: { ... }
       vuex: {
          getters:{ // 获取store的数据
            questionnaire: state => state.currentQuestionnaire
          }
          actions: { //用来分发数据容器store中mutations方法
            action1(){ dispatch("SET_QUEST", item) } // dispatch用来调用父组件store的"SET_QUEST"方法
            action2(){ ... }
       }
       directives: {
          'my-directive': {
            bind: function(){ //钩子函数，只调用一次，在指令第一次绑定到元素上时调用 }
            update: function(newValue, oldValue) { //钩子函数，在bind之后以初始值为参数第一次调用，之后每当绑定至变化时调用 }
            unbind: function(){ //钩子函数，只调用一次，在指令从元素上解绑时调用 }
          }
       } 
　　　　　　　　　　// 自定义指令，在<template>中以<div v-my-directives = ""> 方式调用   
     }
</script>
  
<style>  </style>

在methods中经常使用到“this”关键字，该关键字指向Vue组件实例。

event.target: 触发事件的具体控件，不产生冒泡作用，是谁就是谁，这个在锁定事件触发的控件时经常用到，比如：

<div @click.stop = "addItem($event)">
   <span data-type = "radio">单选题</span>
   <span data-type = "checkbox">多选题</span>
   <span data-type = "textarea">文本题</span>
</div>
  
<script>
   export default{
      method: {
          addItem(event){
             let target = event.target
             if(target.nodeName.toLowerCase() === 'span') { // 当点击了选择的按钮后
                this.showMask = true  // 显示弹出框
                this.questItem.type = target.dataset.type  // 设置问题的类型
             }
      }
   }
</script>

最后讲讲this.$els: 一个对象，包含注册有v-el的DOM元素

<div class = "promt-header">
  <div>
     <label> 问题名称： </label>
     <input type = "text", placeholder = "请输入标题" v-el: item-title/>
  </div>
</div>
<div class = "promt-footer" @click.stop = "handleInput(&event)">
   <button type = "button" data-operation = "confirm"> 确定 </button>
   <button type = "button" data-operation = "cancel"> 取消 </button>
</div>
  
<script>
   methods: {
        handleInput(event) {
          let target = event.target
          if(target.nodeName.toLowerCase() !== 'button') {
            return
          }
          let itemTitle = this.$els.itemTitle
          let itemSelections = this.$els.itemSelections
          if(target.dataset.operation === "confirm") {
            if(this.questItem.type === "textarea") {
              this.addTextarea(itemTitle)
            } else {
              this.addSelections(itemTitle, itemSelections)
            }
          } else {
            this.handleCancel()
          }
        },
   }
</script>

上面的代码是不完整的，但是可以看到，v-el把该控件挂载在一个名字为"item-title"的实体中，我们可以通过this.$els.itemTitle将其提取出来

要使用该控件的属性值（输入值），可以这样：

this.$els.itemTitle.value

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。

更多探索Vue.jscomponent内容实现相关文章请关注PHP中文网！