Vue.js入门笔记({{}}插值表达式,v-cloak,v-text,v-html,v-bind)

vue实例化

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

---

v-cloak:使用

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

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

---

v-text:使用

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

与插值表达式不同的是，v-text会覆盖原来的字符，即只显示msg的变量
而插值表达式则不会覆盖原来的字符
即

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

---

v-html:

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

一般来说我们要增加页面元素，需要手动操作dom元素

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

这还是简单的更改h1标签内的内容，如果遇到更复杂的，需要更改标签属性的会麻烦很多

但使用v-html就方便了许多

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

vue的data变量也可以放在标签属性中
v-bind:(也可以简单写作":",英文的冒号)

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

代码

显示

小提示："v-bind:“也可以写作”:"