Scribd
Upload
52 views13 pages

VUE JS 2 Basics

The document provides examples of using Vue.js for different purposes: 1) Displaying and updating data values, 2) Handling user input and events, 3) Generating identicon images from user text input using computed properties. Various Vue directives, methods, and concepts are demonstrated including binding values, updating data, handling clicks and keyboard events, transforming elements based on mouse position, and using computed values. Overall the document serves as a tutorial covering basic usage of Vue.js.

Uploaded by

AL OK
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
52 views13 pages

VUE JS 2 Basics

The document provides examples of using Vue.js for different purposes: 1) Displaying and updating data values, 2) Handling user input and events, 3) Generating identicon images from user text input using computed properties. Various Vue directives, methods, and concepts are demonstrated including binding values, updating data, handling clicks and keyboard events, transforming elements based on mouse position, and using computed values. Overall the document serves as a tutorial covering basic usage of Vue.js.

Uploaded by

AL OK
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

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>`

})

You might also like