Vue3 简单使用
Vue3 简单使用
引入 vue.global.js 后开始用
<div id="app"></div> <script src="./vue.global.js"></script> <script> const app = Vue.createApp({ setup(propos,context) { return { msg:"hello world" }; }, template:` <div>{{msg}}</div> ` }).mount("#app") </script>
<div id="app"> <div>{{msg1}}___{{msg2}}___{{msg3}}___{{msg4}}</div> </div> <script src="./vue.global.js"></script> <script> const app = Vue.createApp({ setup(propos, context) { let msg1 = "hello world"; let msg3 = Vue.ref("fei22"); const {ref} = Vue; let msg4 = ref("fei33"); return { msg1, msg2:"daFei", msg3, msg4 }; }, }).mount("#app"); </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div id="app"> <div>{{msg4}}</div> <button @click="updateFei">更新</button> </div> <script src="./vue.global.js"></script> <script> const {ref} = Vue; const app = Vue.createApp({ setup(propos, context) { // const {ref} = Vue; let msg4 = ref(1); function updateFei() { msg4.value = msg4.value + 1; } return { msg4, updateFei }; }, }).mount("#app"); </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div id="app"> <div> <p>{{msg4.name}}</p> <p>{{msg4.web.name3}}</p> </div> <button @click="updateFei">更新</button> </div> <script src="./vue.global.js"></script> <script> const {reactive} = Vue; const app = Vue.createApp({ setup(propos, context) { let msg4 = reactive({ name:"daFei", age: 18, web:{ name:"HTML", name2:"CSS", name3:"JavaScript", } }); function updateFei() { msg4.name = msg4.name + "_1"; msg4.web.name3 = msg4.web.name3 + "_1"; } return { msg4, updateFei }; }, }).mount("#app"); </script>
全局变量使用
app.config.globalProperties.$fei = "我是全局变量"; // 访问全局变量 import {onMounted, getCurrentInstance} from 'vue' getCurrentInstance().appContext.config.globalProperties.$fei
父组件调用子组件
其他