前端框架VUE-數據綁定及模板語法

、數據綁定

Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統：

<div id="app">
 {{ msg }}
</div>

//實例化代碼
var app = new Vue({
 el: '#app',
 data: {
  msg:  '歡迎學習Vue'
 }
})

{{ msg }} 為什么會變成 msg 的值？vue 使用基本 html 的模板語法，允許開發者聲明式地將DOM 綁定至底層 vue 實例的數據，所有 vue 模板都是合法的 html，所以能被遵循規范的瀏覽器和 html 解析器解析。

二、模板語法

2.1、mustache語法

mustache 翻譯為中文，是胡子/胡須。由于 {{ msg }} 兩邊都有對稱的大括號，就像人的胡須一樣，所以就叫做 mustache 語法。

特點：不僅可以直接寫成變量，也可以添加簡單的表達式。

//寫法多樣，使用便捷
<h2> {{ msg }} <h2>
<h2> {{ fir+'  '+sed }} <h2>  
<h2> {{ fir }}   {{sed}} <h2>  
<h2> {{ number + 1 }} <h2>  
<h2> {{ message.split('').reverse().join('')  }} <h2>

2.2、v-once

上邊的數據綁定中，頁面展示 msg 的值，如果我們在瀏覽器調試中，修改 msg 的值，頁面立馬會更新，始終保持最新的值為頁面內容。

調試模式，輸入如下內容觀察：

app.msg="你不愛我了" //回車

vue 支持動態渲染文本，在修改屬性的同時，實時渲染文本。為了提高渲染效率，只需第一次渲染出文本之后，后期屬性再修改不會影響文本內容。

此時就需要使用 v-once 解決問題。

//使用語法
<span v-once>{{msg}}</span>

特點：該指令后面不需要任何表達式，表示元素或組件只渲染一次，不會隨數據的改變而改變文本。

2.3、v-html

在某些特殊情況下，頁面需要動態地插入一段 html 代碼，比如編輯器，動態傳入的就是一段html 代碼，使用時我們需要原樣輸出，如：

<div>{{url}}</div>

data(){
 return{
  url:'<a href="http://www.baidu.com">百度首頁</a>'
 }
}

直接這么寫并不能滿足我們的要求，我們需要展示成帶有超鏈接的百度首頁，此時 v-html 登場。

// v-html 使用語法
<div v-html="url"></div>

給元素添加 v-html 指令后，元素就展示成一個帶有超鏈接的百度首頁文字。

v-html 特點：可以解析字段內的標簽，把內容當作 html 標簽來處理。

2.4、v-text

// 使用語法
<span v-text="msg"></span>

特點：與 mustache 語法類似，用于展示文本的。使用沒有 mustache 靈活，所以使用較少。

注意點：<span v-text="msg">新內容</text> 標簽中又新增內容時，會把原來 msg 中的內容覆蓋掉。

2.5、v-pre

v-pre 與 html 中的 pre 標簽有些類似，html 中的 pre 會原樣輸入空格、換行、縮進和文本內容。v-pre 也是原樣輸出內容，不會解析。

// 使用語法
<div v-pre> {{ msg }} </div>
頁面直接輸出 {{ msg }}

2.6、v-cloak

cloak 翻譯成中文，是斗篷。那么 v-cloak是用來干什么的呢？

html頁面運行的時候，會閃現 {{ msg }} ，如圖：

v-locak 就是用來解決這個問題的。

// 使用語法
<div v-cloak> {{ msg }} </div>

特點：在 vue 解析之前，元素有 v-cloak 屬性，vue 解析之后，元素沒有 v-cloak 屬性。

利用 v-cloak 的特點，我們在 css 中添加

[v-cloak]{
 display:'none'
}

此時再運行網頁的時候，解析之前會被隱藏掉，解析之后才展示內容，就不會再閃現 {{msg}}。

話不多說，看圖！

本篇文章介紹 Vue3 + vite +TS 項目內使用 Echarts 5 繪制中國地圖，標記分布點！之前沒有接觸過 Echarts 的，可以先去官方示例看看，里面圖形特別齊全。但是官方文檔看著費勁的，太多了根本記不住，所以自己做個總結，下次就可以直接使用了，不用做重復無用功。

一、安裝

Echarts 已更新到了 5.0 版本，安裝完記得檢查下自己的版本是否是 5.0 。

npm install echarts --save

安裝完成之后，在 package.json 中檢查是否安裝成功？

二、下載地圖的 json 數據

可以下載中國以及各個省份地圖數據。免費的文件下載地址：

http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5

記得收藏哦！免得浪費加班時間。

三、引入

引入 echarts 可以全局引入：

import * as echarts from "echarts"

/* 之前vue2 */
Vue.prototype.$ecahrt = echarts

/* vue3 */
app.config.globalProperties.$echarts = echarts

也可以直接在繪制頁面內按需引用。

引入需要繪制的地圖數據 json 或 js 文件，本文使用的是 json 格式：

import chinaJSON from '../../assets/json/china.json'

注意：引入的時候先引入 echarts ，后引入 chinaJSON 文件，順序不能反哦！

四、開始繪制地圖

template 部分代碼：

<template>
 <div>
  <div
   ref="chinaMap"
   style="height: 700px;border: solid 1px red;width: 100%;background: #010111;"
    >
   地圖1
  </div>
 </div>
