vue.js

誰(shuí)在影響著頁(yè)面？model中的data

Vue.js 官網(wǎng)

api學(xué)習(xí)步驟

1. 引文件
2. 寫(xiě)結(jié)構(gòu)
3. 初始化js

簡(jiǎn)介

是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。 (數(shù)據(jù)驅(qū)動(dòng)編程)

MVVM

• m 數(shù)據(jù)模型
• v 視圖模型
• vm 一個(gè)同步

聲明式渲染

Vue.js 的核心是一個(gè)允許采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式地將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)：

<div id="app">
  {{ message }}
</div>
|||||||||||||||||||||||||||||||
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

差值表達(dá)式--渲染文本（推薦使用）

位于標(biāo)簽的innerHTML的位置

• 表達(dá)式
• 三元表達(dá)式

指令（以v-開(kāi)頭）

位于標(biāo)簽屬性位置,同樣可以使用表達(dá)式

v-text--渲染文本

不能渲染帶標(biāo)簽的文本

v-html--(謹(jǐn)慎使用)

可以解析標(biāo)簽，比較危險(xiǎn)，永不用在用戶提交的內(nèi)容上

v-bind--(給屬性賦值)

可以用來(lái)動(dòng)態(tài)綁定屬性 使用方式：v-bind:屬性名="data中的屬性" 簡(jiǎn)寫(xiě)方式：:屬性名="data中的屬性" 可以綁定任何屬性，此綁定在往后的組件開(kāi)發(fā)中經(jīng)常使用 可以動(dòng)態(tài)綁定樣式：:class="{'類名':布爾值}" true：有類名，false：沒(méi)有類名；也可以 :class="{'類名':布爾值, '類名': 變量名}" ，可以通過(guò)更改變量的值，來(lái)動(dòng)態(tài)操作類名

v-for--（for循環(huán)--渲染數(shù)組和對(duì)象）

1. 渲染數(shù)組

1. v-for="item in arr", item是數(shù)組中的每一項(xiàng)的意思，可以隨意，arr表示需要便利的數(shù)組
2. v-for="(item,index)in arr" index表示數(shù)組項(xiàng)的索引

2. 渲染對(duì)象

1. v-for="value in obj", value是對(duì)象鍵的值，可以隨意，obj表示需要便利的對(duì)象
2. v-for="(value,key,index)in obj" index表示數(shù)組項(xiàng)的索引

3. 迭代數(shù)字

v-for="item in 數(shù)字"

4. 改變數(shù)組

Vue.set() Array.prototype.aplice()或者Array.aplice()

5. :key

只要寫(xiě)了 v-for 就必須寫(xiě)上 :key --唯一標(biāo)識(shí)，提高性能

v-model--(用來(lái)雙向數(shù)據(jù)綁定)

只能在input/tettxtarea/select

v-on--(事件監(jiān)聽(tīng))

在methods屬性中定義函數(shù)，要獲取data中的屬性，需要加上this.，this表示vue實(shí)例

1. v-on: 任意的事件類型="執(zhí)行的函數(shù)"
2. 簡(jiǎn)寫(xiě)形式：@任意的事件類型="執(zhí)行的函數(shù)"
3. 通過(guò)執(zhí)行函數(shù)添加參數(shù)
4. 通過(guò)執(zhí)行函數(shù)中添加$event參數(shù)傳遞事件對(duì)象--名字不能更改，不能加引號(hào)
5. 事件修飾符，可以給事件添加特殊功能：.prevent(阻止默認(rèn)跳轉(zhuǎn))，.stop(阻止冒泡)
6. 可以給和按鍵相關(guān)的事件添加按鍵修飾符，常有的 keyup.enter,keyup.鍵盤(pán)碼

v-if 和 v-show

控制元素的顯示可隱藏，v-if="布爾值"，v-show="布爾值"，true則顯示，false則隱藏 區(qū)別：v-if通過(guò)控制dom來(lái)控制元素顯示和隱藏；v-show通過(guò)控制display:none來(lái)控制元素顯示和隱藏； 使用場(chǎng)景：

