davy_yg
1 week ago
307
1
Vue

appear as {{ title }}

Posted 1 week ago by davy_yg

index.html

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app1">
<h1 ref="heading">{{ title }}</h1>
<button v-on:click="show">Show Paragraph</button>
<p v-if="showParagraph">This is not always visible</p>
</div>

<div id="app2">
<h1 ref="heading">{{ title }}</h1>
<button v-on:click="show">Show Paragraph</button>
<p v-if="showParagraph">This is not always visible</p>
</div>

<script src="app.js"></script>

app.js

new Vue({
el: '#app',
data: {
  title: 'The VueJS Instance',
  showParagraph: false
 },
 methods: {
  show: function() {
     this.showParagraph = true;
     this.updateTitle('The VueJS Instance (Updated)');
  },
  updateTitle: function(title) {
     this.title = title;
  }
},
computed: {
  lowercaseTitle: function() {
    return this.title.toLowerCase();
  }
},

watch: { title: function(value) { alert('Title changed, new value: ' + value); } } });

new Vue({ el: '#app2', data: { title: 'The second Instance' }, methods: { show: function() { this.showParagraph = true; this.updateTitle('The VueJS Instance (Updated)'); }, updateTitle: function(title) { this.title = title; } } });

The result of this code:

{{ title }}

This is not always visible

The second Instance

I wonder why the first one appears as : {{ title }} ?

Please sign in or create an account to participate in this conversation.