Windows预定义阴影画刷学习

文章目录

• 1. < el-form> 属性 model、prop、rules
• 2. v-bind 与 v-model
• 3. v-if 与 v-show
• 4. v-for 循环语句
• 5. 计算属性 computed
• 6. 监视属性 watch
• 7. 下拉框 el-select、el-option
• 8. 自定义事件
• 9. async与await实现异步调用

1. < el-form> 属性 model、prop、rules

<el-form ref="form" :model="form" :rules="rules" label-width="100px">
	<el-form-item label="用户名" prop="name">
    	<el-input v-model="form.name"></el-input>
	</el-form-item>
</el-form>

// 在data/return中定义规则
	form: {
        name: '',//这里是空的但截图有值 因为该项目需要拿取后端传来的用户信息 但不影响阅读
    },

ru
les: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
        ],
}

1. 把model去掉后，看看效果

2. 把prop去掉后，看看效果

3. prop改为address，rules改为address，看看会发生什么

2. v-bind 与 v-model

3. v-if 与 v-show

语法

<标签 v-if="true/false"></标签>

<标签 v-show="true/false"></标签>

<!--true:显示   false:隐藏-->

原理

使用

4. v-for 循环语句

遍历数组元素

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

遍历对象属性

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})
</script>

5. 计算属性 computed

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

6. 监视属性 watch

watch:{
    tipShow(newVal, oldVal){
    	console.log("原始数值为", oldVal);
    	console.log("修改数值为", newVal);
    } 
}

7. 下拉框 el-select、el-option

el-option的属性说明

<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="用户姓名" prop="userId">
        <el-select v-model='queryParams.userId' style="" class="selectClass">
          <el-option v-for='item in userList' 
          			 :key='item.userId'
                     :label="item.nickName" 
                     :value="item.userId">
            {{ item.nickName }}
          </el-option>
        </el-select>
      </el-form-item>
   </el-form>

8. 自定义事件

9. async与await实现异步调用

// 获取待处理事件总数
    async getTotalCount() {
      let taskCount = await this.getTaskList();
      let maintenanceCount = await this.getMaintenanceList();
      let insuranceCount = await this.getInsuranceList();
      this.totalCount = taskCount + maintenanceCount + insuranceCount;
    },

    // 获取待审批任务列表
    async getTaskList() {
      // 构造参数
      let obj = {
        state: 0,
      };
      let data = {
        ...this.page,
        ...obj,
      };

      // 访问后端，获取待审批任务列表
      return new Promise((resolve, reject) => {
        taskList(data)
          .then((res) => {
            if (res && res.data) {
              resolve(res.data.total);
            }
          })
          .catch();
      });
    },

    // 获取保养设备列表
    async getMaintenanceList() {
      let data = {
        ...this.page,
      };

      return new Promise((resolve, reject) => {
        searchMaintenance(data)
          .then((res) => {
            if (res && res.data) {
              resolve(res.data.total);
            }
          })
          .catch();
      });
    },

    // 获取过期设备列表
    async getInsuranceList() {
      let data = {
        ...this.page,
      };

      return new Promise((resolve, reject) => {
        searchInsurance(data)
          .then((res) => {
            if (res && res.data) {
              resolve(res.data.total);
            }
          })
          .catch();
      });
    },