全局API

原創 簡心 2018-12-10 21:18

Vue.set全局操作

Vue.set 的作用就是在構造器外部操作構造器內部的數據、屬性或者方法。比如在vue構造器內部定義了一個count爲1的數據，我們在構造器外部定義了一個方法，要每次點擊按鈕給值加1.就需要用到Vue.set。

什麼是外部數據，就是不在Vue構造器裏裏的data處聲明，而是在構造器外部聲明，然後在data處引用就可以了。外部數據的加入讓程序更加靈活，我們可以在外部獲取任何想要的數據形式，然後讓data引用。 看一個簡單的代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./assets/js/vue.min.js"></script>
    <title>構造器的聲明週期</title>
</head>
<body>
    <h1>構造器的聲明週期</h1>
    <hr>
    <div id="app">
        {{goodName}}
    </div>
    <script type="text/javascript">
            //在構造器外部聲明數據
        var outData={
            count:1,
            goodName:'car'
        };
        var app=new Vue({
            el:'#app',
            data:outData,
        })
    </script>
</body>
</html>

在外部改變數據的三種方法

用Vue.set改變

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./assets/js/vue.min.js"></script>
    <title>構造器的聲明週期</title>
</head>
<body>
    <h1>構造器的聲明週期</h1>
    <hr>
    <div id="app">
        {{count}}
        <button  @click="add()">點擊一下</button>
    </div>
    <script type="text/javascript">
            //在構造器外部聲明數據
        var outData={
            count:1,
            goodName:'car'
        };
        var app=new Vue({
            el:'#app',
            data:outData,
        })

        function add(){
            Vue.set(outData,'count',4);
        }
    </script>
</body>
</html>

用Vue對象的方法添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./assets/js/vue.min.js"></script>
    <title>構造器的聲明週期</title>
</head>
<body>
    <h1>構造器的聲明週期</h1>
    <hr>
    <div id="app">
        {{count}}
        <button  @click="add()">點擊一下</button>
    </div>
    <script type="text/javascript">
            //在構造器外部聲明數據
        var outData={
            count:1,
            goodName:'car'
        };
        var app=new Vue({
            el:'#app',
            data:outData,
        })

        function add(){
            app.count++;
        }
    </script>
</body>
</html>

直接操作外部數據

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./assets/js/vue.min.js"></script>
    <title>構造器的聲明週期</title>
</head>
<body>
    <h1>構造器的聲明週期</h1>
    <hr>
    <div id="app">
        {{count}}
        <button  @click="add()">點擊一下</button>
    </div>
    <script type="text/javascript">
            //在構造器外部聲明數據
        var outData={
            count:1,
            goodName:'car'
        };
        var app=new Vue({
            el:'#app',
            data:outData,
        })

        function add(){
            outData.count++
        }
    </script>
</body>
</html>

爲什麼要有Vue.set的存在

由於Javascript的限制，Vue不能自動檢測以下變動的數組

  • 當你利用索引直接設置一個項時，vue不會爲我們自動更新。
  • 當你修改數組的長度時，vue不會爲我們自動更新。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./assets/js/vue.min.js"></script>
    <title>構造器的聲明週期</title>
</head>
<body>
    <h1>Vue.set 全局操作</h1>
    <hr>
    <div id="app">
        <ul>
            <li v-for=" aa in arr">{{aa}}</li>
        </ul>
    </div>
    <button onclick="add()">外部添加</button>
    <script type="text/javascript">
        function add(){
           console.log("我已經執行了");
           app.arr[1]='ddd';
           //Vue.set(app.arr,1,'ddd');
        }
        var outData={
            arr:['aaa','bbb','ccc']
        };
        var app=new Vue({
            el:'#app',
            data:outData
        })
    </script>
</body>
</html>

這時我們的界面是不會自動跟新數組的，我們需要用Vue.set(app.arr,1,’ddd’)來設置改變，vue纔會給我們自動更新，這就是Vue.set存在的意義。

Vue的生命週期（鉤子函數）

Vue一共有10個生命週期函數，我們可以利用這些函數在vue的每個階段都進行操作數據或者改變內容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>構造器的聲明週期</title>
</head>
<body>
    <h1>構造器的聲明週期</h1>
    <hr>
    <div id="app">
        {{message}}
        <p><button @click="jia">加分</button></p>
    </div>
        <button onclick="app.$destroy()">銷燬</button>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:1
            },
            methods:{
                jia:function(){
                    this.message ++;
                }
            },
            beforeCreate:function(){
                console.log('1-beforeCreate 初始化之後');
            },
            created:function(){
                console.log('2-created 創建完成');
            },
            beforeMount:function(){
                console.log('3-beforeMount 掛載之前');
            },
            mounted:function(){
                console.log('4-mounted 被創建');
            },
            beforeUpdate:function(){
                console.log('5-beforeUpdate 數據更新前');
            },
            updated:function(){
                console.log('6-updated 被更新後');
            },
            activated:function(){
                console.log('7-activated');
            },
            deactivated:function(){
                console.log('8-deactivated');
            },
            beforeDestroy:function(){
                console.log('9-beforeDestroy 銷燬之前');
            },
            destroyed:function(){
                console.log('10-destroyed 銷燬之後')
            }
        })
    </script>
