Vue.js introductory notes ({{}} interpolation expression, v-cloak, v-text, v-html, v-bind)

vue instantiation

var vm = new Vue({
el:"#main",
data:{
msg:"这是一条消息"
}
})

---

v-cloak: use

<p c-cloak>{
   
   {msg}}</p>
当网速或者响应极慢时，等待渲染时不会看到{
   
   {msg}},看到的是空白，渲染完后出现"这是一条消息"(视觉感官较好)

<p>{
   
   {msg}}</p>
当网速或者响应极慢时，等待渲染时出现{
   
   {msg}},，渲染完后出现"这是一条消息"(视觉感官较差)

---

v-text: use

<p v-text="msg">不管你这里边是什么内容都不显示，只会显示msg的内容</p>
显示msg变量的值即:这是一条消息

Interpolation expression is different, v-text will overwrite the original character, that is only displayed msg variable
and the interpolation expression does not overwrite the original character
that is

<p>你好啊,{
   
   {msg}}</p>
显示的是:你好啊，这是一条消息

---

v-html:

为了方便举例，在vm的data中新增一个变量 htm
data:{
msg:"这是一条消息",
htm:"<h1>这句话的字体大小是H1</h1>"
}

Generally speaking, if we want to add page elements, we need to manually manipulate the dom element

比如:
var h1 = document.cerateElement("h1")
h1.innerText="这句话的字体大小是H1"
document.getElementByID("purpose").appendChild(h1)

This is still a simple change of the content in the h1 tag. If you encounter more complicated ones, it will be a lot of trouble to change the tag attributes.

But using v-html is much more convenient

<div id="purpose" v-html="htm"></div>

Vue's data variable can also be placed in the tag attribute
v-bind: (or simply ":", English colon)

<标签 v:bind:属性名字="vue里的data里的变量"></标签>
<p v-bind:title="msg"></p>

Code

Display

tips: "v-bind:" can also be written as ":"