前端的VUE怎麼使用
我用VUE做專案也有一段時間了，對於VUE來說現在已經比較熟悉了，但是關於VUE的入門文章卻一直沒有寫過，那麼今天就給大家帶來幾個案例，好好介紹下VUE這種好用的小工具。
相關影片教學推薦：Vue.js 教學推薦：2018最新的5個vue.js影片教學精選
1.本篇文章使用的vue版本是2.4.2，可能會跟新版有不一樣的地方，大家要注意。
2.現在我也是假設您有基礎的html,css,javascript的知識，也已經看過了官網的基本介紹，對vue有了一個大概的認識了，了解了常用的vue指令(v-model,v-show,v-if,v-for,v-on,v-bind等)！如果剛接觸前端的話，你看著文章可能會蒙圈，建議先學習基礎，掌握了基礎知識再來看！
3.下面的實例，建議大家邊看文章邊動手做！這樣思路會非常清晰，不易混亂！也不會覺得文章長（文章長是為了讓大家看得更信息，貼了很多重複的代碼，這些代碼。html，css等完全可以跳過看）。如果只看文章，你可能未必會看完，因為文章我講得比較細，比較長！
4.這幾個實例，摘自我自己的平常練習的項目，程式碼已經提到github上面了(vue-demos)。歡迎大家star。 ！
2.什麼是vue
vue是現在很火的一個前端MVVM框架，它以數據驅動和組件化的思想構建，與angular和react並稱前端三大框架。比起angular和react，vue更加輕巧、高效能、也很容易上手。大家也可以移步，看vue的介紹和核心功能官網介紹。簡單粗暴的理解就是：用vue開發的時候，就是操作數據，然後vue就會處理，以數據驅動去改變DOM（不知道有沒有理解錯，理解錯了指點下）。
下面就是一個最簡單的說明例子
程式碼如下
html
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
js
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})相信也不難理解，就是input綁定了message這個值，然後在input修改的時候，message就改了，由於雙向綁定，同時頁面的html（{{ message }}）進行了修改！
好，下面進入例子學習！
3.選項卡
原理分析與實作
這個很簡單，無非就是一個點擊切換顯示而已。但是大家也要實現。如果這個看明白了，再看下面兩個！這個實例應該只是一個熱身和熟悉的作用！
這個的步驟只有一步，原理也沒什麼。我直接在程式碼打註釋，看了註釋，大家就懂了！
完整程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body{
font-family:"Microsoft YaHei";
}
#tab{
width: 600px;
margin: 0 auto;
}
.tab-tit{
font-size: 0;
width: 600px;
}
.tab-tit a{
display: inline-block;
height: 40px;
line-height: 40px;
font-size: 16px;
width: 25%;
text-align: center;
background: #ccc;
color: #333;
text-decoration: none;
}
.tab-tit .cur{
background: #09f;
color: #fff;
}
.tab-con div{
border: 1px solid #ccc;
height: 400px;
padding-top: 20px;
}
</style>
<body>
<div id="tab">
<div>
<!--点击设置curId的值 如果curId等于0，第一个a添加cur类名，如果curId等于1，第二个a添加cur类名，以此类推。添加了cur类名，a就会改变样式 @click,:class ,v-show这三个是vue常用的指令或添加事件的方式-->
<a href="javascript:;" @click="curId=0" :class="{'cur':curId===0}">html</a>
<a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">css</a>
<a href="javascript:;" @click="curId=2" :class="{'cur':curId===2}">javascript</a>
<a href="javascript:;" @click="curId=3" :class="{'cur':curId===3}">vue</a>
</div>
<div>
<!--根据curId的值显示div,如果curId等于0，第一个div显示，其它三个div不显示。如果curId等于1，第二个div显示，其它三个div不显示。以此类推-->
<div v-show="curId===0">
html<br/>
</div>
<div v-show="curId===1">
css
</div>
<div v-show="curId===2">
javascript
</div>
<div v-show="curId===3">
vue
</div>
</div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#tab',
data: {
curId: 0
},
computed: {},
methods: {},
mounted: function () {
}
})
</script>
</html>VUE的使用方法大概就是這些了，透過這個案例相信你也對vue有一些了解了，更多精彩請關注php中文網其它相關文章！
相關閱讀：
以上是前端的VUE怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
crystaldiskmark是什麼軟體？ -crystaldiskmark如何使用？
Mar 18, 2024 pm 02:58 PM
CrystalDiskMark是一款適用於硬碟的小型HDD基準測試工具，可快速測量順序和隨機讀取/寫入速度。接下來就讓小編為大家介紹一下CrystalDiskMark，以及crystaldiskmark如何使用吧~一、CrystalDiskMark介紹CrystalDiskMark是一款廣泛使用的磁碟效能測試工具，用於評估機械硬碟和固態硬碟（SSD）的讀取和寫入速度和隨機I/O性能。它是一款免費的Windows應用程序，並提供用戶友好的介面和各種測試模式來評估硬碟效能的不同方面，並被廣泛用於硬體評
foobar2000怎麼下載？ -foobar2000怎麼使用
Mar 18, 2024 am 10:58 AM
foobar2000是一款能隨時收聽音樂資源的軟體，各種音樂無損音質帶給你，增強版本的音樂播放器，讓你得到更全更舒適的音樂體驗，它的設計理念是將電腦端的高級音頻播放器移植到手機上，提供更便捷高效的音樂播放體驗，介面設計簡潔明了易於使用它採用了極簡的設計風格，沒有過多的裝飾和繁瑣的操作能夠快速上手，同時還支持多種皮膚和主題，根據自己的喜好進行個性化設置，打造專屬的音樂播放器支援多種音訊格式的播放，它還支援音訊增益功能根據自己的聽力情況調整音量大小，避免過大的音量對聽力造成損害。接下來就讓小編為大
網易信箱大師怎麼用
Mar 27, 2024 pm 05:32 PM
網易郵箱，作為中國網友廣泛使用的一種電子郵箱，一直以來以其穩定、高效的服務贏得了用戶的信賴。而網易信箱大師，則是專為手機使用者打造的信箱軟體，它大大簡化了郵件的收發流程，讓我們的郵件處理變得更加便利。那麼網易信箱大師該如何使用，具體又有哪些功能呢，下文中本站小編將為大家帶來詳細的內容介紹，希望能幫助到大家！首先，您可以在手機應用程式商店搜尋並下載網易信箱大師應用程式。在應用寶或百度手機助手中搜尋“網易郵箱大師”，然後按照提示進行安裝即可。下載安裝完成後，我們打開網易郵箱帳號並進行登錄，登入介面如下圖所示
百度網盤app怎麼用
Mar 27, 2024 pm 06:46 PM
在如今雲端儲存已成為我們日常生活和工作中不可或缺的一部分。百度網盤作為國內領先的雲端儲存服務之一，憑藉其強大的儲存功能、高效的傳輸速度以及便捷的操作體驗，贏得了廣大用戶的青睞。而且無論你是想要備份重要文件、分享資料，還是在線上觀看影片、聽取音樂，百度網盤都能滿足你的需求。但很多用戶可能對百度網盤app的具體使用方法還不了解，那麼這篇教學就將為大家詳細介紹百度網盤app如何使用，還有疑惑的用戶們就快來跟著本文詳細了解一下吧！百度雲網盤怎麼用：一、安裝首先，下載並安裝百度雲軟體時，請選擇自訂安裝選
BTCC教學：如何在BTCC交易所綁定使用MetaMask錢包？
Apr 26, 2024 am 09:40 AM
MetaMask（中文也叫小狐狸錢包）是一款免費的、廣受好評的加密錢包軟體。目前，BTCC已支援綁定MetaMask錢包，綁定後可使用MetaMask錢包進行快速登錄，儲值、買幣等，且首次綁定還可獲得20USDT體驗金。在BTCCMetaMask錢包教學中，我們將詳細介紹如何註冊和使用MetaMask，以及如何在BTCC綁定並使用小狐狸錢包。 MetaMask錢包是什麼？ MetaMask小狐狸錢包擁有超過3,000萬用戶，是當今最受歡迎的加密貨幣錢包之一。它可免費使用，可作為擴充功能安裝在網絡
教你使用 iOS 17.4「失竊裝置保護」新進階功能
Mar 10, 2024 pm 04:34 PM
Apple在周二推出了iOS17.4更新，為iPhone帶來了一系列新功能和修復。這次更新包含了全新的表情符號，同時歐盟用戶也能夠下載其他應用程式商店。此外，更新還加強了對iPhone安全性的控制，引入了更多的「失竊設備保護」設定選項，為用戶提供更多選擇和保障。 "iOS17.3首次引入了「失竊設備保護」功能，為用戶的敏感資料增加了額外的安全保障。當用戶不在家等熟悉地點時，該功能要求用戶首次輸入生物特徵信息，並在一小時後再次輸入資訊才能存取和更改某些數據，如修改AppleID密碼或關閉失竊設備保護功能
PHP與Vue：完美搭檔的前端開發利器
Mar 16, 2024 pm 12:09 PM
PHP與Vue：完美搭檔的前端開發利器在當今網路快速發展的時代，前端開發變得愈發重要。隨著使用者對網站和應用的體驗要求越來越高，前端開發人員需要使用更有效率和靈活的工具來創建響應式和互動式的介面。 PHP和Vue.js作為前端開發領域的兩個重要技術，搭配起來可以稱得上是完美的利器。本文將探討PHP和Vue的結合，以及詳細的程式碼範例，幫助讀者更好地理解和應用這兩
小米汽車app怎麼用
Apr 01, 2024 pm 09:19 PM
小米汽車軟體提供遠端車控功能，讓使用者可以透過手機或電腦遠端控制車輛，例如開關車輛的門窗、啟動引擎、控制車輛的空調和音響等，下文就是這個軟體的使用及內容，一起了解下吧。小米汽車app功能及使用方法大全1、小米汽車app在3月25日上線蘋果AppStore，現在安卓手機的應用商店中也可以下載了;購車：了解小米汽車核心亮點和技術參數，可預約試駕、配置訂購您的小米汽車，支援線上處理提車待辦事項。 3.社群：了解小米汽車品牌資訊，交流用車體驗，分享精彩車生活;4、車控：手機就是遙控器，遠端控制，即時安防，輕
