vue實例整理1

一 介紹css

(1)       聲明式渲染, 文本插值html

<div id="app">
    <p>{{message}}</p>
</div>
<script src="scripts/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'Hello Vue.js!'
        }
    })
</script>

 

(2)       v-bind綁定DOM元素屬性vue

<div id="app-2"> 
    <span v-bind:title="message">鼠標懸停幾秒,可看到此處動態綁定的title</span> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    var app2 = new Vue({ 
        el:"#app-2", 
        data:{ 
            message:'頁面加載於 ' +new Date() 
        } 
    }) 
</script>

 

<div id="demo"> 
    <div v-bind:href="url">a</div> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    new Vue({ 
        el:"#demo", 
        data:{ 
            url:'http://baidu.com' 
        } 
    }) 
</script>

 

(3)       條件與循環,ios

v-if:npm

<div id="demo"> 
    <p v-if="seen">you can see me</p> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    new Vue({ 
        el:"#demo", 
        data:{ 
            seen:true 
        } 
    }) 
</script>

 

v-for:axios

<div id="app-4"> 
    <ol> 
        <li v-for="todo in todos">{{todo.text}}</li> 
    </ol> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    var app4 = new Vue({ 
        el:"#app-4", 
        data:{ 
            todos:[ 
                {text:'學習JavaScript'}, 
                {text:'學習vue'}, 
                {text:'建立激動人心的代碼'} 
            ] 
        } 
    }) 
</script>

 

// v-for實現tab切換效果
<!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> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script> <style> .red{ background: skyblue; } </style> </head> <body> <div id="app1" class="common"> <div class="title">v-for實現tab切換效果</div> <input v-for="item,i in tabData" type="button" v-bind:value="item.title" v-bind:class="{red:i==index}" v-on:click="tabHandle(i)" /> <div v-bind:style="{display:ii==index?'block':'none'}" v-for="item,ii in tabData"> <p v-for="option in item.list"> {{option.subTitle}} </p> </div> </div> <script> let tabData = [ { title:'新聞', list:[ {subTitle:'高校論壇',id:1}, {subTitle:'好人好事', id:2} ] }, { title:'視頻', list:[ {subTitle:'最強大腦',id:11}, {subTitle:'相親大會', id:22} ] }, { title:'搞笑', list:[ {subTitle:'笑一笑十年少',id:111}, {subTitle:'心若向陽', id:222} ] } ]; var app = new Vue({ el: "#app1", data: { tabData, index:0 }, methods:{ tabHandle(i){ this.index = i; } } }) </script> </body> </html>

 

(4)       處理用戶輸入api

v-on 指令 來增長事件監聽器,觸發事件後會調用 Vue 實例中 methods 下定義的方法:數組

<div id="app-5"> 
    <p>{{message}}</p> 
    <button v-on:click="reverseMessage">翻轉message</button> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    var app5 = new Vue({ 
        el:"#app-5", 
        data:{ 
            message:'hello' 
        }, 
        methods:{ 
            reverseMessage:function(){ 
                this.message = this.message.split('').reverse().join('') 
            } 
        } 
    }) 
</script>

 

v-model 指令,實現表單輸入和應用程序狀態之間的雙向綁定:緩存

<div id="app-6"> 
    <p>{{message}}</p> 
    <input v-model="message" /> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    var app6 = new Vue({ 
        el:'#app-6', 
        data:{ 
            message:'hello vue' 
        } 
    })
</script>

 

(5)       Componentapp

<div id="app-7"> 
    <ol> 
        <todo-item v-for="item in groceryList" 
                   v-bind:todo="item" 
                   v-bind:key="item.id"> 
        </todo-item> 
    </ol> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    Vue.component('todo-item',{ 
        props:['todo'], 
        template:`<li>{{todo.text}}</li>` 
    }) 
    var app7 =new Vue({ 
        el:"#app-7", 
        data:{ 
            groceryList:[ 
                {id:0,text:'蔬菜'}, 
                {id:1,text:'奶酪'}, 
                {id:2,text:'水果'} 
            ] 
        } 
    }) 
</script>

 

二 vue實例

(1)       構造函數

能夠經過預先定義選項擴展 Vue 構造函數,從而建立可複用的組件構造函數

