vue基礎特性

時間 2019-11-30

標籤 vue 基礎特性简体版

原文原文鏈接

在這裏咱們主要是講解一些vue實例的屬性和一些基礎的指令javascript

vue實例屬性:html

其實和咱們以前所學的對象的屬性是類似的東西vue

vue的基礎指令: java

對於指令,你們可能以前麼有接觸過相關的概念,其實你們能夠這樣理解ajax

指令:vue-router

能夠看作是命令,在vue中咱們能夠經過指令來完成相關的操做；在vue中以v-開頭,後面緊跟具體的操做命令服務器

一些基本的指令：app

v-once: 只綁定一次

v-bind: 綁定數據

v-model: 綁定模型

v-on: 綁定事件

v-if v-show: 條件渲染
方法：
使用methods來定義方法,使用v-on監聽事件,綁定事件處理函數

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
        <div id="app">
            <!--在這裏使用v-on來綁定事件處理的方法(函數)-->
            <button v-on:click='fn'>click</button>

        </div>
    </body>
</html>
<script>
    var dataModel = {
        message: 'hello world!'
    }
    var vm= new Vue({
        el:'#app',
        data:dataModel,
        //在這裏使用methods對象來定義方法(點擊事件處理函數)
        methods:{
            fn: function(){
                console.log("這個方法被調用了")
            }
        }
    })
</script>

　　生命週期鉤子函數：
函數

其實指的也就是生命週期方法,只不過是掛載到執行的各個階段,因此叫鉤子函數

演示：this

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

    <head>
        <meta charset="UTF-8">
        <title>Vue入門之生命週期</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <p>{{ number }}</p>
            <input type="text" name="btnSetNumber" v-model="number">
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    number: 1
                },

                //在建立對象以前,監控數據變化和初始化事件以前調用
                beforeCreate: function() {
                    console.log('beforeCreate 鉤子執行...');
                    console.log(this.number)  //數據監測尚未開始
                },
                //實例建立完成以後調用,掛載階段尚未開始
                created: function() {
                    console.log('cteated 鉤子執行...');
                    console.log(this.number)
                },
                //開始掛載的時候執行,這時html尚未渲染到頁面上
                beforeMount: function() {
                    console.log('beforeMount 鉤子執行...');
                    console.log(this.number)
                },
                //掛載完成,也就是模板中的heml渲染到了頁面中,此時能夠作一些ajax的操做,這個鉤子函數只會執行一次
                mounted: function() {
                    console.log('mounted 鉤子執行...');
                    console.log(this.number)
                },
                //數據更新以前調用
                beforeUpdate: function() {
                    console.log('beforeUpdate 鉤子執行...');
                    console.log(this.number)
                },
                //數據更新以後調用
                updated: function() {
                    console.log('updated 鉤子執行...');
                    console.log(this.number)
                },
                //數據銷燬以前
                beforeDestroy: function() {
                    console.log('beforeDestroy 鉤子執行...');
                    console.log(this.number)
                },
                //數據銷燬以後
                destroyed: function() {
                    console.log('destroyed 鉤子執行...');
                    console.log(this.number)
                },
            });

            //實現數據的更新
            //  vm.$set(dataModel, 'number', 123)

            //銷燬鉤子的執行
            //  vm.$destroy(true)


        </script>
    </body>

</html>

補充：

1.activated

keep-alive 組件激活時調用。該鉤子在服務器端渲染期間不被調用。

2.deactivated

keep-alive 組件停用時調用。該鉤子在服務器端渲染期間不被調用。