快捷導(dǎo)航

Vue語(yǔ)法和標(biāo)簽的入門使用教程

更新時(shí)間：2022年08月06日 08:25:48 作者：小威要向諸佬學(xué)習(xí)呀

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,下面這篇文章主要給大家介紹了關(guān)于Vue語(yǔ)法和標(biāo)簽使用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言：

最近兩周一直在忙于公司業(yè)務(wù)的學(xué)習(xí)，一直沒(méi)有時(shí)間進(jìn)行總結(jié)，作為后端開(kāi)發(fā)人員來(lái)說(shuō)，需要了解一些前端的知識(shí)，因此今天把最近復(fù)習(xí)的Vue的知識(shí)總結(jié)了一下，希望能加深總結(jié)的印象以及幫助到各位大佬。

設(shè)置代碼片段

首先從比較基本的設(shè)置開(kāi)始說(shuō)起。

所謂的設(shè)置代碼片段，就是可以方便我們的開(kāi)發(fā)。具體的設(shè)置，點(diǎn)擊文件，首選項(xiàng)，選擇配置用戶代碼片段，新建全局代碼片段文件，將下面的代碼復(fù)制到大括號(hào)內(nèi)即可使用。

{
 "vue html": {
 "scope": "html",
 "prefix": "vuehtml",
 "body": [
 "<!DOCTYPE html>",
 "<html lang=\"en\">",
 "",
 "<head>",
 "    <meta charset=\"UTF-8\">",
 "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
 "    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
 "    <title>Document</title>",
 "</head>",
 "",
 "<body>",
 "    <div id=\"app\">",
 "",
 "    </div>",
 "    <script src=\"vue.min.js\"></script>",
 "    <script>",
 "        new Vue({",
 "            el: '#app',",
 "            data: {",
 "                $1",
 "            }",
 "        })",
 "    </script>",
 "</body>",
 "",
 "</html>",
 ],
 "description": "my vue template in html"
 }
}

設(shè)置完成后，新建HTML文件，輸入vuehtml即可使用

Vue的指令

v-bind指令

v-bind是單向數(shù)據(jù)綁定，這個(gè)指令一般用在標(biāo)簽屬性里面，用來(lái)獲取值，接下來(lái)用案例解釋

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
      <h1 v-bind:title="message">
         {{question}}
      </h1>
      <!--簡(jiǎn)寫-->
      <h2 :title="message">
      {{content}}
      </h2>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                question:"現(xiàn)在是幾點(diǎn)來(lái)著?",
                message:"現(xiàn)在是:" + new Date().toLocaleString()
            }
        })
    </script>
</body>
</html>

輸出

v-model指令

v-model指令是雙向綁定，當(dāng)一邊發(fā)生比變化時(shí)，另一邊也會(huì)發(fā)生變化。相應(yīng)的測(cè)試代碼如下，感興趣的小伙伴兒們可以測(cè)試一些哦。

<body>
    <div id="app">
      <input type="text" v-bind:value="key.value"/>
      <input type="text" v-model="key.value"/>
      <p>{{key.value}}</p>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data:{
                key:{
                  value:"xiaowei"
                }
            }
        })
    </script>
</body>

v-on標(biāo)簽

v-on標(biāo)簽用于綁定事件，v-on:click表示處理鼠標(biāo)點(diǎn)擊的事件，事件調(diào)用的方法應(yīng)寫在methods節(jié)點(diǎn)中。案例如下:

<body>
    <div id="app">
      <button v-on:click="query1()">測(cè)試相貌</button>
      <!--第二種寫法-->
      <button　＠click="query2()">測(cè)試相貌2</button>

    </div>
  
    <script>
        new Vue({
            el: '#app',
            data: {
               key:{
                 value:"xiaowei"
               }
           },
           methods:{
            query1(){
           alert("你是帥哥")
            },
            query2(){
               alert("你是靚仔")
               }
           }

            }
        )
    </script>
</body>

修飾符

修飾符 (Modifiers) 是以“.”指明的特殊后綴，用于指出一個(gè)指令應(yīng)該以特殊方式綁定。

例如，.prevent 修飾符告訴 v-on 指令對(duì)于觸發(fā)的事件調(diào)用 event.preventDefault()：

即阻止事件原本的默認(rèn)行為，案例測(cè)試如下：

<body>
    <div id="app">
<form action="save" v-on:submit.prevent="Submit">
    <label for="username">
        <input type="text" id="username" v-model="user.username"/>
        <button type="submit">保存</button>
    </label>
</form>
    </div>
    <script>
        new Vue({
            el: '#app',
            data:{
               user:{}
            },
            methods: {
                     Submit() {
                    if (this.user.username) {
                      alert('提交表單')
                    } else {
                           alert('請(qǐng)輸入用戶名')
        }
    }
}
          }
        )
    </script>
</body>

v-if和v-show標(biāo)簽

首先根據(jù)小案例演示v-if和v-else的用法

<body>
   <div id="app">
      <input type="checkbox" v-model="ok">你長(zhǎng)得帥嗎</input>
      <h1 v-if="ok">帥!</h1>
      <h1 v-else>非常帥!</h1>
   </div>
    <script>
      new Vue({
         el:"#app",
      data:{
         ok:true
      }
      })
      
    </script>
</body>

v-if和v-show的用法很相似，它們的區(qū)別是什么呢？

這是前端面試中經(jīng)常被問(wèn)到的一個(gè)問(wèn)題。

1.v-show性能比v-if好一點(diǎn)。這是因?yàn)関-show在編譯時(shí)只編譯一次，而v-if會(huì)不停的創(chuàng)建，銷毀。
2.v-show經(jīng)常用于控制css樣式，而v-if控制的是DOM，添加或刪除DOM元素，所以相比之下，v-show 就簡(jiǎn)單得多——不管初始條件是什么，元素總是會(huì)被渲染，并且只是簡(jiǎn)單地基于 CSS 進(jìn)行切換。
3.一般來(lái)說(shuō)，v-if 有更高的切換開(kāi)銷，而 v-show 有更高的初始渲染開(kāi)銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時(shí)條件很少改變，則使用 v-if 較好。

v-for標(biāo)簽

v-for為循環(huán)指令，可以用于遍歷等。案例如下：

在div中加入以下代碼，代表n從0開(kāi)始遍歷。

<ul>
    <li v-for="n in 10">{{ n }} </li>
</ul>

頁(yè)面結(jié)果：

遍歷對(duì)象的形式如下：

<body>
   <div id="app">
   <table>
      <tr v-for="user in userList">
         <td>{{user.id}}</td>
         <td>{{user.name}}</td>
      </tr>
   </table>
   </div>
    <script>
      new Vue({
         el:"#app",
         data: {
    userList: [
        { id: 1, name: '荔枝' },
        { id: 2, name: '油餅' },
        { id: 3, name: '蝦頭'},
        { id: 4, name: '樹(shù)枝'}]}
      })
    </script>
</body>

輸出：