碼上歡樂
相關內容    簡體    繁體

VUE常用的標簽屬性和指令

本文轉載自   查看原文   2019-11-27 23:37   676    VUE

VUE常用標簽屬性和指令

是帶有 v- 前綴的特殊屬性。指令屬性的值預期是單一 JavaScript 表達式。指令的職責就是當其表達式的值改變時相應地將某些行為應用到 DOM 上

　　1、數據綁定最常見的形式就是使用：{{data}}；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app1">
            <h1>Message:{{name}}</h1>
           </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript">
            let vue = new Vue({
                el: '#app1',
                data: {
                    name: 'rous'
                }
            });
        </script>
    </body>
</html>

 

結果：

　　2、通過使用 v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app1">
            <h1>Message:{{name}}</h1>
            <br/>
            <h1 v-once>只會渲染一次，之后修改該data值還是不變{{name}}</h1>
           </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript">
            let vue = new Vue({
                el: '#app1',
                data: {
                    name: 'rous'
                }
            });
        </script>
    </body>
</html>

 

結果：

　　3、v-text指令：更新元素的 textContent（該標簽的全部上下文）。如果要更新部分的 textContent ，需要使用 {{ name }} 插值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app1">
            <h1>Message:{{name}}</h1>
            <br/>
            <h1 v-once>只會渲染一次，之后修改該data值還是不變{{name}}</h1>
            <h1 v-text="name">這段文字被覆蓋</h1>
           </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript">
            let vue = new Vue({
                el: '#app1',
                data: {
                    name: 'rous'
                }
            });
        </script>
    </body>
</html>

 

結果：

 

所以當只渲染一個標簽的部分文本的時候選擇{{name}}這種形式比較好。

　　4、v-html指令： 渲染html節點，如果是使用{{name}}、v-text、v-once只會被解釋為純文本

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app1">
            <span>Message:{{htmlStr}}</span>
            <br/>
            <span v-once>只會渲染一次，之后修改該data值還是不變{{htmlStr}}</span>
            <br/>
            <span v-text="htmlStr">這段文字被覆蓋</span>
            <div v-html="htmlStr"></div>
           </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript">
            let vue = new Vue({
                el: '#app1',
                data: {
                    name: 'rous',
                    htmlStr: '<h1>我是節點<h1/>'
                }
            });
        </script>
    </body>
</html>

 

結果：

注意：v-html數據綁定會被忽略

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app1">
            <div v-html="htmlStr"></div>
           </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript">
            let vue = new Vue({
                el: '#app1',
                data: {
                    name: 'rous',
                    htmlStr: '<h1>我是節點'+this.name+'A<h1/>'
                }
            });
        </script>
    </body>
</html>

 

結果：沒有輸出name的值

　　5、v-model 指令，限制在<input>、<select>、<textarea>、components中使用，當綁定輸入標簽后，輸入的值后原來定義的值也會改變

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app1">
            <input v-model="name" />
            <p v-once>{{name}}</p>
            <h1 v-text="name"></h1>
            <h1>{{name}}</h1>
           </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript">
            let vue = new Vue({
                el: '#app1',
                data: {
                    name: 'rous'
                }
            });
        </script>
    </body>
</html>

 

結果：

　　6、 v-bind 綁定指令，給標簽綁定屬性值

　　誤區：標簽的屬性不能使用{{}}，來傳達值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app1">
            <div id={{id}}></div>
           </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript">
            let vue = new Vue({
                el: '#app1',
                data: {
                    id: 'div'
                }
            });
        </script>
    </body>
</html>

 

結果：

應該使用v-bind 來綁定標簽的屬性值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app1">
            <div v-bind:id="id"></div>
           </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript">
            let vue = new Vue({
                el: '#app1',
                data: {
                    id: 'div'
                }
            });
        </script>
    </body>
</html>

 

結果：

　　7、使用{{}}，編寫javaScript語句

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app1">
            {{ num + 1 }}
            {{ isOK ? 'YES' : 'NO' }}
            {{ message.split('') }} <!--注意不要給分號，否在報錯-->
            <div v-bind:id="'list-' + id"></div>
           </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript">
            let vue = new Vue({
                el: '#app1',
                data: {
                    id: 'div',
                    num: 2,
                    isOK: false,
                    message: 'abcdefg'
                }
            });
        </script>
    </body>
