Vuejs 基礎與語法

evenyao發表於2018-09-06
VueJS

Vue 例項

建立第一個例項

{{}} 被稱之為插值表示式。可以用來進行文字插值。

<!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>Vue入門</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="root">{{msg}}</div>

  <script>
    new Vue({
      el: "#root",
      data: {
        msg: "hello world"
      }
    })
  </script>
</body>
</html>

View Code

JSbin 預覽

例項、掛載點、模板

例項裡，需指定掛載點，模板

 

模板指的是掛載點內部的內容：

  • 可以寫在掛載點內部
  • 也可以寫在例項的 template 屬性裡面
<script src="./vue.js"></script>
  <div id="root"></div>
  <script>
    new Vue({
      el: "#root",
      template: `<h1>hello {{msg}}</h1>`,
      data: {
        msg: "world"
      }
    })
  </script>

View Code

JSbin 預覽

 

資料展示 事件繫結 方法定義

v-text / v-html

類似於原生JS中的 innerText 與 innerHtml

JSbin 預覽

<script src="./vue.js"></script>
  <div id="root">
    <div v-text="content"></div>
  </div>
  <script>
    new Vue({
      el: "#root",
      data: {
        content: "<h1>hello world</h1>"
      }
    })
  </script>

View Code 

 

JSbin 預覽

<script src="./vue.js"></script>
  <div id="root">
    <div v-html="content"></div>
  </div>
  <script>
    new Vue({
      el: "#root",
      data: {
        content: "<h1>hello world</h1>"
      }
    })
  </script>

View Code

 

v-on 事件

通過 v-on 給元素繫結事件，事件觸發之後執行的方法寫在 Vue 例項裡面的 methods 方法裡，這樣方法裡面的事件就可以執行了。

<script src="./vue.js"></script>
<body>
  <div id="root">
    <div v-on:click="handleClick">{{content}}</div>   <!-- 新增v-on:click事件 -->
  </div>
  <script>
    new Vue({
      el: "#root",
      data: {
        content: "click me"
      },
      methods: {
        handleClick: function() {
          alert(123)
        }
      }
    })
  </script>
</body>

View Code

JSbin 預覽

Vue 中的 DOM 改動

在Vuejs中想要改變資料的顯示，不要去改變 DOM。直接改變資料即可。當資料發生變化的時候，Vue會自己去改變 DOM。

<script src="./vue.js"></script>
<body>
  <div id="root">
    <div v-on:click="handleClick">{{content}}</div> 
  </div>
  <script>
    new Vue({
      el: "#root",
      data: {
        content: "click me"
      },
      methods: {
        handleClick: function() {
          alert(`yes`)
          this.content = "clicked"    //改變資料
        }
      }
    })
  </script>
</body>

View Code

JSbin 預覽
從這個案例可以看出 Vuejs 不再面向 DOM 進行操作，而是面向資料進行操作。

@

v-on: 可以簡寫成 @，即

<script src="./vue.js"></script>
<body>
  <div id="root">
    <div @click="handleClick">{{content}}</div> 
  </div>
  <script>
    new Vue({
      el: "#root",
      data: {
        content: "click me"
      },
      methods: {
        handleClick: function() {
          alert(`yes`)
          this.content = "clicked"    //改變資料
        }
      }
    })
  </script>
</body>

View Code

 

屬性繫結和雙向資料繫結

屬性繫結 v-bind:

當滑鼠放置到這個div上的時候，會顯示出title，內容是 this is hello world

<script src="./vue.js"></script>
<body>
  <div id="root">
    <div title="this is hello world">hello world</div>
  </div>

  <script>
    new Vue({
      el: "#root"
    })
  </script>
</body>

View Code

 

我們希望title可變，所以我們在例項裡面，去定義一個 title。並使用 v-bind:將 title與 title 資料項做一個繫結。 如果想改變內容，只需要改變title的資料就可以了。

<script src="./vue.js"></script>
<body>
  <div id="root">
    <div v-bind:title="title">hello world</div>     <!-- 使用v-bind:進行繫結 -->
  </div>

  <script>
    new Vue({
      el: "#root",
      data: {
        title: "this is hello world"
      }
    })
  </script>
</body>

View Code

