The cause of

On my happy day at work, Phper came to me and asked me if I could write {{}} on the tag to render strings. I thought I was using string template + dynamic rendering, so I said yes. Then the next day, he came to me and said no, and I looked up, EmMMmm dude, Native environment, so I spent half an hour, an hour, writing the simplest demo for him,

PS: Don’t ask me why I write pages with Phper,

Body:

First of all, we will create a new proxy to monitor data changes. For details, see MDN Proxy

const data = new Proxy(target, handler)
Copy the code

Then, create a new tag in the body, and in order to coordinate with the proxy, define a few attRs to ensure that the fetched elements are correct. Input is bindValue, don’t ask why bind:value, It’s definitely not because I don’t know how to write it this way to match the element display so I’m going to use V-text, right

<input bindValue ="name" value=" placeholder "value=" placeholder" value="age" value=" placeholder "> <div><span>name: </span> <span v-text='name'></span> </div> <div><span>age</span><span v-text='age'></span></div>Copy the code

And then you start writing specific code logic in the proxy,

{ set: (obj, key, value) => { document.querySelectorAll(`*[v-text=${key}]`).forEach(e => { e.innerText = value }) return obj[key] = value }}Copy the code

Here we get all the matching tags and dynamically render the DOM content. Of course you can also do some more manipulation here.

const changeInput = ({target}) => {
  data[target.getAttribute('bindvalue')] = target.value
}
Copy the code

And then do some input processing in onLoad

window.onload = () => {
 for(let i of document.querySelectorAll('input[bindvalue]')){
   i.oninput = e => changeInput(e)
 }
}
Copy the code

Matches any attR with bindValue in the input tag, binding its onInput event to a changeInput event that was just written. Var a = 1 var a = 1 var a = 1 var a = 1 Does anyone still use var for declaring variables?

Next, make some style optimizations for the input field, so the code is not pasted

The total code is probably less than 40 lines,

<! DOCTYPE html> <header> <style> input{ width: 100vw; height: 50px; color: #f2f2f2; border: 1px solid #ccc; outline: none; color: #999; padding:0 20px; } </style> </header> <body> <input bindValue ="name" value="" placeholder=" "> Placeholder =" placeholder "> <div><span> placeholder: </span> <span v-text='name'></span> </div> <div><span>age</span><span v-text='age'></span></div> <script> const data = new Proxy({ name: '' }, { set: (obj, key, value) => { document.querySelectorAll(`*[v-text=${key}]`).forEach(e => { e.innerText = value }) return obj[key] = value } }) window.onload = () => { for(let i of document.querySelectorAll('input[bindvalue]')){ i.oninput = e => changeInput(e) } } const changeInput = ({target}) => { data[target.getAttribute('bindvalue')] = target.value } </script>  </body>Copy the code

Effect:

Ah-ha-ha-ha. Don’t ask me why the console value was changed but the input binding was not rendered. It was definitely not because I was lazy