</template>

script 部分代碼：

<script lang="ts" setup>
import * as echarts from 'echarts'
import chinaJSON from '../../assets/json/china.json'
import { onMounted, ref } from 'vue'
const chinaMap = ref()
onMounted(() => {
 drawChina()
})
let regions = [
 {
  name: '新疆維吾爾自治區',
  itemStyle: {
   areaColor: '#374ba4',
   opacity: 1,
  },
 },
 {
  name: '四川省',
  itemStyle: {
   areaColor: '#fe9b45',
   opacity: 1,
  },
 },
 {
  name: '陜西省',
  itemStyle: {
   areaColor: '#fd691b',
   opacity: 1,
  },
 },
 {
  name: '黑龍江省',
  itemStyle: {
   areaColor: '#ffc556',
   opacity: 1,
  },
 },
]
let scatter = [
 { name: '北京烤鴨', value: [116.46122, 39.97886, 9] },
 { name: '蘭州拉面', value: [103.86615, 36.040129, 9] },
 { name: '新疆烤肉', value: [87.613228, 43.810394, 9] },
 { name: '長沙臭豆腐', value: [112.915204, 28.207735, 9] },
 { name: '西安肉夾饃', value: [108.953445, 34.288842, 9] },
 { name: '云南', value: [102.710002, 25.045806, 9] },
]
function drawChina() {
 var myChart = echarts.init(chinaMap.value)
 echarts.registerMap('china', chinaJSON) //注冊可用的地圖
 var option = {
  geo: {
   map: 'china',
   roam: true, //是否允許縮放，拖拽
   zoom: 1, //初始化大小
   //縮放大小限制
   scaleLimit: {
    min: 1, //最小
     max: 2, //最大
    },
    //設置中心點
    center: [115.97, 29.71],
    //省份地圖添加背景
    regions: regions,
    itemStyle: {
     areaColor: '#0b122e',
     color: 'red',
     borderColor: '#232652',
     borderWidth: 2,
   },
   //高亮狀態
   emphasis: {
     itemStyle: {
     areaColor: '#1af9e5',
      color: '#fff',
     },
    },
  },
  //配置屬性
  series: {
   type: 'effectScatter',
   coordinateSystem: 'geo',
   data: scatter, 
   showEffectOn: 'render',
    rippleEffect: {
     //漣漪特效相關配置
     brushType: 'stroke', //波紋的繪制方式，可選 'stroke' 和 'fill'
   	},
    hoverAnimation: true, //是否開啟鼠標 hover 的提示動畫效果
    label: {
     //圖形上的文本標簽，可用于說明圖形的一些數據信息，比如值，名稱等，
     normal: {
      formatter: '{b}',
      position: 'right',
      show: true,
     },
    },
    itemStyle: {
    //圖形樣式，normal 是圖形在默認狀態下的樣式；emphasis 是圖形在高亮狀態下的樣式，比如在鼠標懸浮或者圖例聯動高亮時
     normal: {
      color: '#ffffff', //散點的顏色
      shadowBlur: 10,
      shadowColor: 20,
      fontSize: '12px',
     },
    },
    zlevel: 1,
   },
 }
 myChart.setOption(option)
}
</script>

想看更多的可以去官方文檔：

https://echarts.apache.org/zh/option.html#geo.regions.emphasis.itemStyle

013年，在Google工作的尤雨溪，開發出了一款輕量Javascript框架，最初命名為Seed，同年12月，更名為Vue，一經推出發展迅速，如今已成為最時髦和炙手可熱前端框架，在Github上獲得了超過十萬的Star，國內許多知名公司都使用Vue作為前端開發工具，例如餓了么、美團等，很多公司的招聘要求都會把會使用vue作為加分項。

Vue的作者 - 尤雨溪

001-Vue的定位是什么？

Vue是一個JavaScript框架，類似的框架有React，Angular等等，所謂框架就是一個比較大型的庫，使用它能讓基于網頁的前端應用程序開發起來更加方便。相對于完全采用原生JavaScript代碼來編寫前端代碼而言，使用框架的代碼量更少，開發效率也更高。

需要注意的是，Vue并非UI框架，它的定位與Bootstrap、Frozen UI這一類專注于頁面呈現的框架不是一回事，或者說，UI框架關注點在HTML，而Vue這一類框架關注點是JavaScript。Vue可以跟很多UI框架搭配使用，比如說Bootstrap（vueBootstrap），和一些專門與Vue配合的例如餓了嗎團隊開發的element-ui等等。

002-實現第一個VueJS應用.html

1.下載Vue: https://unpkg.com/vue/dist/vue.js

2.將vue.js拷貝到任意一個目錄（工作目錄）

3.在同一個目錄下用編輯軟件（隨便什么都行，記事本都可以）新建一個文件，輸入以下代碼：

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

003-擴展這個VueJS應用.html

代碼如下：

  <script src="vue.js"></script>
  <div id="app">
      <input type="text" v-on:input="changeTitle">
      <p>{{title}}</p>
  </div>
  <script>
      new Vue({
          el: "#app",
          data: {
              title: "Hello World!"
          },
          methods: {
              changeTitle:function (event) {
                  this.title = event.target.value;
              }
          }
      });
  </script>

