<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>A Pen by Daria</title>
</head>
<body>
<div id="app1">
<h1 ref="heading">{{ title }}</h1>
<button v-on:click="show" ref="myButton">Show Paragraph</button>
<p v-if="showParagraph">This is not always visible</p>
<hello></hello>
</div>
<div id="app2">
<h1>{{ title }}</h1>
<button @click="onChange">Change something in Vue1</button>
<hello></hello>
</div>
<div id="app3">
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/DM_Daria/a-pen-by-daria-QmMbyv */
Vue.component('hello', {
template: '<h1>Hello!</h1>'
});
var vm1 = new Vue({
el:'#app1',
data:{
title: 'The VueJS Instance',
showParagraph: false
},
methods: {
show: function() {
this.showParagraph = true;
this.updateTitle('The VueJS Instance (Updated)');
this.$refs.myButton.innerText = 'Test';
},
updateTitle: function(title) {
this.title = title;
}
},
computed: {
lowercaseTitle: function() {
return this.title.toLowerCase();
}
},
watch: {
title: function(value) {
alert('Title changed, new value: ' + value)
}
}
});
//vm1.$mount('#app1');
vm1.$refs.heading.innerText = 'Something else';
setTimeout(function() {
vm1.title = 'Change by Timer';
vm1.show();
}, 3000);
var vm2 = new Vue({
el: '#app2',
data: {
title: 'The second Instance'
},
methods: {
onChange: function() {
vm1.title = 'Changed!';
vm1.show();
}
}
});
var vm3 = new Vue({
el: '#app3',
template: '<h1>Hello!</h1>'
});
//vm3.$mount();
//document.getElementById('app3').appendChild(vm3.$el);
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Vue js
v2.5.13
