Vue.js常用插件

ue.js本身只提供了數據與視圖綁定及組件化等功能，

如果想用它來開發一個完整的SPA（Single Page Application）應用，我們還需要使用到一些Vue.js的插件。

Vue-router

Vue-router是給Vue.js提供路由管理的插件，利用hash的變化控制動態組件的切換。以往頁面間跳轉都由后端MVC中的Controller層控制，通過<a>標簽的href或者直接修改location.href，我們會向服務端發起一個請求，服務端響應后根據所接收到的信息去獲取數據和指派對應的模板，渲染成HTML再返回給瀏覽器，解析成我們可見的頁面。Vue.js + Vue-router的組合將這一套邏輯放在了前端去執行，切換到對應的組件后再向后端請求數據，填充進模板來，在瀏覽器端完成HTML的渲染。這樣也有助于前后端分離，前端不用依賴于后端的邏輯，只需要后端提供數據接口即可。

resource用法

Vue-resource提供了一種與RESTful API風格所匹配的寫法，通過全局變量Vue.resource或者組件實例中的this.$resource對某個符合RESTful格式的url進行封裝，使得開發者能夠直接使用增刪改查等基礎操作，而不用自己再額外編寫接口。

我們先大致說明下RESTful API：這是一種設計風格而不是標準，只是提供了一組設計原則和約束條件。它主要用于客戶端和服務器交互類的軟件。基于這個風格設計的軟件可以更簡潔，更有層次，更易于實現緩存等機制。在這種風格中，每個url路徑代表一種資源（resource），所以路徑中不推薦有動詞，只能有名詞，而且所用的名詞往往與數據庫的表格名對應，且一般采取復數的形式命名。而對于資源的具體操作類型，則由HTTP動詞表示，即GET/POST/PUT/PATCH/DELETE等。【B站推薦】Vue全套視頻教程，從vue2.0到vue3.0一套全覆蓋，前端必會的框架教程包含4套優質VUE練手項目，從零開始入門到精通，一套搞定。_嗶哩嗶哩_bilibili

ue (讀音 /vju?/，類似于 View) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。

一、MVVM模式和第一個Vue程序

1.什么是 MVVM

該層向上與視圖層進行雙向數據綁定
向下與 Model 層通過接口請求進行數據交互

Vue的安裝方式：

??1.1 使用CDN方法(初學者使用)
??也可以直接使用CDN的方式引入，代碼如下：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

1.2Vue-cli腳手架
??利用Vue-cli 腳手架構建Vue項目，在后面第七點詳細講解。(中大型項目中推薦使用)。

2.第一個Vue程序

?1、創建一個 HTML 文件

?2、引入 Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

完整示例：

<!DOCTYPE html>
  <html>
<head lang="en">
    <meta charset="UTF-8">
    <title>貝西說</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<!--view視圖-->
 <div id="app">
     <input type="text" v-model="message"/>
     {{message}}
 </div>
 <script>
     var vue=new Vue({
        el:"#app",
         /*model數據*/
         data:{
             message:"hello,vue"
         }
     });
 </script>
</body>
</html>

演示效果：（視圖驅動數據，數據驅動視圖）

二、基礎語法

v-bind

v-bind就是用于綁定數據和元素屬性的
完整示例：

<body>
  <div class="app">
        <a v-bind:href="url">點我</a>
    </div>
 <script>
     var app = new Vue({
         el:'.app',
         data:{
             url:"https://www.baidu.com",
         }
     });
 </script>
</body>

注意：
? v-bind后面是：屬性名=，我的理解是表示綁定這個屬性，綁定之后，對應的值要去vue的數據里面找。
? 當我們在控制臺改變url時，對應也會變化。

相同的，我們還可以綁定圖片src屬性、超鏈接的class

