Vue元件學習

阿新 • • 發佈：2018-11-05

1.元件是指頁面上的某一部分，當建立一個大型的專案時，專案可以被分為很多元件，維護時就變的簡單多了。
2.Vue元件分為全域性元件和區域性元件，區域性元件需在例項中宣告（註冊）。
全域性元件宣告簡例：

Vue.component('todo-item',{
            template:'<li>item</li>' 
        })

區域性元件宣告簡例：

//宣告一個變數等於一個物件,物件裡面給一個模板
        var TodoItem={
            template:'<li>item</li>' 

        }
        new Vue({
            el:"#root",
            components:{
                'todo-item':TodoItem
            }
  //如不在父元件中註冊區域性元件不可以使用

3.元件與例項的關係：每一個元件都是一個Vue例項,反過來每一個Vue例項也可以稱為一個元件，根例項的模板是掛載點裡的所有內容

4.Vue元件之間通訊方式：父元件通過屬性的形式向子元件傳值；

<body>
    <div id="root">
       <input 
 v-model="inputValue">
       <button @click="handleSubmit">提交</button>
       <ul>
        <!-- <li v-for="(item,index) of list" :key="index">{{item}}</li> -->
       <todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>
       </ul 
>
    </div>
    <script>
        Vue.component('todo-item',{
            props:['content'],//props屬性值可以是一個數組,用於接收外部屬性
            template:'<li>{{content}}</li>'//使用插值表示式顯示content
        })
        new Vue({
            el:"#root",
            data: {
                 inputValue:'',
                 list: []
            },
            methods:{
                handleSubmit:function(){
                    this.list.push(this.inputValue)
                    this.inputValue=''
                }
            }
        })
    </script>
</body>
這段程式碼實現了一個簡單的todolist功能，即在表單中輸入內容點選提交顯示在無序列表中；

子元件通過釋出訂閱模式來與父元件通訊：emit()方法；

 ```
this.$emit('delete',this.index)

 <ul>
       <todo-item v-for="(item,index) of list" :key="index" :content="item"
        :index="index" v-on:delete="handleDelete"></todo-item>
       </ul>

handleDelete:function(index){    //宣告一個形參用於接收實參
                    this.list.splice(index,1)     
                }

這段程式碼通過emit()方法實現了當點選當前列表項時就將當前列表項刪除。

Vue元件學習

1.元件是指頁面上的某一部分，當建立一個大型的專案時，專案可以被分為很多元件，維護時就變的簡單多了。 2.Vue元件分為全域性元件和區域性元件，區域性元件需在例項中宣告（註冊）。全域性元件宣告簡例： Vue.component('todo-item',{ t

vue元件學習6（props傳參）

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

vue.js學習筆記（六）--利用v-model實現父子元件間的雙向通訊

部落格：https://fisher-zh.github.io/ 在Vue中，我們可以使用prop屬性來進行父子元件間的通訊，在之前的文章Vue踩坑之路–父子元件通訊總結中有介紹過。但是prop 是單向繫結的，我們無法在元件中直接修改prop傳遞的屬性。

vue.js學習筆記（三）--父子元件通訊總結

部落格地址：https://fisher-zh.github.io 在使用Vue的過程中，如果需要進行父子元件間的通訊，通過查閱官方文件我們可以瞭解到只需要在子元件要顯式地用 props選項宣告它期待獲得的資料，同時在其使用過程中傳入相應的資料即可，例如： Vu

Vue.js學習記錄-15-Vue去哪兒網專案實戰：景點詳情頁開發-功能點概述 + Detail + Banner(通用元件：Gallery、Fade)

3. 景點詳情頁開發功能點概述使用者首頁點選熱銷推薦景點，即可跳轉景點詳情頁面。詳情頁面包括三部分內容：頂部圖片展示、景點門票詳情、隱藏頁面頭。(拖動至下方會出現) 使用者點選頂部圖片展示，進入圖片輪播區域(全屏)，可左右滑動進行圖片瀏覽

Vue：學習筆記（六）-元件基礎

提醒原帖完整收藏於IT老兵驛站，並會不斷更新。前言最近在工作中頻繁遇到元件，所以就沒按照順序，先總結元件這一章節的內容了，將來再做調整和修改。（2018-10-24注：這一章粗讀了兩遍，感覺下面有好些內容都沒有理解，有一些難度，看不明白就先修改一會兒，先乾點別的。

Vue.js學習記錄-5-Vue進階：元件

6.元件 - 計數器Demo為例元件使用細節全域性元件 and 區域性元件全域性元件： // 全域性元件(子元件) Vue.component('row', {

【Vue.js學習筆記】8：建立多個Vue例項物件,認識Vue中的元件

建立多個Vue例項物件這裡在同一個js檔案中建立了兩個Vue例項物件，它們各自能完成前面學的那些功能，同時使用物件名稱也可以互相訪問，協同實現一些功能。 index.html <!DOCTYPE html> <html lang="en" xmlns:v-

偏前端-vue.js學習之路初級（二）元件化構建

vue.js 元件化構建元件系統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、自包含和通常可複用的元件構建大型應用。仔細想想，幾乎任意型別的應用介面都可以抽象為一個元件樹：一、使用元件 1.元件的全域性註冊--可以使用 Vue.compon

【Vue.js學習筆記】11：元件中CSS的作用域

樣式表最終的生成位置有兩個元件，一個是根元件App，一個是子元件Users。它們都有一個h2標籤，先只在根元件上寫CSS樣式。 App.vue <template> <div id="app"> <h2>父元件的h2標籤<

vue.js 2.0父子元件學習入門套路

前面已經瞭解過vue的元件化開發了，現在來了解一下父子元件。先來2個子元件 myname.vue 內容如下： <template> <div id="myname">我的名字是{{name}}</div>

vue+element的tree元件學習模板

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

vue學習（三） vue元件

元件一個大的物件；定義程式碼： <div id="box"> <bc></bc> </div> <hr> <script>

vue.js學習筆記五（元件）

一、元件的使用1.全域性註冊1）必須先註冊再例項化2）命名最佳是小寫，中間有一個橫槓：my-component3）Vue.component({})4)顯然，元件只能在Vue作用域內有效，必須寫在<div id="app"> ...</div>裡。但是

Vue.js學習筆記：關於元件掛載

最近學習到Vue.js的元件部分，在看完官方文件之後還是一頭霧水，於是自己試驗了一下，將試驗結果記錄下來，以便查閱。我在跟著文件做了一遍之後，渲染結果為： <div id="example"> <div>A custom component

Vue 框架學習--3、vue cli開發中元件套用的佈局問題

前言：本文是為了總結個人在vue學習中摸索元件佈局的規律而創作。我們隊元件進行佈局需要了解該問題：我們在操縱元件進行一些列效果實現時，元件的模板是否受到父元素的干擾？我們來進行實驗，看看實驗結果：首先我們在index.html中建立一個div

Vue.js 學習筆記之四：Vue 元件基礎

到目前為止，這個系列的筆記所展示的都是一些極為簡單的單頁面 Web 應用程式，並且頁面上通常只有幾個簡單的互動元素。但在實際生產環境中，Web 應用程式的使用者介面往往是由多個複雜的頁面共同組成的。這時候，我們就需要開始注意程式碼的可複用性了，針對這個問題，Vue.js 框架提出的解決方案就是先將使用者介面上

Vue.js 學習筆記之六：構建更復雜的元件

在掌握瞭如何構建與編譯 Vue 元件的基礎知識之後，接下來就可以試著來構建一些更具有實際用處的複雜元件了。為了賦予元件更具實用性的後面，首先要做的就是讓這些元件具備監聽使用者自定義事件的能力，並且允許使用者為這些自定義事件註冊相應的處理函式，而這一切都要從`v-on`指令在 Vue 元件中的使用說起。 ##

vue學習筆記（六） ----- vue元件

## 一、模組化與元件化 - 模組化的定義 >模組化在Node中是一個規範，定義一些模組的相關的規則，從程式碼角度上來說，方便做區別，如果不使用模組化，寫在js檔案中不利於後期維護和擴充套件，從程式碼的層面上就把相關的功能脫離出來，所以模組化從從程式碼的角度觸發，分析專案，把專案中一些功能型別的程式碼，單獨抽

Vue.js學習之生命周期

ted eight http 初始機會編譯 log console eat 每個 Vue 實例在被創建之前都要經過一系列的初始化過程。例如，實例需要配置數據觀測(data observer)、編譯模版、掛載實例到 DOM ，然後在數據變化時更新 DOM 。在這個過程中

Vue元件學習

相關推薦