物件的擴充套件(Object.preventExtensions)、密封(Object.seal)和凍結(Object.freeze)

阿新 • • 發佈：2020-08-09

1.第一個vue小程式

1、idea安裝外掛vue.js

2、下載vue.

3.程式碼實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body>


<div id="id1">
    {{ message }}
</div>
    <script type="text/javascript">
        var app = new Vue({
            el:"#id1",
            data:{
                message:"hello vue "
            }
        })
    </script>
</body>
</html>

顯示 hello vue

在控制檯改變

或者通過:

<div id="app-2">   <span v-bind:title="message">     滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊！   </span> </div>

你看到的 v-bind attribute 被稱為指令。指令帶有字首 v-，以表示它們是 Vue 提供的特殊 attribute。可能你已經猜到了，它們會在渲染的 DOM 上應用特殊的響應式行為。在這裡，該指令的意思是：“將這個元素節點的 title attribute 和 Vue 例項的 message

property 保持一致”。

如果你再次開啟瀏覽器的 JavaScript 控制檯，輸入 app2.message = '新訊息'，就會再一次看到這個綁定了 title attribute 的 HTML 已經進行了更新。

2、MVVM

MVVM是Model-View-ViewModel的簡寫。它本質上就是MVC 的改進版。MVVM 就是將其中的View 的狀態和行為抽象化，讓我們將檢視 UI 和業務邏輯分開。當然這些事 ViewModel 已經幫我們做了，它可以取出 Model 的資料同時幫忙處理 View 中由於需要展示內容而涉及的業務邏輯。

前端頁面中，把Model用純JavaScript物件表示，View負責顯示，兩者做到了最大限度的分離。

把Model和View關聯起來的就是ViewModel。ViewModel負責把Model的資料同步到View顯示出來，還負責把View的修改同步回Model。

我們驚訝地發現，改變JavaScript物件的狀態，會導致DOM結構作出對應的變化！這讓我們的關注點從如何操作DOM變成了如何更新JavaScript物件的狀態，而操作JavaScript物件比DOM簡單多了！

設計思想

這就是MVVM的設計思想：關注Model的變化，讓MVVM框架去自動更新DOM的狀態，從而把開發者從操作DOM的繁瑣步驟中解脫出來！

3.基礎語法：

條件判斷：if

<div id="app-3">
    <p v-if="seen">現在你看到我了</p>
    <p v-else>現在你沒看到我</p>

    <p v-if="seen">現在你看到我了</p>
    <p v-else-if="seen==='a'">現在你看到a</p>
    <p v-else>aaaaa</p>
</div>
    <script type="text/javascript">
        var app3 = new Vue({
            el: '#app-3',
            data: {
                seen: true
            }
        })
    </script>

迴圈：for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body>
<ul id="id1">
    <li  v-for="item in iteams">
        {{item.message}}
    </li>
</ul>
    <script type="text/javascript">
        var app = new Vue({
            el:"#id1",
            data:{
                iteams:[
                    {message:"space1"},
                    {message:"space2"},
                    {message:"space3"}
                ]
            }
        })
    </script>
</body>
</html>

4.繫結事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="id1">
    <button v-on:click="saihello" >clock me</button>
</div>


    <script type="text/javascript">
        var app = new Vue({
            el:"#id1",
            data: {
                message: "space1"
            },
            methods:{
                saihello:function () {
                    alert(this.message)
                }
            }
        })
    </script>
</body>
</html>

5.vue7個屬性

學習vue我們必須之到它的7個屬性，8個方法，以及7個指令。787原則

el屬性
- 用來指示vue編譯器從什麼地方開始解析 vue的語法，可以說是一個佔位符。
data屬性
- 用來組織從view中抽象出來的屬性，可以說將檢視的資料抽象出來存放在data中。
template屬性
- 用來設定模板，會替換頁面元素，包括佔位符。
methods屬性
- 放置頁面中的業務邏輯，js方法一般都放置在methods中
render屬性
- 建立真正的Virtual Dom
computed屬性
- 用來計算
watch屬性
- watch:function(new,old){}
- 監聽data中資料的變化
- 兩個引數，一個返回新值，一個返回舊值，

