生活随笔
收集整理的這篇文章主要介紹了
前端之vue模板
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
vue模板
初始Vue
初識(shí)Vue:
1,想讓Vue工作，就必須創(chuàng)建一個(gè)Vue實(shí)例，且要傳入一個(gè)配置對(duì)象;
2,root容器里的代碼依然符合html規(guī)范，貝不過(guò)混入了一些特殊的Vue語(yǔ)法;
3,root容器里的代碼被稱(chēng)為[Vue模板]，template。
Vue實(shí)例
el為Vue實(shí)例選擇容器
一個(gè)Vue實(shí)例只能接管一個(gè)容器，反之亦然。即，只能一一對(duì)應(yīng)。
數(shù)據(jù)改變，頁(yè)面會(huì)自動(dòng)更新
Vue實(shí)例內(nèi)包含的el用于指定當(dāng)前Vue實(shí)例容器服務(wù)的容器，值通常是css選擇器字符串（包含不限于id、class選擇器）。
在對(duì)應(yīng)容器中使用{{插入內(nèi)容}}.插入內(nèi)容，內(nèi)容是js表達(dá)式（會(huì)生成一個(gè)值）。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>你好,世界
</title><linkrel="Bookmark" type="image/x-icon" href="../favicon.svg"/><link rel="icon" type="image/x-icon" href="../favicon.svg"/><linkrel="shortcut icon" href="../favicon.svg"><script src="../vuejs/vue.js"></script></head><body><div id="root"><h1>你好!{{name}}
</h1></div><script>Vue.config.productionTip = false;new Vue({el: '#root', data() { return {name: 'World'}}});</script></body>
</html>
模板語(yǔ)法
1.vue指令：
用于標(biāo)簽屬性
v-bind 動(dòng)態(tài)綁定標(biāo)簽屬性，id，……
v-bind:屬性=“表達(dá)式”，v-開(kāi)頭的指令中，等號(hào)后方的引號(hào)內(nèi)是表達(dá)式
v-on 綁定事件和方法，添加事件監(jiān)聽(tīng)器
v-model 輸入與返回?cái)?shù)據(jù)的雙向綁定
v-if 根據(jù)條件是否顯示元素，用于Vue 插入/更新/移除元素時(shí)自動(dòng)應(yīng)用過(guò)渡效果。
v-for 渲染項(xiàng)目列表
2.插值語(yǔ)法
位于模板標(biāo)簽內(nèi)容
可以讀取data()內(nèi)的所有內(nèi)容，可以讀取 Vue 實(shí)例上的所有內(nèi)容，可以讀取 Vue 原型上的上的所有內(nèi)容
{{ js表達(dá)式 }} ，將指定內(nèi)容放到指定位置。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模板語(yǔ)法
</title><link rel="Bookmark" type="image/x-icon" href="../favicon.svg" /><link rel="icon" type="image/x-icon" href="../favicon.svg" /><link rel="shortcut icon" href="../favicon.svg"><script src="../vuejs/vue.js"></script>
</head><body><div id="root"><h1>你好!{{name}}
</h1><h2>歡迎來(lái)到{{school.name}},點(diǎn)擊
<a :href="school.url" target="_blank" rel="noopener noreferrer">鏈接學(xué)習(xí){{school.course}}.
</a></h2></div><script>Vue.config.productionTip = false;new Vue({el: '#root',data() {return {name: 'Amy',school: {name: '我要自學(xué)網(wǎng)',course: 'ps',url: 'https://www.51zxw.net/'}}}});</script>
</body></html>
下一節(jié):前端之vue數(shù)據(jù)綁定與MVVM
總結(jié)
以上是生活随笔為你收集整理的前端之vue模板的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
