You can get vue.js file from vue.js website. you only have to include vue.js script link on your file and also you can include vue.js file CDN directly.
Below I have included some basic examples of vue.js with comments and there i have written vue.js scripts seperately and you can try it step by step easily and also you can check just copying whole file directly and check it on your browser.
You just have to learn .and know the functionality like Directives, V-Bind, Looping With V-For Directives, V-Model, Event Handeling, Computed properties, Getter And Setter especially on vue.js.
Here are the Some examples You can check and learn by practically.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other
head content must come *after* these tags -->
<title>vuejs</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com
/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/
K68vbdEjh4u" crossorigin="anonymous">
<style>
[v-cloak] {
background-color: aqua;
}
</style>
</head>
<body>
<div id="app">
<h1 v-bind:title="title">{{message}}</h1>
<img :src="url" v-bind:alt="title" v-bind:title="title"/>
</div>
<hr>
<div id="arab">
<h1 style="color: chocolate"><strong> {{level}} </strong> </h1>
<hr>
<h1>Current<x>Xp: {{ xp }}</x></h1>
<div class="container">
<button type="button" class="btn btn-info" @click="addXp">ADD Xp</button>
<button type="button" class="btn btn-info" @click="decreaseXp">decrease Xp</button>
</div>
</div>
<hr>
<div id="appu" class="container">
<ul>
<li>fname: {{fname}}</li>
<li>lname: {{lname}}</li>
</ul>
<h1>Your Full Name: {{fullname}}</h1>
<div class="col-md-12">
<div class="form-group">
<label for="fname">Full name:</label>
<input type="text" class="form-control" id="fname" v-model="fullname">
</div>
<form>
<div class="form-group">
<label for="fname">F name:</label>
<input type="text" class="form-control" id="fname" v-model="fname">
</div>
<div class="form-group">
<label for="lname">L name</label>
<input type="text" class="form-control" id="lname" v-model="lname">
</div>
</form>
</div>
</div>
<hr>
<!--model bounding-->
<div id="app4">
<h1 style="color: mediumvioletred">{{ message}}</h1>
<p> Visit:<a v-bind:href="url">{{ cleanUrl }}</a> </p>
<input type="text" class="form-control" v-model="url" />
<button @click="humanizeUrl" class="btn btn-warning">Humanize Me!</button>
<hr>
<h1>{{ message}}</h1>
<h1>Count: {{ count }}</h1>
<input type="text" v-model="message" />
<button @click="countUp" class="btn btn-primary">With @ sign!</button>
<button v-on:click="countUp" class="btn btn-primary">Click Me!</button>
<button v-on:click="countDown" class="btn btn-warning">Click Me!</button>
<button @click="countDown" class="btn btn-warning"> with @ sign .Click Me!
</button>
</div>
<!--modal end-->
<!--loopping -->
<div id="app3">
<h1>{{ message }}</h1>
<ul>
<li style="list-style-type:none;" v-for="todo in todos">{{todo.id}})
{{todo.text}}</li>
</ul>
</div>
<!--directive -->
<div id="app1">
<h1 v-text="message"></h1>
<h1 v-html="intro"></h1>
<h1 v-show="viewed"> you have viewed this one</h1>
<h1 v-if="viewed"> you have viewed this one</h1>
<h1 v-else> you have not viewed this one</h1>
<h1 v-pre="viewed"> {{ message }}</h1>
<h1 v-once> {{ message }} </h1>
<h1 v-cloak> {{ message }} </h1>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/
jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual
files as needed -->
</body>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: "hello1 vue world",
title: "yeah this gives time too!" + new Date(),
url: "http://011.vuejs.org/images/logo.png",
}
})
</script>
<script>
var app = new Vue({
el: '#app4',
data: {
message: "hello appu",
url: "",
cleanUrl: "",
count: 0
},
methods: {
countUp: function() {
this.count+= 1
},
countDown: function() {
this.count-= 1
},
humanizeUrl: function() {
this.cleanUrl =
this.url.replace(/^https?:\/\//,'').replace(/\/$/, '')
}
}
})
</script>
<script>
var app = new Vue({
el: '#app3',
data: {
message: "hello1 vue world",
todos: [
{text: 'loop here', id: 1 },
{text: 'love icecream', id:2 },
{text: 'love holand', id:3}
]
}
})
</script>
<script>
var app = new Vue({
el: '#app1',
data: {
message: 'hello vue world',
intro: "Welcome to the view demo<small>
it is all about vue.js</small>",
viewed: true,
viewed2: true
}
})
</script>
<script>
var app = new Vue({
el: '#appu',
data: {
fname: '',
lname: ''
},
computed: {
fullname: {
//getter function
get: function() {
return this.fname +" "+ this.lname
},
//setter function
set: function(value) {
var name = value.split(' ')
this.fname = name[0]
this.lname = name[name.length - 1]
}
}
}
})
</script>
<script>
var app = new Vue({
el: '#arab',
data: {
xp:10
},
methods: {
addXp: function() {
return this.xp +=10
},
decreaseXp: function() {
return this.xp -=10
}
},
computed: {
level: function() {
if (this.xp >= 200) {
return "pro"
} else if (this.xp >=100) {
return "medium"
} else if (this.xp >= 0) {
return "beginner"
} else {
return "jamuji"
}
}
}
})
</script>
</html>
No comments:
Post a Comment