vue 学习笔记

1：通过方法返回值动态绑定class

templete

:class="{passLineColor:passLineColor(index,datas),refuseLineColor:refuseLineColor(index,datas)}"

 methods

passLineColor(index, datas) {
      return this.checkState(index, datas, "已通过");
    },

checkState (index, datas, state) {
      let length = datas.length - 1;
      if (index !== length) {
        if (datas[index + 1].state == state) {
          return true;
        } else {
          return false;
        }
      }
    }

2：深度监听

immediate: true   立即执行

deep: true   深度监听

watch: {
      curRoleData :{
        handler (val) {
          this.fillFrom();
        },
        // immediate: true
        deep:true
      }
    },

2：父向子组件传值

父组件：

<DeleteDialog
            :deleteDialogVisible="deleteDialogVisible"
            :id="curRoleData.id"
            @hideDeleteDialog="hideDeleteDialog"
            @deleteRole="deleteRole"
        ></DeleteDialog>

子组件

props: {
            deleteDialogVisible: {
                type: Boolean 
            },
            id: {
              type: Number
            }
        },

3：element-ui 使用

main.js

import {
  Radio,
  RadioGroup,
  Scrollbar,
  Table,
  TableColumn,
  Loading,
  Icon
} from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Scrollbar);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Loading);
Vue.use(Icon);

组件中使用

<el-radio-group v-model="radio" @change="changeLayer">
  <el-radio v-for="(layer,index) in layers" :label="layer.id" :key="index" >{{layer.name}}</el-radio>
</el-radio-group>

4：父组件中注册变量供子组件调用 provider、inject

父组件：

 provide: {
    getMap() {
      return map;
    }
  },

子组件：

inject: ['getMap'],

子组件使用：

const map = this.getMap();

5、计算属性与函数的区别

        计算属性：计算属性将基于他们的响应依赖关系缓存，只会在相关响应式依赖发生改变时重新求值

        函数：每当触发重新渲染时，调用方法将始终会再次执行函数。