1. 涉及到大量dom操作的時(shí)候，我們需要使用v-show; 多次顯示和隱藏 使用v-show
2. 涉及到異步數(shù)據(jù)渲染的時(shí)候，需要使用v-if； 單次顯示和隱藏 使用v-if

v-if,v-else-if,v-else 條件判斷

      <p v-if="type ==='A'">A</p>
      <p v-else-if="type ==='B'">B</p>
      <p v-else-if="type ==='C'">C</p>
      <p v-else>not:A/B/C</p>
      ---
      var vm = new Vue({
        el: '#app',
        data: {
          isvisibilty: true,
          type: 'B'
        }
      })

v-cloak -- （解決元素閃爍的問(wèn)題）

1. 給閃爍的元素加上v-cloak指令
2. 寫(xiě)樣式：[v-cloak]{display:none},當(dāng)vue實(shí)例結(jié)束編譯之后（當(dāng)vue文件加載完成后），v-clock會(huì)被刪除
3. 另外，可以使用v-text添加內(nèi)容，此時(shí)，vue文件沒(méi)有加載時(shí)，元素不會(huì)得到內(nèi)容，就不存在閃爍問(wèn)題

this指向

在vue中，this指向創(chuàng)建的實(shí)例對(duì)象

mounted--鉤子函數(shù)

表示頁(yè)面一加載就執(zhí)行函數(shù)里的內(nèi)容 注意：函數(shù)的名字不能隨意取，而且，不能寫(xiě)在methods中

自動(dòng)獲取焦點(diǎn)

• 1. ref="名字"--表示對(duì)dom的引用
• 2. 通過(guò)this.$refs.名字獲取dom操作元素
• 3. focus()自動(dòng)獲取焦點(diǎn)

自定義指令

• 形式一

1. 通過(guò)全局方法Vue.directive()創(chuàng)建，包含兩個(gè)參數(shù)，1.表示自定義指令的名字（全部小寫(xiě)）；2.是一個(gè)對(duì)象，表示自定義指令的配置項(xiàng)
2. 配置項(xiàng)中是一些鉤子函數(shù)
   • inserted鉤子函數(shù)，表示自定義指令插入到標(biāo)簽中的時(shí)候就執(zhí)行
   • 參數(shù)(el,binding)：1.el:使用自定義指令的元素，2.binding表示自定義指令的信息
3. 使用：dom中加入v-myfocus

Vue.directive('myfocus',{
    inserted(el,binding){
        el.focus();
    }
})

• 形式二

Vue.filter()--創(chuàng)建過(guò)濾器

參數(shù)：過(guò)濾器名稱，函數(shù)

{{item.timer | fmtTime('/')}}

Vue.filter('fmtTime'.function(time,seprator){
    var y = time.getFullYear();
    var m = time.getMonth()+1;
    var d = time.detDate();
    return y+seprator+m+seprator+d;
})

computed--計(jì)算屬性

根據(jù)data中已有的實(shí)行，計(jì)算得到一個(gè)新屬性 創(chuàng)建計(jì)算屬性，通過(guò)computed關(guān)鍵字，它是一個(gè)對(duì)象 這里的fullName就是一個(gè)計(jì)算屬性，是一個(gè)函數(shù)，但可以當(dāng)做屬性來(lái)使用 好處：

• 有緩存的特性，多次使用，只會(huì)計(jì)算一次，提升性能

{{fullName}}

computed:{
    fullName(){
        return this.firstName+this.lastName;
    }
}

watch--監(jiān)聽(tīng)器

用來(lái)監(jiān)聽(tīng)data中的數(shù)據(jù)的值，當(dāng)數(shù)據(jù)發(fā)生改變，就執(zhí)行相應(yīng)的函數(shù)，通過(guò)watch創(chuàng)建監(jiān)聽(tīng)器，它是一個(gè)對(duì)象，函數(shù)名是監(jiān)聽(tīng)的對(duì)象，執(zhí)行的函數(shù)有兩個(gè)參數(shù)(newVal,oldVal) 開(kāi)發(fā)時(shí)，能用computed就不用watch computed 有緩存的功能，需要計(jì)算的時(shí)候，使用computed watch會(huì)一直監(jiān)聽(tīng)，需要執(zhí)行異步操作時(shí)使用watch

