Vue語法和標簽的入門使用教程
前言:
最近兩周一直在忙于公司業(yè)務(wù)的學習,一直沒有時間進行總結(jié),作為后端開發(fā)人員來說,需要了解一些前端的知識,因此今天把最近復習的Vue的知識總結(jié)了一下,希望能加深總結(jié)的印象以及幫助到各位大佬。
設(shè)置代碼片段
首先從比較基本的設(shè)置開始說起。
所謂的設(shè)置代碼片段,就是可以方便我們的開發(fā)。具體的設(shè)置,點擊文件,首選項,選擇配置用戶代碼片段,新建全局代碼片段文件,將下面的代碼復制到大括號內(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即可使用
Vue的指令
v-bind指令
v-bind是單向數(shù)據(jù)綁定,這個指令一般用在標簽屬性里面,用來獲取值,接下來用案例解釋
<!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"> <h1 v-bind:title="message"> {{question}} </h1> <!--簡寫--> <h2 :title="message"> {{content}} </h2> </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指令
v-model指令是雙向綁定,當一邊發(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標簽
v-on標簽用于綁定事件,v-on:click表示處理鼠標點擊的事件,事件調(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():
即阻止事件原本的默認行為,案例測試如下:
<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>
v-if和v-show標簽
首先根據(jù)小案例演示v-if和v-else的用法
<body> <div id="app"> <input type="checkbox" v-model="ok">你長得帥嗎</input> <h1 v-if="ok">帥!</h1> <h1 v-else>非常帥!</h1> </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 進行切換。
3.一般來說,v-if 有更高的切換開銷,而 v-show 有更高的初始渲染開銷。因此,如果需要非常頻繁地切換,則使用 v-show 較好;如果在運行時條件很少改變,則使用 v-if 較好。
v-for標簽
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>
輸出:
總結(jié)
到此這篇關(guān)于Vue語法和標簽使用的文章就介紹到這了,更多相關(guān)Vue語法和標簽使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue element 生成無線級左側(cè)菜單的實現(xiàn)代碼
這篇文章主要介紹了vue element 生成無線級左側(cè)菜單的實現(xiàn)代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08使用vant-picker實現(xiàn)自定義內(nèi)容,根據(jù)內(nèi)容添加圖標
這篇文章主要介紹了使用vant-picker實現(xiàn)自定義內(nèi)容,根據(jù)內(nèi)容添加圖標,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12vue 全選與反選的實現(xiàn)方法(無Bug 新手看過來)
下面小編就為大家分享一篇vue 全選與反選的實現(xiàn)方法(無Bug 新手看過來),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02Vue項目引用百度地圖并實現(xiàn)搜索定位等功能(案例分析)
這篇文章主要介紹了Vue項目引用百度地圖并實現(xiàn)搜索定位等功能(案例分析),本篇文章為案例分析,技術(shù)點較多,所以篇幅較長,認真閱覽的你一定會學到很多知識,需要的朋友可以參考下2022-09-09