Vue.js $Refs

If you're just getting started with this series of Vue.js posts, you should start with the Vue.js Starter Page.

Vue.js uses these things called $refs to reference values directly from the DOM in your Vue.js instance. Here's how:

Vue.js Refs

The output is: {{output}}

view me in the console.... :)


<!doctype html>

<html>
<head><meta charset="UTF-8"><title>VueJS</title>
<script src="https://unpkg.com/vue@2.3.0"></script>

</head>
<body>

<h3>Working With Multiple Vue.js Instances</h3> <div id="vue-app-one" style="border: thin solid silver; padding: 5px;"> This is the "vue-app-one" div. <h3>{{title}}</h3> </div> <div id="vue-app-two" style="border: thin solid silver; padding: 5px;"> This is the "vue-app-two" div. <h3>{{title}}</h3> <button v-on:click="changeTitle()"> Click me to update Vue One's title. </button> </div> <br><br> <script> var one = new Vue({ el:'#vue-app-one', data: { title: 'This is the Vue App One instance.' }, computed: { greet:function(){ return "Hello from vue-app-one"; } } }); var two = new Vue({ el:'#vue-app-two', data: { title: 'This is the Vue App Two instance.' }, methods: { changeTitle:function(){ one.title="Vue Instance One's title has been updated."; } }, computed: { greet:function(){ return "Hello from vue-app-Two"; } } }); </script> </html>

Link your website to this page! Copy and paste the URL below:
http://www.cfsnap.com/vue-js/vue-js-refs/