vue3的用法

vue3的用法

1.创建vue项目

npm i vite-app <obj name>

cd <obj name>

npm i

npm dev

2.响应式

<template>
  <div>
    <div>{{ data.num }}</div>
    <div>{{ data.setnum }}</div>
    <ul>
      <li v-for="(item, index) in sum" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>


<script>
// reactiv 创建响应式的对象
// computed 计算属性
// ref 声明单个数据
// 声明周期函数


import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
export default {
  name: "HelloWorld",
  setup() {
    let time;
    const data = reactive({
      num: 20,
      setnum: computed(() => {
        return data.num * 10;
      }),
    });


    onMounted(() => {
      // console.log(7790);
      // setInterval(() => {
      //   data.num++;
      // }, 1000);
    });
    onUnmounted(() => {
      clearInterval(time);
    });
    // sum相关
    const sum = ref([1, 2, 3]);


    return {
      data,
      sum,
    };
  },
};
</script>

3.绑定ref 方法外置

<template>
  <div>
    <div>{{ num }}</div>
    <div>{{ setnum }}</div>
    <p ref="abc"></p>
  </div>
</template>


<script>
// reactiv 创建响应式的对象
// computed 计算属性
// ref 声明单个数据
// 声明周期函数


import {
  ref,
  reactive,
  computed,
  onMounted,
  onUnmounted,
  toRefs,
  watch,
} from "vue";
export default {
  name: "HelloWorld",
  setup() {
    const { num, setnum } = usenum();
    const abc = ref(null);
    watch(num, (val, olv) => {
      let p = abc.value;
      p.textContent = "展示柜";
    });


    return {
      setnum,
      num,
      abc,
    };
  },
};
function usenum() {
  let time;
  const data = reactive({
    num: 20,
    setnum: computed(() => {
      return data.num * 10;
    }),
  });
  onMounted(() => {
    // console.log(7790);
    // setInterval(() => {
    //   data.num++;
    // }, 1000);
  });
  onUnmounted(() => {
    clearInterval(time);
  });
  return toRefs(data);
}
</script>

3.teleport

<template>
  <div>
    <button @click="add = true">点击</button>
    <teleport to="body">
      <div v-if="add">
        885732
        <button @click="add = false">点击</button>
      </div>
    </teleport>
  </div>
</template>


<script>
export default {
  data() {
    return {
      add: false,
    };
  },
};
</script>


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

4.emits
子组件

<template>
  <div @click="$emit('click')">emit事件</div>
</template>


<script>
export default {
  emits: ["click"],
};
</script>


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

父组件

<template>
  <div>
    <!-- <div>{{ num }}</div>
    <div>{{ setnum }}</div> -->
    <!-- <p ref="abc"></p> -->
    <!-- 模态框 -->
    <!-- <modButton></modButton -->
    <Ems @click="add"></Ems>
  </div>
</template>


<script>
// reactiv 创建响应式的对象
// computed 计算属性
// ref 声明单个数据
// 声明周期函数


import {
  ref,
  reactive,
  computed,
  onMounted,
  onUnmounted,
  toRefs,
  watch,
} from "vue";
import modButton from "./module.vue";
import Ems from "./emits.vue";
export default {
  name: "HelloWorld",
  components: { modButton, Ems },
  // setup() {
  //   const { num, setnum } = usenum();
  //   const abc = ref(null);
  //   watch(num, (val, olv) => {
  //     let p = abc.value;
  //     p.textContent = "展示柜";
  //   });


  //   return {
  //     setnum,
  //     num,
  //     abc,
  //   };
  // },
  methods: {
    add() {
      console.log(5555);
    },
  },
};
function usenum() {
  let time;
  const data = reactive({
    num: 20,
    setnum: computed(() => {
      return data.num * 10;
    }),
  });
  onMounted(() => {
    // console.log(7790);
    // setInterval(() => {
    //   data.num++;
    // }, 1000);
  });
  onUnmounted(() => {
    clearInterval(time);
  });
  return toRefs(data);
}
</script>

5.vue父子组件传值

5.1父传子(绑定属性)
1.引入组件

import Lose from "@web-components/watercraft/lose";

2.注册组件

components: {
    Lose
  },

3.使用组件

<template>
<lose :stype="3" :mmsi="mmsi"></lose>
<template>

4.子组件调用

<template>
  <div class="loose_dev">
    <div class="psc_top">{{ titles }}</div>
    <div class="Speed_dev">
      <div v-html="SppedasynStr"></div>
    </div>
  </div>
</template>
<script>
import {
  onMounted,
  reactive,
  toRefs,
  watch,
  ref,
  computed,
  getCurrentInstance
} from "@vue/composition-api";
export default {
  name: "Speed",
  props: ["mmis", "stype"],
  components: {},
  setup(props, context) {
    const instance = getCurrentInstance();
    const state = reactive({
      SppedasynDatas: [], //航速异常
      SppedasynStr: "",
      titles: "",
    });
    
    onMounted(() => {
         console.log(props.mmsi)
    });
    return {
      ...toRefs(state)
    };
  }
};
</script>


<style scoped lang="scss">
.psc_top {
  width: 100%;
  height: 25px;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #01032d;
  line-height: 25px;
}
.c-ship-seaman__table {
  border-radius: 10px;
  width: 95%;
  margin: auto;
}
::v-deep.el-table .warning-row {
  background: #e9eef9;
}
.tab_dev {
  width: 100%;
  padding-top: 10px;
  background: #fff;
  border-radius: 10px;
}
::v-deep.el-table tr {
  border-radius: 10px;
}
::v-deep.c-dialog__title {
  .PSC_dev {
    float: left;
  }
  .c-dialog__title--actions {
    float: right;
  }
}
.loose_dev {
  height: 90px;
  padding: 20px;
  margin-right: 20px;
  margin-left: 20px;
  margin-top: 20px;
  border-radius: 10px;
  background: #f4f9fe;
}
</style>