vue lezioni

by Francesco Frustaci

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id="app">

<input type="text" v-on:input="ChangeInput">
<p>{{title}}</p>
<p>{{sayHello()}}
<a v-bind:href="link">Link</a>
</p>
<h1 v-once> 
{{title}}<!--data originale -->
</h1>
<hr>
<p>
{{finishedLink}}<!--renderizza come testo -->
<hr>
<p v-html="finishedLink">vue 
</p>
</p>
</div>

JavaScript

new Vue({
	el:'#app',
  data:{
  	title:'hello',
    link:"http://google.com",
    finishedLink:'<a href="http://google.com">google</a>'
  },
  methods:{
  	ChangeInput: function(event){
     this.title = event.target.value;
     
    },
    sayHello: function(){
    if(this.title!='hello'){
    return 'Hello ' +this.title; 
    }
    else{
    	return this.title; 
    }
    }
    
  }
});