watch:{
    firstName(newVal,oldVal){
        this.watchName = newVal + this.lastName;
    },
    lastName(newVal.oldVal){
        this.watchNamw = this.firstName + newVal;
    }
}

深度監(jiān)聽(tīng)--監(jiān)聽(tīng)對(duì)象

1. handeler:(newVal,oldVal){}--監(jiān)聽(tīng)處理函數(shù)，名字固定
2. deep:true--深度監(jiān)聽(tīng)

watch:{
    user:{
        handler(newVal,oldVal){
            console.log(newVal.name)
        },
        deep:true
    }
}

搜索功能實(shí)現(xiàn)

數(shù)組的過(guò)濾

filter--有循環(huán)遍歷的功能

過(guò)濾條件：判斷是否包含字符串

indexof

return this.list.filter(value=>value.name.indexOf(this.searchVal) !== -1)

axios--get

axios--post

過(guò)渡和動(dòng)畫(huà)

1. 使用 transition 標(biāo)簽包裹

animate.css 動(dòng)畫(huà)庫(kù)--第三方css動(dòng)畫(huà)庫(kù)

1. 引入css文件
2. 使用transition標(biāo)簽包裹
3. 添加屬性名="animated 添加類名"
   • enter-active-class="animated fadeInRight" 定義進(jìn)入的動(dòng)畫(huà)狀態(tài)
   • leave-active-class="animated fadeOutRight" 定義離開(kāi)的動(dòng)畫(huà)狀態(tài)

JavaScript 鉤子

刪除動(dòng)畫(huà)

Vue組件

1. 什么是組件

2. 組件開(kāi)發(fā)好處

   • 封裝功能性代碼，提升開(kāi)發(fā)效率

組件的創(chuàng)建

注意：

1. 模板template中只能有一個(gè)根節(jié)點(diǎn)
2. 組件的名字，如果使用駝峰命名的話，在使用的時(shí)候需要嘉盛"-",比如組件的名字叫indexA，在使用時(shí)就叫index-A

創(chuàng)建方式一

使用Vue.extend()和Vue.component()兩個(gè)方法

• Vue.extend()函數(shù) 會(huì)返回一個(gè)組建的構(gòu)造器，它里面包含一個(gè)參數(shù)template，他是一個(gè)對(duì)象，里面是一些配置項(xiàng),指定組件顯示的模板
• Vue.component()函數(shù)會(huì)利用Vue.extend()函數(shù)返回的構(gòu)造器創(chuàng)建一個(gè)組件的實(shí)例，它有兩個(gè)參數(shù)，一個(gè)是組件的名字，另外一個(gè)組件的構(gòu)造器

組件使用步驟

1. 定義組件（顯示的內(nèi)容）

var Index = Vue.extend({
//指定組件顯示的模板
    template: "<div>我是首頁(yè)</div>"
});

2. 注冊(cè)組件

Vue.component('index',Index);

3. 使用組件，就像使用HTML標(biāo)簽一樣

<index></index>   

創(chuàng)建方式二

Vue.component()這個(gè)方法本質(zhì)上還是要調(diào)用Vue.extend()方法

Vue.component('indexB',{
    template: "<div>我是首頁(yè)</div>"
});

---
<index-b></index-b>  

創(chuàng)建方式三

通過(guò)指定模板創(chuàng)建，定義的模板需要在Vue管轄范圍之外

//模板一（推薦使用）
<template id="itcast">
    <div>我是首頁(yè)</div>
</template>
//推薦二（js標(biāo)簽）
<script type="x-template" id="iecast">
    <div>我是首頁(yè)</div>
</script>
---
Vue.component('indexC',{
    template: "#itcast"
});

---
<index-c></index-c>  

組件中使用指令和事件

父子組件的創(chuàng)建