試試看，你輸入的每一個字符都會被克隆，很有意思的一個程序！

009-VueJS的模板語法和實例.html

在上面的例子中，通過創建這個新的Vue實例，注意，雖然沒有把它存入一個變量內，Vue實例還是被創建了。
通過創建這個Vue實例，就跟我們的HTML代碼建立了一個聯系，Vue基于上面的HTML代碼，創建了一個模版,要特別注意的是，Vue在運行的時候，并不直接使用我們寫的HTML代碼。實際運行的網頁里面也沒有我們寫的這些命令（最終頁面你并看不到大括號之類的東西）
Vue根據HTML代碼創建的模版存儲在內部，然后用這個模版，創建真正渲染成DOM的HTML代碼，我們寫的HTML代碼并不是最后在瀏覽器里面運行的那一份，中間有一層Vue實例把HTML代碼轉換成模版，然后渲染模版（比如花括號里面的{{title}}｝等),最終再由它輸出渲染后的HTML代碼
Vue實例中存儲在data屬性內的數據，例如上面的title，可以直接在data屬性內修改他們，也可以調用methods里的函數去生成內容。例如：

  <script src="vue.js"></script>
  <div id="app">
      <!-- 注意此處并沒有調用Vue模板，而是調用了一個函數 -->
      <p>{{sayHello()}}</p>
  </div>
  <script>
      new Vue({
          el: "#app",
          data: {
              title: "Hello World!"
          },
          methods: {
              //此處sayHello是一個方法（函數），但它返回的內容被傳送到模版里去了
              sayHello:function (event) {
                  return 'Hello!';
              }
          }
      });
  </script>

010-訪問Vue實例里的數據.html

在vue實例中的任何地方，都可以用this來訪問所有的屬性和方法

  <script src="vue.js"></script>
  <div id="app">
      <p>{{sayHello()}}</p>
  </div>
  <script>
      new Vue({
          el: "#app",
          data: {
              title: "Hello World!"
          },
          methods: {
              sayHello:function (event) {
              //注意此處，return的是Hello World!
              //原生的JS是不允許這么調用的，Vue在中間層做了調劑
                  return this.title;
              }
          }
      });
  </script>

011-屬性綁定.html

   <script src="vue.js"></script>
   <div id="app">
       <!-- 注意：此處不能用<a href="{{link}}"> 這種形式來傳遞超鏈接值，只能用v-bind綁定并設置href的值 -->
       <p>{{sayHello()}} - <a v-bind:href="link">Baidu</a> </p>
   </div>
   <script>
       new Vue({
           el: "#app",
           data: {
               title: "Hello World!",
               link:"http://baidu.com"
           },
           methods: {
               sayHello:function () {
                   return this.title;
               }
           }
       });
   </script>

012-理解和使用指令

指令就是你放在代碼中的一些指示
例如上面v-bind，它將一些東西和我們的數據（href值）綁定，一般來說如果需要在HTML內直接顯示內容的時候，我們采用花括號來解決，但在花括號不適用的時候，就要使用指令。
格式：指令 + 冒號 + 參數，如 v-bind:href = "link" link 就是你想要的從Vue實例中綁定的內容，可以是屬性或者函數一般來說你不能給HTML屬性傳遞動態數據，有了這些Vue指令，就可以了

013-用v-once禁止二次渲染.html

輸入以下代碼：

<script src="vue.js"></script>
<div id="app">
  <!-- 注意此處的v-once -->
  <h1 v-once>{{title}}</h1>
  <p>{{sayHello()}}</p>
</div>
<script>
  new Vue({
      el: "#app",
      data: {
          title: "Hello World!",
      },
      methods: {
          sayHello:function () {
              this.title = 'Hello';
              return this.title;
          }
      }
  });
</script>

運行以上代碼，我們原意是想要一個Hello World!和Hello的，但兩個元素都被渲染成Hello了，怎么辦？答案是：使用v-once, 即在第一個元素h1那里加上一個v-once，則表示該元素只會被渲染一次，之后不能再改變。

014-如何輸出基礎的HTML.html

輸入以下代碼：

<script src="vue.js"></script>
<div id="app">
  <!-- 注意此處的v-once -->
  <h1 v-once>{{title}}</h1>
  <p>{{sayHello()}}</p>
  <!-- 注意：v-html指令讓finishedLink以渲染后的HTML格式輸出，而不是純文本
  如果以花括號{{finishedLink}} 來表示的話，將會是一個HTML形式的純文本。
  -->
  <p v-html = "finishedLink" ></p>
</div>
<script>
  new Vue({
      el: "#app",
      data: {
          title: "Hello World!",
          finishedLink:'<a href="http://baidu.com">Baidu.com</a>',
      },
      methods: {

          sayHello:function () {
              this.title = 'Hello';
              return this.title;
          }
      }
  });
</script>

以上這段代碼并不會輸出一個Baidu.com的超鏈接，而是連同HTML代碼一起全部輸出了。這樣的好處是，HTML元素不會被解析和渲染，而是被輸出為純文本，避免了跨站攻擊。
但是，如果某些情況下你確實想輸出渲染后的HTML代碼，比如此處你確實希望看到一個百度的超鏈接，你就應該使用v-html指令。在需要的元素內嵌入v-html即可。請謹慎使用這個指令，它會把你暴露給XSS攻擊，比如此處的內容可能是由用戶提交的，你是不能控制用戶上傳什么內容的，若確定內容安全，或者是由你自己合成的代碼，那就可以放心使用v-html

