溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“Vue語法和標(biāo)簽的入門使用實例分析”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue語法和標(biāo)簽的入門使用實例分析”吧！
首先從比較基本的設(shè)置開始說起。
所謂的設(shè)置代碼片段，就是可以方便我們的開發(fā)。具體的設(shè)置，點擊文件，首選項，選擇配置用戶代碼片段，新建全局代碼片段文件，將下面的代碼復(fù)制到大括號內(nèi)即可使用。
{
"vue html": {
"scope": "html",
"prefix": "vuehtml",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>Document</title>",
"</head>",
"",
"<body>",
" <div id=\"app\">",
"",
" </div>",
" <script src=\"vue.min.js\"></script>",
" <script>",
" new Vue({",
" el: '#app',",
" data: {",
" $1",
" }",
" })",
" </script>",
"</body>",
"",
"</html>",
],
"description": "my vue template in html"
}
}設(shè)置完成后，新建HTML文件，輸入vuehtml即可使用
v-bind是單向數(shù)據(jù)綁定，這個指令一般用在標(biāo)簽屬性里面，用來獲取值，接下來用案例解釋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h2 v-bind:title="message">
{{question}}
</h2>
<!--簡寫-->
<h3 :title="message">
{{content}}
</h3>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
question:"現(xiàn)在是幾點來著?",
message:"現(xiàn)在是:" + new Date().toLocaleString()
}
})
</script>
</body>
</html>輸出
v-model指令是雙向綁定，當(dāng)一邊發(fā)生比變化時，另一邊也會發(fā)生變化。相應(yīng)的測試代碼如下，感興趣的小伙伴兒們可以測試一些哦。
<body>
<div id="app">
<input type="text" v-bind:value="key.value"/>
<input type="text" v-model="key.value"/>
<p>{{key.value}}</p>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data:{
key:{
value:"xiaowei"
}
}
})
</script>
</body>
v-on標(biāo)簽用于綁定事件，v-on:click表示處理鼠標(biāo)點擊的事件，事件調(diào)用的方法應(yīng)寫在methods節(jié)點中。案例如下:
<body>
<div id="app">
<button v-on:click="query1()">測試相貌</button>
<!--第二種寫法-->
<button?。纁lick="query2()">測試相貌2</button>
</div>
<script>
new Vue({
el: '#app',
data: {
key:{
value:"xiaowei"
}
},
methods:{
query1(){
alert("你是帥哥")
},
query2(){
alert("你是靚仔")
}
}
}
)
</script>
</body>
修飾符 (Modifiers) 是以“.”指明的特殊后綴，用于指出一個指令應(yīng)該以特殊方式綁定。
例如，.prevent 修飾符告訴 v-on 指令對于觸發(fā)的事件調(diào)用 event.preventDefault()：
即阻止事件原本的默認(rèn)行為，案例測試如下：
<body>
<div id="app">
<form action="save" v-on:submit.prevent="Submit">
<label for="username">
<input type="text" id="username" v-model="user.username"/>
<button type="submit">保存</button>
</label>
</form>
</div>
<script>
new Vue({
el: '#app',
data:{
user:{}
},
methods: {
Submit() {
if (this.user.username) {
alert('提交表單')
} else {
alert('請輸入用戶名')
}
}
}
}
)
</script>
</body>
首先根據(jù)小案例演示v-if和v-else的用法
<body>
<div id="app">
<input type="checkbox" v-model="ok">你長得帥嗎</input>
<h2 v-if="ok">帥!</h2>
<h2 v-else>非常帥!</h2>
</div>
<script>
new Vue({
el:"#app",
data:{
ok:true
}
})
</script>
</body>
v-if和v-show的用法很相似，它們的區(qū)別是什么呢？
這是前端面試中經(jīng)常被問到的一個問題。
1.v-show性能比v-if好一點。這是因為v-show在編譯時只編譯一次，而v-if會不停的創(chuàng)建，銷毀。
2.v-show經(jīng)常用于控制css樣式，而v-if控制的是DOM，添加或刪除DOM元素，所以相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進(jìn)行切換。
3.一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時條件很少改變，則使用 v-if 較好。
v-for為循環(huán)指令，可以用于遍歷等。案例如下：
在div中加入以下代碼，代表n從0開始遍歷。
<ul>
<li v-for="n in 10">{{ n }} </li>
</ul>頁面結(jié)果：
遍歷對象的形式如下：
<body>
<div id="app">
<table>
<tr v-for="user in userList">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el:"#app",
data: {
userList: [
{ id: 1, name: '荔枝' },
{ id: 2, name: '油餅' },
{ id: 3, name: '蝦頭'},
{ id: 4, name: '樹枝'}]}
})
</script>
</body>輸出：
感謝各位的閱讀，以上就是“Vue語法和標(biāo)簽的入門使用實例分析”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Vue語法和標(biāo)簽的入門使用實例分析這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