Skip to content

Instantly share code, notes, and snippets.

@mmfilesi
Created March 20, 2017 19:16
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save mmfilesi/21a6b68dfd28097e260cf96ad6444139 to your computer and use it in GitHub Desktop.
vue js (2)
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>vue</title>
<script src="js/vendor/vue.js"></script>
</head>
<body>
<div id="foo">
<p>{{ greetingsSaturn }}</p>
<button v-on:click="setGreetings()">set greeting</button>
</div>
<script>
var foo = new Vue({
el: '#foo',
data: {
greetings: 'Hello World!'
},
computed: {
greetingsSaturn: function() {
return this.greetings.replace('World', 'Saturn').toUpperCase();
}
},
methods: {
setGreetings: function() {
this.greetings = 'By World!';
}
},
watch: {
greetings: function(newVal) {
var xhr = new XMLHttpRequest();
var self = this;
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
self.greetings = JSON.parse(xhr.responseText).data;
}
};
xhr.open('GET', 'bar.json', true);
xhr.send();
}
},
mounted: function() {
console.log('todo listo');
},
updated: function() {
console.log('cambiado!')
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment