学习vue的笔记

2017-08-09  本文已影响0人  还有谁叫李狗蛋

之前学过vue，上一个项目做小程序，发现跟vue差不多，于是给一个星期的时间自己重拾vue，但是发现高估了自己，并发现自己已变成一个小白...看了几天vue文档之后，再也不想说小程序与vue相似，小程序简单太多了，看完文档就可以做出来了，但是vue不一样。。。个人觉得vue的文档很散，讲的都是小零件，所以很难想着拼起来。在学习过程中做一下笔记吧...忘了可以看...

创建实例
new Vue({
　el: "#app",
　data:{},
　methods: {},
　filters: {},
　directives: {},
　computed:{},
    router: vueRouter
})
过滤器

过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。

Vue.filter("dateFmt",function (param,fmtStr) {
        let year = param.getFullYear();
        let month = param.getMonth() + 1;
        let day = param.getDate();
        let hour = param.getHours();
        let minute = param.getMinutes();
        let second = param.getSeconds();
        if(fmtStr == "yyyy-mm-dd"){
            return year + "-" + month + "-" + day;
        }else if(fmtStr == "yyyy-mm-dd hh:mm:ss"){
            return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
        }
    });

filters:{
            dateFmt(param,fmtStr){
                let year = param.getFullYear();
                let month = param.getMonth() + 1;
                let day = param.getDate();
                let hour = param.getHours();
                let minute = param.getMinutes();
                let second = param.getSeconds();
                if(fmtStr == "yyyy-mm-dd"){
                    return year + "-" + month + "-" + day;
                }else if(fmtStr == "yyyy-mm-dd hh:mm:ss"){
                    return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
                }
             },
        }
自定义指令（这指令的钩子函数，看不太懂...）

钩子函数

  • bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
  • inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

钩子函数参数

  • binding: 一个对象，包含以下属性：
    value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2，又如：v-color="{colorname:'red',colorname2:'green'}",value.colorname的值是red，value.colorname2的值是green

我想，暂时这两个够用了...毕竟其他还不会...

    // 定义一个全局自定义属性指令
    Vue.directive('focus', {
        // 当绑定元素插入到 DOM 中时调用（父节点存在即可调用，不必存在于 document 中）
        inserted: function (el) {
            // 聚焦元素
            el.focus();
            console.log(el);
        }
    });

directives: {
            focus:{
                inserted(el){
                    el.focus();
                }
            },
            "color":{
                bind: function (el,binding) {
                    console.log(binding.value.colorname);
                    el.style.color = binding.value.colorname;
                },
                inserted: function (el,binding) {
                    console.log(binding.value.colorname);
                }
            }
}
计算属性（局部）

vue.js v1的系统过滤器filterBy换成计算属性了

computed: {
            searchQuery: function () {
                var self = this;
                return self.studentsList.filter(function (user) {
                    return (user["name"].indexOf(self.searchValue) !== -1 || user["no"].indexOf(self.searchValue) !== -1 || user["gender"].indexOf(self.searchValue) !== -1);
                })
            }
        }
vue-resource

响应.then()内的成功回调中的参数是响应报文体
这相当于jq的ajax

this.$http.get('/someUrl').then(successCallback, errorCallback);

this.$http.post('/someUrl',{no:1,sex:1（请求报文体）},{emulateJSON:true}).then(successCallback, errorCallback);

// jsonp是设置回调的属性名，有些是cb=jqxxxx，有些是callback=jqxxxx，默认是callback
this.$http.post('/someUrl',{jsonp: "cb"}).then(successCallback, errorCallback);
生命周期
<div id="app">
    <span ref="span">hello vue</span>
</div>

new Vue({
    el: "#app",
    data: {
        msg:"hello"
    },
    // 在实例初始化之后，data和event/watcher 事件配置之前
    // 还不能取到this.data、事件
    beforeCreate(){
        console.log("1---beforeCreate",this.msg,this.$refs.span);
    },
    // 实例已完成以下的配置：data，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
    // >>>>想要显示页面的时候就有数据的话，就在这个函数里请求数据
    created(){
        console.log("2---created",this.msg,this.$refs.span);
    },
    // 在挂载开始之前被调用：相关的 render 函数首次被调用。（可以理解为渲染前）
    beforeMount(){
        console.log("3---beforeMount",this.msg,this.$refs.span);
    },
    // el 被新创建的 vm.$el 替换（如{{}}差值表达式、v-show="isShow"等替换值），并挂载到实例上去之后调用该钩子。(可以理解为渲染后不知道这个vm.$el怎么用...)
    mounted(){
        console.log("4---mounted",this.msg,this.$refs.span);
    }
})
过渡

