{
 "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是單向數(shù)據(jù)綁定，這個指令一般用在標簽屬性里面，用來獲取值，接下來用案例解釋

<!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:"現(xiàn)在是幾點來著?",
                message:"現(xiàn)在是:" + new Date().toLocaleString()
            }
        })
    </script>
</body>
</html>

輸出

v-model指令

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

<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表示處理鼠標點擊的事件，事件調(diào)用的方法應寫在methods節(jié)點中。案例如下:

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

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

            }
        )
    </script>
</body>

修飾符

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

例如，.prevent 修飾符告訴 v-on 指令對于觸發(fā)的事件調(diào)用 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標簽

首先根據(jù)小案例演示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的用法很相似，它們的區(qū)別是什么呢？

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

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

v-for標簽

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

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

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

頁面結(jié)果：

遍歷對象的形式如下：

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

輸出：