A Pen by Daria

Thumbnail
This awesome code was written by DM_Daria, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright DM_Daria ©

Technologies

  • HTML
  • JavaScript
<!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);

Comments