data的三種寫法

在vue中，定義data可以有三種寫法。

1.第一種寫法，物件。

var app = new Vue({
　　el: '#yanggb',
　　data: {
　　　　yanggb: 'yanggb'
　　}
})

2.第二種寫法，函式。

var app = new Vue({
　　el: '#yanggb',
　　data: function() {
　　　　return {
　　　　　　yanggb: 'yanggb'
　　　　}
　　}
})

3.第三種寫法，函式，是第二種寫法的ES6寫法。

var app = new Vue({
　　el: '#yanggb',
　　data() {
　　　　return {
　　　　　　yanggb: 'yanggb'
　　　　}
　　}
})

三種寫法的區別

在簡單的vue例項應用中，三種寫法幾乎是沒有什麼區別的，因為你定義的#yanggb物件不會被複用。

但是如果是在元件應用的環境中，就可能會存在多個地方呼叫同一個元件的情況，為了不讓多個地方的元件共享同一個data物件，只能返回函式。這個與JavaScript的作用域特性有關，函式自己擁有私有的作用域，函式之間的作用域相互獨立，也就不會出現元件對資料的綁定出現交錯的情況。

6.雙向繫結

可以通過改變js物件(model)，改變view
藉助v-model繫結model，可以通過改變view 傳遞資料到model

UI控制元件上,表單的input ,selected上建立雙向資料流通.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="id1">
        請輸入：<input type="text" value="123" v-model="message"/> {{message}}
        <br>
        <input type="radio" name="sex" value="male" v-model="sex1" checked>Male
        <br>
        <input type="radio" name="sex" value="female" v-model="sex1" >Female
        <br>
        {{sex1}}
    </div>


    <script type="text/javascript">
        var app = new Vue({
            el:"#id1",
            data: {
                message: "space1",
                sex1:""
            },

        })
    </script>
</body>
</html>

7.元件

自定義標籤
可重複使用的vue例項,模板

程式碼實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body>
    <ul id="id1">
        //使用模板,傳遞引數給模板
        <diy1 v-for="item in items"  v-bind:qin="item"></diy1>
    </ul>


    <script type="text/javascript">
        // 建立元件
        Vue.component("diy1",{
            props:['qin'],
            template:" <li>{{qin}}</li>"
        })



        var app = new Vue({
            el:"#id1",
            data: {
               items:["java","python","c++"]
            }
        })
    </script>
</body>
</html>

元件的組織

通常一個應用會以一棵巢狀的元件樹的形式來組織：

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

為了能在模板中使用，這些元件必須先註冊以便 Vue 能夠識別。這裡有兩種元件的註冊型別：全域性註冊和區域性註冊。至此，我們的元件都只是通過 Vue.component 全域性註冊的：

Vue.component('my-component-name', {
  // ... options ...
})

全域性註冊的元件可以用在其被註冊之後的任何 (通過 new Vue) 新建立的 Vue 根例項，也包括其元件樹中的所有子元件的模板中。

到目前為止，關於元件註冊你需要了解的就這些了，如果你閱讀完本頁內容並掌握了它的內容，我們會推薦你再回來把元件註冊讀完。

8.網路通訊

axios中文文件

axios--github文件

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

特性

從瀏覽器中建立 XMLHttpRequests
從 node.js 建立 http 請求
支援 Promise API
攔截請求和響應
轉換請求資料和響應資料
取消請求
自動轉換 JSON 資料
客戶端支援防禦 XSRF

Vue基於 關注度分離 專注於檢視層，少用jquery，頻繁操作DOM樹。