//創(chuàng)建father組件
Vue.component('father',{
    template:'<div>我是父組件<son></son></div>';
    //通過(guò)components屬性創(chuàng)建子組件
    components:{
    創(chuàng)建一個(gè)son組件
        son:{
            template:'我是子組件'
        }
    }
})

---使用---

<father></father>

父子組件和子組件間的傳值

1. 父子組件傳值給子組件

父組件向子組件傳值需要考慮兩個(gè)問(wèn)題： 父組件怎么傳值：屬性動(dòng)態(tài)綁定(v-bind) 子組件怎么接收：props：能夠獲得當(dāng)前組件身上屬性對(duì)應(yīng)的值

//創(chuàng)建father組件
Vue.component('father',{
    //通過(guò)v-bind給指令，給子組件中的props賦值
    template:'<div>我是父組件,我兒子叫{{sonName}},今年{{age}}<son :myName="sonName"></son></div>',
    data(){
        return{
            sonName:'小明',
            age:20
        }
    }
    //通過(guò)components屬性創(chuàng)建子組件
    components:{
    創(chuàng)建一個(gè)son組件
        son:{
           //1\. 聲明props，它的作用是，用來(lái)接收父組件傳過(guò)來(lái)的值，props可以跟一個(gè)數(shù)組，數(shù)組里的值是一個(gè)一個(gè)的字符串，可以當(dāng)做屬性使用
           props:['myName'],
           template:'我是子組件,我叫{{myName}}'
        }
    }
})

2. 子組件給父組件傳值

1. 子組件傳值給父組件，需要用到$emit()方法，這個(gè)方法可以傳遞兩個(gè)參數(shù)，一個(gè)是事件名，另外一個(gè)是需要傳遞的值-----（觸發(fā)一個(gè)事件tellFatherMyName，并且傳遞一個(gè)值）
2. 父組件接收參數(shù)：注冊(cè)一個(gè)事件getMySonName，接收參數(shù)data

//創(chuàng)建father組件
Vue.component('father',{
    template:'<div>我是父組件,我兒子的名字是{{sonName}}
        <son @tellFatherMyName="getMySonName"></son>
    </div>';
    data(){
        return{
            sonName:''
        }
    },
    methods:{
        getMySonName(data){
            this.sonName=data
        }
    }
    //通過(guò)components屬性創(chuàng)建子組件
    components:{
    創(chuàng)建一個(gè)son組件
        son:{
            template:'我是子組件,我的名字{{myName}},<button @click="emitMyName">發(fā)送數(shù)據(jù)</button>',
            data(){
                return{
                    myName:'小明'
                }
            },
            methods:{
                emitMyName(){
                    this.$emit('tellFatherMyName',this.myName)
                }
            }
        }
    }
})

3. 兄弟組件傳值

創(chuàng)建動(dòng)態(tài)組件

利用component標(biāo)簽創(chuàng)建動(dòng)態(tài)組件，他的is屬性指向誰(shuí)，就顯示哪個(gè)組件

<ul>
<li @click="currentCom='index'">首頁(yè)</li>
<li @click="currentCom='productType'">蔬菜</li>
<li @click="currentCom='productType'">水果</li>
</ul>
<component :is="currentCom"></component>

//組件
Vue.component('index',{
    template:"<div>首頁(yè)</div>"
})
Vue.component('productType',{
    template:"<div>這里顯示商品編號(hào)</div>"
})

vue實(shí)例（組件）生命周期

在實(shí)例被創(chuàng)建之后立即被調(diào)用,在這一步，實(shí)例已完成以下的配置：數(shù)據(jù)觀測(cè)（data observer），屬性和方法的運(yùn)算，watch/event時(shí)間回調(diào)。然而，掛載階段還沒(méi)開(kāi)始，dom還未開(kāi)始，$el屬性目前不可見(jiàn)。

created:function(){
    console.log(this.$el);
    console.log(this/$data);
    console.log(this.info);
}
模板編譯之后調(diào)用，
mounted:function(){
    console.log(this.$el);
    console.log(this/$data);
    console.log(this.info);
}

Vue-router 路由

路由初體驗(yàn)

