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'
        }
    }
});