<body>
    <div class="app">
      <a v-bind:href="url">點我</a>
        <img v-bind:src="imgsrc" width="200px"/>
    </div>
 <script>
     var app = new Vue({
         el:'.app',
         data:{
             url:"https://www.baidu.com",
             imgsrc:"https://cn.vuejs.org/images/logo.png"
         }
     });
 </script>
</body>

注意：

<div class="app">
	  <a v-bind:href="url">點我</a>
</div>

通常我們可以將v-bind：簡寫成：

<div class="app">
<a :href="url">點我</a>
</div>

v-if,v-else

v-if,v-else

完整示例：

<body>
    <div id="app">
      <div v-if="ok">YES</div>
        <div v-else>NO</div>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                 ok:true,
             }
         });
     </script>
</body>

v-if,v-else-if,v-else

<body>
    <div id="app">
      <div v-if="role=='beixi'|| role=='admin'">您好，admin</div>
        <div v-else-if="role=='jzj'">賈志杰</div>
        <div v-else>您無權訪問！</div>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                 role:"admin",
             }
         });
     </script>
</body>

v-for

?1、v-for循環普通數組

<body>
  <div id="app">
        <p v-for="(item,index) in list">{{item}}----索引:{{index}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                list:[1,2,3,4,5],
             }
         });
     </script>
</body>

2、v-for循環對象數組

<body>
<div id="app">
        <p v-for="(user,index) in list">{{user.id}}---{{user.name}}-----索引:{{index}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                list:[
                    {id:1,name:'beixi'},
                    {id:2,name:'jzj'},
                    {id:3,name:'賈志杰'}
                ],
             }
         });
     </script>
</body>

3、v-for循環對象

<body>
  <div id="app">
        <p v-for="(val,key,index) in user">值：{{val}}---鍵：{{key}}-----索引:{{index}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                user:{
                    name:"beixi",
                    age:"18",
                    sex:"男"
                }
             }
         });
     </script>
</body>

?4、v-for循環數字

<body>
  <div id="app">
        <p v-for="count in 5">這是第{{count}}次循環</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{ }
         });
     </script>
</body>

三、Vue綁定事件

語法：

??v-on:事件名 = “方法名”
??簡寫： @事件名 = “方法名”
??事件名： click|keydown|keyup|mouseover|mouseout|自定義事件名

v-on事件監聽，完整示例：

<!DOCTYPE html>
  <html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8">
    <title>貝西說</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
    <div id="app">
       {{count}}
        <button v-on:click="count+=1">點我加1</button>
        <button v-on:click="sub">點我減1</button>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{count:1 },
             methods:{
                 sub:function(){
                    this.count-=1;
                 }
             }
         });
     </script>
</body>
</html>

注意：v-bind可以簡寫為： v-on: 可以簡寫@

四、Vue：表單雙綁、組件

1.什么是雙向數據綁定

Vue.js 是一個 MVVM 框架，即數據雙向綁定，即當數據發生變化的時候，視圖也就發生變化，當視圖發生變化的時候，數據也會跟著同步變化。這也算是 Vue.js 的精髓之處了。

值得注意的是，我們所說的數據雙向綁定，一定是對于 UI 控件來說的，非 UI 控件不會涉及到數據雙向綁定。單向數據綁定是使用狀態管理工具的前提。如果我們使用 vuex，那么數據流也是單項的，這時就會和雙向數據綁定有沖突。

2.在表單中使用雙向數據綁定

??你可以用 v-model 指令在表單、及元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有些神奇，但 v-model 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，并對一些極端場景進行一些特殊處理。

??注意：v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的數據作為數據來源。你應該通過 JavaScript 在組件的 data 選項中聲明初始值!
示例1：

<body>
  <div id="app">
        <input type="text"  v-model="message"/>{{message}}
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{message:'' }
         });
     </script>
</body>

完成效果：

示例2：

  <div id="app">
    <input type="radio" name="sex" value="男" v-model="gender"/>男
        <input type="radio" name="sex" value="女" v-model="gender"/>女
        <p>{{gender}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{gender:'' }
         });
     </script>

