Vue学习 二

过滤器

• Vue 中允许自定义过滤器,可被用作一些常见的文本格式化
• 过滤器可以用在两个地方mustache插值和v-bind表达式
• 过滤器应该被添加在js表达式的尾部,用"管道"符指示
• Vue 中的过滤器分为全局过滤器和私有过滤器,调用的时候如果出现名称一致,那么采用就近原则,优先调用私有过滤器

<div id='app'>
    <p>{{ | dateFormat}}</p>
</div>
<script>
    Vue.filter('dateFormat', function(){
        var dt = new Date();
        var y = dt.getFullYear();
        var m = dt.getMonth()+1;
        var d = dt.getDate();
        return `${y}-${m}-${d}`;
    })
    var vm = new Vue({
        el: '#app',
        methods:{
        },
        filter : {
            dataFormat : function () {
                var dt = new Date();
                var y = dt.getFullYear();
                var m = dt.getMonth()+1;
                var d = dt.getDate();
                return `${y}/${m}/${d}`;
            }
        }
    });
</script>

自定义指令

• 通过自定义指令实现自动获取焦点

<div id='app'>
    <input type="text" v-model="name" v-focus>
</div>

<script>
    Vue.directive('focus',{
        bind : function(el) {
            //当元素绑定指令执行
        },
        inserted : function(el) {
            //当元素插入dom中执行
            el.focus();
        },
        update : function(el) {
            //当VNode更新时执行,可能会触发多次
        }
    })

    var vm = new Vue({
        el: '#app',
    });
</script>

• 通过自定义指令实现字体颜色设置,

 <div id='app'>
    <input type="text" v-model="name" v-color="'red'">
</div>

<script>
    Vue.directive('color',{
        bind : function(el,binding) {
            el.style.color = binding.value;
        },
    })

    var vm = new Vue({
        el: '#app'
    });
</script>

• 指令函数的简写:大多数,我们可能想在bind和update钩子上做重复动作,不关心其他的钩子函数,可以简写

    Vue.directive('color',function(el,binding) {
        el.style.color = binding.value;
    })

Vue 实例的生命周期

创建阶段

1. beforeCreate() : Vue实例被完全创建出来之前会执行此方法,此时 data和methods中的数据还没有初始化
2. create() : 此时data和methods已经被初始化好了
3. beforeMount() : 模板已经在内存中编辑完成了,但是未把模板渲染到页面中
4. mounted() : 内存的模板挂载到页面中,页面已经被渲染好了

运行阶段

1. beforeUpdate() : 表示数据被更新了,页面还没有被更新,
2. update() : 页面与data数据已经同步

运行阶段

1. beforeDestory() : Vue实例从运行阶段进入销毁阶段,此时data,methods还处于可用状态.
2. destory() : 组件已经完全被销毁

vue-resource实现get.post,jsonp请求

发送get请求：

getInfo() { // get 方式获取数据
this.$http.get(‘http://127.0.0.1:8899/api/getlunbo’).then(res => {
console.log(res.body);
})
}

发送post请求：

postInfo() {
var url = ‘http://127.0.0.1:8899/api/post’;
// post 方法接收三个参数：
// 参数1： 要请求的URL地址
// 参数2： 要发送的数据对象
// 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded
this.$http.post(url, { name: ‘zs’ }, { emulateJSON: true }).then(res => {
console.log(res.body);
});
}

发送JSONP请求获取数据：

jsonpInfo() { // JSONP形式从服务器获取数据
var url = ‘http://127.0.0.1:8899/api/jsonp’;
this.$http.jsonp(url).then(res => {
console.log(res.body);
});
}

组件

• 使用Vue.extend配合Vue.component方法

    var hello = Vue.extend({
        template : "<h1>hello</h1>"
    });
    Vue.component('hello',hello);

• 直接使用Vue.component方法

    Vue.component('hello',{
        template : '<h1>hello</h1>'
    })

• 将模板字符串定义到script标签中

<template id="temp">
    <h1>hello</h1>
</template>
<script>
    Vue.component('hello',{
        template : '#temp'
    })
</script>

• 定义私有组件

    var vm = new Vue({
        el: '#app',
        components : {
            hello : {
                template : "<h1>hello</h1>"
            }
        }
    });

• 组件可以有自己的data数据,组件中的data和例中的data不一样,组件中的data必须是一个方法,方法内部必须返回一个对象

    Vue.component("hello",{
        template : '<h1>hello {{msg}}</h1>',
        data : function() {
            return {msg :  'hello'};
        }
    })

父组件向自组件传值

• 父组件可以在引用子组件的时候 ,通过属性绑定(v-bind)的形式,把需要传递给子组件的数据,以属性绑定的形式,传递到子组件的内部,供子组件使用
• prop中的数据都是只读的

<div id='app'>
    <comp v-bind:parentmsg="msg"></comp>
</div>
<template id="temp">
    <h1>{{parentmsg}}</h1>
</template>
<script>
    var comp = {
        template : '#temp',
        props : ['parentmsg']
    }
    var vm = new Vue({
            data : {
            msg : 'hello',
        },
        components : {
            comp
        }
    });
</script>

子组件通过事件调用向父组件传值

<div id='app'>
    <comp @func="copy"></comp>
</div>
<template id="temp">
    <h1 @click="myClick">hello</h1>
</template>
<script>
    var comp = {
        template : '#temp',
        data() {
            return {
                user : {
                    name : 'zs',
                    age:12
                }
            };
        },
        methods : {
            myClick() {
                this.$emit('func',this.user);
            }
        },
    }
    var vm = new Vue({
        el: '#app',
        data : {
            user : {}
        },
        methods : {
            copy(user) {
                this.user = user;
            }
        },
        components : {
            comp
        }
    });
</script>