欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2022年08月06日 08:25:48   作者:小威要向諸佬學習呀  
Vue是一套用于構(gòu)建用戶界面的漸進式框架,下面這篇文章主要給大家介紹了關(guān)于Vue語法和標簽使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下

前言:

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

設(shè)置代碼片段

首先從比較基本的設(shè)置開始說起。

所謂的設(shè)置代碼片段,就是可以方便我們的開發(fā)。具體的設(shè)置,點擊文件,首選項,選擇配置用戶代碼片段,新建全局代碼片段文件,將下面的代碼復制到大括號內(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ù)綁定,這個指令一般用在標簽屬性里面,用來獲取值,接下來用案例解釋

<!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ā)生變化。相應(yīng)的測試代碼如下,感興趣的小伙伴兒們可以測試一些哦。

<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)用的方法應(yīng)寫在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) 是以“.”指明的特殊后綴,用于指出一個指令應(yīng)該以特殊方式綁定。

例如,.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>

輸出:

總結(jié)

到此這篇關(guān)于Vue語法和標簽使用的文章就介紹到這了,更多相關(guān)Vue語法和標簽使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論