015 作業: 輸出數據到模板

輸出你的姓名和年齡，兩者都作為屬性保存在data內，在P標簽里面輸出

<script src="vue.js"></script>
<div id="app">
  <p>I am {{name}}</h1>
  <p>I am {{age}} years old.</p>
</div>
<script>
  new Vue({
      el: "#app",
      data: {
          name: "Rockage",
          age: "40",
      }
  });
</script>

在插值語法中，即在大括號中，使用JavaScript表達式，輸出的年齡乘以3 <script src="vue.js">

<script src="vue.js"></script>
<div id="app">
  <p>I am {{name}}</p>
  <p>I am {{age * 3}} years old.</p>
</div>
<script>
  new Vue({
      el: "#app",
      data: {
          name: "Rockage",
          age: "40",
      }
  });
</script>

調用函數，輸出這個函數的返回值，函數返回一個0到1之間的隨機數

<script src="vue.js"></script>
<div id="app">
  <p>The Random Number is : {{sayRnd()}}</p>
</div>
<script>
  new Vue({
      el: "#app",
      methods: {
          sayRnd: function () {
              // random_number = Math.random(); // 產生一個0到1的隨機數
              // random_number = random_number.toFixed(2) //保留兩位小數
              // 產生一個1到100的隨機數
              random_number = Math.floor(Math.random() * (100 - 1 + 1)) + 1
              return random_number;
          }
      }
  });
</script>

使用baidu，讓一個img標簽顯示搜索到的圖片
和超鏈接的href屬性一樣，也不允許直接將URL強填進img的src里面，應該把URL存在data里面，綁定到img標簽的src屬性

<script src="vue.js" xmlns:v-bind="http://www.w3.org/1999/xhtml"></script>
<div id="app">
  <img  v-bind:src = "url">
</div>
<script>
  new Vue({
      el: "#app",
      data: {
          url: "http://img.mp.itc.cn/upload/20170217/1f650c2645c541ad8cc70842d7d0bbe5_th.jpeg"
      }
  });
</script>

用名字預先填充一個TextBox，讓它默認顯示你的名字

<script src="vue.js" xmlns:v-bind="http://www.w3.org/1999/xhtml"></script>
<div id="app">
  Name <input type = "text" v-bind:value = "default_name" />
</div>
<script>
  new Vue({
      el: "#app",
      data: {
          default_name: "Hua Yang"
      }
  });
</script>

017-監聽事件.html

通過指令v-on監聽來自模版的事件
v-on 可以監聽任何由這個按鈕產生的DOM事件
格式： v-on:事件名稱 = "事件函數名"，如v-on:click = "increase"

<script src="vue.js"></script>
<div id="app">
  <button v-on:click="increase">Click Me</button>
  <p>{{ counter}}</p>
</div>
<script>
  new Vue({
      el: "#app",
      data: {
          counter: 0,
          x: 0,
          y: 0
      },
      methods: {
          increase: function () {
              this.counter++;
          }
      },

  });
</script>

018-從事件對象里獲取事件數據.html

用v-on來獲取事件數據
這個例子很好地說明了如何通過Vue傳遞事件對象

<script src="vue.js"></script>
<div id="app">
<p v-on:mousemove="updateCoordinates">Coordonates : {{x}}/{{y}}</p>
</div>
<script>
new Vue({
    el: "#app",
    data: {
        counter: 0,
        x: 0,
        y: 0
    },
    methods: {
        updateCoordinates: function (event) {
            this.x = event.clientX;
            this.y = event.clientY;
        }
    },

});
</script>

019-傳遞你自己的事件參數.html

給組件傳遞自定義參數，方法很簡單，在調用函數或者說設置引用時傳入參數即可。
加入不僅要傳遞自定義參數，還要傳遞DOM生成的事件對象給方法，也很簡單，只需要再加一個參數，但這個參數的命名需為$event，vue會自動捕捉這個默認的事件參數，并復制給一個可以在函數中使用的變量。
本例中不對$event做詳解，下面的例子會提到它

<script src="vue.js"></script>
<div id="app">
  <!--
  請注意, 調用increase時增加了兩個參數
  -->
  <button v-on:click="increase(2,$event)">Click Me</button>
  <p>{{ counter}}</p>
</div>
<script>
  new Vue({
      el: "#app",
      data: {
          counter: 0,
          x: 0,
          y: 0
      },
      methods: {
          // increase 函數用step和event接收參數
          increase: function (step,event) {
              this.counter += step;
          }
      },
  });
</script>

020-用事件修飾符來修改事件.html

現在我們用第11課（鼠標懸浮顯示XY坐標）那個為例
我想設置一個區域，姑且稱為DEAD SPOT, 鼠標進入這個區域XY停止更新。
常規方法是讓這個SPAN也綁定一個mousemove事件，然后調用一個事件函數，事件函數不做任何處理。

HTML部分：

<span v-on:mousemove = "dummy">DEAD SPOT</span>

JS部分：

dummy: function(){
  event.stopPropagation();
}

