Vue ចាប់ដើមដំបូង

យើងរៀនដំបូង យើងបង្កើត 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;
}
Tags
Reactions

Post a Comment

0 Comments