Vuejs 基礎與語法

本文轉載自查看原文 2018-09-06 10:11 861 JavaScript/ 前端/ 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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vueJs的簡單入門以及基礎語法 vuejs基礎-style樣式 Vue基礎---->VueJS的使用(一) Vuejs入門基礎筆記 vuejs基礎-v-for用法基礎語法 VueJS 基礎知識及項目總結 vuejs深入淺出—基礎篇二、VueJs 填坑日記之基礎項目構建【VueJS】sublime text3支持VueJS語法高亮顯示插件vue-syntax-highlight