vue的學習-簡單指令（一）
阿新 • • 發佈：2020-12-29
v-text指令
更新元素的textContent。如果要更新部分的textContent，需要使用{{ Mustache }}插值。
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" > <head> <meta charset="UTF-8"> <title>v-test 指令</title> </head> <body> <div id="app"> <!-- v-text 指令 等同於 {{msg}} --> <span v-text="msg"></span><br> <span>{{msg}}</span> </div> <!-- 匯入 Vue.js--> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> let vm = new Vue({ el:"#app", data:{ msg: 'Hello Vue' }, }) </script> </body> </html>
v-bind指令
動態地繫結一個或多個 attribute，或一個元件 prop 到表示式。
在繫結class或styleattribute 時，支援其它型別的值，如陣列或物件。可以通過下面的教程連結檢視詳情。
在繫結 prop 時，prop 必須在子元件中宣告。可以用修飾符指定不同的繫結型別。
沒有引數時，可以繫結到一個包含鍵值對的物件。注意此時class 和style繫結不支援陣列和物件。
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" > <head> <meta charset="UTF-8"> <title>v-bind 指令</title> </head> <body> <div id="app"> <!-- v-bind 指令 --> <span v-bind:title="msg">滑鼠懸浮幾秒鐘檢視此處</span> </div> <!-- 匯入 Vue.js--> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> let vm = new Vue({ el: "#app", data:{ msg: 'Hello Vue' }, }) </script> </body> </html>
v-if: 根據表示式的值的truthiness來有條件地渲染元素。在切換時元素及它的資料繫結 / 元件被銷燬並重建。如果元素是<template>，將提出它的內容作為條件塊。 v-else:為v-if或者v-else-if新增“else 塊”。 v-else-if:表示v-if的“else if 塊”。可以鏈式呼叫。
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" > <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- v-if 指令 v-else 指令 v-else-if 指令 判斷 --> <h4 v-if="ok">YES</h4> <h4 v-else="ok">ON</h4> <h4 v-if="type === 'A'">A</h4> <h4 v-else-if="type === 'B'">B</h4> <h4 v-else="type">C</h4> </div> <!-- 匯入 Vue.js--> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> let vm = new Vue({ el: "#app", data:{ ok: true, type: "A", }, }) </script> </body> </html>
v-for指令
基於源資料多次渲染元素或模板塊。此指令之值，必須使用特定語法alias in expression，為當前遍歷的元素提供別名：
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" > <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- v-for 指令 迴圈 --> <li v-for="(item, index) in items">{{item.massage}}----{{index+1}}</li> </div> <!-- 匯入 Vue.js--> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> let vm = new Vue({ el: "#app", data:{ items: [ {"massage": "李輝學習"}, {"massage": "學習"}, ], }, }) </script> </body> </html>
v-on指令
繫結事件監聽器。事件型別由引數指定。表示式可以是一個方法的名字或一個內聯語句，如果沒有修飾符也可以省略。
用在普通元素上時，只能監聽原生 DOM 事件。用在自定義元素元件上時，也可以監聽子元件觸發的自定義事件。
在監聽原生 DOM 事件時，方法以事件為唯一的引數。如果使用內聯語句，語句可以訪問一個$eventproperty：v-on:click="handle('ok', $event)"。
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml"
>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- v-on 指令 事件 -->
<button v-on:click="sayHi">點選我</button>
</div>
<!-- 匯入 Vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: "Hello Vue",
},
methods: { //方法必須定義在 vue的 methods 物件中
sayHi: function (event) {
alert(this.msg)
},
},
})
</script>
</body>
</html>
v-model指令
在表單控制元件或者元件上建立雙向繫結
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml"
>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
輸入的文字：<input v-model="msg" type="text"/>{{msg}}<br>
輸入的文字框：<textarea v-model="msg">{{msg}}</textarea><br>
點選框：<input type="radio" name="sex" value="男" v-model="lh"/>男
<input type="radio" name="sex" value="女" v-model="lh"/>女<br>
<p>選中了性別：{{lh}}</p>
下拉框：<select v-model="selected">
<option value="" disabled>--請選擇--</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>選中了：{{selected}}</p>
<hr>
</div>
<!-- 匯入 Vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
let vm = new Vue({
el: "#app",
data:{
msg: "hello vue!",
lh: "",
selected: "",
},
})
</script>
</body>
</html>
v-html指令
更新元素的innerHTML。注意：內容按普通 HTML 插入 - 不會作為 Vue 模板進行編譯。如果試圖使用v-html組合模板，可以重新考慮是否通過使用元件來替代。
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" > <head> <meta charset="UTF-8"> <title>v-html 指令</title> </head> <body> <div id="app"> <p>Using mustaches: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p> </div> <!-- 匯入 Vue.js--> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> let vm = new Vue({ el: "#app", data:{ rawHtml: 'Hello Vue' }, }) </script> </body> </html>
v-show指令
不同的是帶有v-show的元素始終會被渲染並保留在 DOM 中。v-show只是簡單地切換元素的 CSS propertydisplay
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" > <head> <meta charset="UTF-8"> <title>v-show 指令</title> </head> <body> <div id="app"> <h1 v-show="ok">Hello!</h1> </div> <!-- 匯入 Vue.js--> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> let vm = new Vue({ el: "#app", data:{ ok: false, // true 顯示 rawHtml: 'Hello Vue' }, }) </script> </body> </html>
v-slot指令
提供具名插槽或需要接收 prop 的插槽。 (插槽)
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" > <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <todo> <todo-title slot="todo-title" :title="title"></todo-title> <todo-times slot="todo-times" v-for="time in times" :time="time"></todo-times> </todo> </div> <!-- 匯入 Vue.js--> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> // 定義一個 vue 的元件component Vue.component("todo", { template: '<div> \ <slot name="todo-title"></slot> \ <li> \ <slot name="todo-times"></slot> \ </li> \ </div>', }); Vue.component("todo-title",{ props: ['title'], template: '<span>{{title}}</span>' }); Vue.component("todo-times",{ props: ["time"], template: '<li>{{time}}</li>' }); let vm = new Vue({ el: "#app", data:{ title: "李輝", times: ["Java","Vue","Spring"] }, }) </script> </body> </html>
v-pre 指令
跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標籤。跳過大量沒有指令的節點會加快編譯。
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-slot="http://www.w3.org/1999/XSL/Transform"> <head> <meta charset="UTF-8"> <title>v-pre 指令</title> </head> <body> <div id="app"> <span v-pre>{{ this will not be compiled(這將不會被編譯) }}</span> </div> <!-- 匯入 Vue.js--> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> let vm = new Vue({ el: "#app", data:{ message: 'Hello Vue', }, }) </script> </body> </html>
v-cloak指令
這個指令保持在元素上直到關聯例項結束編譯。和 CSS 規則如[v-cloak] { display: none }一起用時，這個指令可以隱藏未編譯的 Mustache 標籤直到例項準備完畢。不會顯示，直到編譯結束。
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-slot="http://www.w3.org/1999/XSL/Transform"> <head> <meta charset="UTF-8"> <title>v-cloak 指令</title> </head> <body> <style> [v-cloak] { display: none; } </style> <div id="app"> <div v-cloak> {{ message }} </div> </div> <!-- 匯入 Vue.js--> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> let vm = new Vue({ el: "#app", data:{ message: 'Hello Vue', }, }) </script> </body> </html>
v-once指令
只渲染元素和元件一次。隨後的重新渲染，元素/元件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新效能。
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-slot="http://www.w3.org/1999/XSL/Transform"> <head> <meta charset="UTF-8"> <title>v-once 指令</title> </head> <body> <div id="app"> <!-- 單個元素 --> <span v-once>This will never change: {{msg}}</span> <!-- 有子元素 --> <div v-once> <h1>comment</h1> <p>{{msg}}</p> </div> <!-- 元件 --> <my-component v-once :comment="msg"></my-component> <!-- `v-for` 指令--> <ul> <li v-for="i in list" v-once>{{i}}</li> </ul> </div> <!-- 匯入 Vue.js--> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> let vm = new Vue({ el: "#app", data:{ msg: 'Hello Vue', list:["Java",'Vue'] }, }) </script> </body> </html>
注1： 插槽
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" > <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <todo> <todo-title slot="todo-title" :title="title"></todo-title> <todo-times slot="todo-times" v-for="(time, index) in times" :time="time" :index="index" v-on:remove="del"></todo-times> </todo> </div> <!-- 匯入 Vue.js--> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> // 定義一個 vue 的元件component Vue.component("todo", { template: '<div> \ <slot name="todo-title"></slot> \ <li> \ <slot name="todo-times"></slot> \ </li> \ </div>', }); Vue.component("todo-title",{ props: ['title'], template: '<span>{{title}}</span>' }); Vue.component("todo-times",{ props: ["time",'index'], template: '<li>{{index}}----{{time}} <button @click="remove">刪除</button></li>', methods: { remove: function (index) { this.$emit("remove",index); } } }); let vm = new Vue({ el: "#app", data:{ title: "李輝", times: ["Java","Vue","Spring"] }, methods: { del: function (index) { this.times.splice(index, 1) } } }) </script> </body> </html>