vue指令總結（二）

時間 2019-12-11

標籤 vue 指令總結简体版

原文原文鏈接

1、vue指令

1.v-text

　　v-text是用於操做純文本，它會替代顯示對應的數據對象上的值。當綁定的數據對象上的值發生改變，插值處的內容也會隨之更新。注意：此處爲單向綁定，數據對象上的值改變，插值會發生變化；可是當插值發生變化並不會影響數據對象的值。其中：v-text能夠簡寫爲{{}},而且支持邏輯運算。css

實例以下所示：html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>v-text實例</title>
 6     <script src="../node_modules/vue/dist/vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="app">{{message}}</div>
10 
11     <script>
12         var vm = new Vue({
13             el: '#app',
14             data: {
15                 message: 'hello world'
16             }
17         })
18     </script>
19 </body>
20 </html>

運行效果以下所示：vue

2.v-html

　　v-html用於輸出html，它與v-text區別在於v-text輸出的是純文本，瀏覽器不會對其再進行html解析，但v-html會將其當html標籤解析後輸出。node

實例以下所示：api

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>v-html實例</title>
 6     <script src="../node_modules/vue/dist/vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="app">
10         <p v-html="html"></p>
11     </div>
12 
13     <script>
14         var vm = new Vue({
15             el: '#app',
16             data: {
17                 html: "<b style='color:red'>v-html的實例</b>"
18             }
19         })
20     </script>
21 </body>
22 </html>

運行效果以下所示：數組

3.v-model

　　v-model一般用於表單組件的綁定，例如input，select等。它與v-text的區別在於它實現的表單組件的雙向綁定，若是用於表單控件之外標籤是沒有用的。瀏覽器

實例以下所示：app

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>v-model實例</title>
 6     <script src="../node_modules/vue/dist/vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="app">
10         <input type="text" v-model="message" placeholder="輸入........">
11         <p>輸出的內容是: {{message}}</p>
12     </div>
13 
14     <script>
15         var vm = new Vue({
16             el: '#app',
17             data: {
18                 message: ''
19             }
20         })
21     </script>
22 </body>
23 </html>

運行效果以下所示：dom

4.v-bind

　　 v-bind 主要用於屬性綁定，比方你的class屬性，style屬性，value屬性，href屬性等等，只要是屬性，就能夠用v-bind指令進行綁定。v-bind的縮寫是 :屬性名ecmascript

實例以下所示：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script src="../node_modules/vue/dist/vue.js"></script>
 7 </head>
 8 
 9     <style type="text/css">
10         .bg{
11             width: 200px;
12             height: 200px;
13             background-color: red;
14         }
15     </style>
16 
17 
18 <body>
19     <div id="app">
20        <div :class="bg"></div>
21     </div>
22 
23     <script>
24         var vm = new Vue({
25             el: '#app',
26             data:{
27                 bg:"bg"
28             }
29         })
30     </script>
31 
32 </body>
33 </html>

效果圖以下所示：

5.v-cloak

　　v-cloak是用來解決刷新或者加載出現閃爍（顯示變量），這個標籤的特性在於它會在vue實例編譯結束後從綁定的html元素上移除。一般狀況下和下面示例的樣式display: none一塊兒使用的。代碼以下所示：

 1 <template>
 2     <div v-cloak>
 3         {{message}}
 4     </div>
 5 </template>
 6 
 7 <script type="text/ecmascript-6">
 8     export default {
 9         name: "VCloak",
10         data() {
11             return {
12                 message: 'v-cloak示例'
13             }
14         }
15     }
16 </script>
17 
18 <style lang="stylus" rel="stylesheet/stylus" scoped>
19     [v-cloak] {
20         display: none;
21     }
22 </style>

　　這個示例在瀏覽器運行不會起到任何做用的額，只有在那些網速較慢，vue.js尚未加載完成的時候，頁面纔會顯示咱們的{{message}}字樣，直到建立實例，編譯模板時，dom纔會被替換的，因此這個過程屏幕會有閃動。

6.v-pre

　　在模板中跳過vue的編譯，直接輸出原始值。就是在標籤中加入v-pre就不會輸出vue中的data值了。

實例以下所示：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="../node_modules/vue/dist/vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="app">
10         <span v-pre>這不會被編譯 + {{msg}}</span>
11     </div>
12 
13     <script>
14         var vm = new Vue({
15             el:'#app',
16             data: {
17                 msg: 'Hello World!'
18             }
19         })
20     </script>
21 </body>
22 </html>

運行效果以下所示：

7.v-once

　　經過使用 v-once 指令,執行一次性的插值【當數據改變時，插值處的內容不會繼續更新】

實例以下所示：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="../node_modules/vue/dist/vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="app">
10         <p>{{msg}}</p>
11         <p>v-once:當數據改變時，插值處的內容不會更新</p>
12         <span v-once>{{msg}}</span>
13     </div>
14 
15     <script>
16         var vm = new Vue({
17             el: '#app',
18             data: {
19                 msg: 'hello world'
20             }
21         })
22     </script>
23 </body>
24 </html>

運行效果以下所示：

8.v-show

