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

前端的VUE如何使用

發(fā)表時(shí)間：2023-12-25 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

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

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

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

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

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

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

2.什么是vue

vue是現(xiàn)在很火的一個(gè)前端MVVM框架，它以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建，與angular和react并稱前端三大框架。相比angular和react，vue更加輕巧、高性能、也很容易上手。大家也可以移步，看一下vue的介紹和核心功能官網(wǎng)介紹。簡單粗暴的理解就是：用vue開發(fā)的時(shí)候，就是操作數(shù)據(jù)，然后vue就會(huì)處理，以數(shù)據(jù)驅(qū)動(dòng)去改變DOM（不知道有沒有理解錯(cuò)，理解錯(cuò)了指點(diǎn)下）。

下面就是一個(gè)最簡單的說明例子

代碼如下

html
<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
js
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

相信也不難理解，就是input綁定了message這個(gè)值，然后在input修改的時(shí)候，message就改了，由于雙向綁定，同時(shí)頁面的html（{{ message }}）進(jìn)行了修改！

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

3.選項(xiàng)卡

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

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

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

完整代碼

<!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>
        <!--點(diǎn)擊設(shè)置curId的值  如果curId等于0，第一個(gè)a添加cur類名，如果curId等于1，第二個(gè)a添加cur類名，以此類推。添加了cur類名，a就會(huì)改變樣式 @click,:class ,v-show這三個(gè)是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，第一個(gè)div顯示，其它三個(gè)div不顯示。如果curId等于1，第二個(gè)div顯示，其它三個(gè)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的使用方法大概就是這些了，通過這個(gè)案列相信你也對vue有一些了解了，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！


相關(guān)閱讀：

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

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

CSS3中過渡動(dòng)畫怎么使用

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


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