vue学习记录(二)---自定义指令,组件

一、自定义指令

  1、全局自定义指令

<body>
<div id="container">
    <div v-bill="prop">{{msg}}div>
div>
<script src="./vue.js">script>
<script>
    //每个钩子的参数都是 ( el、binding、vnode 和 oldVnode),名称是bill但是使用的时候需要用v-bill进行使用,如果是驼峰命名法,那么就用-进行连接
    Vue.directive('bill', {
        bind(){                                 //全局绑定元素时调用,只调用一次,如果没有调整的话,会一直保存
            console.log('bind', arguments);
        },
        inserted() {                            //被绑定元素插入父节点时调用
            console.log('inserted', arguments);
        },
        update() {                              //所在组件的 VNode 更新时调用
            console.log('update', arguments);
        },
        componentUpdated() {                    //所在组件的 VNode 更新时调用
            console.log('componentUpdate', arguments);
        },
        unbind() {                              //解绑时调用,vue实例销毁时也会被调用即app.$destroy()的时候会调用
            console.log('unbind', arguments);
        }
    });
    let app = new Vue({
        el: '#container',
        data: {
            msg: 'this is test',
            prop: 'red'
        }
    })
script>

   2、局部指令

<body>
<div id="container">
    <div v-bill="prop">{{msg}}div>
div>
<script src="./vue.js">script>
<script>
    let bill = {
        bind() {
            console.log('bind', arguments);
        },
        inserted() {
            console.log('inserted', arguments);
        },
        update() {
            console.log('update', arguments);
        },
        componentUpdated() {
            console.log('componentUpdated', arguments);
        },
        unbind() {
            console.log('unbind', arguments);
        }
    };
    let app = new Vue({
        el: '#container',
        data: {
            msg: 'this is test',
            prop: 'red'
        },
        directives: {
            bill
        }
    })
script>
body>

 二、Vue.extend的使用

<body>
<div id="container">
    <div @click="check">{{msg}}div>
    <bill>bill>
div>
<script src="./vue.js">script>
<script>
    let Bill = Vue.extend({
        template: '

{{count}}

', data: function() { return { url: 'javascript:;', extend: 'this is extend', count: 0 } } }); new Bill().$mount('bill'); //实现数据绑定 // new Bill().$mount('#bill'); =>
//可以用id进行绑定,也可用class进行绑定
let app = new Vue({ el: '#container', data: { msg: 'this is test', prop: 'red' }, methods: { check() { console.log(arguments); } } }) script> body>

 三、Vue.set 与 Vue.delete

在实例的内部调用是this.$set(target, key, value)或者是this.$delete(target, key)进行调用,如果是在外部调用也可以用Vue.set(target, key, value), Vue.delete(target, key)进行调用

<body>
<div id="container">
    <ul>
        <li v-for="(v, k) in list">{{v}}li>
    ul>
    <input type="button" value="change" @click="change">
    <input type="button" value="delete" @click="del">
div>
<script src="./vue.js">script>
<script>
let app = new Vue({
    el: '#container',
    data: {
        list: ['aaa', 'bbb', 'ccc', 'ddd', 'eee']
    },
    methods: {
        change() {
            let index = this.list.findIndex(value => value === 'ccc');
            // this.list[index] = 'are you ok???';                          //这种方法是没有效果的,不能实现界面的变化
            this.$set(this.list, index, 'are you ok????');
        },
        del() {
            let index = this.list.findIndex(value => value==='bbb');
            index > 0 && this.$delete(this.$data.list, index);
        }
    }
})
script>
body>

 四、template的几种写法

   a、写法一:直接书写在构造器中

<body>
<div id="container">
    <div>{{msg}}div>
div>
<script src="./vue.js">script>
<script>
let app = new Vue({
    el: '#container',
    data: {
        msg: 'msg'
    },
    template: '

this is test

' }) script> body>

注意:这种写法主要针对模板的代码比较少的情况下,并且会所全部的的el的内容改成模板的内容

  b、利用template标签进行模板的定义与书写

<body>
<div id="container">
    <div>{{msg}}---maindiv>
    <template id="tp">
        <div>
            <span>{{msg}}span>
            <span>{{msg}}span>
            <span>{{msg}}span>
        div>
    template>
div>
<script src="./vue.js">script>
<script>
let app = new Vue({
    el: '#container',
    data: {
        msg: 'msg'
    },
    template: '#tp'
})
script>
body>

  c、利用script标签进行模板定义与书写

<body>
<script type="x-template" id="tp">
<div>
    <span>{{msg}}</span>
</div>
script>
<div id="container">

div>
<script src="./vue.js">script>
<script>
let app = new Vue({
    el: '#container',
    data: {
        msg: 'msg'
    },
    template: '#tp'
})
script>

 五、component 组件

a、父组件传值给子组件

<body>
<script type="x-template" id="bill">
    <div>
        <h1>{{getMsg}}</h1>
        <h2>{{title}}</h2>
        <ul>
            <li v-for="(v,k) of list">{{v}}---{{k}}</li>
        </ul>
        <input type="button" value="btn" @click="check">
    </div>
script>
<div id="container">
    <bill :msg="msg" title='this is title'>bill>          
div>
<script src="./vue.js">script>
<script>
Vue.component('bill', {
    template: '#bill',
    props: ['msg', 'title'],                                //接收从外部传入的属性值
    data: function() {                                      //内部定义data应该要用函数的形式进行定义
        return {
            list: ['aaa', 'bbb', 'ccc', 'ddd']
        }
    },
    computed: {
        getMsg: function() {
            return `are you ok??? ${this.msg}`;
        }
    },
    methods: {
        check() {
            console.log(arguments, this);                  //this 是指向当前的component组件
        }
    }
});
let app = new Vue({
    el: '#container',
    data: {
        msg: 'this is msg'
    }
})
script>
body>

 b、子组件传值给父组件

test

你可能感兴趣的:(vue学习记录(二)---自定义指令,组件)