1. 引入路由文件

vue-router.js

2. 準(zhǔn)備路由需要的組件

    Vue.component('index', {
      template: "<div>首頁(yè)</div>"
    })
    Vue.component('productType', {
      template: "<div>這里顯示商品編號(hào)</div>"
    })

3. 創(chuàng)建路由對(duì)象,在這個(gè)對(duì)象里配置路由規(guī)則

var routers = new Router()

4. 通過(guò)routes屬性配置路由規(guī)則，它是一個(gè)數(shù)組，里面放的是對(duì)象，每個(gè)對(duì)象對(duì)應(yīng)一條規(guī)則。并且每個(gè)對(duì)象都包含(name,path,component)--(路由規(guī)則的名稱，路徑，路徑對(duì)應(yīng)的組件)

   routes:[
        {name:'index',path:'/index',component:index},
        {name:'productType',path:'/product_type',component:productType}
   ]

5. 在vue實(shí)例中注冊(cè)路由，這樣整個(gè)應(yīng)用程序中都會(huì)擁有路由

var vm = new Vue({
      el: '#app',
      router: routers,
      data: {

      }
    })

6. 通過(guò)router-view挖坑，路徑匹配到的組件都會(huì)渲染到這個(gè)坑里

<router-view></router-view>

7. vue路由中通過(guò)router-link(這是一個(gè)標(biāo)簽)去做跳轉(zhuǎn)，他的to屬性，這個(gè)值必須和path中的路徑對(duì)應(yīng)
8. router-link，將來(lái)會(huì)被渲染成a標(biāo)簽，to屬性會(huì)被渲染成a標(biāo)簽的href屬性，但它的值前面會(huì)加一個(gè)#，變?yōu)殄^點(diǎn)

<router-link to="/index">首頁(yè)</touter-link> <router-link to="/product_type">水果</router-link>

• 總結(jié)：步驟一共三步：1.問(wèn)路，2.創(chuàng)建路由規(guī)則 3. 創(chuàng)建組件 4. 注冊(cè)路由 5.挖坑

路由參數(shù)

• 第一種方法

1. 路由加參數(shù)：:參數(shù)名--{name:'productType',path:'/product_type/:id',component:productType}
2. 在html中獲取路由參數(shù)，通過(guò)$route.params.參數(shù)名

template: "<div>這里顯示商品編號(hào){{$route.params.id}}</div>"

3. 在js中獲取路由參數(shù)，通過(guò)this.$route.params.參數(shù)名

template: "<div>這里顯示商品編號(hào){{$route.params.id}}</div>",
mounted(){
    console.log(this.$route.params.id);
}

• 第二種方法(不影響路由path)

1. 直接在跳轉(zhuǎn)路徑后使用真正傳參的方式：/product_type?參數(shù)名=值

<router-link to="/product_type?id=22">水果</router-link>

2. HTML中獲取路由參數(shù)，通過(guò)$route.query.參數(shù)名

template:"<div>商品編號(hào){{$route.query.id}}</div>"

3. js中獲取路由參數(shù)，通過(guò)this.$route.query.參數(shù)名

監(jiān)聽(tīng)路由參數(shù)的變化-watch

'$route'表示監(jiān)聽(tīng)對(duì)象，to表示將要去的路由對(duì)象，from表示你從呢個(gè)路由對(duì)象來(lái)

watch:{
    '$route'(to,from){
        console.log(to);
        console.log(from);
        if(to.perams.id === 22){
            console.log('胡蘿卜。。。')
        } else {
            console.log('蘋(píng)果')
        }
    }
}

嵌套路由和編程式導(dǎo)航

路由重定向

當(dāng)不符合前邊的規(guī)則，此規(guī)格生效，path:表示輸入的所有路徑，redirect：表示，強(qiáng)制跳轉(zhuǎn)的路由地址

1. {name:'default',path:'*',redirect:'/index'}
2. {name:'default',path:'*',redirect:{name:'index'}

webpack

什么是webpack

webpack

webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler),分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（Sass，TypeScript等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。

webpack起步