　　 v-show指令是用來控制dom元素顯示和隱藏的

　　 v-if與v-show的區別（常常會被問到）

相同點：v-if與v-show均可以動態控制dom元素顯示隱藏
不一樣點：v-if顯示隱藏是將dom元素整個添加或刪除，而v-show隱藏則是爲該元素添加css--display:none，dom元素還在。

實例以下所示：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>顯示或隱藏</title>
 6     <script src="../node_modules/vue/dist/vue.js"></script>
 7 
 8     <style>
 9         #bg{
10             width: 100px;
11             height: 100px;
12             background: red;
13         }
14     </style>
15 
16 </head>
17 <body>
18     <div id="box">
19         <input type="button" value="toggle" @click="toggle()"> <br />
20         <div id="bg" v-show="isShow"></div>
21     </div>
22 
23     <script>
24         var vm = new Vue({
25             el:'#box',
26             data:{
27                 isShow:false
28             },
29             methods:{
30                 toggle:function(){
31                     this.isShow = !this.isShow;
32                 }
33             }
34         });
35     </script>
36 </body>
37 </html>

運行效果以下所示：

9.v-if

　　 v-if指令。其做用就是根據表達式的值true或false在DOM中生成或者移除一個元素（或多個元素）。

實例以下所示：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="../node_modules/vue/dist/vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="id">
10         <span v-if="flag">
11            若是flag爲true則顯示,false不顯示!
12         </span>
13     </div>
14 
15     <script>
16         var vm = new Vue({
17             el:"#id",
18             data:{
19                 flag:true
20             }
21         })
22     </script>
23 </body>
24 </html>

運行效果以下所示：

10.v-else

　　使用 v-else 指令來表示 v-if 的「else 塊」,可是必須緊跟在v-if或者v-else-if後面搭配一塊兒使用

實例以下所示：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="../node_modules/vue/dist/vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="app">
10         <p v-if="ok">加油，你是最棒的</p>
11         <p v-else>你要繼續加油哦</p>
12     </div>
13     
14     <script>
15         var vm = new Vue({
16             el: '#app',
17             data: {
18                 ok: true
19             }
20         })
21     </script>
22 </body>
23 </html>

運行效果以下所示：

11.v-else-if

　　v-else-if是在vue.js2.1.0中新增的，用做v-if的else-if塊，能夠鏈式的屢次使用

實例以下所示：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="../node_modules/vue/dist/vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="app">
10         <div v-if="type === 'A'">
11             A
12         </div>
13         <div v-else-if="type === 'B'">
14             B
15         </div>
16         <div v-else-if="type === 'C'">
17             C
18         </div>
19         <div v-else>
20             Not A/B/C
21         </div>
22     </div>
23 
24     <script>
25         var vm = new Vue({
26             el: '#app',
27             data: {
28                 type: 'E'
29             }
30         })
31     </script>
32 </body>
33 </html>

運行效果以下所示：

12.v-for

　　 v-for咱們用v-for指令根據一組數據的選項列表進行渲染。v-for指令須要以item in list形式的特殊語法，items是源數據數組而且item是數組元素迭代的別名。

實例以下所示：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>數組案例</title>
 6     <script src="../node_modules/vue/dist/vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="app">
10         <!--數組循環-->
11          <div v-for="(item,index) in list"  :key="item.id">
12              <div>{{item.text}}-----{{index}}</div>
13              <span> {{item.text}}</span>
14          </div>
15     </div>
16 
17     <script>
18         //push pop shift
19         var vm = new Vue({
20             el: '#app',
21             data: {
22                 list: [{
23                     id: '00000001',
24                     text: '註冊組件'
25                 },{
26                     id: '00000002',
27                     text: '對應的視圖'
28                 },{
29                     id: '00000003',
30                     text: '計算屬性'
31                 },{
32                     id: '00000004',
33                     text: '偵聽器'
34                 }
35                 ]
36             }
37 
38         })
39     </script>
40 </body>
41 </html>

運行效果以下所示：

v-for對象循環實例以下所示：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>對象循環</title>
 6     <script src="../node_modules/vue/dist/vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="app">
10         <div v-for="(item,key,index) of userInfo">{{item}}---{{key}}---{{index}}</div>
11     </div>
12 
13     <script>
14         var vm = new Vue({
15             el: '#app',
16             data:{
17                 userInfo:{
18                     name:'美眉',
19                     age: 18,
20                     gender: '女',
21                     salary: '祕密'
22                 }
23             }
24         })
25     </script>
26 </body>
27 </html>

運行效果以下所示：

13.v-on

　　v-on 指令用於綁定HTML事件：v-on:click 縮寫爲 @click

實例以下所示：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>給組件綁定原生事件</title>
 6     <script src="../node_modules/vue/dist/vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="root">
10         <child @click.native="handleClick"></child>
11     </div>
12 
13     <script>
14         Vue.component('child',{
15             template: '<div>child</div>'
16         })
17 
18         var vm = new Vue({
19             el: '#root',
20             methods: {
21                 handleClick: function () {
22                     alert('child')
23                 }
24             }
25         })
26     </script>
27 </body>
28 </html>

運行效果以下所示：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。