生活随笔
收集整理的這篇文章主要介紹了
前端之vue模板
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
vue模板
初始Vue
初識Vue:
1,想讓Vue工作，就必須創建一個Vue實例，且要傳入一個配置對象;
2,root容器里的代碼依然符合html規范，貝不過混入了一些特殊的Vue語法;
3,root容器里的代碼被稱為[Vue模板]，template。
Vue實例
el為Vue實例選擇容器
一個Vue實例只能接管一個容器，反之亦然。即，只能一一對應。
數據改變，頁面會自動更新
Vue實例內包含的el用于指定當前Vue實例容器服務的容器，值通常是css選擇器字符串（包含不限于id、class選擇器）。
在對應容器中使用{{插入內容}}.插入內容，內容是js表達式（會生成一個值）。
<!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>
模板語法
1.vue指令：
用于標簽屬性
v-bind 動態綁定標簽屬性，id，……
v-bind:屬性=“表達式”，v-開頭的指令中，等號后方的引號內是表達式
v-on 綁定事件和方法，添加事件監聽器
v-model 輸入與返回數據的雙向綁定
v-if 根據條件是否顯示元素，用于Vue 插入/更新/移除元素時自動應用過渡效果。
v-for 渲染項目列表
2.插值語法
位于模板標簽內容
可以讀取data()內的所有內容，可以讀取 Vue 實例上的所有內容，可以讀取 Vue 原型上的上的所有內容
{{ js表達式 }} ，將指定內容放到指定位置。
<!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><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>歡迎來到{{school.name}},點擊
<a :href="school.url" target="_blank" rel="noopener noreferrer">鏈接學習{{school.course}}.
</a></h2></div><script>Vue.config.productionTip = false;new Vue({el: '#root',data() {return {name: 'Amy',school: {name: '我要自學網',course: 'ps',url: 'https://www.51zxw.net/'}}}});</script>
</body></html>
下一節:前端之vue數據綁定與MVVM
總結
以上是生活随笔為你收集整理的前端之vue模板的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