var MyComponent =   Vue.extend({

  // 擴展選項

})

// `MyComponent` 的全部實例,都將由預先定義的擴展選項來建立

var   myComponentInstance = new MyComponent()

 

(2)       屬性與方法

var data = { a: 1 }

var vm = new Vue({

  data: data

})

vm.a === data.a // -> true

// 設置屬性也會影響到原始數據

vm.a = 2

data.a // -> 2

// ... 反之亦然

data.a = 3

vm.a // -> 3

 

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一個實例方法
vm.$watch('a', function (newVal, oldVal) {
  // 這個回調函數將在 `vm.a` 改變後調用
})

 

 

(3)       實例生命週期鉤子函數

var vm = new Vue({

  data: {

    a: 1

  },

  created: function () {

    // `this` 指向 vm 實例

console.log('a is: ' + this.a)

  }

})

// -> "a is: 1"

 

三 模板語法

(1)       插值

文本插值:

<div id="demo"> 
    <span>{{message}}</span> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    new Vue({ 
        el:"#demo", 
        data:{ 
            message:'hi' 
        } 
    }) 
</script>

 

純html,v-html:

<div id="demo"> 
    <div v-html="message"></div> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    new Vue({ 
        el:"#demo", 
        data:{ 
            message:'<span>hello</span>' 
        } 
    }) 
</script>

 

 

屬性,v-bind:

<div id="demo"> 
    <div v-bind:href="url">a</div> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    new Vue({ 
        el:"#demo", 
        data:{ 
            url:'http://baidu.com' 
        } 
    }) 
</script>

 

Javascript表達式:

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

 

(2)       指令

v-前綴的特殊屬性

v-bind 指令被用來響應地更新 HTML 屬性:                  

<div id="demo"> 
    <div v-bind:href="url">a</div> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    new Vue({ 
        el:"#demo", 
        data:{ 
            url:'http://baidu.com' 
        } 
    }) 
</script>

 

修飾符(Modifiers)是以半角句號  指明的特殊後綴,用於指出一個指令應該以特殊方式綁定:.
<div id="demo"> 
    <form v-on:submit.prevent="onSubmit">a</form> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    new Vue({ 
        el:"#demo", 
        methods:{ 
            onSubmit:function(){ 
                alert('hi') 
            } 
        } 
    }) 
</script>

 

(3)       過濾器

Vue 2.x 中,過濾器只能在 mustache 綁定和 v-bind 表達式(從 2.1.0+ 開始支持)中使用,由於過濾器設計目的就是用於文本轉換。

<!-- in mustaches -->

{{ message | capitalize }}

<!-- in v-bind -->

<div v-bind:id="rawId | formatId"></div>

 

<div id="demo"> 
    {{message|capitalize}} 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    new Vue({ 
        el:"#demo", 
        data:{ 
            message:'helloyi' 
        }, 
        filters:function(value){ 
            if(!value) return '' 
            value = value.toString(); 
            return value.charAt(0).toUpperCase() + value.slice(1); 
        } 
    }) 
</script>

 

(4)       縮寫

<!-- 完整語法 -->

<a v-bind:href="url"></a>

<!-- 縮寫 -->

<a :href="url"></a>

 

<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>

 

四 計算屬性

(1)       模板中綁定表達式比較方便,但只適用於簡單的操做。模板中放入太多的邏輯會讓模板太重且難以維護。這時能夠選擇計算屬性。

<div id="example"> 
   <p>Original message:"{{message}}"</p> 
    <p>Computed reversed message:"{{reversedMessage}}"</p> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    var vm = new Vue({ 
        el:'#example', 
        data:{ 
            message:'hello' 
        }, 
        computed:{ 
            reversedMessage:function(){ 
                return this.message.split('').reverse().join('') 
            } 
        } 
    }) 
</script>

 

//   Original message: "Hello"

//   Computed reversed message: "olleH"

 

(2)       計算緩存 與  Methods

<div id="example"> 
    <p>{{now}}</p> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    var vm = new Vue({ 
        el:'#example', 
        data:{ 
            message:'hello' 
        }, 
        computed:{ 
            now:function(){ 
                return Date.now() 
            } 
        } 
    }) 
</script>

 

