Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 2, Saying Hello

https://jsfiddle.net/NodToNothing/arbhqcs6/3/

Interesting exercise - keep the input, concat, and output separate.  Write it without variables and do different greetings for different people.  In the end, I'm the arbitrator of what constitutes the acceptance criteria, so I used Vue again and bound the mustache output to a function tied to an input box.  Admittedly, I could have skipped the function altogether and just printed Hello in HTML and then the value of the input box.  No concatenation at all, at least not actively.

I did learn that Vue ignores the value on the input and you need to set it in the initial data values.  There's a lot of magic under the covers tying the message variable and val model together in a function mapped to the HTML.  That's slick.  I shouldn't be too impressed given I played with React back in 2013 for a team demo and have been through Angular training, but I find it refreshing anew, particularly given how fast you can set up a UI.  VB COM speed to demo days indeed.

Cheater textarea again for anyone who wants to grab some "code", although it's easier to go to the JSFiddle.  I got to thinking I'd usually do this in Python (and IDLE) and it looks like I can go Py fiddle as well: https://pyfiddle.io/  Although that's not really any faster than running IDLE on my desktop.

<!-- value will be ignored in binding; has to be handled in data --> <!--https://vuejs.org/v2/guide/forms.html--> Name: <input ref="input" type="text" value="Scooter" v-model="val7"/><BR/> <br>{{total}} </div> Javascript + Vue 2.2.1 var app = new Vue({ el: '#app', components: { }, data: { message: "Hello ", val7: "Scooter" }, computed:{ total: function(){ return this.message + this.val7; } } })