感觉这个过渡真的好鬼复杂！官网最简答的例子是点击按钮触发，但是我不想要这种，我要一打开网页就有动画，怎么实现？于是我就开始尝试用过渡的CSS类名和过渡钩子。

// CSS
    <style>
        .box { position: absolute; left: 0; top: 100px; width: 50px; height: 50px; background: skyblue;}
        .box1-enter-active, .box1-leave-active {
            transition: all .5s;
            transform: translateX(0px);
        }
        .box1-enter, .box1-leave-active {
            transform: translateX(200px)
        }
    </style>

↓ 一开始是用按钮触发isMove，后来被我注释了。

// html
    <div id="app">
        <!--<button @click="isMove=!isMove">移动</button>-->
        <transition name="box1">
            <div v-if="isMove" class="box"></div>
        </transition>
    </div>

看代码就知道一开始我在created钩子控制isMove，后来发现不行就换成mounted钩子，为什么mounted钩子就行，我是在过渡钩子发现的。

// JS
    new Vue({
        el: "#app",
        data: {
            isMove: false
        },
        // created(){
        // this.isMove = true;
        // },
        mounted(){
            this.isMove = true;
        }
    })

// CSS
    <style>
        .box { width: 50px; height: 50px; background: skyblue; transition: all 3s linear;}
    </style>

↓ @before-enter　@enter　@after-enter都是固定的，函数名随你，v-show很重要哦，就是要靠他触发

// html
    <div id="app">
        <transition name="moveBox"
            @before-enter="beforeEnter"
                    @enter="enter"
            @after-enter="afterEnter">
            <div v-show="isShow" class="box"></div>
        </transition>
    </div>

↓ 一开始我在created控制isShow，失败之后我想应该在哪个钩子控制变量呢，（错误思想：我看着过渡钩子，看到了el，哦！恍然大悟！mounted钩子不是跟el有关系的吗？写！搞定~）问了朋友关于生命周期mounted的问题后，得出答案：过渡元素还没有渲染完，元素渲染完在改变isShow，所以放在mounted执行

// JS
        new Vue({
            el: "#app",
            data: {
                isShow: false
            },
            methods: {
                beforeEnter: function (el) {
                    // 控制动画的准备进入
                    el.style.transform = 'translateX(0px)';
                },
                enter: function (el, done) {
                    // 控制动画的最终状态
                    let a = el.offsetLeft;
                    this.$nextTick(()=>{
                        el.style.transform = 'translateX(300px)';
                    });
                    done();
                },
                afterEnter: function (el) {
                    // 动画完以后的一些逻辑处理
                }
            },
            // created(){
            // this.isShow = true;
            // console.log(this.isShow);
            // },
            mounted(){
                this.isShow = true;
            }
        })
组件

不说废话直接上码

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。为此可以添加一个 keep-alive 指令参数。在API 参考查看更多 <keep-alive> 的细节。

// html
<div id="app">
    <label>传值：<input type="text" v-model="msg"></label>
    <br>
    <router-link :to="'/sub1/' + msg">sub1</router-link>
    <router-link to="/sub2">sub2</router-link>
    <!-- 组件的显示占位区域 -->
    <router-view></router-view>
</div>
<!-- 第一个子组件模板 -->
<template id="sub1">
    <div>
        <h3>这是第一个子路由</h3>
        <div>传来的值是：{{txt}}</div>
    </div>
</template>
<!-- 第二个子组件模板 -->
<template id="sub2">
    <div>
        <h3>这是第2个子路由</h3>
    </div>
</template>

// JS
    // 定义第一个子组件
    let sub1 = Vue.extend({
        template: "#sub1",
        data: function () {
            return {
                txt: ""
            }
        },
        // 导航完成后，在组件的 created 钩子中获取数据
        // 还可以在数据获取期间展示一个 loading 状态
        created: function () {
            this.txt = this.$route.params.id;
        }
    });
    // 定义第二个子组件
    let sub2 = Vue.extend({
        template: "#sub2"
    });
     // 定义路由对象并且注册路由规则
    let vueRouter = new VueRouter({
        routes: [
            {path: '/',redirect: '/sub2'},    // 默认路由
            {path: '/sub1/:id',component: sub1},
            {path: '/sub2', component: sub2}
        ]
    });
    // 使vueRouter生效
    new Vue({
        el: "#app",
        data: {
            msg: ""
        },
        router: vueRouter
    })
上一篇 下一篇

猜你喜欢

热点阅读