示例3：

<body>
  <div id="app">
        <select v-model="selected">
            <option value="">--請選擇--</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="廣州">廣州</option>
        </select>
        <p>{{selected}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{selected:'' }
         });
     </script>
</body>

3.什么是組件

??組件是可復用的 Vue 實例，說白了就是一組可以重復使用的模板，跟 JSTL 的自定義標簽、Thymeleaf 的 th:fragment 等框架有著異曲同工之妙。
??通常一個應用會以一棵嵌套的組件樹的形式來組織：

例如，你可能會有頁頭、側邊欄、內容區等組件，每個組件又包含了其它的像導航鏈接、博文之類的組件。

4.簡單定義一個組件

注意：在實際開發中，我們并不會用以下方式開發組件，而是采用 vue-cli 創建 .vue 模板文件的方式開發，以下方法只是為了讓大家理解什么是組件。

  <div id="app">
    <beixi></beixi>
    </div>
     <script>
 	    //注冊組件
         Vue.component("beixi",{
             template:'<li>hello</li>'
         });
         var app = new Vue({
             el:"#app",
         });
     </script>

說明：

Vue.component()：注冊組件
beixi：自定義組件的名字
template：組件的模板

5.使用props屬性動態傳遞參數

<body>
  <div id="app">
        <!--組件：使用props把值傳遞給組件-->
        <blog-post v-for="item in items" v-bind:value="item"></blog-post>
    </div>
     <script>
         Vue.component("blog-post",{
             props:['value'],
             template:'<li>{{value}}</li>'
         });
         var app = new Vue({
             el:"#app",
             data:{
                 items:['beixi','jzj','賈志杰']
             }
         });
     </script>
</body>

說明：

v-for=“item in items”：遍歷 Vue 實例中定義的名為 items 的數組，并創建同等數量的組件

v-bind:value=“item”：將遍歷的 item 項綁定到組件中 props 定義的名為 value屬性上；= 號左邊的 value 為 props 定義的屬性名，右邊的為 item in items 中遍歷的 item 項的值

五、Axios異步通信

1.什么是Axios

??Axios 是一個開源的可以用在瀏覽器端和 NodeJS 的異步通信框架，她的主要作用就是實現 AJAX 異步通信，其功能特點如下：

從瀏覽器中創建 XMLHttpRequests
從 node.js 創建 http 請求
支持 Promise API [JS中鏈式編程]
攔截請求和響應
轉換請求數據和響應數據
取消請求
自動轉換 JSON 數據
客戶端支持防御 XSRF（跨站請求偽造）

??GitHub：https://github.com/axios/axios

??中文文檔：http://www.axios-js.com/

2.為什么要使用 Axios

??由于 Vue.js 是一個視圖層框架并且作者（尤雨溪）嚴格準守 SoC （關注度分離原則），所以 Vue.js 并不包含 AJAX 的通信功能，為了解決通信問題，作者單獨開發了一個名為 vue-resource 的插件，不過在進入 2.0 版本以后停止了對該插件的維護并推薦了 Axios 框架。少用jQuery，因為它操作Dom太頻繁！

3.第一個 Axios 應用程序

??咱們開發的接口大部分都是采用 JSON 格式，可以先在項目里模擬一段 JSON 數據，數據內容如下：創建一個名為 data.json 的文件并填入上面的內容，放在項目的根目錄下

