vue.js入門教程之基礎語法

時間  2019-12-06
標籤 vue.js vue 入門 教程 基礎 語法 欄目 JavaScript 简体版
原文   原文鏈接

vue Class 與 Style 綁定

數據綁定一個常見需求是操做元素的 class 列表和它的內聯樣式。由於它們都是屬性，咱們能夠用 v-bind 處理它們：咱們只須要計算出表達式最終的字符串。不過，字符串拼接麻煩又易錯。所以，在v-bind 用於 class 和 style 時，Vue.js 專門加強了它。表達式的結果類型除了字符串以外，還能夠是對象或數組。

  • 綁定 HTML Class

儘管能夠用 Mustache 標籤綁定 class，好比 class="{{ className }}"，可是咱們不推薦這種寫法和 v-bind:class 混用。二者只能選其一！

對象語法

咱們能夠傳給 v-bind:class 一個對象，以動態地切換 class。注意 v-bind:class 指令能夠與普通的 class 特性共存：
<div v-bind:class="{ active: isActive }"></div>
咱們也能夠在對象中傳入更多屬性用來動態切換多個 class 。此外， v-bind:class 指令能夠與普通的 class 屬性共存。以下:
<div class="static"

     v-bind:class="{ active: isActive, 'text-danger': hasError }">
     
</div>

以下 data:

data: {
    
      isActive: true,
      
      hasError: false
}

渲染爲:

<div class="static active"></div>
當 isActive 或者 hasError 變化時，class 列表將相應地更新。例如，若是 hasError 的值爲 true ， class列表將變爲 "static active text-danger"。
也能夠直接綁定數據裏的一個對象：
<div v-bind:class="classObject"></div>
data: {
    classObject: {
    active: true,
    'text-danger': false
  }
}
渲染的結果和上面同樣。咱們也能夠在這裏綁定返回對象的計算屬性。這是一個經常使用且強大的模式：
<div v-bind:class="classObject"></div>
data: {

      isActive: true,
      
      error: null
},

computed: {

classObject: function () {
  
    return {
    
        active: this.isActive && !this.error,
        
        'text-danger': this.error && this.error.type === 'fatal',
    }
  }
}

  • 數組語法

咱們能夠把一個數組傳給 v-bind:class ，以應用一個 class 列表：
<div v-bind:class="[activeClass, errorClass]">
data: {

  activeClass: 'active',
  
  errorClass: 'text-danger'
}

渲染爲:

<div class="active text-danger"></div>
若是你也想根據條件切換列表中的 class ，能夠用三元表達式：
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
此例始終添加 errorClass ，可是隻有在 isActive 是 true 時添加 activeClass 。
不過，當有多個條件 class 時這樣寫有些繁瑣。能夠在數組語法中使用對象語法：
<div v-bind:class="[{ active: isActive }, errorClass]">

  • 用在組件上

當你在一個定製的組件上用到 class 屬性的時候，這些類將被添加到根元素上面，這個元素上已經存在的類不會被覆蓋。
例如，若是你聲明瞭這個組件:
Vue.component('my-component', {

     template: '<p class="foo bar">Hi</p>'
  
})
而後在使用它的時候添加一些 class：
<my-component class="baz boo"></my-component>
HTML 最終將被渲染成爲:
<p class="foo bar baz boo">Hi</p>
一樣的適用於綁定 HTML class :
<my-component v-bind:class="{ active: isActive }"></my-component>
當 isActive 爲 true 的時候，HTML 將被渲染成爲:
<p class="foo bar active"></p>

  • 綁定內聯樣式

對象語法

v-bind:style 的對象語法十分直觀——看着很是像 CSS ，其實它是一個 JavaScript 對象。 CSS 屬性名能夠用駝峯式（camelCase）或短橫分隔命名（kebab-case）：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
    
        activeColor: 'red',
      
        fontSize: 30
    }
直接綁定到一個樣式對象一般更好，讓模板更清晰
<div v-bind:style="styleObject"></div>
data: {

    styleObject: {
    
        color: 'red',
        
        fontSize: '13px'
    }
}
一樣的，對象語法經常結合返回對象的計算屬性使用。

數組語法

v-bind:style 的數組語法能夠將多個樣式對象應用到一個元素上：
<div v-bind:style="[baseStyles, overridingStyles]">

