vue3.0的使用心得
记录:
代码:
<template> <div> 结果: <input type="text" :value="ret" > <button @click="add">添加</button> <br> <input type="text" v-model="num" > <button @click="addNum">添加指定数字</button> <br> 信息:<span>{{tip}}</span> </div> </template> <script> import { ref, onMounted, watch,computed } from 'vue' export default { props: { msg: { type: String, required: true } }, data() { return { num: 0 } }, methods: { /** * 添加 */ add() { this.addMth(); console.log(this.ret) }, /** * 添加指定数字 */ addNum() { this.addNumMth(this.num); console.log(this.ret) } }, /** * 公共的方法可以放在这里还有一些公共的变量 */ setup(props, context) { console.log(props, context) //这里的ref如果去掉的话,每次添加就不能再记住之前的值,就不能再成为一个响应式的变量,可以去掉ref试试变化 let ret = ref(1); //这里面可以放钩子 onMounted(() => { console.log('欢迎使用计算器') }) //这里可以放监听 watch(ret, (value, oldvalue) => { console.log(`ret被修改了,之前是${oldvalue},现在是${value}`) }) //使用计算属性做的一个提示信息字段 const tip = computed(()=>`小明应该支付${ret.value}元`) // 这里返回的任何内容都可以用于组件的其余部分 const addMth = () => { ret.value++; } //带参数的方法使用方法 const addNumMth = (num) => { ret.value += parseFloat(num); } return { addMth, addNumMth, ret, tip } } } </script> <style lang='scss' scoped> </style>
积累小的知识,才能成就大的智慧,希望网上少一些复制多一些原创有用的答案