{
  "name": "貝西說",
  "url": "https://blog.csdn.net/beixishuo",
    "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "太谷",
    "city": "山西晉中",
    "country": "中國"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://space.bilibili.com/474668932"
    },
    {
      "name": "貝西說",
      "url": "https://blog.csdn.net/beixishuo"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

完整示例：

    <!--引入 JS 文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
	<!--在線引入axios。在項目開發中會安裝axios組件(npm install axios)-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <div>{{info.name}}</div>
    <div>{{info.address}}</div>
    <a v-bind:href="info.url">貝西說</a>
</div>
<script>
    var app=new Vue({
        el:"#app",
        //data: 屬性
        data:function(){//需要處理(返回)后臺數據在頁面上渲染時使用
            return{
                //請求的返回參數格式必須和json字符串一樣
                info:{
                    name:null,//相當于形參占位，實際參數data.json會賦予
                    url:null,
                    address:{
                        street:null,
                        city:null,
                        country:null
                    }
                }
            }
        },
        mounted:function(){//mounted鉤子函數，相當于java中main函數。可以調用methods中定義的函數
        // axios.get('data.json').then(resp=>(console.log(resp.data)));
            axios.get('data.json').then(resp=>(this.info=resp.data));
        }
    })
</script>
</body>

注意:
讀取本地json文件中的數據時讀取失敗，如圖

解決方式就是右擊瀏覽器快捷方式，更改屬性，在目標后面加上

–allow-file-access-from-files

說明:

在這里使用了 v-bind 將 a:href 的屬性值與 Vue 實例中的數據進行綁定
使用 axios 框架的 get 方法請求 AJAX 并自動將數據封裝進了 Vue 實例的數據對象中
我們在data中的數據結構必須要和Ajax響應回來的數據格式匹配！

4.axios API

可以通過將相關配置傳遞給 axios 來進行請求。

axios(config)

// 發送一個 POST 請求
axios({
	method: 'post',
	url: '/user/12345',
	data: {
	firstName: 'Fred',
	lastName: 'Flintstone'
	}
});

axios(url[, config])

// 發送一個 GET 請求 (GET請求是默認請求模式)
	axios('/user/12345');

請求方法別名
為了方便起見，已經為所有支持的請求方法提供了別名。

axios.request（config）
axios.get（url [，config]）
axios.delete（url [，config]）
axios.head（url [，config]）
axios.post（url [，data [，config]]）
axios.put（url [，data [，config]]）
axios.patch（url [，data [，config]]）

注意

當使用別名方法時，不需要在config中指定url，method和data屬性。

5.Vue的生命周期

六、計算屬性

1.什么是計算屬性

??當一些數據需要根據其它數據變化時,需要進行處理才能去展示,雖然vue提供了綁定數據表達式綁定的方式,但是設計它的初衷只是用于簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護,對于一些比較復雜和特殊的計算有可能就捉襟見肘了,而且計算的屬性寫在模板里也不利于項目維護

computed主要的作用:

??分離邏輯(模板和數據分離)
緩存值
??雙向綁定(getter,setter)

簡單理解為：把計算的結果當作屬性返回去

2.完整示例

    <!--引入 JS 文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text"  v-model="num1"/><input type="text" v-model="num2"/>
    <p>求和結果{{result}}</p>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{num1:1,num2:2},
        computed:{//計算屬性
           result:function(){
               return parseInt(this.num1)+parseInt(this.num2);
           }
        }
    })
</script>
</body>

3、methods方法與computed計算屬性區別

兩者的執行結果是完全相同的
計算屬性是基于他們的依賴進行緩存的，只有在相關依賴發生改變時，他們才會重新求值，也就是說，只要他的依賴沒有發生變化，那么每次訪問的時候計算屬性都會立即返回之前的計算結果，不再執行函數
每次觸發重新渲染時，調用方法將總會再次執行函數

七、前端工程化 vue-cli

Vue腳手架指的是vue-cli，它是一個專門為單頁面應用快速搭建繁雜的腳手架，它可以輕松的創建新的應用程序而且可用于自動生成vue和webpack的項目模板。

利用vue-cli腳手架來構建Vue項目需要先安裝Node.js和NPM環境。
1.Node.js的安裝