JSbin 預覽

 

當使用類似於 v-bind:title 的模板指令，相應的=後面的內容就不再是一個字串，而是一個 JS 的表示式。
即v-bind:title="title" 後面的"title" 表示例項中 data 裡面的 title。

：

v-bind:可以簡寫成:，即

<script src="./vue.js"></script>
<body>
  <div id="root">
    <div :title="title">hello world</div>     <!-- 使用 :title 進行繫結 -->
  </div>

  <script>
    new Vue({
      el: "#root",
      data: {
        title: "this is hello world"
      }
    })
  </script>
</body>

View Code

 

雙向資料繫結 v-model

在這個案例中，有一個input標籤，使用 :value="content" 資料進行繫結

<script src="./vue.js"></script>
<body>
  <div id="root">
    <div :title="title">hello world</div>
    <input :value="content"/>
    <div>{{content}}</div>
  </div>

  <script>
    new Vue({
      el: "#root",
      data: {
        title: "this is hello world",
        content: "this is content"
      }
    })
  </script>
</body>

View Code

 

但是資料並沒有發生同步變化，因為如果資料發生改變，下面展示的內容，也會根據輸入的內容發生相應的變化。所以這裡的改變，僅僅是改變了input標籤中的value值，並沒有使data中的content發生變化。

 

 

 

所以我們使用 v-model 這個模板指令，進行資料雙向繫結。

<script src="./vue.js"></script>
<body>
  <div id="root">
    <div :title="title">hello world</div>
    <input v-model="content"/>
    <div>{{content}}</div>
  </div>

  <script>
    new Vue({
      el: "#root",
      data: {
        title: "this is hello world",
        content: "this is content"
      }
    })
  </script>
</body>

View Code

 

JSbin 預覽
在input標籤中，使用v-model就可以完成雙向資料的繫結，效果如下圖。

計算屬性和偵聽器

計算屬性 computed

在這個案例中，使用上面已經提到過的v-model進行雙向資料繫結之後，在input標籤中輸入相應的資料，會把firstName和lastName拼裝好了之後在div中一起展現出來。

<script src="./vue.js"></script>
<body>
  <div id="root">
    姓：<input v-model="firstName"/>
    名：<input v-model="lastName"/>
    <div>{{firstName}}{{lastName}}</div>
  </div>

  <script>
    new Vue({
      el: "#root",
      data: {
        firstName: ``,
        lastName: ``
      }
    })
  </script>
</body>

View Code

JSbin 預覽

我們通過改造，將firstName和lastName糅合成一個變數，取名為fullName。即fullName是通過firstName和lastName計算而成的一個新的變數。遇到這種情況，通過計算屬性解決。

在Vue的例項配置物件裡面，配置computed物件屬性，在裡面定義一個fullName函式，返回值是 this.firstName + ` ` + this.lastName

<script src="./vue.js"></script>
<body>
  <div id="root">
    姓：<input v-model="firstName"/>
    名：<input v-model="lastName"/>
    <div>{{fullName}}</div>
  </div>

  <script>
    new Vue({
      el: "#root",
      data: {
        firstName: ``,
        lastName: ``
      },
      computed: {  //定義一個computed物件，在裡面定義fullName函式
        fullName: function(){
          return this.firstName + ` ` + this.lastName
        }
      }
    })
  </script>
</body>

View Code

JSbin 預覽

computed 值的是一個屬性，通過其他屬性計算而來。優點是 computed 中參與計算的值如果都沒有改變，會使用上一次計算得到的快取結果，不會重新計算。只有引數計算的值發生變化的時候，才會重新計算。

偵聽器 watch

監聽某一個資料的變化，一旦資料發生變化，就可以在偵聽器中實現某個業務邏輯。

<script src="./vue.js"></script>
<body>
  <div id="root">
    姓：<input v-model="firstName"/>
    名：<input v-model="lastName"/>
    <div>{{fullName}}</div>
    <div>{{count}}</div>
  </div>

  <script>
    new Vue({
      el: "#root",
      data: {
        firstName: ``,
        lastName: ``,
        count: 0  //定義變數 count，預設值為 0
      },
      computed: {
        fullName: function(){
          return this.firstName + ` ` + this.lastName
        }
      },
      watch: {  //定義偵聽器
        firstName: function(){   //監聽 firstName 的變化
          this.count ++
        },
        lastName: function(){   //監聽 lastName 的變化
          this.count ++
        }
      }
    })
  </script>