以上代碼確保事件不會傳播給綁定有這個屬性的SPAN上，當然，我們還有更簡單的方法，就是使用事件修飾符，使用stop修飾符即可實現這個目的：

<script src="vue.js"></script>
<div id="app">
    <p v-on:mousemove="updateCoordinates">Coordonates : {{x}}/{{y}}
        <!-- 請注意下面這個SPAN綁定的事件mousemove
        采用了.stop修飾符，表示此元素的mousemove事件不做任何處理
        -->
        - <span v-on:mousemove.stop = "">DEAD SPOT</span>
    </p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            counter: 0,
            x: 0,
            y: 0
        },
        methods: {
            updateCoordinates: function (event) {
                this.x = event.clientX;
                this.y = event.clientY;
            }
        },
    });
</script>

021-監聽鍵盤事件.html

這個例子很簡單，在輸入框中監控鍵盤事件
一旦敲入回車鍵，則彈出Alert窗口。

<script src="vue.js"></script>
<div id="app">
    <input type = "text" v-on:keyup.enter="alertMe" />
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            counter: 0,
            x: 0,
            y: 0
        },
        methods: {
            alertMe: function () {
                alert("Alert!");
            }
        },
    });
</script>

022-作業：事件

作業2-1：按下按鈕，彈出警告框。

<script src="vue.js"></script>
<div id="app">
  <button v-on:click="alertMe">Show Alert</button>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            counter: 0,
            x: 0,
            y: 0
        },
        methods: {
            alertMe: function () {
                alert("You Clicked me!");
            }
        },
    });
</script>

作業2-2：記錄鍵盤輸入的值，存到data里并立即顯示。
特點1：除了直接綁定到一個方法，也可以在內聯 JavaScript 語句中調用方法，即不再綁定一個函數，直接在調用的時候執行JS語句，這種方法適用于函數體很短，只有一行的函數。
特點2：采用了Vue的關鍵字$event，它表示JavaScript自動生成的默認事件對象，它保存了許多重要信息，如事件的目標元素等。而這里，目標元素就是輸入框，輸入框有一個value屬性，它就是用戶輸入值的來源，可以借由這個事件對象（$event）來訪問它的目標元素（target）,再訪問它的屬性(value),并賦值給變量myValue.
如果不采用內聯的方式，也可以在此綁定一個事件函數，然后將$event作為參數傳遞進去，以同樣的方法在事件函數中訪問value并賦值給myValue，效果一樣。

<script src="vue.js"></script>
<div id="app">
    <input v-on:keydown = "myValue = $event.target.value" type="text"/>
    <p>{{myValue}}</p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            myValue: ''
        }
    });
</script>

作業2-3：記錄鍵盤輸入的值，存到data里，但只有按下enter才更新顯示。
這題很簡單，在上題的基礎上增加一個.enter就可以了

<script src="vue.js"></script>
<div id="app">
    <input v-on:keydown.enter = "myValue = $event.target.value" type="text"/>
    <p>{{myValue}}</p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            myValue: ''
        }
    });
</script>

024-在模板中編寫JS代碼.html

在所有能訪問Vue實例的地方，無論是監聽鼠標點擊事件還是輸出counter,只要訪問了Vue實例，就可以使用任何合法的JavaScript代碼，只要它是一個簡單表達式即可，當然這個表達式中不能有if或者for循環等復雜語句。這就是所謂的“內聯”調用法
例如上面那個鼠標點擊按鈕增加數字的例子，因為邏輯足夠簡單，我們甚至在v-onclick里都不需要綁定任何函數，而是可以直接讓它執行一條語句，也就是說在調用的時候就直接寫成counter++即可。當然，如果程序邏輯比較復雜，不足以用一條語句表達，那么還是老老實實編寫一個函數并綁定到事件里為好。
在模板中也可以直接插入表達式，例如像{{counter * 2}}這樣的表達式。
當然，我們還以用簡短的“三元表達式”，這種表達式是if語句的一個變種，能夠在一行內完成對變量的判斷。

<script src="vue.js"></script>
<div id="app">
    <!-- 此處取消了事件函數，直接用counter++代替 -->
    <button v-on:click="counter++">Click Me</button>
    <!-- 此處直接修改模板counter的值 -->
    <p>{{ counter * 2}}</p>
    <!-- 此處是一個三元表達式，用以判斷counter的值 -->
    <p>{{ counter * 2 > 10 ? 'Greate than 10' : 'Smaller than 10'}}</p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            counter: 0
        }
    });
</script>

025-使用雙向綁定.html

某些情況下，我們需要一邊同時監聽事件，一邊實施更新數據的時候就要用到雙向綁定。
Vue的雙向綁定真的非常簡單，只需要在監聽的的元素上加一個v-model即可
其實用v-bind + v-on加上事件函數，也能夠實現這個功能，但是顯然v-model要簡單、清晰許多。

<script src="vue.js"></script>
<div id="app">
    <input type = "text" v-model = "name">
    <p>{{name}}</p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            name: ''
        }
    });
</script>

026-用計算屬性來響應改變.html

