VUE JS 2 Basics

Beginning steps :

Html

<div id =”app” >

<p> {{hello}}

</div>

Code :

new Vue({

el : “#app”,

data : {

title: “the title goes here”

})

Program 2

<input value =”text” v-on:input=”changeTitle”>

<div id=”alok”>

<h1>{{title}}</h1>

</div>

Code
new Vue({

el : ‘#alok’,

data : {

title: “hello buddy”

methods : {

changeTitle: function(event)

this.title = event.target.value

Program 3

<div id =”app”>

{{sayHello()}}

</div>

new Vue({

el : ‘#app’,

methods : {

sayHello : function() {

return a+b

}
}

Access the data in the vuejs instance

Program 4

<div id=”app”>

{{sayHello()}}

</div>

new Vue({

el : ‘#app’,

data : {

title: “the hello”

}, methods : {

sayHello : function() {

return this.title

Program 5

Binding the directives

<div id=”app”>

<p>{{sayHello()}}</p> <a v-bind:href=”link”></a>

</div>

new Vue({

el : ‘#app’,

data : {

title: ‘Hello’,

link : ‘https://google.com”

}, methods : {

sayHello() :function() {

return this.title

Re-rendering the same content

<div id=”app”>

<h1>{{title}}</h1>

<p>{{sayHello()}}</p>

<a v-bind:href=”link”>Google</a>

<hr>

<p v-html=”finishedLink”></p>
</div>

Handling Keyboard events with vue2.js

<div id=”app”>

<p>{{counter}}</p>

<button v-on:click=”increase”>Increase</button>

</div>

new Vue({

el : ‘#app’,

data: {

counter: 0

}, methods : {

Increase:function() {

this.counter++;

})
Example -1

Code

new Vue({

el : '#app',

data : {

title:'Hello Title',

link:'https://google.com',

counter:0,

finishedLink:'<a href="https://www.zapak.com">Zapak</a>'

}, methods : {

sayHello : function(){

this.title='hello'

return this.title

},

increase: function(){

return this.counter++

}
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">

<h1 v-once>

{{title}}

</h1>

<p>

{{title}}

</p> <a v-bind:href="link">Google</a>

<p v-html="finishedLink">

Click

</p>

<button v-on:click="increase">

Increase

</button>

<p>

{{counter}}

</p>

</div>
Stephen Grider

html

<div id="root" @mousemove="onMouseMove">

<div :style="styleOne"> </div>

<div :style="styleTwo"></div>

</div>

</div>

Js

new Vue({

el : '#root',

data : {

styleOne : {},

styleTwo : {}

}, methods : {

onMouseMove(event){

this.styleOne = transform(-event.clientX / event.clientY)

this.styleTwo = transform(event.clientX / event.clientY)

})

function transform(offset) {
 const cos = Math.cos(offset);

const sin = Math.sin(offset);

return { transform: `matrix3d(${sin}, ${-cos}, ${sin}, 0, ${-cos}, ${sin}, 0, 0, 0,

${cos}, ${cos}, ${sin}, 0, 0, 0, 1)` };

Css

#root {

height: 100vh;

width: 100vw;

#root div {

position : absolute;

height: 100%;

width: 100%;

box-shadow : 0 0 50px grey;

background-url: (;')

}
Imperative coding practice : listing out what exactly we need to do

Declarative : Mainly includes laying out the initial states and apply set of rules

Program 2

Vue.js Code

new Vue({

el : '#app',

data :{ //Initalize the

},

computed : {

},

methods : { // use these functions to change the data

onInput : function(event) {

console.log('something was typed ou t'+ event.target.value)

})

Html code

<div id="app">

<h3>My Identicon Generator</h3>

 <div>

Input:

<input v-on:input="onInput" />

</div>

<div>

Output

</div>

</div>

Identicon Generator with compute values

html

<div id="app">

</div>

Vue.js

new Vue({

el : '#app',

data :{ //Initalize the

textInput:''

},
computed : {

identicon : function(){

return jdenticon.toSvg(this.textInput,200)

},

methods : { // use these functions to change the data

onInput : function(event) {

this.textInput = event.target.value;

},

template :

` <div>

<h3>My Identicon Generator</h3>

<div>

<input v-on:input="onInput" />

</div>
 <div>

Output

<div v-html="identicon"/>

</div>

</div>`

})