Home
Latest Scripts
Popular Scripts
Contact
Useful Links
Login
Email
Password
Forgot Password ?
New User?
Sign Up here
Categories
Ajax (6)
API (0)
Asp (0)
Asp.net (0)
CSS (1)
Flash (0)
Html (16)
Infusionsoft SDK (1)
Javascript (12)
Jquery (6)
Liquid (Shopify) (0)
Php (19)
Vue JS (6)
WordPress (15)
Xml (3)
js
js
vue js
vue
101scripts
Basic Vue JS
This is a basic Vue JS usage.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .red { border: 1px solid red; } .green { border: 1px solid green; } </style> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="root"> Sign Up<br> <p>{{ email }}</p> <p v-text="email"></p> <p v-html="email"></p> <p v-once>{{ email }}</p> <input v-model="email" :class="[email.length < 2 ? 'red' : 'green']"> <br> <button onclick="alert('Signed up')" :disabled="email.length < 2"> Submit </button> </div> <script> app = new Vue({ el: '#root', data: { email: '' } }) </script> </body> </html>
Rating: 0
Views: 0
Basic Vue JS Loops
Here are some Vue JS Loops
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> </style> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="root"> Loopty-loop <ul> <li v-for="cat in cats">{{ cat }}</li> </ul> <ul> <li v-for="kit in kits">{{ kit.name }} - {{ kit.color }}</li> </ul> </div> <script> app = new Vue({ el: '#root', data: { cats : [ 'kitkat', 'fish', 'henry', 'bosco', 'rasmus' ], kits : [ { name: 'kitkat', color: 'red' }, { name: 'fish', color: 'brown' }, { name: 'henry', color: 'black' }, { name: 'bosco', color: 'white' }, { name: 'rasmus', color: 'spotted' } ] } }) </script> </body> </html>
Rating: 0
Views: 0
Basic Vue JS Function
This is simple Vue JS function usage
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> </style> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="root"> Loopty-loop <input v-model="newCat" v-on:keyup.enter="addKitty"> <button v-on:click="addKitty">+ ADD</button> <button @click="addKitty">+ ADD</button> <ul> <li v-for="cat in cats">{{ cat.name }}</li> </ul> </div> <script> app = new Vue({ el: '#root', data: { cats : [ { name: 'kitkat' }, { name: 'fish' }, { name: 'henry' }, { name: 'bosco' }, { name: 'rasmus' } ], newCat: '' }, methods: { addKitty: function() { this.cats.push({name: this.newCat}) this.newCat = '' } } }) </script> </body> </html>
Rating: 0
Views: 0
Basic Vue JS Filters
This is basic Vue JS filters usage.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> </style> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="root"> Loopty-loop <input v-model="newCat" v-on:keyup.enter="addKitty"> <button v-on:click="addKitty">+ ADD</button> <button @click="addKitty">+ ADD</button> <ul> <li v-for="cat in cats">{{ cat.name | capitalize | kittify }}</li> </ul> </div> <script> app = new Vue({ el: '#root', data: { cats : [ { name: 'kitkat' }, { name: 'fish' }, { name: 'henry' }, { name: 'bosco' }, { name: 'rasmus' } ], newCat: '' }, methods: { addKitty: function() { this.cats.push({name: this.newCat}) this.newCat = '' } }, filters: { capitalize: function(value) { return value.toUpperCase() }, kittify: function(value) { return 'good ' + value } } }) </script> </body> </html>
Rating: 0
Views: 0
Basic Vue JS Computed
This is basic Vue JS Computed usage
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> </style> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="root"> {{ kittifyName }}<br> <input v-model="newCat" @keyup.enter="addKitty"> <button v-on:click="addKitty">+ ADD</button> <button @click="addKitty">+ ADD</button> <ul> <li v-for="cat in cats">{{ cat.name }}</li> </ul> </div> <script> app = new Vue({ el: '#root', data: { cats : [ { name: 'kitkat' }, { name: 'fish' }, { name: 'henry' }, { name: 'bosco' }, { name: 'rasmus' } ], newCat: '' }, methods: { addKitty: function() { this.cats.push({name: this.newCat}) this.newCat = '' } }, computed: { kittifyName: function() { if (this.newCat.length > 1) { return 'good ' + this.newCat } } } }) </script> </body> </html>
Rating: 0
Views: 0
1
2
Next »
Views: 0