自動添加前綴

當 v-bind:style 使用須要特定前綴的 CSS 屬性時，如 transform，Vue.js 會自動偵測並添加相應的前綴。

  • 條件渲染

v-if

v - if (插入 刪除節點)
<div id="app">

        <h1 v-if="grsde>=90">優秀</h1>
        
        <h1 v-else-if="gradde>=60">及格</h1>
        
        <h1 v-else>不及格</h1>
 
    <template v-if="ok">
    
            <div>hello</div>
            
            <div>wrold</div>
            
            <div>nice to meet you</div>
            
    </template>       
    
</div>
<script>
        var vm = new Vue({
            
            el:'#app',
            
            data:{
                
                ok:true,
                grade:80
            }
        });
    
    </script>

if...else結構

<h1 v-if="grsde>=90">優秀</h1>
    
    <h1 v-else>不及格</h1>

if...else if...else結構，if-else用嵌入的方式放進去

<div id="app">

        <h1 v-if="grsde>=90">優秀</h1>
        
        <h1 v-else-if="gradde>=60">及格</h1>
        
        <h1 v-else>不及格</h1>
</div>
v-else 元素必須當即跟在 v-if 或 v-show 元素的後面——不然它不能被識別。

template v-if

若是想切換多個元素，能夠把一個<template>元素看成包裝元素，並在上面使用v-if，最終的渲染結果不會包含它。
<template v-if="ok">
    
    <div>hello</div>
    
    <div>wrold</div>
    
    <div>nice to meet you</div>
            
</template>

用key管理可複用的元素

Vue 會盡量高效地渲染元素，一般會複用已有元素而不是從頭開始渲染。這麼作，除了使 Vue 變得很是快以外，還有一些有用的好處。例如，若是你容許用戶在不一樣的登陸方式之間切換:

這樣也不老是符合實際需求，因此 Vue 爲你提供了一種方式來聲明「這兩個元素是徹底獨立的——不要複用它們」。只需添加一個具備惟一值的 key 屬性便可：

<template v-if="loginType === 'username'">

    <label>Username</label>
    
    <input placeholder="Enter your username">
    
</template>

<template v-else>

    <label>Email</label>
    
    <input placeholder="Enter your email address">
    
</template>

在上面的代碼中切換 loginType 將不會清除用戶已經輸入的內容。由於兩個模版使用了相同的元素，<input> 不會被替換掉——僅僅是替換了它的的 placeholder

Vue 爲你提供了一種方式來聲明「這兩個元素是徹底獨立的——不要複用它們」。只需添加一個具備惟一值的 key 屬性便可：

<template v-if="loginType === 'username'">

    <label>Username</label>
      
    <input placeholder="Enter your username" key="username-input">
      
</template>

<template v-else>

    <label>Email</label>
  
    <input placeholder="Enter your email address" key="email-input">
  
</template>

如今，每次切換時，輸入框都將被從新渲染

注意: 元素仍然會被高效地複用，由於它們沒有添加 key 屬性

v-show

另外一個用於根據條件展現元素的選項是 v-show 指令。用法大體同樣：

不一樣的是有 v-show 的元素會始終渲染並保持在 DOM 中。v-show 是簡單的切換元素的 CSS 屬性 display。注意 v-show 不支持 <template> 語法。

<h1 v-show="ok">Hello!</h1>

不一樣的是帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 是簡單地切換元素的 CSS 屬性 display

v-if 也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——在條件第一次變爲真時纔開始局部編譯（編譯會被緩存起來）。相比之下，v-show 簡單得多——元素始終被編譯並保留，只是簡單地基於 CSS 切換。

通常來講，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。所以，若是須要頻繁切換 v-show 較好，若是在運行時條件不大可能改變 v-if 較好。

注意: v-show 不支持 語法，也不支持 v-else

v-if 和 v-for 一塊兒使用

當 v-if 與 v-for 一塊兒使用時，v-for 具備比 v-if 更高的優先級。這意味着 v-if 將分別重複運行於每一個 v-for 循環中。當你想爲僅有的 一些 項渲染節點時，這種優先級的機制會十分有用

<ul>
    <li v-for="item in todo" v-if="item.ok">{{item.text}}</li>