<div id="example"> 
    <p>Original message:"{{message}}"</p> 
    <p>Computed reversed message:"{{reversedMessage()}}"</p> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    var vm = new Vue({ 
        el:'#example', 
        data:{ 
            message:'hello' 
        }, 
        methods:{ 
            reversedMessage:function(){ 
                return this.message.split('').reverse().join('') 
            } 
        } 
    }) 
</script>

 

Ps:計算屬性是基於它的依賴緩存。計算屬性只有在它的相關依賴發生改變時纔會從新取值。而methods調用總會執行函數。

(3)       計算屬性 與 watched屬性

<div id="demo"> 
    {{ fullName }} 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
  var vm = new Vue({ 
      el:'#demo', 
      data:{ 
          firstName:'Foo', 
          lastName:'Bar', 
          fullName:'Foo Bar' 
      }, 
      watch:{ 
          firstName:function(val){ 
              this.fullName = val + ' ' + this.lastName 
          }, 
          lastName:function(val){ 
              this.fullName = this.firstName + ' ' +val 
          } 
      } 
  }) 
</script>

 

<div id="demo"> 
    {{ fullName }} 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    var vm = new Vue({ 
        el:'#demo', 
        data:{ 
            firstName:'Foo', 
            lastName:'Bar' 
        }, 
        computed:{ 
            fullName: function(){ 
                    return this.firstName + ' ' + this.lastName 
                }          
         } 
    }) 
</script>

 

 

(4)       計算setter

<div id="demo"> 
    {{ fullName }} 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    var vm = new Vue({ 
        el:'#demo', 
        data:{ 
            firstName:'Foo', 
            lastName:'Bar' 
 
        }, 
        computed:{ 
            fullName:{ 
                get:function(){ 
                    return this.firstName + ' ' + this.lastName 
                }, 
                set:function(newValue){ 
                    var names = newValue.split(' ') 
                    this.firstName = names[0] 
                    this.lastName = names[names.length - 1] 
                } 
            } 
 
        } 
 
    }) 
</script>

 

五 class與style綁定                                     

(1)       綁定html class

對象語法:傳給v-bind:class一個對象,以動態地切換class

<div id="demo"> 
    <div class="static" v-bind:class="{active:isActive,'text-danger':hasError }"></div> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    new Vue({ 
        el:"#demo", 
        data:{ 
            isActive:true, 
            hasError:false 
        } 
    }) 
    //渲染結果爲div的class="static active" 
</script>

 

 <div v-bind:class="{ active: isActive }"></div>

 

<div id="demo"> 
    <div v-bind:class="classObject"></div> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    new Vue({ 
        el:"#demo", 
        data: { 
            classObject:{ 
                active:true, 
                'text-danger':false 
            } 
        } 
    }) 
//渲染結果爲div的class="active" 
</script>

 

<div id="demo"> 
   <div v-bind:class="classObject"></div> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    new Vue({ 
        el:"#demo", 
        data:{ 
            isActive:true, 
            error:null 
        }, 
        computed:{ 
            classObject:function(){ 
                return { 
                    active:this.isActive && !this.error, 
                    'text-danger': this.error && this.error.type === 'fatal' 
                } 
            } 
        } 
    }) 
    //渲染結果爲div的class="active" 
</script>

 

 

數組語法:把一個數組傳給v-bind:class,以應用一個class列表

<div id="demo"> 
      <div v-bind:class="[activeClass,errorClass]"></div> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    new Vue({ 
        el:"#demo", 
        data:{ 
            activeClass:'active', 
            errorClass:'text-danger' 
        } 
    }) 
    //渲染結果爲div的class="active text-danger" 
</script>

 

<div id="demo"> 
    <div v-bind:class="[isActive ? activeClass : ' ',errorClass]"></div> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    new Vue({ 
        el:"#demo", 
        data:{ 
            isActive:true, 
            activeClass:'active', 
            errorClass:'text-danger' 
        } 
    }) 
    //渲染結果爲div的class="active text-danger" 
    //此例始終添加errorClass,但只要在isActive爲true的狀況下添加activeClass的值 
</script>

 

 

