Vue語法和標簽的入門使用教程

Posted on by

前言：

最近兩周一直在忙於公司業務的學習，一直沒有時間進行總結，作為後端開發人員來說，需要瞭解一些前端的知識，因此今天把最近復習的Vue的知識總結瞭一下，希望能加深總結的印象以及幫助到各位大佬。

設置代碼片段

首先從比較基本的設置開始說起。

所謂的設置代碼片段，就是可以方便我們的開發。具體的設置，點擊文件，首選項，選擇配置用戶代碼片段，新建全局代碼片段文件，將下面的代碼復制到大括號內即可使用。

{
 "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"
 }
}

設置完成後，新建HTML文件，輸入vuehtml即可使用

Vue的指令

v-bind指令

v-bind是單向數據綁定，這個指令一般用在標簽屬性裡面，用來獲取值，接下來用案例解釋

<!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>
      <!--簡寫-->
      <h2 :title="message">
      {{content}}
      </h2>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                question:"現在是幾點來著?",
                message:"現在是:" + new Date().toLocaleString()
            }
        })
    </script>
</body>
</html>

輸出

v-model指令

v-model指令是雙向綁定，當一邊發生比變化時，另一邊也會發生變化。相應的測試代碼如下，感興趣的小夥伴兒們可以測試一些哦。

<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標簽

v-on標簽用於綁定事件，v-on:click表示處理鼠標點擊的事件，事件調用的方法應寫在methods節點中。案例如下:

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

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

            }
        )
    </script>
</body>

修飾符

修飾符 (Modifiers) 是以“.”指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。

例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()：

即阻止事件原本的默認行為，案例測試如下：

<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('請輸入用戶名')
        }
    }
}
          }
        )
    </script>
</body>

v-if和v-show標簽

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

<body>
   <div id="app">
      <input type="checkbox" v-model="ok">你長得帥嗎</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的用法很相似，它們的區別是什麼呢？

這是前端面試中經常被問到的一個問題。

1.v-show性能比v-if好一點。這是因為v-show在編譯時隻編譯一次，而v-if會不停的創建，銷毀。
2.v-show經常用於控制css樣式，而v-if控制的是DOM，添加或刪除DOM元素，所以相比之下，v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且隻是簡單地基於 CSS 進行切換。
3.一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。

v-for標簽

v-for為循環指令，可以用於遍歷等。案例如下：

在div中加入以下代碼，代表n從0開始遍歷。

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

頁面結果：

遍歷對象的形式如下：

<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: '樹枝'}]}
      })
    </script>
</body>

輸出：

總結

到此這篇關於Vue語法和標簽使用的文章就介紹到這瞭,更多相關Vue語法和標簽使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：