前端的VUE怎麼使用-html教學-PHP中文網

首頁

web前端

html教學

前端的VUE怎麼使用

php中世界最好的语言

Nov 27, 2017 am 09:32 AM

使用前端怎麼

我用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中文網其它相關文章！

相關閱讀：

怎麼用CSS3和JS做出上升的方塊動態背景

CSS3的主要功能應用

CSS3中過渡動畫怎麼使用

以上是前端的VUE怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract