យើងរៀនដំបូង យើងបង្កើត project ធម្មតាមករៀនដោយយើងបង្កើត file មានដូចជា html javaScript និង css
html
<title>Document</title>
</head>
<body>
<div id="app">
<!-- {{write code at here}} -->
</div>
<!-- CDN Vue-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!--Import File app.js យើងមកប្រើ-->
<script src="app.js"></script>
</body>
</html>
app.js
Vue.createApp({}).mount('#app')
Hello World
យើងបង្ហាញអក្សរដំបូងនៅ browser ជាមួយ Vue
html
<body>
<div id="app">
{{ hi }}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="app.js"></script>
</body>
app.js
Vue.createApp({
data(){
return{
hi: "Hello World"
}
}
}).mount('#app')
Update value ជាមួយ VM
vm យើងហៅថា vue model សម្រាប់ update value
html
<body>
<div id="app">
{{ hi }}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="app.js"></script>
</body>
app.js
const vm = Vue.createApp({
data(){
return{
hi: "Hello World"
}
}
}).mount('#app')
setInterval(()=>{
vm.hi = "Hello Ros Dul for start studying Vue"
},2000)
វិធីបង្ហាញ multi value
File index.html
<body>
<div id="app">
{{firstName}}
{{lastName}}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="app.js"></script>
</body>
</html>
File app.js
const vm = Vue.createApp({
data(){
return{
firstName: "Ros",
lastName: "Dul"
}
}
}).mount('#app')
យើងអាចធ្វើបានច្រើនរបៀបបាន seperate ដើម្បីងាយស្រួងក្នុងការធ្វើវា
File app.js
<body>
<div id="app">
{{ `${firstName} ${lastName.toUpperCase()}` }}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="app.js"></script>
</body>
ប្រើ methods:
File index.html
<body>
<div id="app">
{{ fullName }}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="app.js"></script>
</body>
File app.js
Vue.createApp({
data(){
return{
firstName: "Ros",
lastName: "Dul"
}
},
methods:{
fullName(){
return `${this.firstName} ${this.lastName.toUpperCase()}`
}
}
}).mount('#app')
Directive
directive គឺជាបិទ dom html នៅពេលអ៉ីនធើណែតដើរយឺតហើយវាលូតមកកូដ វាដូចរូបភាពខាងក្រោម
ដូចនេះយើងត្រូវបិទវា ហើយនេះវិធីបិទវា
v-cloak
File index.html
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id="app" v-cloak>
{{ fullName() }}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="app.js"></script>
</body>
File style.css
[v-cloak]{
display: none;
}
0 Comments