</body>
</html>

Template 製作模版

直接寫在選項裏的模板

直接在構造器裏的template選項後邊編寫。這種寫法比較直觀，但是如果模板html代碼太多，不建議這麼寫。


var app=new Vue({
     el:'#app',
     data:{
         message:'hello Vue!'
      },
     template:`
        <h1 style="color:red">我是選項模板</h1>
     `
})

這裏需要注意的是模板的標識不是單引號和雙引號，而是，就是Tab上面的鍵。

寫在template標籤裏的模板

    <template id="demo2">
             <h2 style="color:red">我是template標籤模板</h2>
    </template>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!'
            },
            template:'#demo2'
        })
    </script>

寫在script標籤裏的模板

<script type="x-template" id="demo3">
    <h2 style="color:red">我是script標籤模板</h2>
 </script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello Vue!'
        },
        template: '#demo3'
    })
</script>

Component

全局化註冊組件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./assets/js/vue.min.js"></script>
    <title>demo</title>
</head>
<body>
    <h1>demo</h1>
    <hr>
    
    <div id="app">
       <leechongwei></leechongwei>
    </div>
 

    <script type="text/javascript">
        Vue.component('leechongwei',{
            template:`<div style="color:red;">全局化註冊的李宗偉的標籤</div>`
        })
        var app=new Vue({
            el:'#app',
            data:{},           
        })
    </script>
</body>
</html>

局部註冊組件局部

局部註冊組件局部註冊組件和全局註冊組件是向對應的，局部註冊的組件只能在組件註冊的作用域裏進行使用，其他作用域使用無效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./assets/js/vue.min.js"></script>
    <title>demo</title>
</head>
<body>
    <h1>demo</h1>
    <hr>
    
    <div id="app">
       <leechongwei></leechongwei>
    </div>
 

    <script type="text/javascript">
        
        var app=new Vue({
            el:'#app',
            data:{},   
            components:{
                "leechongwei":{
                    template:`<div style="color:red;">局部註冊的leechongwei標籤</div>`
                }
            }    
        })
    </script>
</body>
</html>

從代碼中你可以看出局部註冊其實就是寫在構造器裏，但是你需要注意的是，構造器裏的components 是加s的，而全局註冊是不加s的。

Component 組件props 屬性設置

props選項就是設置和獲取標籤上的屬性值的，例如我們有一個自定義的組件,這時我們想給他加個標籤屬性寫成 意思就是熊貓來自中國，當然這裏的China可以換成任何值。定義屬性的選項是props。

定義屬性並獲取屬性值

定義屬性我們需要用props選項，加上數組形式的屬性名稱，例如：props:[‘here’]。在組件的模板裏讀出屬性值只需要用插值的形式，例如{{ here }}.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./assets/js/vue.min.js"></script>
    <title>demo</title>
</head>
<body>
    <h1>component-2</h1>
    <hr>
    <div id="app">
      <panda here="China"></panda>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            components:{
                "panda":{
                    template:`<div style="color:red;">Panda from {{ here }}.</div>`,
                    props:['here']
                }
            }
        })
    </script>
</body>
</html>

上面的代碼定義了panda的組件，並用props設置了here的屬性值，在here屬性值裏傳遞了China給組件。 最後輸出的結果是紅色字體的Panda from China

多組屬性設置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./assets/js/vue.min.js"></script>
    <title>demo</title>
</head>
<body>
    <h1>component-2</h1>
    <hr>
    <div id="app">
      <panda here="China" there="你好啊"></panda>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            components:{
                "panda":{
                    template:`<div style="color:red;">Panda from {{ here }}.
                              <p style="color:green;">{{ there }}</p>
                             </div>`,
                    props:['here','there']
                }
            }
        })
    </script>
</body>
</html>

在構造器裏向組件中傳值

把構造器中data的值傳遞給組件，我們只要進行綁定就可以了。就是我們第一季學的v-bind:xxx.

我們直接看代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./assets/js/vue.min.js"></script>
    <title>demo</title>
</head>
<body>
    <h1>component-2</h1>
    <hr>
    <div id="app">
      <input v-model="message"></input>
      <panda v-bind:here="message" there="你好啊"></panda>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:""
            },
            components:{
                "panda":{
                    template:`<div style="color:red;">Panda from {{ here }}.
                              <p style="color:green;">{{ there }}</p>
                             </div>`,
                    props:['here','there']
                }
            }
        })
    </script>
</body>
</html>

Component 父子組件關係

構造器外部寫局部註冊組件

上面上課我們都把局部組件的編寫放到了構造器內部，如果組件代碼量很大，會影響構造器的可讀性，造成拖拉和錯誤。

我們把組件編寫的代碼放到構造器外部或者說單獨文件。

我們需要先聲明一個對象,對象裏就是組件的內容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./assets/js/vue.min.js"></script>
    <title>demo</title>
