Vue001_模板语法
生活随笔
收集整理的這篇文章主要介紹了
Vue001_模板语法
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
模板的理解
1) 動態(tài)的 html 頁面
2) 包含了一些 JS 語法代碼
a. 雙大括號表達(dá)式
b. 指令(以 v-開頭的自定義標(biāo)簽屬性)
雙大括號表達(dá)式
1) 語法: {{exp}}
2) 功能: 向頁面輸出數(shù)據(jù)
3) 可以調(diào)用對象的方法
?指令一: ?強(qiáng)制數(shù)據(jù)綁定
1) 功能: 指定變化的屬性值
2) 完整寫法: v-bind:xxx='yyy' //yyy 會作為表達(dá)式解析執(zhí)行
3) 簡潔寫法: :xxx='yyy'
?指令二: ?綁定事件監(jiān)聽
1) 功能: 綁定指定事件名的回調(diào)函數(shù)
2) 完整寫法:
v-on:keyup='xxx'
v-on:keyup='xxx(參數(shù))'
v-on:keyup.enter='xxx'
3) 簡潔寫法:
@keyup='xxx'
@keyup.enter='xxx'
?
代碼示例：
【友情提示：使用的hBuilderX編程軟件】
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>no1</title></head><body><!-- 雙大括號表達(dá)式1) 語法: {{exp}}2) 功能: 向頁面輸出數(shù)據(jù)3) 可以調(diào)用對象的方法 --><div id="app">{{message}}</div><p id="ptest">{{paddress}}</p><script type="text/javascript" src="js/vue.js"></script><script>var app = new Vue({/* el 提供一個(gè)在頁面上已存在的 DOM 元素作為 Vue 實(shí)例的掛載目標(biāo)。可以是 CSS 選擇器，也可以是一個(gè) HTMLElement 實(shí)例。 */el: '#app',data: {// data 的所有屬性都會成功vm 對象的屬性, 而模板頁面中可以直接訪問message: 'Hello Vue!'}})var paddress = new Vue({el: '#ptest',data:{paddress: 'Hello George!'}})</script></body> </html>結(jié)果展示
代碼展示
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>Demo02</title></head><body><div id="app"><!-- 允許一個(gè)自定義組件在使用 v-model 時(shí)定制 prop 和 event。默認(rèn)情況下，一個(gè)組件上的 v-model 會把 value 用作 prop 且把 input 用作 event，但是一些輸入類型比如單選框和復(fù)選框按鈕可能想使用 value prop 來達(dá)到不同的目的。使用 model 選項(xiàng)可以回避這些情況產(chǎn)生的沖突。 --><input type="text" v-model="username" /><!-- 雙大括號表達(dá)式1) 語法: {{exp}}2) 功能: 向頁面輸出數(shù)據(jù)3) 可以調(diào)用對象的方法 --><p>hello {{username}}</p><h2>1. 雙大括號表達(dá)式</h2><p>{{msg}}</p><p>{{msg.toUpperCase()}}</p></div><script type="text/javascript" src="js/vue.js"></script><script>new Vue({el: '#app',data: {username: 'George',msg: 'good'}})</script></body> </html>?結(jié)果展示
代碼展示
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>Demo03</title></head><body><div id="app"><h2>1.雙大括號表達(dá)式</h2><!-- 功能: 向頁面輸出數(shù)據(jù) --><p>{{msg}}</p><p>{{msg.toUpperCase()}}</p><h2>2.指令一：強(qiáng)制數(shù)據(jù)綁定</h2><a href="url">訪問指定站點(diǎn)</a><br /><!-- 不能使用 --><!-- 功能: 指定變化的屬性值 --><a v-bind:href="url">訪問指定站點(diǎn)2</a><a :href="url">訪問指定站點(diǎn)3</a><h2>3.指令二：綁定事件監(jiān)聽</h2><!-- 功能: 綁定指定事件名的回調(diào)函數(shù) --><button v-on:click="handleClick">點(diǎn)我</button><button @click="handleClick">點(diǎn)我2</button></div><script type="text/javascript" src="js/vue.js"></script><script>new Vue({/* el 提供一個(gè)在頁面上已存在的 DOM 元素作為 Vue 實(shí)例的掛載目標(biāo)。可以是 CSS 選擇器，也可以是一個(gè) HTMLElement 實(shí)例。 */el: '#app',data: {// data 的所有屬性都會成功vm 對象的屬性, 而模板頁面中可以直接訪問msg: 'good',url: 'http://www.baidu.com'},methods: {handleClick() {alert("處理點(diǎn)擊")}}})</script></body> </html>?結(jié)果展示
總結(jié)
以上是生活随笔為你收集整理的Vue001_模板语法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MVC、MVP、MVVM分别是什么？有什
- 下一篇： Vue002_计算属性和监视