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>vuejs
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>vuejs
<div id="app">
{{ message }}
</div>vuejs
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})vuejs
// 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>vuejs
const CounterApp = {
data() {
return {
counter: 0
}
},
mounted() {
setInterval(() => {
this.counter++
}, 1000)
}
}vuejs
<div id="app-2">
<span v-bind:title="message">
Hover your mouse over me for a few seconds
to see my dynamically bound title!
</span>
</div>Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