程式碼實現：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="id1">
        <div>{{info.name}}</div>
    </div>


    <script type="text/javascript">

        var app = new Vue({
            el:"#id1",
            data(){
                //請求返回的資料,必須和json字串一樣
                return{
                    info:{
                        name:"",
                        url: "",
                        page: "",
                        isNonProfit:"",
                    }
                }
            },
			//進行網路通訊,底部實現是ajax
            mounted(){
                //鉤子函式
                axios.get("./data.json").then(response=>(this.info=response.data))
            }
        })
    </script>
</body>
</html>

9.Vue生命週期

八大鉤子函式

1，beforeCreate（）：此鉤子函式發生在例項建立之前，此時data，el，methods未初始化，觀測資料和事件初始化完成，

2，created（）：此鉤子函式data，methods資料初始化；el未初始化

3，beforemount（）：此鉤子函式內就運用了dom虛擬技術即是先佔位置資料不更新（操作dom時拿不到資料），el未初始化完成

4：mounted（）：例項掛載完成，

5：beforeupdate（）：此函式發生在檢視dom資料更新之前，dom虛擬和下載補丁之前，即data更新當操作dom時拿不到資料，

6：updated（）：檢視更新完成，

7：beforedestory（）：此時例項仍未銷燬，this可以使用

8：destoryed（）：例項銷燬完成，

生命週期圖示

下圖展示了例項的生命週期。你不需要立馬弄明白所有的東西，不過隨著你的不斷學習和使用，它的參考價值會越來越高。

中文版：

10.計算屬性

計算屬性=把計算出來的值，儲存在屬性裡面，在記憶體中執行，虛擬DOM，想象成快取。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="id1">
        fun1:{{data1()}}
        <br>
        fun2:{{data2}}
    </div>


    <script type="text/javascript">

        var app = new Vue({
            el:"#id1",
            data: {
                message:"aaaa"
            },
            methods: {
                data1:function () {
                    return Date()
                }
            },
            computed:{
                data2:function () {
                    this.message;
                    return Date()
                }
            }
        })


    </script>
</body>
</html>

11.插槽slot

