ps:全demo级别自学vue.js,前端大佬自行忽略
解读和对比JQuery和vue的写指令
我们用jquery通常向页面写有两种方式
- 加载时不被解析的document.getElementById("div1").innerText=""
- 加载时被解析的document.getElementById("div1").innerHTML=""
vue
同jquery,但是不同的是jquery属于直接通过js写,而我们的vue采用的还是分离式的,这里我们同样讲信息放在vue对象中,而我们可以在标签内使v-text和v-html当作属性来使用,同时挂载我们的vue对象中的json数据.具体的看代码
v-text v-html,加载界面时候触发的写信息.
//view model
//传统js的innerText和innerHTML
window.onload=function () {//加载时候出发的函数
document.getElementById("div1").innerText="<h1>hello</h1>"//不会解析
document.getElementById("div2").innerHTML="<h1>hello</h1>"//会被解析
}
vue详细代码对比可以看下面的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-text与v-html</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div id="div1"></div>
<br>
<div id="div2"></div>
</div>
<hr>
<div id="vueapp">
<div v-html="mes1" id="div3"></div>
<br>
<div v-text="mes2" id="div4"></div>
</div>
</body>
<script>
//view model
//传统js的innerText和innerHTML
window.onload=function () {//加载时候出发的函数
document.getElementById("div1").innerText="<h1>hello</h1>"//不会解析
document.getElementById("div2").innerHTML="<h1>hello</h1>"//会被解析
}
/*vue新式innerText和innerHTML*/
new Vue({
el:"#vueapp",
data:{
mes1:"<h1>hello</h1>",
mes2:"<h1>hello</h1>"
}
})
</script>
</html>
再如
有时,我们可能会从后天获取一个带链接的标签进行展示,但是我们直接展示的话是文本形式不渲染.
结果
那么我们想要告诉html进行渲染,就需要用v-html属性.
结果
此外:
比如这里,我们直接用{{}}插值表达式可以后面灵活的拼接内容,而用v-text则会覆盖原内容"李银河".