</ul>
var vm=new Vue({

 data:{
 
     items:[
     
        {text:"chifan",isOk:true},
        
        {text:"shuijue",isOk:false},
        
        {text:"kandianshi",isOk:true},
        
        {text:"dayouxi",isOk:true},
        
        {text:"kandianying",isOk:false},
     ]                   
 }
});

若是你的目的是有條件地跳過循環的執行，那麼能夠將 v-if 置於外層元素 (或 <template>)上。

  • 列表渲染

v-for

可使用 v-for 指令基於一個數組渲染一個列表。這個指令使用特殊的語法，形式爲 item in items，items 是數據數組，item 是當前數組元素的別名：

示例 --- 直接上代碼：html

<ul id="example-1">

  <li v-for="item in items">
  
    {{ item.message }}
    
  </li>
  
</ul>
var example1 = new Vue({

  el: '#example-1',
  
  data: {
  
    items: [
    
      { message: 'Foo' },
      
      { message: 'Bar' }
    ]
  }
});

結果：vue

{% raw %}

{{item.message}}

{% endraw %}

在 v-for 塊內咱們能徹底訪問父組件做用域內的屬性，另有一個特殊變量 $index，正如你猜到的，它是當前數組元素的索引：

<ul id="example-2">
  <li v-for="item in items">
    {{ parentMessage }} - {{ $index }} - {{ item.message }}
  </li>
</ul>
var example2 = new Vue({

  el: '#example-2',
  
  data: {
  
    parentMessage: 'Parent',
    
    items: [
    
      { message: 'Foo' },
      
      { message: 'Bar' }
    ]
  }
})

結果：數組

{% raw%}

{{ parentMessage }} - {{ $index }} - {{ item.message }}

{% endraw %}
另外，你能夠爲索引指定一個別名（若是 v-for 用於一個對象，則能夠爲對象的鍵指定一個別名）：
<div v-for="(index, item) in items">
  {{ index }} {{ item.message }}
</div>

v-for把對象屬性渲染列表

<div id="app">
    <div v-for="value in xx"> {{value}}</div>               
</div>
<script>
         var vm=new Vue({
             el:"#app",
             data:{
                xx:{
                    firstName: 'John',
                    lastName: 'Doe',
                    age: 30 
                }           
             }
         });

    </script>

也能夠提供第二個的參數爲鍵名：

<div id="app">
    <div v-for="(value,key) in xx">{{key}} is {{value}}</div>               
</div>
<script>
     var vm=new Vue({
     
         el:"#app",
         
         data:{
            xx:{
                firstName: 'John',
                lastName: 'Doe',
                age: 30 
            }           
         }
     });

</script>

第三個參數爲索引：

<div id="app">
    <div v-for="(value,key,index) in xx">{{index}}{{key}} is {{value}}</div>               
</div>
<script>
     var vm=new Vue({
         el:"#app",
         data:{
            xx:{
                firstName: 'John',
                lastName: 'Doe',
                age: 30 
            }           
         }
     });

</script>

  • 數組的更新檢測

變異方法（修改了原始數組）：

vue.js包裝了被觀察數組的變異方法，故它們能出發視圖更新，即當利用這些方法變動數組時，被渲染的內容會實時更新，被包裝的方法有：

push() 數組末尾添加緩存

pop() 數組末尾取出app

shift() 數組開頭取出函數

unshift() 數組開頭添加ui

splice() 刪除並插入this

sort() 排序code

reverse() 數組順序顛倒component

<ul id="demo">
        <li v-for = "item in items">
            {{item}}
        </li>
    </ul>
<script>
        var vm = new Vue({
            el:'#demo',
            data:function(){
                return {items:[4,2,3].splice(0,2)};
            }
 
        })
    </script>

替換數組（返回一個新數組）：

數組從一個數組變爲另外一個數組時（記得，數組是按引用傳遞的），數據綁定依然生效；但前提是使用如下方法：

filter() 過濾，參數是一個函數，取其返回值爲true的元素被添加到新數組

concat() 合併兩個數組，返回的數組是合併後的

slice() 返回數組的拷貝，從開始索引到結束索引（前含後不含）

對象更新檢測

( 待更新……………… )

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程