Vue筆記（二）——實例化基本屬性

Vue實例化時基本屬性

實例元素指的是Vue實例化時編譯的容器元素，或者說是Vue做用的元素容器

<div id="app"></div>
let vm = new Vue({
    el:'#app' // 或者是其餘選擇器：.app;
)

若是有多個相同的實例元素則只有第一個起效

也能夠在實例化的時候不指定實例元素，後面用 $mount() 手動進行掛載

<div id="app"></div>

let vm = new Vue({
    // option
})

vm.$mount('#app')

能夠經過實例獲取實例元素

let vm = new Vue({
    el:'#app'
});
<!-- 獲取實例元素 -->
console.log(vm.$el);

數據對象

在MVVM模式種充當着M數據模型層，更多的體現於將M層映射到V層

let arr = [{name:'fhj',age:18}];
let vm = new Vue({
    el:'#app',
    data:{
        dataset:arr// 數據模型層
    } 
})

也能夠經過實例獲取數據對象

let vm = new Vue({
    el:'#app',
    data:{}
});

<!-- 獲取數據模型層-data -->
consele.log(vm.$data);

事件處理器 methods

元素能夠經過 v-on: 事件 || @事件 進行綁定事件，事件中的this默認指向實例vm

<div id="app">
    <input type="button" v-on:click="handle" />
    <span>{{count}}</span>
</div>
let vm = new Vue({
    el:'#app',
    data:{
        count:0
    },
    methods:{
        handle(){
            this.count += 10;
        }
    }
});

在js的事件中默認會有個event對象，Vue在事件上對event對象進行繼承二次封裝，更名爲$event，在事件當中默認傳過去

<div id="app">
    <input type="button" @click="handle(10,$event)"/>
    <span>{{count}}</span>
</div>

let vm = new Vue({
    el:'#app',
    data:{
        count:0
    },
    methods:{
        handle(n,event){
            this.count += n;
            event.target.setAttribute('disabled',true);
        }
    }
});

計算屬性 computed

computed 主要針對 data 的屬性進行操做，this默認指向實例vm;

• 格式：computed：{屬性名：{get(){},set(){}}
• 使用：

1. 設置屬性時，會調用set()和get();
2. 獲取屬性時，會調用get()
3. 設置屬性時，會將值傳給set(_v),在set()裏面進行邏輯運算，此後再將值返回出去

<div id="app">
    <!--調用了 fullName.get()-->
    <p>{{fullName}}</p>
    <input type="text"  v-model="newName">
    <!--changeName 事件改變了 fullName 的值，因此會自動觸發 fullName.set()-->
    <input type="button" value="changeName" @click="changeName">
</div>

var vm = new Vue({
    el: '#app',
    data: {
        firstName:'DK',
        lastName: 'Lan',
        newName: ''
    },
    computed: {
        fullName:{
            get: function(){
                <!-- 獲取屬性值顯示在V層 -->
                return this.firstName + '.' + this.lastName
            },
            set: function(newValue){
                <!-- 接收設置的值 -->
                this.firstName = newValue
            }
        }
    },
    methods: {
        changeName: function(){
            <!-- 設置fullName的值 -->
            this.fullName = this.newName;
        }
    }
})

自定義指令

自定義指令和定義組件的方式很相似，也是有全局和局部指令之分

全局指令

<div id="app">
    <!-- 使用指令 -->
    <input type="text" v-fhj/>
</div>

註冊一個全局自定義指令，v-fhj 指令名稱不用加前綴
Vue.directive('fhj',function(ele){// 爲宿主元素
    // 默認觸發鉤子函數
    ele.value = 'jj';
    ele.focus();
});

局部指令

<div id="app">
    <!--  使用局部指令 -->
    <input type="text" v-prative/>
</div>

let vm = new Vue({
    el:'#app',
    <!-- 自定義指令屬性 -->
    drectives:{
        privat:function(ele){
            ele.style.value='fhj'
        }
    }
});