1. 安裝 cnpm i webpack#3.11.0 -g
2. 打包：webpack app.js index.js (改變代碼，都要重新打包)
3. 配置文件：webpack.config.js

var path = require('path')
module.exports={
  //配置入口文件
  entry:'./src/app.js',
  //配置輸出文件
  output:{
    //表示輸出文件的路徑(絕對(duì)路徑)
    path:path.join(__dirname,'dist'),
    //表示輸出文件的名字
    filename:'bundle.js'
  }
}

此時(shí)，命令中直接輸入webpack就可以，自動(dòng)創(chuàng)建一個(gè)文件夾dist，這里邊放的是打包后的文件

3. webpack-dev-server(插件，解決以上問(wèn)題)

• 1. cnpm init -y
• 2. cnpm i webpack-dev-server@2.9.7 webpack@3.11.0 -D
• 3. webpack.config.js中配置publicPath: '/dist',
• 4. index.html中修改 <script src="/dist/bundle.js"></script>
• 5. 運(yùn)行：webpack-dev-server
• 6. 運(yùn)行：webpack-dev-server --inline --hot --open --port 8090
• 7. 配置script："dev": "webpack-dev-server --inline --hot --open --port 8090"
• 8. npm run dev

單文件組件

• 全局組件的弊端：

1. 名字不能重復(fù)
2. template沒(méi)有語(yǔ)法高亮
3. 不支持css
4. 沒(méi)有構(gòu)建步驟

• 單文件組件

1. 擴(kuò)展名：.vue 完整語(yǔ)法高亮; CommonJS 模塊; 組件作用域的 CSS 步驟：

// 1\. 安裝vue的包：  cnpm i vue -S
// 2\. 由于 在 webpack 中，推薦使用 .vue 這個(gè)組件模板文件定義組件，所以，需要安裝 能解析這種文件的 loader    cnpm i vue-loader vue-template-complier -D
// 3\. 在 app.js 中，導(dǎo)入 vue 模塊  import Vue from 'vue'
// 4\. 定義一個(gè) .vue 結(jié)尾的組件，其中，組件有三部分組成： template script style
// 5\. 使用 import App from './components/App.vue' 導(dǎo)入這個(gè)組件
// 6\. 創(chuàng)建 vm 的實(shí)例 var vm = new Vue({ el: '#app', render:h => h(App) })
// 7\. 在頁(yè)面中創(chuàng)建一個(gè) id 為 app 的 div 元素，作為我們 vm 實(shí)例要控制的區(qū)域；

vue.cil腳手架工具

• 準(zhǔn)備工作：

1. 運(yùn)行：cnpm i vue-cli -g
2. 新建一個(gè)文件夾（project）
3. 在此文件夾中打開(kāi)終端，vue init webpack admin,出現(xiàn)? Project name (admin)表示成功，后一直按回車，。。出現(xiàn)? Use ESLint to lint your code? (Y/n)按n,繼續(xù)按回車，出現(xiàn)

? Should we run `npm install` for you after the project has been cre
ated? (recommended) (Use arrow keys)
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself

按上下鍵，選擇no，完成。

4. 打開(kāi)admin文件夾，打開(kāi)終端，cnpm i, 完成后輸入npm run dev 出現(xiàn)I Your application is running here: http://localhost:8080,表示成功
5. 新建數(shù)據(jù)庫(kù)，數(shù)據(jù)庫(kù)名：itcast，編碼字符集utf-8
6. 導(dǎo)入sql文件D:\js高級(jí)資料\Vue\Vue_day06\代碼\shop2-server\db
7. config文件夾中default.json文件中更改用戶名密碼
8. D:\js高級(jí)資料\Vue\Vue_day06\代碼\shop2-server路徑下，打開(kāi)終端，運(yùn)行cnpm i
9. 運(yùn)行node app,成功

element-ul框架

1. 下載 cnpm i element-ui -S
2. 完整引入----在 main.js 中寫(xiě)入以下內(nèi)容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

以上代碼便完成了 Element 的引入。需要注意的是，樣式文件需要單獨(dú)引入。