Vue入门数据驱动摸索（1）

vue作为数据驱动的组件化前端界面库，上手简单。
本文通过以需求为导向的方式，叙述对应需求所需具备的vue知识。

摸索一：页面初始化就需请求数据

vue提供了多个钩子函数，他们对应不同的vue的生命周期，也就是vue实例挂载到DOM的一系列过程。其中created生命周期钩子，对其调用时机为：vue实例被创建之后就会被调用。因此需要实现初始化请求数据，即

 created: function () {
    let self = this;
    self.getData();
  }
  methods:function () {
      getData(){
           /*详细的请求方法*/
      }
  }

methods选项监测数据，将被混入到 Vue 实例中；监听事件等众多逻辑处理均在该方法里编写。

摸索二：数据读写

vue实例需要配置数据观测(data observer)，同时，改写更新数据，也是通过对数据追踪变化来达到目的。vue中的data属性用来达到这个需求目的。

data(){
    return {
        initData: {},
        enough:[]
            }
        },
methods:{
    getData(){
        Dom7.ajax({
            url: 'http://url',
            type: 'get',
            dataType: "json",
            success: function(data){
                this.initData = data.data;
                    }
                })
            }
    
        }

示例数据：this.initData = {"a":1,"b":2,"c":[{"name":""wenyi},{"name":"yuanfang"},{"name":null,"tag":true}]}

DOM元素中

<template>
    <div> {{ initData.a }} </div>
</template>

摸索三：用户点击对DOM的结构调整

例如，用户点击一个按钮，隐藏上述二的这行DOM元素

<template>
　　<div> {{ initData.a }} </div>
　　<div class="js-close" v-on:click="insurClose"></div>
</template>

vue中代码

 methods:{
     insurClose:function () {
        let self = this;
        self.initData.a = '';
    }
 }

摸索四：循环列表中某一行做状态变更

应用场景：提交按钮前，验证所需条件（循环列表的每一行）是否符合规定，不具备则标红提醒；
vue代码

methods:{
    getData(){
        Dom7.ajax({
            url: 'http://url',
            type: 'get',
            dataType: "json",
            success: function(data){
                this.initData = data.data;
                /*初始化不飘红的标志字段，值都为false*/
                self.initData.c.forEach(function (item,index) {
                                self.enough[index] =false;
                            });
                    }
                })
            }
    /** 验证表单*/
    checkForm:function () {
        let self = this;
        let showToast = true;
        self.initData.c.forEach(function (item,index) {
              if(!item.name){
              /*更新数组、对象里的变量需要使用this.$set*/
             self.$set(self.enough, index, true);/*this.enough[i]是不会被检测到的，vue不允许在已经创建的实例上动态添加新的根级响应式属性，this.$set补充了上述不足之处*/
             showToast = false;
             }

        });
        if(!showToast){
           alert('红色部分表示该行不满足条件');
           return false;
         }
           return true;
   }
}

css代码

/*验证各项,缺少时飘红*/
.enough {
   color: red;
}

html代码

/*index为v-for循环的当前索引,由此达到DOM-数据的对应位置*/
<span v-bind:class="{ enough: enough[index] }">人名显示</span>

这是最近刚接触遇到的部分情况，后期持续更新，也期待大家的建议或更广泛的思路。