vue声明形式
來自Vue2的代碼引用格式和實際應用一
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>elementary my dear wahson</title> </head> <body><div id="app"><!-- 開發環境版本，包含了有幫助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><input type="button" value="Photo behind the wall" @click="changeisshow"><p v-show="msg" @click="changeagain">maybe you could see...</p></div><script>var app = new Vue({el:"#app",data:{msg:false,},methods:{changeisshow:function(){this.msg = !this.msg;if (this.msg){alert('really?')}},changeagain:function(){this.msg = !this.msg;if (this.msg!=1){alert('--Your Irene.')}}},})</script> </body> </html>來自Vue2的代碼引用格式和實際應用二
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>elementary my dear</title></head><body><script src="https://unpkg.com/vue@next"></script><div id="app"><p v-model="msg">{{msg}}</p><button @click="brand">James</button><button @click="site">Sherlock</button></div><script>const app = Vue.createApp({data(){return{msg:''}},methods:{brand(){this.msg = "cache me";that = this.msg},site(){this.msg = "if you can";alert("holmes,")},},})const vm =app.mount('#app');</script> </body> </html>官網的實際引入
const app ={data(){return{members:[{id:'link1',name:'連接栗子球',atk:100},{id:'link2',name:'逆卷之水靈使',atk:1500},{id:'link3',name:'轉碼語者',atk:2300},{id:'link4',name:'訪問碼語者',atk:2400}]}},methods:{},} Vue.createApp(app).mount('#app')要點：
在vue3中，data必須是函數，但是定義method使并沒有這個要求
從const app到app.mount的部分是viewmodel
data是model
body是視圖
總結
- 上一篇： OCP考试
- 下一篇： html5倒计时秒杀怎么做,vue 设