00-vue常用语法

vue文件模版

vue2

<template>
  <div>
     vue2页面
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      account: '',
      password: '',
    };
  },
  methods: {
    onSubmit() {
      alert(this.account)
    },
  }
}
</script>

<style scoped>

</style>

vue3非setup

父页面

 <Layer :layer="layer" @getTableData="getTableData" v-if="layer.show" />

子页面

<template>
  <Layer :layer="layer" @confirm="submit" ref="layerDom">
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" style="margin-right:30px;">
      <el-form-item label="名称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入名称"></el-input>
      </el-form-item>
    </el-form>
  </Layer>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { add, update } from '@/api/project'
import { selectData, radioData } from './enum'
import Layer from '@/components/layer/index.vue'
export default defineComponent({
  components: {
    Layer
  },
  //父组件传递过来的props
  props: {
    layer: {
      type: Object,
      default: () => {
        return {
          show: false,
          title: '',
          showButton: true
        }
      }
    }
  },
  //定义data
  setup(props, ctx) {
    const ruleForm= ref(null)
    const layerDom = ref(null)
    let form = ref({
      name: ''
    })
    const rules = {
      name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    }
    init()
    function init() { // 用于判断新增还是编辑功能
      if (props.layer.row) {
        form.value = JSON.parse(JSON.stringify(props.layer.row)) // 数量量少的直接使用这个转
      } else {

      }
    }
    return {
      form,
      rules,
      layerDom,
      ruleForm,
      selectData,
      radioData
    }
  },
  methods: {
    submit() {
      if (this.ruleForm) {
        //校验form
        this.ruleForm.validate((valid) => {
          if (valid) {
            let params = this.form
            if (this.layer.row) {
              this.updateForm(params)
            } else {
              this.addForm(params)
            }
          } else {
            return false;
          }
        });
      }
    },
    // 新增提交事件
    addForm(params) {
      add(params)
      .then(res => {
        this.$message({
          type: 'success',
          message: '新增成功'
        })
        //调用父级的方法
        this.$emit('getTableData', true)
        this.layerDom && this.layerDom.close()
      })
    },
    // 编辑提交事件
    updateForm(params) {
      update(params)
      .then(res => {
        this.$message({
          type: 'success',
          message: '编辑成功'
        })
        this.$emit('getTableData', false)
        this.layerDom && this.layerDom.close()
      })
    }
  }
})
</script>

<style lang="scss" scoped>
  
</style>

vue3的setup语法

父组件和上面的一样，就不写了

<script setup>
import { ElMessage } from 'element-plus';
import Layer from "@/components/layer/index.vue";
import {defineProps, ref,defineEmits} from 'vue'
import { add, update } from '@/api/banner'

// 使用defineEmits来接收来自父组件的方法
const emit = defineEmits(['getTableData'])
// 声明props
const props = defineProps({
  layer: {
    type: Object,
    default: () => {
      return {
        show: false,
        title: '',
        showButton: true
      }
    }
  }
});

//声明变量
const ruleForm= ref(null)
const layerDom = ref(null)
let form = ref({
  name: '',
  url: ''
})
const rules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
}

//声明方法
let submit = () => {
  if (ruleForm) {
    ruleForm.value.validate((valid) => {
      if (valid) {
        let params = form.value
        if (props.layer.row) {
          updateForm(params)
        } else {
          addForm(params)
        }
      } else {
        return false;
      }
    });
  }
}

let updateForm = (params) => {
  update(params)
      .then(res => {
        ElMessage({
          type: 'success',
          message: '编辑成功'
        })
        emit('getTableData', false)
        layerDom && this.layerDom.value.close()
      })
}

let addForm = (params) => {
  add(params)
      .then(res => {
        ElMessage({
          type: 'success',
          message: '新增成功'
        })
        emit('getTableData', true)
        layerDom && layerDom.value.close()
      })
}
</script>

<template>
  <Layer :layer="layer" @confirm="submit" ref="layerDom">
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" style="margin-right:30px;">
      <el-form-item label="名称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item label="url：" prop="url">
        <el-input v-model="form.url" placeholder="请输入url"></el-input>
      </el-form-item>
      <el-form-item label="排序：" prop="sort">
        <el-input v-model="form.sort" placeholder="请输入排序"></el-input>
      </el-form-item>
    </el-form>
  </Layer>
</template>

<style scoped lang="scss">

</style>

for循环

使用 v-for 遍历数组

<template>
  <div id="app">
    <!-- 遍历数组 -->
    <ul>
      <li v-for="(user, index) in users" :key="index">
        用户名: {{ user.name }}, 年龄: {{ user.age }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { name: 'Alice', age: 24 },
        { name: 'Bob', age: 29 },
        { name: 'Carol', age: 35 }
      ]
    };
  }
};
</script>

使用 v-for 遍历对象

<template>
  <div id="app">
    <!-- 遍历对象 -->
    <ul>
      <li v-for="(value, key, index) in user" :key="index">
        {{ key }}: {{ value }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'Diana',
        age: 32,
        location: 'New York'
      }
    };
  }
};
</script>