dabinz

dabinz 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

dabinz 提出了问题 · 2017-04-19

Vue1:子组件的数据,如何随着父组件数据的改变而变化?

我的想法是:
子组件的数据“cMsg”的值,取决于父组件data中的“laoba”属性;
父组件的“pMsg”的数据,是通过根实例“root”来决定的。

出现的问题是:
子组件的数据“cMsg”,不能随着父组件的“pMsg”的改变而变化。

麻烦帮我看看代码哪出了问题,我碰到拦路虎了,多谢!

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>hello-world</title>
<style>
*{margin: 0; padding: 0;}
#demo{ 
    height: 50px;
    background: lime;
}
</style>
<!-- 我用的是Vue 1.0.26   -->
<script data-original="../vue.js"></script>
</head>
<body>
        <!--V-->
    <div  id="demo">
        <pp :p-msg="root"></pp>
    </div>
<script>
'use strict';
    // 子组件构造器
    var child = Vue.extend({ 
        props : ['cMsg'],
        template : '<b>从父组件接收到的数据是:{{cMsg}}</b>'
    });
    // 父组件构造器
    var parent = Vue.extend({ 
        props : ['pMsg'],
        template : '<p>{{pMsg}}-<cc :c-msg="laoba"></cc></p>',
        components : { 
            'cc' : child
        },        
        data : function(){ 
            /* 
            给vm.root赋值时 在控制台中可以看到新的值 
            var _this = this;
            setInterval(function(){ 
                console.log(_this.pMsg)
            },1000);
            */
            return { 
                laoba : this.pMsg
            }
        }

    });

    // 将构造器注册为组件
    Vue.component('pp',parent);

    // 生成实例
    var vm = new Vue({ 
        el : '#demo',
        data : { 
            root :'根实例数据'
        }
    });


</script>
</body>
</html>

关注 4 回答 3

dabinz 赞了回答 · 2017-04-13

解决npm 安装参数中的 --save-dev 是什么意思

-S, --save: Package will appear in your dependencies.
-D, --save-dev: Package will appear in your devDependencies.
-O, --save-optional: Package will appear in your optionalDependencies.

关注 33 回答 5

dabinz 关注了问题 · 2017-03-27

解决vue.extend, vue.component 区别

vue.extend, vue.component有什么区别

关注 18 回答 4

dabinz 关注了问题 · 2017-03-20

vue2.0生命周期钩子该怎么用?

我想问下vue2.0中的生命周期钩子该怎么用?

我不是问怎么理解生命周期钩子,百度上搜的都是这样的答案。

我是想问我们在这些钩子之中分别一般会做一些什么样的操作,比如说以前写js的时候我们方法写在onload在页面加载完之后执行,但是我不是很理解在这些钩子中一般执行什么样的操作,可以干什么,为什么要在这个阶段执行,晚执行一个阶段行不行。。。有例子说明最好,谢谢!

clipboard.png

关注 14 回答 3

dabinz 提出了问题 · 2017-03-20

vue1.0,过渡钩子函数没有触发,不知道是哪的问题。

我用Vue 1.0.26,想学着官网做一个“点击显示/再点击隐藏”的效果,同时应用钩子函数。
我在第一次点击的时候,只有显示/隐藏的效果,没有调用对应节点的钩子函数。找了1个小时还没找到问题在哪,麻烦了解的帮忙看看我的代码哪有问题,谢谢。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>hello-world</title>
<style>
*{margin: 0; padding: 0;}
#demo{ 
    width: 300px; height: 100px; border: 1px solid red;
}
.go-transition{
    transition: all linear .5s; 
    height: 40px;line-height: 40px; 
    background: lime;
    overflow: hidden;
}
.go-enter , .go-leave{ 
    height: 0;  
    opacity: 0;
}
</style>
<!-- 我用的是Vue 1.0.26   -->
<script data-original="../vue.js"></script>
</head>
<body>
    <!--V-->
<div  id="demo">
    <p v-if="show" transition="go">段落标签</p>
    <b>B标签</b>
    <br />
    <button v-on:click="g">走着</button>
</div>

<script>
'use strict';
    // M 
    var oData = {
        show : true
    };
    // VM
    var vm = new Vue({ 
        el : '#demo',
        data : oData,
        methods : { 
            g : function(){ 
                this.show ? this.show  = false : this.show  = true;
                document.title = this.show;
            }
        }
    });
    // 过渡不同阶段的钩子函数
    Vue.transition('go', {
        // 元素从无到有
        enter: function (el) {
          el.textContent = 'enter'
        },
        afterEnter: function (el) {
          el.textContent = 'afterEnter'
        },
        // 元素从有到无
        leave: function (el) {
          el.textContent = 'leave'
        },
        afterLeave: function (el) {
          el.textContent = 'afterLeave'
        }
    });    
</script>
</body>
</html>

关注 1 回答 0

dabinz 关注了问题 · 2017-03-20

解决新手上路,关于vue文档中不理解的内容

刚开始学习vue 然后看文档 对于下面的这段话以及红圈中各个todo对应的关系并不是很能理解 希望有人能详尽指点下 万分感谢

clipboard.png

关注 5 回答 2

dabinz 提出了问题 · 2017-03-15

Vue1.0,过渡transition的问题:如何给enter钩子定义回调函数?

我学习的是Vue1.0,在过渡流程详解这有个enter钩子,可以为它传入第二个参数,它是怎么设置的?

enter 和 leave 可以有第二个可选的回调参数,用于显式控制过渡如何结束。因此不必等待 CSS transitionend 事件, Vue.js 将等待你手工调用这个回调,以结束过渡。例如:

    enter: function (el) {
      // 没有第二个参数
      // 由 CSS transitionend 事件决定过渡何时结束
    }

vs.

    enter: function (el, done) {
      // 有第二个参数
      // 过渡只有在调用 `done` 时结束
    }

enter钩子的形参done,请问应该怎么用?

关注 1 回答 0

dabinz 关注了问题 · 2017-03-11

html5 canvas绘制图片模糊的问题

我遇到一个问题,用canvas绘制图片的时候会模糊,但是用img显示的时候就不会,canvas和img的大小是相同的,求高手指点。

关注 25 回答 4

dabinz 提出了问题 · 2017-03-11

使用canvas的fillText方法写文字时,坐标的问题。

我想在canvas画布左上角添加文字“你好世界”,我用的是fillText方法。但是,运行后只显示很少一部分文字。

如图,绿色横线上面:
图片描述

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>第一个canvas</title>
<style>
*{margin: 0; padding: 0;}
 
canvas{
    background: #ddd; 
    border: 1px solid #000; 
}
</style>
</head>
<body>
<canvas id="cvs" width="600" height="300"> 
    您的浏览器不支持canvas元素。   
</canvas>
<script>
    var canvas = document.getElementById('cvs'),
        context = canvas.getContext('2d');

        context.font = '20px Arial';
        context.fillStyle = 'red';
        // 左上角显示文字,所以我用了x=0, y=0,但只显示部分文字。
        context.fillText('你好世界', 0, 0);

</script>
</body>
</html>

请问如何才能在canvas画布左上角显示 “你好世界”?

关注 4 回答 3

dabinz 赞了回答 · 2017-02-27

css em和百分比的困惑?

请问一下,我给body设置font-size:10px; 和 font-size:62.5%;,有什么不同吗?

关注 5 回答 2

认证与成就

  • 获得 6 次点赞
  • 获得 61 枚徽章 获得 4 枚金徽章, 获得 19 枚银徽章, 获得 38 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2015-02-11
个人主页被 539 人浏览