</body>

View Code

JSbin 預覽

通過watch的形式進行偵聽器的定義。
當對fristName或lastName做任意的變更，count 數值 +1

當然我們也可以只對 fullName 做監聽，即針對計算屬性做監聽。

<script src="./vue.js"></script>
<body>
  <div id="root">
    姓：<input v-model="firstName"/>
    名：<input v-model="lastName"/>
    <div>{{fullName}}</div>
    <div>{{count}}</div>
  </div>

  <script>
    new Vue({
      el: "#root",
      data: {
        firstName: ``,
        lastName: ``,
        count: 0
      },
      computed: {
        fullName: function(){
          return this.firstName + ` ` + this.lastName
        }
      },
      watch: {
        fullName: function(){
          this.count
        }
      }
    })
  </script>
</body>

View Code

 

v-if v-show 與 v-for

v-if

<script src="./vue.js"></script>
<body>
  <div id="root">
    <div v-if="show">hello world</div>
    <button @click="handleClick">toggle</button>
  </div>

  <script>
    new Vue({
      el: "#root",
      data: {
        show: true
      },
      methods: {
        handleClick: function(){
          this.show = !this.show
        }
      }
    })
  </script>
</body>

View Code

 

在模板中的 data 新增 show 屬性，值為 true，並在 div 標籤中新增 v-if="show" 的指令，並對 button 元素繫結 @click 事件，在模板中的 methods 新增對應事件的函式。
達到點選 button 切換 hello world 的顯示和隱藏效果。
JSbin 預覽

即在使用 v-if 指令時，當它對應的資料向的指令對應的是 false 時，會將這個標籤，直接從 DOM 中移除。

v-show

使用 v-show，看上去效果和 v-if 是一樣的效果，但點開控制檯觀察 DOM 結構的變化，v-show 並不會使 DOM節點 發生刪除和新增，它的隱藏是在這個節點上新增了一個display: none;的 CSS 屬性。

即 v-show 不會頻繁的 銷燬 和 建立DOM。在有頻繁的顯示和隱藏需求時，使用 v-show對於效能來講，應該是更好的選擇。
如果只有一次顯示、隱藏的需求，對於使用 v-if 可能是更好的選擇。

v-for

當有一個資料需要做迴圈展示時，幫助我們進行操作。

<script src="./vue.js"></script>
<body>
  <div id="root">
    <div v-if="show">hello world</div>
    <button @click="handleClick">toggle</button>
    <ul>
      <!-- 在li標籤中 新增v-for指令 使用:key屬性提升渲染效能 -->
      <li v-for="item of list" :key="item">{{item}}</li>
    </ul>
  </div>

  <script>
    new Vue({
      el: "#root",
      data: {
        show: true,
        list: [1,2,3]   //新增list陣列
      },
      methods: {
        handleClick: function(){
          this.show = !this.show
        }
      }
    })
  </script>
</body>

View Code

JSbin 預覽

記住使用 :key 屬性提升渲染效能，每次的:key 屬性都不相同，所以可以使用 "item"作為他的屬性值。
但如果陣列中本身有重複的值。這個時候:key 屬性值就不能使用 "item" 作為他的屬性值了。這個時候，我們將 v-for 設定成 v-for="(item,index) of list" 然後讓:key 屬性值為 index，保證它的唯一性。
但如果平凡對列表進行變更的時候，index 的使用也是有問題的。

<body>
  <div id="root">
    <div v-if="show">hello world</div>
    <button @click="handleClick">toggle</button>
    <ul>
      <!-- 在li標籤中 新增v-for指令 使用:key屬性提升渲染效能 並使用index值-->
      <li v-for="(item,index) of list" :key="index">{{item}}</li>
    </ul>
  </div>

  <script>
    new Vue({
      el: "#root",
      data: {
        show: true,
        list: [1,2,3]   //新增list陣列
      },
      methods: {
        handleClick: function(){
          this.show = !this.show
        }
      }
    })
  </script>
</body>

View Code

 

相關文章