vuejs
// Basic VueJS Example Template
<template>
<div class="myClass" ref>
<slot></slot>
</div>
</template>
<script>
export default {
data() {
return {
myData: "Hello World!"
}
},
mounted() {
this.myMethod();
},
methods: {
myMethod() {
console.log(this.myData);
}
}
}
</script>
<style scoped>
.myClass {
padding: 1em
}
<style>
3.89
9
// file name: index.vue
// structure for vue 2
<template>
// HTML code
// within one element for vue2
</template>
<script>
// js code
export default {
components: {
// vue component to use in html
},
data () {
return{
// all global variables should be declear here
// this.varName to access variable
randomVar: 12,
randomVar2: "Suman"
}
},
computed:{
// act as variable
// syntex will be same as function
// return value will be stored
},
methods: {
// all global function should be declear here
// you can use all js syntex here
},
mounted (){
// all other js code to be execuated here (my suggestion)
// this is a part of "vue-lifecycle"
// for more details:
// https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
}
}
</script>
<style scoped>
// css code
// scoped will enclose all css code within this vue file
</style>
Thank you!
9
0
0
0
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
Thank you!
0
0
4.4
5
const CounterApp = {
data() {
return {
counter: 0
}
},
mounted() {
setInterval(() => {
this.counter++
}, 1000)
}
}
Thank you!
5
0
4.22
9
<div id="app">
{{ message }}
</div>
Thank you!
9
0
3.67
3
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
Thank you!
3
0
4
6
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
Thank you!
6
0
4
5
Best front framework ! :)
Thank you!
5
0
4.13
8
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
Thank you!
8
0
5
1
<script src="https://unpkg.com/vue@next"></script> # CDN Version
# NPM or Yarn Version
npm install vue@next
#Vue 3 CLI Installation
yarn global add @vue/cli
# OR
npm install -g @vue/cli
# Vue CLI Create Project
vue create my-project
Thank you!
1
0
Are there any code examples left?
New code examples in category Other
-
Other 2023-03-27 22:50:10 how to select the whole line in vscode with keyboard shortcut
-
Other 2022-03-27 22:45:24 income of a web developer
-
Other 2022-03-27 22:35:01 \pyrcc_main.py: File does not exist 'resources.qrc'
-
Other 2022-03-27 22:30:45 rick roll embed code
-
Other 2022-03-27 22:20:08 Circuit_04_Potentiometer
-
Other 2022-03-27 22:20:05 iterative power
-
Other 2022-03-27 22:15:11 flutter run all
-
Other 2022-03-27 22:10:05 when is karlson release
-
Other 2022-03-27 22:10:02 wp .htaccess example
-
Other 2022-03-27 22:00:08 bash pause in file read line by line