Light HTML Two-way binding library

Question

TL;DR Basically I want AngularJS (that's right, AngularJS, not Angular)'s two-way binding without the rest of AngularJS.

---

My favorite thing about using AngularJS is how easy data binding is. It's so simple, I just include an ng-app tag and controller in my HTML, initialize my app with a few lines of JavaScript code, and then a {{variableValue}} in my HTML is automatically filled by the controller's $scope.variableValue.

Is there a library that does only this? (I realize I only described one-way binding, so I'll accept libraries that do one-way binding answers as well).

Just to be clear, I've looked at a few other libraries that do this, and none of them make it as easy on the HTML side. In these other frameworks, such as Remy Sharp's bind or RivetJS, I either have to have a <span id="variableValue"></span> concept, or I have to explicitly specify that the variableValue variable binds to an element defined by #variable-value, etc.

What I'm looking for is:

1. A little bit of configuration (this is subjective, I know, but it's a start).
2. {{variableName}} in the HTML
3. $scopeVariable.variableName in JavaScript
4. and have the two bind together and ... just work.

Answer 1

You could use some lightweight libs:

1) Vue.js

It's just a few lines to add and there's no framework overhead like in Angular.js or Angular

Import:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

HTML:

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

Javascript:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

That's it. It's really lightweight

2) Rivets.js, it's even more lightweight than Vue.

Import:

<script src="rivets.bundled.min.js"></script>

HTML:

<input rv-value="name">

Javascript:

rivets.bind($('input'), {name: 'Your name'})