Vue 實現了一套內容分發的 API，這套 API 的設計靈感源自 [Web Components 規範草案，將 <slot> 元素作為承載分發內容的出口。

就是在頁面裡面預留位置，提前規劃好位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

    <div id="id1">
        <slot1>
            <title2 slot="title" v-bind:title1="messgae"></title2>
            <lis slot="lis" v-for=" i in items " v-bind:item="i"></lis>
        </slot1>
    </div>


    <script type="text/javascript">

        //插槽
        Vue.component('slot1',{
            template:" <div>\
                            <slot name='title'></slot>\
                         <ul> \
                              <slot name='lis'></slot>\
                         </ul>\
                       </div>"
        })

        Vue.component('title2',{
            props: ['title1'],
            template: '<div>{{title1}}</div>'
        });

        Vue.component('lis',{
            props: ['item'],
            template:"<li>{{item}}</li>"
        });

        var app = new Vue({
            el: "#id1",
            data:{
                messgae:"書籍列表",
                items:["java","c++","python"]
            }

        });


    </script>
</body>
</html>

自定義事件

<!--                v-on:remove="removelist(index)" 自定義事件remove-->

  this.$emit("remove",index)  通過這個把元件的函式 對映到自定義事件上，呼叫自定義事件的函式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

    <div id="id1">
        <slot1>
            <title2 slot="title" v-bind:title1="messgae"></title2>
            <lis slot="lis" v-for=" (i, index) in items" v-bind:item="i" v-bind:index1="index"
                 v-on:remove="removelist(index)"   v-bind:key="index" >
                

            </lis>
        </slot1>
    </div>


    <script type="text/javascript">

        //插槽
        Vue.component('slot1',{
            template:" <div>\
                            <slot name='title'></slot>\
                         <ul> \
                              <slot name='lis'></slot>\
                         </ul>\
                       </div>"
        })

        Vue.component('title2',{
            props: ['title1'],
            template: '<div>{{title1}}</div>'
        });

        Vue.component('lis',{
            props: ['item',"index"],
            template:"<li>-- {{index}} ----{{item}} <button v-on:click='remove'>刪除</button></li>",
            methods:{
               // this.$emit("remove",index1)
                remove:function (index) {
                    this.$emit("remove",index)
                }

            }
        });

        var app = new Vue({
            el: "#id1",
            data:{
                messgae:"書籍列表",
                items:["java","c++","python"]
            },
            methods: {
                //index表示下標
                removelist:function (index1) {
                    console.log("刪除了"+this.items[index1]+"---------")
                    this.items.splice(index1,1)
                }
            }

        });

    </script>
</body>
</html>

12.實際開發

Vue的開發都是基於NodeJS，實際開發採用vue-cli,vue-route路由,vuex做狀態管理,VueUI ，介面一般使用ElementUI(餓了嗎)，或者ICE(阿里巴巴)

13.Vue-cli

vue腳手架指的是vue-cli，它是一個專門為單頁面應用快速搭建繁雜的腳手架，它可以輕鬆的建立新的應用程式而且可用於自動生成vue和webpack的專案模板。

vue-cli是有Vue提供的一個官方cli，專門為單頁面應用快速搭建繁雜的腳手架。它是用於自動生成vue.js+webpack的專案模板，是為現代前端工作流提供了 batteries-included的構建設定。只需要幾分鐘的時間就可以執行起來並帶有熱過載，儲存時 lint 校驗，以及生產環境可用的構建版本。

主要的功能

統一的目錄結構
本地除錯
熱部署
單元測試
整合打包上線

index 會自動載入 main.js 給他的模板,main.js的模板來自App.vue

專案結構

需要的環境：

nodejs(官網下載)

git

確定 nodejs安裝成功

node -v
npm -v  
//淘寶映象
npm install -g cnpm --registry=https://registry.npm.taobao.org

使用npm 安裝 cnpm

1. 需要更改一個安裝路徑
        npm config set registry "http://registry.npmjs.org/"
2. 再次使用npm進行全域性安裝cnpm
        npm install -g cnpm
3.輸入cnpm -v 即可出現版本號

使用cnpm安裝vue-cli

cnpm install -g vue-cli
    
 vue list
 //檢視可以基於那些模板進行建立，通常我們使用webpack

13.1、建立第一個Vue專案

建立Vue專案

vue init webpack myVue


? Project name myvue
? Project description A Vue.js project
? Author helloWorld
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no

初始化並執行

//進入專案,安裝依賴
npm install 
//啟動專案
npm run dev

Your application is running here: http://localhost:8080

14、webpack

本質上，webpack是一個現代 JavaScript 應用程式的靜態模組打包器(module bundler)。當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 bundle。

webpack它是程式碼編譯工具，有入口，出口、loader和外掛

模組的進化

最原始的js載入方式,

<script src="" ></script>

每一個檔案看做一個模組，那麼他們的介面暴露在全域性作用域下。

弊端

全域性作用域變數衝突
按照<script>書寫的順序進行載入
開發人員必須主管解決模組和程式碼庫的依賴關係
大型專案各種資源難以管理，長期積累的問題導致程式碼庫混亂不堪

CommonJS

CommonJS是一種被廣泛使用的js模組化規範，核心思想是通過require方法來同步載入依賴的其他模組，通過module.exports匯出需要暴露的介面。

採用 CommonJS 匯入及匯出的程式碼如下：

//匯入 
const moduleA = require ( ’. / moduleA’); 
//匯出 
module .exports = moduleA.someFunc;

AMD是什麼

Asynchronous Module Definition，即非同步模組載入機制　　

作為一個規範，只需定義其語法API，而不關心其實現。AMD規範簡單到只有一個API，即define函式：

CMD

(Common Module Definition)通用模組定義，它解決的問題和AMD規範是一樣的，只不過在模組定義方式和模組載入時機上不同，CMD也需要額外的引入第三方的庫檔案，SeaJS

ECMAScript 6（簡稱ES6）

是於2015年6月正式釋出的JavaScript語言的標準，正式名為ECMAScript 2015（ES2015）。它的目標是使得JavaScript語言可以用來編寫複雜的大型應用程式，成為企業級開發語言 [1]

安裝webpack

安裝：

cnpm install webpack -g
cnpm install webpack-cli -g

測試:

D:\Code\myvue\myVue>webpack -v
4.44.1

D:\Code\myvue\myVue>webpack-cli -v
3.3.12

配置

Webpack 最關鍵的就是 webpack.config.js 配置檔案，架構的好壞都體現在這個配置檔案中。

入口(entry) ：入口檔案，制定WebPack用哪個檔案作為專案的入口
輸出(output)：指定WebPack把處理完成的檔案放置到指定路徑
model：模組，用於處理各種型別的檔案
外掛(plugins)：如：熱更新，程式碼重用等
resolve：設定路徑指向
watch：監聽，用於設定檔案改動後直接打包成檔案。

使用webpack

1.建立一個資料夾

2.建立一個 module 目錄，用於放置JS模組等資原始檔

3.在module建立hello.js檔案，編寫js模組程式碼

"user strict"

//暴露一個方法
exports.sayHi=function () {
    document.write("<div>我在學前端</div>")
}

4.在module建立main.js檔案,作為入口檔案,

"user strict"

//require 映入模組
var hello = require("./hello");
hello.sayHi()

5.建立配置檔案webpack..conf.js，使用webpack打包

設定入口，出口

"use strict"
var path = require('path');


module.exports = {                                              //注意這裡是exports不是export
    entry: "./module/index.js",                                 //入口檔案
    output: {                                                       //輸出檔案
        path: path.resolve(__dirname,'dist'),                      //輸出檔案的目錄
        filename: 'bundle.js'                                        //輸出檔案的名稱
    }
}

6.建立HTML檔案，引入打包後的js檔案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="./dist/bundle.js"></script>
</body>
</html>

結果：

15.vue-router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度整合，讓構建單頁面應用變得易如反掌。包含的功能有：

巢狀的路由/視圖表
模組化的、基於元件的路由配置
路由引數、查詢、萬用字元
基於 Vue.js 過渡系統的檢視過渡效果
細粒度的導航控制
帶有自動啟用的 CSS class 的連結
HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
自定義的滾動條行為

安裝和使用

基於vue-cli建立的專案,進入專案後進行安裝vue-router外掛

cnpm install vue-router --save-dev //安裝到開發環境

在模組進行使用 ,必須通過Vue.use()進行載入

import VueRouter from "vue-router";

//安裝路由
Vue.use(VueRouter)

1.建立元件

Context.vue

<template>
  <h1>內容頁</h1>
</template>

<script>
    export default {
        name: "Context"
    }
</script>

<style scoped>

</style>

Main.vue

<template>
  <h1>主頁</h1>
</template>

<script>
    export default {
        name: "Index"
    }
</script>

<style scoped>

</style>

2.建立自定義路由

在src下建立route目錄，建立index.js

index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Context from "../components/Context";
import Main from "../components/Main";

//安裝路由
Vue.use(VueRouter)


//配置路由
export default new VueRouter({
  //註冊路由
  routes:[
    {
      //路徑
      path:"/context",
      //名稱
      name:"context",
      //元件
      component:Context
    },
    {
      //路徑
      path:"/main",
      //名稱
      name:"main",
      //元件
      component:Main
    }
  ]
})

3.註冊路由

在main.js入口檔案註冊

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Router from './route/index'


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  //註冊全部路由
  router:Router
})