Node.js的安裝比較簡單，大家需要在node.js官網(https://nodejs.org/en/download/)下載并安裝node.js環境，windows的推薦下載Windows Installer (.msi)。同時，大家會得到一個附送的NPM工具。

a，安裝Node.js，雙擊下載好的node文件，如圖所示。

安裝過程比較簡單，一直“下一步”即可。
b，環境變量配置：安裝完成后需要設置環境變量：即Path中添加安裝目錄(例如：D:\java\nodejs)，如圖所示。

c，點擊開始=》運行=》輸入"cmd" => 輸入node -v如圖所示，驗證安裝是否成功。

2.npm安裝
由于node.js已經集成了npm，所以之前npm也一并安裝好了。所以在cmd終端輸入npm -v 來測試是否安裝成功。命令如圖所示，出現版本提示表示安裝成功。

3基本使用

步驟如下：
①　搭建第一個完整的Vue-cli 腳手架構建的項目。

②　安裝完成，輸入Vue -V，如果出現相應的版本號，則說明安裝成功。如圖7-6所示。

③　我們可以使用vue-cli來快速生成一個基于webpack模板構建的項目，如圖所示，項目名為vue-project。

④　配置完成后，可以看到目錄下多出了一個項目文件夾，里面就是 vue-cli 創建的一個基于 webpack 的 vue.js 項目。
然后進入項目目錄（如：cd vue-project），使用 npm install安裝依賴，如圖所示。

依賴安裝完成后，我們來看一下項目的目錄結構，如下所示：

.
|-- build                            // 項目構建(webpack)相關代碼
|   |-- build.js                     // 生產環境構建代碼
|   |-- check-version.js             // 檢查node、npm等版本
|   |-- dev-client.js                // 熱重載相關
|   |-- dev-server.js                // 構建本地服務器
|   |-- utils.js                     // 構建工具相關
|   |-- webpack.base.conf.js         // webpack基礎配置
|   |-- webpack.dev.conf.js          // webpack開發環境配置
|   |-- webpack.prod.conf.js         // webpack生產環境配置
|-- config                           // 項目開發環境配置
|   |-- dev.env.js                   // 開發環境變量
|   |-- index.js                     // 項目一些配置變量
|   |-- prod.env.js                  // 生產環境變量
|   |-- test.env.js                  // 測試環境變量
|-- node_modules		   //所需要依賴資源
|-- src                              // 源碼目錄
|   |--  assets                   	   //存放資產文件
|   |-- components                   // vue公共組件
|   |-- router                   	//存放路由js文件，用于頁面的跳轉
|   |-- App.vue                        // 頁面入口文件
|   |-- main.js                        // 程序入口文件，加載各種公共組件
|-- static                           // 靜態文件，比如一些圖片，json數據等
|   |-- data                           // 群聊分析得到的數據用于數據可視化
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 定義代碼格式
|-- .gitignore                       // git上傳需要忽略的文件格式
|-- README.md                        // 項目說明
|-- favicon.ico 
|-- index.html                       // 入口頁面
|-- package.json                     // 項目基本信息

對于開發者更多操作的是src目錄：

|-- src                              // 源碼目錄
|   |--  assets                   	   //存放資產文件
|   |-- components                   // vue公共組件
|   |-- router                   	//存放路由js文件，用于頁面的跳轉
|   |-- App.vue                        // 頁面入口文件
|   |-- main.js

④　輸入npm run dev命令來啟動項目，如圖所示。

運行成功后在瀏覽器輸入：http://localhost:8080，訪問項目結果如圖所示。

板語法

對于之前我們簡單的說了說教程的計劃，和開發中會使用的 IDE 編輯器。接下來我們來說說 Vue.js 的相關語法定義。

這里簡單地說說語法這個知識點，不管是任何的語言都會有一套語法結構，能夠讓開發者使用起來很方便，而且各個語言之間差異都不大。而 Vue.js 則是基于 HTML 的模板語法進行實現的。而一套成熟可用的語法結構，一般都分為：關鍵字，基礎數據類型，條件判斷，循環結構，函數，事件等基礎功能，而在前端的體系里，又多了對于表單相關的語法定義。而在最近這幾年組件的興起，功能組件化也越來被越多的人拍手叫好。對于組件的使用是貫穿整個 Vue.js 的開發周期，所以學習一門新的語言和知識，最主要的一開始，要學習的就是這些基礎點，然后在這個基礎之上，才是你發揮的場地。

Mustache

Vue.js 是基于 Mustache 的，而 Mustache 是一款 logic-less 的前端模板引擎。最主要使用它的原因是規范和經典（大家都在用）。最基本的就是定義一個變量 {{ }} 雙花括號的定義方式。然后在實際的 HTML 定義中 Vue.js 又實現了一系列的指令，就是響應標簽的屬性中的自定義屬性。以 v-* 來定義。這個就是后端學習中模板語法的基礎關鍵字。死記硬背也要記牢的。當然以人類的記憶遺忘曲線，你天天用它也就記住了它。一開始就差文檔就好了，收藏我這個文章，后續可以當文檔用哦！

語法部分思維導圖

準備開始

這里先說怎么簡單使用，后續將針對每一個標簽都書寫一篇教程，盡量能涵蓋所有的知識點。

這里使用方式用兩種進行講解。一個是普通的引用方式進行，另外一個是單體應用。講解的話直接引用更能說明基礎的語法關系。

所有編程語言第一個案例都是 hello world 程序。這里也不例外。

打開我們的開發工具，這里下用 VS Code 開開胃。

創建應用

創建一個hello.html文件，并編寫如下代碼。

按下F5, 或者點擊菜單運行 -> 調試選擇 Chrome，如果沒有，就先下載吧。后續基本以它為主了。

啟動調試之后，我們可以看到瀏覽器的效果。

就這樣我們就完成了 Vue.js 的使用。學習起來十分簡單，只要有 HTML 和 JavaScript 的一點基礎知識，就可以很順手的使用。代碼很簡單，我們過一下這個流程。

首先第一步，引入框架

你要使用一個框架，不管是什么類型的語言，都會有對應的引用方式，比方說 Java 的 jar, 正確的引入了才能使用它，否則只會給你說你在干什么？

而 HTML 應引入一個 JavaScript 的框架，所以就需要 script 標簽進行引入使用。

<script src="https://unpkg.com/vue@next"></script>

這里暫時使用 CDN 的引用方式，后期研究代碼執行步驟，就需要考慮使用本地的方式進行查看，這樣更容易分析代碼。

第二步，聲明一個模板

const HelloVueApp = {
  data() {
    return {
      message: "Hello Vue.js!!",
    };
  },
};

這是一個最簡單的使用方式，這里把變量都放到一個函數 data() 中，這里放到 data 函數，而不是放到 data 屬性中，因為以下的原因。

防止 data 中的變量出現數據污染。不使用函數包裹的數據將會在全局可訪問。

var Vue = function () {};
Vue.prototype.data = { a: 0, b: 1 };
var var1 = new Vue();
var var2 = new Vue();
var1.data.a = 3;
console.log(var2.data.a); // 3
//直接暴露屬性會造成數據污染， 因為共用一個數據。

組件實例中的 data 必須為函數，為了防止多個組件之間調用共用一個 data, 產生數據污染。

var Vue = function () {
  this.data = this.dataFun();
};
Vue.prototype.dataFun = function () {
  return {
    a: 1,
    b: 2,
  };
};
var v1 = new Vue();
var v2 = new Vue();
v1.data.a = 5;
console.log(v1.data.a, v2.data.a); //5 1

在創建實例的過程中，該函數返回的是一個對象，這樣可以通過 Vue 的響應式系統將其封裝起來，并以 $data 的形式存儲在組件實例中。并且該對象的任何頂級的屬性（property）也會通過組件實例暴露出來。并且該函數中的屬性都可以使用 Mustache 語法進行訪問，也就是頁面中 {{ message }} ，改造上面的代碼就可以訪問 message 變量

const vm = Vue.createApp(HelloVueApp).mount("#hello-vue");
console.log(vm.$data.message) // 控制臺輸出 Hello Vue.js!!

當然除了 data 之外還有： methods，props, computed， watch，provide，inject, setup，emits 等。

然后使用 Vue 暴露出來的 createApp 進行創建。使用 mount 綁定一個頁面元素。這里使用 id # 的方式關聯到 hello-vue 的 id 屬性上。最終我們就看都了頁面中的效果。

最后，渲染到頁面上

{{ message }}

整個過程都在 Vue.js 的構建生命周期中。因為每個組件創建的過程中都要經過一系列的初始化的過程，比方說：監聽數據，編譯模板，將實例掛載到 DOM 上，并響應監聽數據的變化更新到 DOM上等。在這個生命周期就會定義一些鉤子函數，可以讓使用者在不同的階段添加代碼的機會。

Vue.js 的生命周期圖示

created 在實例創建完成后被同步調用。

單獨說這個鉤子函數，后續所有的周期鉤子都會詳細的介紹，現在先簡單的收下 created, 也就是說，你可以認為這個函數執行的時候，頁面基本上已經加載完畢。在 data 下寫上下面代碼，執行查看效果，你會發現，執行的步驟。

beforeCreate(){
	console.log("beforeCreate"); 
},
created(){
	console.log("created");
},

模板中使用指令

指令 (Directives) 是帶有 v- 前綴的特殊 attribute。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用于 DOM。對于指令大部分都是操作的單個 JavaScript 表達式， v-for 和 v-on 是例外情況，會在后面循環和事件中，詳細說明。

v-text

我們來看一個指令 v-text，將一個變量中的數據填充到標簽中。

瀏覽器查看效果：

從這里可以看出來和 {{}} 模板語法起到相同的作用，就是讓數據放入到標簽中顯示出來。

然后我們來用一些其他的使用方式，加載不同類型的數據。

先看效果：

除了基礎的變量類型，我們可以使用對象，也可以使用數組，還可以使用簡單的三目運算，并且還可以進行賦值的操作。這里只能是單個表達式。頁面中繼續加入如下代碼：

<div v-text="message = '賦值可行?'"></div>

刷新頁面，我們會發現，頁面中 message 變量中的數據已經變成 “賦值可行？”這里需要注意的是，能賦值的是之前就創建好的對象，如果該對象或者變量不存在就不允許使用了。

當然我們也可以使用一些受限的 JavaScript 函數。例如： Date 函數。繼續加入以下代碼：

<div v-text="new Date().getYear() + 1900"></div>

查看效果，我們發現頁面中打印了 2021 的年份信息。因為這是模板引擎，所以實現調用原始函數有限，僅限于如下函數可以使用：

Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,
decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,
Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt'

根據以上的案例我們可以得出 {{}} 模板應該也和 v-text 一樣的效果。我們繼續改造我們的代碼。

<div>
	當前： {{ new Date().getYear() + 1900 }}年
</div>

可以看到頁面中顯示出來了對應的效果。當前： 2021年，如果你能出現 2050年，可能這個框架應該已經不在出現，又有新的技術將它們代替。你只是在考古，考的是我曾經遺留下來的代碼筆記。

v-text的最終代碼和效果圖如下圖所示：

效果圖：

v-once

使用 v-once 執行一次性的插值操作，，他只渲染元素和組件進行一次處理，后續又數據的調整將不再修改數據。這可以優化代碼的性能，代碼如下：

效果圖：

這里我們發現，原始的數據并沒有進行數據的響應，而后續的正常使用插值指令的就進行數據更新。這里需要注意的是， v-once 的整個標簽作用域內，所有的數據都不會發生變化。

v-cloak

使用 v-cloak 解決 Vue 還沒有實例化，模板語法 {{}} 顯示到頁面中的問題，該問題只會出現在非組件化的或者單頁的模式下，該指令主要是保持元素上的組件在實例化結束以后才能顯示，可以結合 [v-cloak] { display: none } 一起使用時起到隱藏 Mustache 標簽的作用，具體代碼如下：

該案例的效果通過只有在訪問速度過慢的時候才能顯示出來。

v-show

根據表達式的真假值，切換 HTML 元素的 CSS display 狀態，進行隱藏和顯示元素信息，這里元素不管是否顯示都會加載到頁面上。當切換頻率很高的時候，推薦使用該方式，當切換頻率不高的情況下可以選擇該方式，或者使用 v-if 指令。演示代碼如下:

效果如下：

v-html

使用 innerHTML 更新元素的內容，保留元素的格式，這里內容只會按照普通的 HTML 插入，并不會作為 Vue 的模板進行編譯。如果真的要使用 v-html 的組合模板，可以考慮使用組件來代替，這里可以使用在富文本內容的顯示上。代碼案例如下。

效果圖如下 :

v-pre

不需要編譯器去編譯表達式，用來顯示原始的元素數據，這里可以寫在沒有指令的元素節點上，加快編譯的速度。演示效果，代碼如下：

效果圖如下：

v-on

該指令可以使用 @ 進行縮寫。綁定頁面中的事件，也就是一個事件監聽器。該表達式可以是一個函數的名字，也可以是一個內聯語句，當然也可以綁定一個修飾符，沒有修飾符的情況下可以省略。這里只做說明，后續事件詳細講解這個屬性。上面顯示和隱藏元素 v-show 的時候，演示過該用法。

<button v-on:click="doThis"></button>
//doThis 可以是方法名， 或者內聯語句。

v-bind

該指令可以使用：進行縮寫。綁定一個或者多個元素屬性（ attribute ）, 或者綁定一個組件 prop 到表達式。

<!-- 綁定 attribute -->
<img v-bind:src="imageSrc" />

<!-- 動態 attribute 名 -->
<button v-bind:[key]="value"></button>

<!-- 縮寫 -->
<img :src="imageSrc" />

<!-- 動態 attribute 名縮寫 -->
<button :[key]="value"></button>

本次基礎模板和指令的使用先告一段落，接下來我們來看一下一個模板中必有的條件判斷。關注我。持續關注后續內容。

在線咨詢

上一篇：21html模版里的if判斷語句
下一篇：為電信詐騙辦卡，構成幫助信息網絡犯罪活動罪法院判決了

您的項目需求

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

整合營銷服務商

Vue.js常用插件

一、MVVM模式和第一個Vue程序

1.什么是 MVVM

2.第一個Vue程序

二、基礎語法

三、Vue綁定事件

四、Vue：表單雙綁、組件

1.什么是雙向數據綁定

2.在表單中使用雙向數據綁定

3.什么是組件

4.簡單定義一個組件

5.使用props屬性動態傳遞參數

五、Axios異步通信

1.什么是Axios

2.為什么要使用 Axios

3.第一個 Axios 應用程序

4.axios API

5.Vue的生命周期

六、計算屬性

1.什么是計算屬性

2.完整示例

3、methods方法與computed計算屬性區別

七、前端工程化 vue-cli

板語法

Mustache

語法部分思維導圖

準備開始

創建應用

首先第一步， 引入框架

第二步， 聲明一個模板

最后， 渲染到頁面上

Vue.js 的生命周期圖示

created 在實例創建完成后被同步調用。

模板中使用指令

v-text

v-once

v-cloak

v-show

v-html

v-pre

v-on

v-bind

您的項目需求

首先第一步，引入框架

第二步，聲明一個模板

最后，渲染到頁面上