</html>

結果：

 

這些表達式會在所屬 Vue 實例的數據作用域下作為 JavaScript 被解析。有個限制就是，每個綁定都只能包含單個表達式，所以下面的例子都不會生效，不需要在屬性前使用this

{{ var a = 1 }}     <!-- 這是語句，不是表達式 無效 -->
{{ if (ok) { return message } }}     <!-- 流控制也不會生效，請使用三元表達式 -->

 　　7、v-if 判斷顯示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app1">
            <p v-if="isOK">你可以看見我了</p>
            <p v-if="right">你能看見我嗎？</p>
           </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript">
            let vue = new Vue({
                el: '#app1',
                data: {
                    isOK: false,
                    right: true,
                }
            });
        </script>
    </body>
</html>

 

 　　結果：

 

當然還有v-else，v-else-if

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app1">
            <p v-if="isOK">你可以看見我了</p>
            <p v-else-if="isOK === true">你能看見我嗎？</p>
            <p v-else>你真的可以看見我了</p>
           </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript">
            let vue = new Vue({
                el: '#app1',
                data: {
                    isOK: false,
                    right: true,
                }
            });
        </script>
    </body>
</html>

 　　8、v-show 是否顯示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app1">
            <p v-show="isShow">你真的可以看見我了</p>
           </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript">
            let vue = new Vue({
                el: '#app1',
                data: {
                    isShow: true
                }
            });
        </script>
    </body>
</html>

結果：

 

　　9、v-for：循環

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app1">
            <p v-for="(value, i) in list">值：{{value}}，索引：{{i}}</p>
           </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript">
            let vue = new Vue({
                el: '#app1',
                data: {
                    list: [1,2,3,4,5,6]
                }
            });
        </script>
    </body>
</html>

 

結果：

　　10、v-pre：跳過這個元素和它的子元素的編譯過程。一些靜態的內容不需要編輯加這個指令可以加快編輯

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app1">
            <p v-pre>{{list}}</p>
            <p>{{list}}</p>
           </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript">
            let vue = new Vue({
                el: '#app1',
                data: {
                    list: [1,2,3,4,5,6]
                }
            });
        </script>
    </body>
</html>

 

結果：一般很少用到

　　11、v-once：只對數據進行一次的渲染

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app1">
            <p v-once>{{msg}}<p>
            <p>{{msg}}</p>
            <input v-model="msg" />
           </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript">
            let vue = new Vue({
                el: '#app1',
                data: {
                    msg: 1
                }
            });
        </script>
    </body>
</html>

　　結果：

　　12、v-on ：v-on指令是綁定事件，v-on:click 可以簡寫成 @click

　　v-on還有許多的修飾綁定

.stop - 調用 event.stopPropagation()。
.prevent - 調用 event.preventDefault()。
.capture - 添加事件偵聽器時使用 capture 模式。
.self - 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。
.{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回調。
.native - 監聽組件根元素的原生事件。
.once - 只觸發一次回調。
.left - (2.2.0) 只當點擊鼠標左鍵時觸發。
.right - (2.2.0) 只當點擊鼠標右鍵時觸發。
.middle - (2.2.0) 只當點擊鼠標中鍵時觸發。
.passive - (2.3.0) 以 { passive: true } 模式添加偵聽器
<!-- 方法處理器 -->
<button v-on:click="doThis"></button>

<!-- 對象語法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

<!-- 內聯語句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 縮寫 -->
<button @click="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默認行為 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默認行為，沒有表達式 -->
<form @submit.prevent></form>

<!--  串聯修飾符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 鍵修飾符，鍵別名 -->
<input @keyup.enter="onEnter">

<!-- 鍵修飾符，鍵代碼 -->
<input @keyup.13="onEnter">

<!-- 點擊回調只會觸發一次 -->
<button v-on:click.once="doThis"></button>

 

 

 

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 vue中常用的屬性標簽 FTL指令常用標簽及語法 FTL指令常用標簽及語法 FTL指令常用標簽及語法 HTML常用標簽及其屬性 forEach標簽的常用屬性 CSS、常用標簽屬性 【HTML】常用標簽及屬性 dubbo——常用標簽屬性 HTML常用標簽及屬性
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM