vue dom

by Jack Violet

HTML

<div id="container">
  <h1>v-text</h1>
  <span>{{ message }}</span>
  <h1>v-html</h1>
  <div v-html="messagespan"></div>
  <h1>v-model</h1>
  <input v-model="message" />
  <h1>v-on</h1>
  <input id="myInput" v-on:blur="blur" v-on:focus="focus" />
  <h1>v-for</h1>
  <ul></ul>
</div>

JavaScript

// v-text
var message = "Hello World"
var messagespan = "<span>Hello World</span>"

var spans = document.getElementsByTagName("span")
for (var span of spans) {
  if (span.textContent == "{{ message }}") {
    span.textContent = message
  }
}
// v-html
var container = document.getElementById("container")
var divs = container.getElementsByTagName("div")
for (var div of divs) {
  if (div.getAttribute("v-html") == "messagespan") {
    div.innerHTML = messagespan
  }
}
// v-model
var inputs = container.getElementsByTagName("input")
for (var input of inputs) {
  if (input.getAttribute("v-model") == "message") {
    input.setAttribute("value", message)
  }
}
// v-on
var myInput = document.getElementById("myInput")
myInput.onfocus = eval(myInput.getAttribute("v-on:focus"))
myInput.onblur = eval(myInput.getAttribute("v-on:blur"))

function focus() {
  myInput.setAttribute("value", "focus")
}

function blur() {
  myInput.setAttribute("value", "blur")
}
// v-for
var liContents = [
  "jack",
  "rose",
  "james",
  "wade",
  "jordan"
]

var liElementList = []
for (var content of liContents) {
  var li = document.createElement("li")
  li.innerHTML = `<label><input type="checkbox"/><span>${content}</span></label>`
  liElementList.push(li)
}
var ul = container.getElementsByTagName("ul")[0]
for (var liEle of liElementList) {
  ul.appendChild(liEle)
}