</head>
<body>
    <h1>component-2</h1>
    <hr>
    <div id="app">
      <input v-model="message"></input>
      <panda v-bind:here="message" there="你好啊"></panda>
    </div>
    <script type="text/javascript">
        var panda={
            template:`<div style="color:red;">Panda from {{ here }}.
                              <p style="color:green;">{{ there }}</p>
                             </div>`
            ,props:['here','there']
        };
        var app=new Vue({
            el:'#app',
            data:{
                message:""
            },
            components:{
                "panda":panda,
                 
            }
        })
    </script>
</body>
</html>

父子組件的嵌套 我們先聲明一個父組件，比如叫panda，然後裏邊我們加入一個city組件，我們來看這樣的代碼如何寫。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./assets/js/vue.min.js"></script>
    <title>demo</title>
</head>
<body>
    <h1>component-2</h1>
    <hr>
    <div id="app">
      <input v-model="message"></input>
      <panda v-bind:here="message" there="你好啊"></panda>
    </div>
    <script type="text/javascript">
        
        var city={
           template:`<div>Sichuan of China</div>`
        }

        var panda={
            template:`<div style="color:red;">Panda from {{ here }}.
                              <p style="color:green;">{{ there }}</p>
                              <city></city>
                             </div>`
            ,props:['here','there'],

            components:{
                "city":city
            }
        };


        var app=new Vue({
            el:'#app',
            data:{
                message:""
            },
            components:{
                "panda":panda,
                 
            }
        })
    </script>
</body>
</html>

Component 標籤

標籤是Vue框架自定義的標籤，它的用途就是可以動態綁定我們的組件，根據數據的不同更換不同的組件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./assets/js/vue.min.js"></script>
    <title>demo</title>
</head>

<body>   
    <hr>
    <div id="app">
        <component v-bind:is="who"></component>
        <button @click="changeComponent">changeComponent</button>
    </div>
    <script type="text/javascript">
        var componentA = {
            template: `<div>I'm componentA</div>`
        }
        var componentB = {
            template: `<div>I'm componentB</div>`
        }
        var componentC = {
            template: `<div>I'm componentC</div>`
        }

        var app = new Vue({
            el: '#app',
            data: {
                who:'componentA'
            },
            methods:{
                changeComponent:function(){
                    if(this.who=='componentA'){
                        this.who='componentB';
                    }else if(this.who=='componentB'){
                        this.who='componentC';
                    }else{
                        this.who='componentA';
                    }
                }
            },
            components:{
                "componentA":componentA,
                "componentB":componentB,
                "componentC":componentC,
            }
        })
    </script>
</body>

</html>

父子組件的傳值

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <title>demo</title>
</head>
<body>
<div id="app">
  <div>
    <input type="text" v-model="todoValue"></input>
    <button v-on:click="handBtnClikc">提交</button>
  </div>
  <ul>
    <todo-item :content="item"
               :index="index"
               v-for="(item,index) in list"
               @delete="handItemDelete">

    </todo-item>
  </ul>
</div>

</body>
<script>
  let todoItem = {
    props: ['content', 'index'],
    template: '<li @click="handleItemClikc">{{index}}----{{content}}</li>',
    methods: {
      handleItemClikc() {
        this.$emit("delete", this.index)
      }
    }
  }

  let app = new Vue({
    el: "#app",
    components: {
      TodoItem: todoItem
    },
    data: {
      todoValue: "",
      list: []
    },
    methods: {
      handBtnClikc() {
        this.list.push(this.todoValue)
        this.todoValue=""
      },
      handItemDelete(index){
        this.list.splice(index,1)
      }
    }
  })
</script>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Vue.js實現開發購物車功能的方法詳解

deniro_li 2019-02-24 12:43:05

Vue.js 源碼全方位深入解析（同步更新中）

qq5b48ced1c182a 2019-02-22 13:41:35

Vue.js樣式動態綁定實現小結

koreyoshia 2019-01-24 20:53:07

Vue 路由基礎

Uchen 2019-01-17 13:46:04

Vue 實例生命週期

Uchen 2019-01-09 13:47:02

說說如何在Vue.js中實現數字輸入組件的方法

deniro 2019-01-08 22:23:06

Vue 中的組件

Uchen 2018-12-30 14:00:52

Vue 基礎語法

Uchen 2018-12-29 13:48:39

尤大多倫多演講：Vue 3.0 預覽

桃翁 2018-12-17 15:55:19

別再說虛擬 DOM 快了，要被打臉的

桃翁 2018-12-17 15:55:07

Vue成神之路之實例和插槽

小胖 2018-12-14 14:30:18

Vue成神之路之內部指令

小胖 2018-12-14 14:30:07

vue-cli 3.0配置webpack目錄別名alias

東京的雨不會淋溼首爾 2018-12-14 12:55:47

在webpack中配置vue.js

Dream城堡 2018-12-12 16:20:06

深入解析Vuex實戰總結

前端攻城小牛 2018-12-12 09:14:41