<div id="demo"> 
    <!-- 當有多個條件class時,能夠以下方式在數組語法中使用對象語法--> 
    <div v-bind:class="[{active:isActive},errorClass]"></div> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    new Vue({ 
        el:"#demo", 
        data:{ 
            isActive:true, 
            activeClass:'active', 
            errorClass:'text-danger' 
        } 
    }) 
    //渲染結果爲div的class="active text-danger" 
</script>

 

用在組件上:

<div id="demo"> 
    <my-component class="baz boo"></my-component> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    Vue.component('my-component',{ 
        template:`<p class="foo bar">hi</p>` 
    }) 
    new Vue({ 
        el:"#demo", 
    }) 
    //HTML 最終將被渲染成爲:<p class="foo bar baz boo">Hi</p> 
</script>

 

<div id="demo"> 
    <my-component v-bind:class="{active:isActive }"></my-component> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    Vue.component('my-component',{ 
        template:`<p class="foo bar">hi</p>` 
    }) 
    new Vue({ 
        el:"#demo", 
        data:{ 
            isActive:true 
        } 
    }) 
    //當 isActive 爲 true 的時候,HTML 將被渲染成爲:<p class="foo bar active">Hi</p> 
</script>

 

(2)       綁定內聯樣式

對象語法:

<div id="demo"> 
    <div v-bind:style="{color:activeColor,fontSize:fontSize + 'px'}">hi</div> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    new Vue({ 
        el:"#demo", 
        data:{ 
            activeColor:'red', 
            fontSize:26 
        } 
    }) 
</script>

 

<div id="demo"> 
    <div v-bind:style="styleObject">hi</div> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    new Vue({ 
        el:"#demo", 
        data:{ 
            styleObject:{ 
                activeColor:'red', 
                fontSize:26   
            } 
        } 
    }) 
</script>

 

數組語法:能夠將多個樣式應用到一個元素上

<div id="demo"> 
    <div v-bind:style="[baseStyles,overridingStyles]">hi</div> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    new Vue({ 
        el:"#demo", 
        data:{ 
            baseStyles:{ 
                activeColor:'red', 
                fontSize:26 
            }, 
            overridingStyles:{ 
                activeColor:'green', 
                backgroundColor:'grey' 
            } 
        } 
    }) 
</script>

 

六 條件渲染

(1)v-if

<div id="demo"> 
    <p v-if="seen">you can see me</p> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    new Vue({ 
        el:"#demo", 
        data:{ 
            seen:true 
        } 
    }) 
</script>

 

 <div id="demo"> 
    <h1 v-if="ok">yes</h1> 
    <h1 v-else>no</h1> 
  </div> 
<script src="scripts/vue.js"></script> 
<script> 
    new Vue({ 
        el:"#demo", 
        data:{ 
            ok:false 
        } 
    }) 
</script>

 

 

(2)<template>中v-if條件組

<div id="demo"> 
   <template v-if="ok"> 
       <h1>Title</h1> 
       <p>Paragraph</p> 
       <p>Paragraph</p> 
   </template> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    new Vue({ 
        el:"#demo", 
        data:{ 
            ok:true 
        } 
    }) 
</script>

 

(3)v-else

<div id="demo"> 
    <div v-if="Math.random() > 0.5">Sorry</div> 
    <div v-else>not sorry</div> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    new Vue({ 
        el:"#demo" 
    }) 
</script>

 

(4)v-show簡單的切換元素的css屬性display

<div id="demo"> 
    <h1 v-show="ok">hello</h1> 
</div> 
<script src="scripts/vue.js"></script> 
<script> 
    new Vue({ 
        el:"#demo", 
        data:{ 
            ok:true 
        } 
    }) 
</script>

 

 

Ps:

v-if,真實的條件渲染,確保條件塊在切換當中適當地銷燬與重建條件塊內的事件監聽器和子組件。V-if是惰性的,即在初始渲染條件爲假時,什麼也不作,在條件第一次變爲真時纔開始局部編譯。更高的切換消耗。

v-show,元素始終被編譯並保留,只是簡單的基於css切換。更高的初始渲染消耗。

 

Ps:當v-if與v-for一塊兒使用時,v-for具備比v-if更高的優先級。

 

 

七 列表渲染

 

 

 

ps:文中例子來源於vue官網  https://vuefe.cn/v2/guide/

 

 

ps:未完待續。。。

相關文章
相關標籤/搜索