vue基础一
一、vue的編寫步驟
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8">//1.0與2.0是有區(qū)別的，但是<script src="../libs/vue1026.js"></script> //1.引入的1.0的包<script src="../libs/vue221.js"></script> //1.引入的2.0的包 </head><body><div id="app"> //引入的包一定要確定一個(gè)范圍表明這個(gè)范圍的指令都是被vue來解析{{msg}}</div></body><script>//通過vue實(shí)例化一個(gè)對(duì)象，用這個(gè)對(duì)象來解析id=app中的指令new Vue({el:"#app", //表示vm對(duì)象將來操作的view的區(qū)域是app的這個(gè)div中的所有指令 data:{msg:"hello world" //稱為為mvvm中的model }})</script> </html>
二、常用指令
1.插值表達(dá)式{{}}
這是數(shù)據(jù)常用的形式就是使用"Mustache"語法(雙大括號(hào))的文本插值，Mustache標(biāo)簽將會(huì)被替代為對(duì)應(yīng)數(shù)據(jù)對(duì)象msg屬性(定義在data中的值)
例如：
<span>{{mag}}</span>
對(duì)javascript表達(dá)式的支持
例如:
{{1+1}}
{{ok?'yes':'no'}} //只支持三元表達(dá)式不支持if判斷
但是只能綁定單個(gè)表達(dá)式
2.v-text和v-html的指令
共同點(diǎn):都是將一個(gè)變量渲染到制定的表達(dá)式中
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title>
<script src="../libs/vue1026.js"></script> </head> <body> <div id="app">{{name}}<span v-text="name"></span><span v-html="name"></span> </div> </body> <script src="./libs/vue221.js"></script> <script src="./libs/vue1026.js"></script> <script>var vm = new Vue({el:"#app",data:{name:"<span>黑馬程序員</span>"
} })
</script>
</html> 輸出結(jié)果： <span>黑馬程序員</span> 黑馬程序員
不同點(diǎn):v-html會(huì)解析標(biāo)簽而v-text則不會(huì)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="../libs/vue1026.js"></script> </head> <body> <div id="app"><span v-text="name"></span><br /><span v-html="name"></span> </div> </body> <script src="./libs/vue221.js"></script> <script src="./libs/vue1026.js"></script> <script>var vm = new Vue({el:"#app",data:{name:"<h1>黑馬程序員</h1>"}}) </script> </html> 輸出結(jié)果： <h1>黑馬程序員</h1> 黑馬程序員?
轉(zhuǎn)載于:https://www.cnblogs.com/lichao123/p/7258456.html
總結(jié)
- 上一篇： CSharpGL(43)环境映射(Env
- 下一篇： bzoj 4832 抵制克苏恩