目前為止，我們已經學會了兩種Vue的屬性：data, methods，一個放置數據，一個放置函數，現在引入第三個屬性：computed
先大致梳理一下本例子的效果：
界面有3個按鈕，兩個計數器，第一個按鈕是計數器1增加，第二個按鈕是計數器1減少，第三個按鈕是計數器2增加
另有1行文本，當counter1大于5時候顯示：Greater than 5，當counter1小于5時顯示：Smaller than 5
注意：counter2并沒有做這樣的判斷
為了實時監控counter1的值，這里運用了兩種同步方法，第一種是在methods里寫一個事件函數result
另一個辦法是運用computed，寫一個事件函數output
乍看上去，兩者代碼是相同的，并沒有什么區別，但實際區別是：
1、在調用方法上，寫在methods的函數是帶括號調用的，即: result() 這樣的形式來調用
2、寫在computed的函數并不需要像調用函數那樣調用，省略了括號，直接像調用data一樣：output
事實上，對于最終的結果，兩種方式確實是相同的，那么問題來了，有了methods不就可以了嗎？我們為什么還多此一舉冒出一個computed呢？
答案揭曉：
1、在Vue內部，computed屬性是基于他們的依賴的數據進行緩存的,只有在它相關的依賴發生改變時才會重新求值，與之不相關的數據變化的時候它不會做出任何動作。
2、method則不同，只要頁面有所變化（重新渲染）,它總會被執行，無論數據是否與之相關。
為了驗證以上結論，我們在界面上再放一個按鈕，再增加一個變量counter2，注意，這個按鈕和變量和counter1八竿子打不著關系，完全是一個獨立的東西。
按下F12鍵，進入瀏覽器調試模式，觀察console控制臺輸出
現在按下Increase Counter 1或Decrease Counter 1
counter1的值開始發生了變化，并且控制臺出現：Here is Computed 和 Here is Methods 兩行字
這是因為改變counter1值的時候，同時觸發了基于methods的result函數，和基于computed的output函數
以上邏輯容易理解，說得通！
現在，按下Increase Counter 2按鈕，這時候counter2的值開始增大了，但是詭異的是，控制臺顯示:Here is Methods
這是為什么呢？明明result函數里沒有任何一處是跟counter2有關系的，那為什么每次改變counter2的時候程序會跳進result函數里呢？
這正好印證了我們上面說過的一個結論：“只要頁面有所變化（重新渲染）,它總會被執行，無論數據是否與之相關”
刷新的雖然是counter2，但是請注意：只要頁面被重新渲染，它總是會被執行。
不言而喻，如果是很復雜的頁面，反復去執行一個與之無關的函數，效率開銷肯定是很大的。
所以我們需要computed屬性，這個屬性只處理與之相關的變量（例如本例中的counter1）,而與之無關的變量（counter2）即使發生變化，即使頁面被重新渲染了，它也不會被執行。
大部分時候我們選擇computed就對了，但是有時候我們就是希望某些數據不要經過緩存，就是想讓它直截了不停刷新并顯示的時候，選擇methods

<script src="vue.js"></script>
<div id="app">
    <button v-on:click="counter1++">Increase Counter 1</button>
    <button v-on:click="counter1--">Decrease Counter 1</button>
    <button v-on:click="counter2++">Increase Counter 2</button>
    <p>Counter:{{counter1}} | {{counter2}}</p>
    <!-- 注意兩種調用方法是不同的 -->
    <p>Counter 1 Result: {{result()}} | {{output}}</p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            counter1: 0,
            counter2: 0
        },
        computed: {
            output: function () {
                console.log('Here is Computed')
                return this.counter1 > 5 ? "Greater than 5" : "Smaller than 5"
            }
        },
        methods: {
            result: function () {
                console.log('Here is Methods')
                return this.counter1 > 5 ? "Greater than 5" : "Smaller than 5"
            }
        }
    });
</script>

027-計算屬性的替代：觀察改變.html

