明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

前端的VUE怎么使用

發(fā)表時間：2024-05-11 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]我用VUE做項目也有一段時間了，對于VUE來說現(xiàn)在已經(jīng)比較熟悉了，但是關(guān)于VUE的入門文章卻一直沒有寫過，那么今天就給大家?guī)韼讉�案例，好好介紹下VUE這種好用的小工具。相關(guān)視頻教程推薦：Vue.js 教程推薦：2018最新的5個vue.js視頻教程精選1.本篇文章使用的vue版本是2.4.2，可...
我用VUE做項目也有一段時間了，對于VUE來說現(xiàn)在已經(jīng)比較熟悉了，但是關(guān)于VUE的入門文章卻一直沒有寫過，那么今天就給大家?guī)韼讉�案例，好好介紹下VUE這種好用的小工具。

相關(guān)視頻教程推薦：Vue.js 教程推薦：2018最新的5個vue.js視頻教程精選

1.本篇文章使用的vue版本是2.4.2，可能會和新版有不一樣的地方，大家要注意。

2.現(xiàn)在我也是假設(shè)您有基礎(chǔ)的html,css,javascript的知識，也已經(jīng)看過了官網(wǎng)的基本介紹，對vue有了一個大概的認(rèn)識了，了解了常用的vue指令(v-model,v-show,v-if,v-for,v-on,v-bind等)！如果剛接觸前端的話，你看著文章可能會蒙圈，建議先學(xué)習(xí)基礎(chǔ)，掌握了基礎(chǔ)知識再來看！

3.下面的實例，建議大家邊看文章邊動手做！這樣思路會非常清晰，不易混亂！也不會覺得文章長（文章長是為了讓大家看得更信息，貼了很多重復(fù)的代碼，這些代碼。html，css等完全可以跳過看）。如果只看文章，你可能未必會看完，因為文章我講得比較細(xì)，比較長！

4.這幾個實例，摘自我自己的平常練習(xí)的項目，代碼已經(jīng)提到github上面了(vue-demos)。歡迎大家star。！

2.什么是vue

vue是現(xiàn)在很火的一個前端MVVM框架，它以數(shù)據(jù)驅(qū)動和組件化的思想構(gòu)建，與angular和react并稱前端三大框架。相比angular和react，vue更加輕巧、高性能、也很容易上手。大家也可以移步，看一下vue的介紹和核心功能官網(wǎng)介紹。簡單粗暴的理解就是：用vue開發(fā)的時候，就是操作數(shù)據(jù)，然后vue就會處理，以數(shù)據(jù)驅(qū)動去改變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 }}）進(jìn)行了修改！

好，下面進(jìn)入例子學(xué)習(xí)！

3.選項卡

原理分析和實現(xiàn)

這個很簡單，無非就是一個點擊切換顯示而已。但是大家也要實現(xiàn)。如果這個看明白了，再看下面兩個！這個實例應(yīng)該只是一個熱身和熟悉的作用！

這個的步驟只有一步，原理也沒什么。我直接在代碼打注釋，看了注釋，大家就明白了！

完整代碼

<!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>
        <!--點擊設(shè)置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>
        <!--根據(jù)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有一些了解了，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！


相關(guān)閱讀：

怎樣用CSS3和JS做出上升的方塊動態(tài)背景

CSS3的主要功能應(yīng)用

CSS3中過渡動畫怎么使用

以上就是前端的VUE怎么使用的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。




標(biāo)簽：前端的VUE怎樣運用