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