現在再加入一個新的屬性：watch
watch是Vue提供了另外一種處理數據依賴的方法，其最終效果其實和上例的methods和computed差不太多，不同的地方在于：
在computed屬性里面我們設置需要計算的屬性（如上例的output），然后在函數體里設置計算這個屬性(output)的邏輯。
watch則采用的是另外一種機制，把想要偵聽的屬性名稱設置為鍵，而這個鍵必須是在data(或者computed)里面能夠找到的，例如上例的counter1或counter2,鍵名必須與data里面的屬性名稱相同。
在watch中定義一個和屬性名相同的函數，即當屬性值發生變化時需要執行的代碼，Vue會自動把屬性變化之后的數值傳遞給該函數。
從結果而言，既然說watch和computed的作用相當，那我們為啥非要用watch不可呢？因為watch是異步執行的。
computed只能執行同步任務，也就是說在它return的時候，必須立即返回一個結果，中途不能執行異步任務（例如定時器或者訪問服務器等等）。
比如說，你需要一個值，在兩秒之后更新，就必須用 watch
理論上，在Vue實例里，總是可以用this訪問其自身（請參見前面的內容），但在回調閉包中卻不行，定時器函數（setTimer）是一個典型的回調閉包的例子，因此不能在其中直接訪問this，而是要用一個變量先保存起來，以便在setTimer函數中使用。
當然，你也可以嘗試一下把這段代碼中的 watch 改成 computed 去試試看，結果就是只會清0一次，然后代碼就不再執行了。
大部分情況下，建議使用computed，因為它擁有最佳的速度，但是在執行異步任務的時候，我們只能選擇watch <script src="vue.js"></script> <div id="app"> <button v-on:click="counter1++">Increase Counter 1</button> <p>Counter:{{counter1}}</p> </div> <script> new Vue({ el: "#app", data: { counter1: 0, }, watch: { counter1: function (value) { // 注意：回調閉包中不允許直接使用this // 因此此處需要先用一個變量vm來保存this var vm = this; setTimeout(function () { vm.counter1 = 0 }, 2000) } } }); </script>

028 - 用縮寫來節省時間

Vue里有兩個使用頻率很高的指令：v-on和v-bind, 這兩個指令可以用@符合和:符號來替代
例如像這樣的代碼是完全符合語法的：
用@號替代v-on: <button @click="counter1++">Increase Counter 1</button>
用:號替代v-bind: <a :href="link">Baidu</a>

029 - 作業：響應式屬性

1. 用computed屬性完成對value的判斷，等于37的時候result顯示Done,不等于的時候顯示Not there yet

<!-- 作業3問題：響應式屬性 - 作業1 -->
<script src="vue.js"></script>
<div id="app">
    <button v-on:click="value += 5">Add 5</button>
    <button v-on:click="value += 1">Add 1</button>
    <p>{{result}}</p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            value: 0,
        },
        computed: {
            result: function () {
                return this.value == 37 ? "Done" : "Not there yet"
            }
        }
    });
</script>

2. 監視變量value，當它有變化的時候觸發定時器，5秒后將它歸零
這一題有幾個重點：
1、watch 不僅可以監控data里的屬性，也可以監控computed里面的屬性(如result)
2、通過vm可以修改data里的屬性（如value）,但是不能修改computed里的result
3、本例是一個循環監控的例子：起初是按鈕改變了value的值，value==37改變了result的值，result觸發了定時器，定時器又改變了value的值，value的值又反過來影響了result的值

<script src="vue.js"></script>
<div id="app">
    <button v-on:click="value += 5">Add 5</button>
    <button v-on:click="value += 1">Add 1</button>
    <p>Current Value:{{value}} </p>
    <p>{{result}}</p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            value: 0
        },
        computed: {
            result: function () {
                return this.value == 37 ? "Done" : "Not there yet"
            }
        },
        watch: {
            result: function () { //watch可以監聽computed里的屬性
                var vm = this;
                setTimeout(function () {
                    vm.value = 0
                    // 但無法修改computed里定義的屬性，即如果寫成 vm.result = "XXX" 則程序會報錯
                }, 5000)
            }
        }
    });
</script>

031-CSS類動態樣式-基礎.html

設置CSS，demo是一個div塊，red是顏色
監聽click事件，并修改attachRed的值（只有一行代碼，即將attachRed取反）
設置class值，修改div的class屬性，相當于在red: true和red: false之間互相切換。
整個過程實際上由兩部分完成，@click事件更改attachRed的值，而:class則負責根據attachRed的值反復設置css

<style>
    .demo {
        width: 100px;
        height: 100px;
        background-color: gray;
        display: inline-block;
        margin: 10px;
    }

    .red {
        background-color: red;
    }
    }
</style>
<script src="vue.js"></script>
<div id="app">
    <div
            class="demo"
            @click="attachRed = !attachRed"
            :class="{red: attachRed}"

    ></div>

</div>

<script>
    new Vue({
        el: "#app",
        data: {
            attachRed: false
        }
    });
</script>

032-CSS類動態樣式-使用對象

接上一個例子，如果我們想讓div塊在紅色和藍色之間切換怎么辦呢？
首先在style里增加一個css的blue類： .blue { background-color: blue; } -然后把class屬性改成這樣： :class="{red: attachRed, blue: !attachRed}"
即當attachRed為True時采用red，而當attachRed為False的時候采用blue類。
現在，這個對象變長了，而且將來隨著頁面的復雜還將越來越長，如果我們不想把這一行代碼寫進HTML模板里該怎么辦呢？我們可以把樣式對象作為Vue實例內的計算屬性來處理。定義一個computed(計算)函數名稱為：divClasses，然后用這個函數它來返回Javascript對象。
完整代碼如下：

<style>
  .demo {
      width: 100px;
      height: 100px;
      background-color: gray;
      display: inline-block;
      margin: 10px;
  }
  .red {
      background-color: red;
  }

  .blue {
      background-color: blue;
  }
</style>
<script src="vue.js"></script>
<div id="app">
  <div
          class="demo"
          @click="attachRed = !attachRed"
          :class="divClasses"

  ></div>
</div>
<script>
  new Vue({
      el: "#app",
      data: {
          attachRed: false
      },
      computed: {
          divClasses: function () {
              return {
                  red: this.attachRed,
                  blue: !this.attachRed
              }
          }
      }
  });
</script>

033-CSS類動態樣式-使用命名

