| | |
| | | <template> |
| | | <div>hello test page{{content}}</div> |
| | | <div>{{data.a}}</div> |
| | | <button @click="butclick">点击</button> |
| | | <div class="test"> |
| | | {{a}} |
| | | <button @click="actionA">点我呀</button> |
| | | </div> |
| | | </template> |
| | | <script lang="ts" setup> |
| | | import {ref,reactive,watchEffect,watch} from 'vue' |
| | | const data=reactive({ |
| | | a:'chenyinc', |
| | | h:'dadsad' |
| | | }) |
| | | const butclick=()=>{ |
| | | data.a='你好' |
| | | content.value='haha' |
| | | } |
| | | const content=ref('content') |
| | | watchEffect(()=>{ |
| | | const x1=data.a |
| | | console.log('watchEffect所指定的回调执行了',x1) |
| | | }) |
| | | watch(content,(newValue,oldValue)=>{ |
| | | console.log(newValue,oldValue,'变化了') |
| | | }) |
| | | import usePage from './vuetool/index.js' |
| | | const {a,actionA} = usePage() |
| | | |
| | | </script> |
| | | <style> |
| | | .paibanclass { |
| | | background: rgb(228, 231, 225); |
| | | color: #00f; |
| | | } |
| | | </style> |
| | | |