Skip to content

Instantly share code, notes, and snippets.

@ozcanzaferayan

ozcanzaferayan/.gitignore

Last active May 22, 2020
Embed
What would you like to do?
Alpine, JQuery, Vue, React comparison
.DS_Store

Reactive input element usage in JS libraries (without <script> import)

alpine

<div x-data="{msg:''}">
  <input x-model="msg" />
  <span x-text="msg"></span>
</div>

angular1

<div ng-app>
  <input ng-model="msg" />
  <span>{{msg}}</span>
</div>

jquery

<input id="msg" />
<span></span>

<script>
  $("#msg").keypress(function (e) {
    $("span").text(e.target.value);
  });
</script>

react

<script type="text/babel">
  function App() {
    const [msg, setMsg] = React.useState("");
    return (
      <>
        <input onChange={({ target: { value } }) => setMsg(value)} />
        <span>{msg}</span>
      </>
    );
  }
  ReactDOM.render(<App />, document.querySelector("#msg"));
</script>

<div id="msg"></div>

vanilla

<input id="msg" />
<span></span>

<script>
  document.getElementById("msg").onkeypress = function (e) {
    document.querySelector("span").innerHTML = e.target.value;
  };
</script>

vue

<div id="app">
  <input v-model="msg" />
  <span>{{ msg }}</span>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      msg: "",
    },
  });
</script>
View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.