首頁 > 文章 > web前端 > 前端的VUE怎麼使用

前端的VUE怎麼使用

php中世界最好的语言原創: 2017-11-27 09:32:009805瀏覽

我用VUE做專案也有一段時間了，對於VUE來說現在已經比較熟悉了，但是關於VUE的入門文章卻一直沒有寫過，那麼今天就給大家帶來幾個案例，好好介紹下VUE這種好用的小工具。

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: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue!&#39;
  }
})

相信也不難理解，就是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="{&#39;cur&#39;:curId===0}">html</a>
        <a href="javascript:;" @click="curId=1" :class="{&#39;cur&#39;:curId===1}">css</a>
        <a href="javascript:;" @click="curId=2" :class="{&#39;cur&#39;:curId===2}">javascript</a>
        <a href="javascript:;" @click="curId=3" :class="{&#39;cur&#39;: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: &#39;#tab&#39;,
        data: {
            curId: 0
        },
        computed: {},
        methods: {},
        mounted: function () {
        }
    })
</script>
</html>

VUE的使用方法大概就是這些了，透過這個案例相信你也對vue有一些了解了，更多精彩請關注php中文網其它相關文章！