傳統的HTML語法里，一個元素套用某個CSS類是用class = "類名"
而在Vue里面，則使用 :class = "表達式"，這個表達式可以是：
1、直接使用 CSS類名
2、使用對象，類名：布爾值，如red: true或red: false
3、 computed里return的對象（如同上一個例子那樣）
4、數組（CSS列表），Vue會自動解析列表中的對象
原理：
默認情況下，本例中第二個div塊為green, 現在清空輸入框，div框變灰色，因為它找不到對應的css值了。
這個輸入框是這樣設置的 :class="[color,{red: attachRed}]"，數組中有兩個值：
第一個元素color表示直接用css的類名來設置css的值
第二個元素{red: attachRed}能否成立，要看布爾值attachRed是否為true？
兩個值其中任何一個成立，css設置生效，在初始時：
數組元素1：{red: attachRed}不成立，因為attachRed為false
數組元素2：color成立，因為默認為green, 所以div塊為綠色
清空輸入框后，數組元素 color 不成立了，加之數組元素 {red: attachRed} 本來就不成立，因此div塊變成灰色
此時，如果我們點一下第一個div塊，則第二個div塊也跟著變成了紅色，分析：
現在盡管 color 還是不成立，但是 {red: attachRed} 成立了，于是第二個div塊跟著變成了紅色

<!-- 033-CSS類動態樣式-使用命名 -->
<style>
    .demo {
        width: 100px;
        height: 100px;
        background-color: gray;
        display: inline-block;
        margin: 10px;
    }
    .red {
        background-color: red;
    }
    .blue {
        background-color: blue;
    }
    .green {
        background-color: green;
    }
</style>
<script src="vue.js"></script>
<div id="app">
    <div
            class="demo"
            @click="attachRed = !attachRed"
            :class="divClasses"

    ></div>
    <div
            class="demo"
            :class="[color,{red: attachRed}]"
    ></div>
    <hr>
    <!-- 此處輸入框雙向綁定了color屬性，即鍵盤輸入的內容會即時作為CSS類名傳到HTML中去 -->
    <input type = "text" v-model = "color">
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            attachRed: false,
            color:'green' 
            //color屬性默認為green，請注意由于雙向綁定的原因，green這個字符串也會同時傳遞到輸入框里
        },
        computed: {
            divClasses: function () {
                return {
                    red: this.attachRed,
                    blue: !this.attachRed
                }
            }
        }
    });
</script>

章節2課時34-動態設置樣式（不使用CSS類）

本課學習不用css的class直接設置css格式
上例中，我們要事先定義三個css背景顏色的class，然后用 :class 這樣的方式去套用，現在轉換一種方法：
直接在div中設置css屬性，例如 background-color
可以看到，本例中完全沒有設置red, blue, green這三個class, 在div塊中是這么處理的：

<div class="demo" :style="{'background-color':color}"></div>

現在我們用 :style 來直接設置 background-color，注意格式，必須用單引號括起來，因為中間有連字符，如果不用單引號，那就必須改成 backgroundColor 這樣的駝峰命名法，那么color是怎么來的呢？請看這一行：

data: { color: 'grey', width: 100}

以及這一行：

<input type="text" v-model="color">

vue實例中，我們定義了一個color變量（默認grey），再用v-model雙向綁定在一個input輸入框中，于是我們在輸入框中輸入任何符合css規則的顏色字符串可以同步生效在div框中（區別于上一個例子，我們只能輸入red,green和blue），本例中我們可以輸入yellow, gold, black等等等等，只要符合css語法的顏色都能生效而無需事前定義相對應的class
本課中的第二個div塊演示的是用類似的方法設置多個屬性，比如同時設置color和width
完整代碼中，我們通過計算方法設置一個myStyle對象，第二個div塊直接用:style="myStyle"來套用這個對象，以達到同時設置背景顏色和寬度的目的。
完整代碼如下：

<!-- 章節2課時34-動態設置樣式（不使用CSS類） -->
<style>
    .demo {
        width: 100px;
        height: 100px;
        background-color: gray;
        display: inline-block;
        margin: 10px;
    }
</style>
<script src="vue.js"></script>
<div id="app">
    <div class="demo" :style="{'background-color':color}"></div>
    <div class="demo" :style="myStyle"></div>
    <hr>
    <input type="text" v-model="color">
    <input type="text" v-model="width">
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            color: 'grey',
            width: 100
        },
        computed: {
            myStyle: function () {
                return {
                    backgroundColor: this.color,
                    width: this.width + 'px'
                }

            }
        }
    });
</script>

章節2課時35-用數組語法設置元素樣式有了上一節課的鋪墊，這一節課理解起來會顯得很容易。本例中我們增加了第三個div塊，而這個div塊是采用數組語法來設置css樣式的，參見代碼： <div class="demo" :style="[myStyle,{height: width + 'px'}]"></div> 這個div塊的 :style 是由一個數組構成的，有兩個元素： myStyle 和 {height: width + 'px'} myStyle 跟上一個例子一模一樣，不再贅述，第二個元素表示追加一個css屬性: height 這個例子中，我們并沒有在vue實例的計算屬性中添加 height 這個屬性，但它依然生效，也就是說，在一個div塊中，我們套用css樣式的方法是多種多樣的，現在總結一下：第一個div框中，直接采用css關鍵字 'background-color' 第二個div框中，采用計算方法（ computed ）return 一個css樣式（多屬性）第三個div框中，采用數組的方式設置css，在這個框中，我們同時采用了計算方法和css關鍵字直接設置法，相當于第一個div框和第二個div框的合體。完整代碼如下：

在線咨詢

上一篇：38個不可錯過的實用前端工具
下一篇：Javascript 知識點總結

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商