2017-12-27 绿茶、 AppCan Slider、Vue.js计算、改变checkbox默认样式、调试多线程程序

第一组:姚成栋 绿茶

绿茶(Green Tea),是中国的主要茶类之一,是指采取茶树的新叶或芽,未经发酵,经杀青、整形、烘干等工艺而制作的饮品。其制成品的色泽和冲泡后的茶汤较多的保存了鲜茶叶的绿色格调。常饮绿茶能防癌,降脂和减肥,对吸烟者也可减轻其受到的尼古丁伤害。

绿茶是未经发酵制成的茶,保留了鲜叶的天然物质,含有的茶多酚、儿茶素、叶绿素、咖啡碱、氨基酸、维生素等营养成分也较多。绿茶中的这些天然营养成份对防衰老、防癌、抗癌、杀菌、消炎等具有特殊效果,是其他茶类所不及的。绿茶是以适宜茶树新梢为原料,经杀青、揉捻、干燥等典型工艺过程制成的茶叶。其干茶色泽和冲泡后的茶汤、叶底以绿色为主调,故名绿茶。绿茶是将采摘来的鲜叶先经高温杀青,杀灭了各种氧化酶,保持了茶叶绿色,然后经揉捻、干燥而制成,清汤绿叶是绿茶品质的共同特点。中国生产绿茶的范围极为广泛,河南、贵州、江西、安徽、浙江、江苏、四川、陕西(陕南)、湖南、湖北、广西、福建是我国的绿茶主产省份。

其实周边的人喝茶,基本上都只会喝周边的一些茶类,或者是一些特别有名的,我也不例外。因为家住德清,旁边就有一座产茶的山,名为莫干山。所以莫干黄芽是我平日最喜爱的绿茶之一。正如江浙人的菜肴偏甜一样,莫干黄芽抿入口中就是一股甘甜,淡淡的有点小清纯,喝上一天也不会厌。还有一类我也比较喜欢喝的就是安吉白茶,也是周边产的一种茶。比起黄芽,白茶可能更偏苦一点,但是不是那种带涩的苦,是喝一口之后半甜半苦的感觉。还有一类茶平时不怎么喝,但是名气很大,就是西湖龙井。可能是我这个年纪还没发理解龙井的味道,之前品过,觉得那种入口的苦涩并不怎么讨人喜欢,只不过回味起来倒也是有几丝别样的味道。

再讲讲喝茶(如果不是特别的情况,我还是比较喜欢喝茶,而不是品茶,因为闲时泡一杯喝一喝也没必要郑重其事的),随便拿个杯子温一下,放上茶叶,如果讲究一点可以先洗茶,全凭个人喜好。倒上热水,还是觉得不要刚沸的那种水比较好,但也不要太冷,不然茶都泡不开,记住不要焖,不然会有很奇怪的味道。喝的时候也不要大口牛饮,毕竟水还是很烫的,嗦嗦地,就跟路边的老头子一样,发出声音的那种,试了你就会知道为什么要这么喝茶了。


第二组:赵彩凤 AppCan Slider图片轮播组件

一.函数
appcan.slider({参数})
    selector:   /*选择器*/, 
    hasIndicator: true or false  /*是否有位置提示条*/, 
    hasLabel: true or false   /*是否有标签文字栏*/, 
    aspectRatio: 0 or !=0   /*是否控制纵横比,0为使用控件高度,>0使用纵横比*/, 
    index: 0 or >0   /*默认选择项*/ 
    auto:2000   /*轮播时间,单位毫秒*/ 
    hasContent: true or false 支持slider设置文字区域
    canDown: true or false 设置图片/文字区域是否可以下拉
    hasCircle: true or false 设置圆点位置提示标志
  circleSlide:true or false 设置是否循环轮播(下载最新JSSDK)
二. 方法
  1. set(data)
    data:JSON 对象数组,用于存储显示的图片、提示文字信息
  2. clickItem事件
    data:JSON 点击条目时触发,告知点击的索引和索引对应的数据对象
  3. change事件
    data:JSON 滑动条目时触发,告知滑动的索引
三. Demo

HTML5代码

JS代码

var slider = appcan.slider({
      selector : '#slider',
      aspectRatio:6/16,
      hasLabel:true,
      index:1,
      auto:2000
  });
  slider.set([{
      img : "../images/loading_pic1.jpg",
      label:"快速!丰富稳定的UI组件、海量的行业UI模板,快速拼装APP"
  }, {
      img : "../images/loading_pic2.jpg",,
      label:"便捷!网络部署APP,摆脱数据线"
  }, {
      img : "../images/loading_pic3.jpg",,
      label:"高效!项目云端同步,多人协同开发"
  }, {
      img : "../images/loading_pic4.jpg",,
      label:"所见即所得!真机同步调试应用代码"
  }, {
      img : "../images/loading_pic5.jpg",,
      label:"高效!代码提示,无忧编程"
  }])
  slider.on("clickItem",function(index,data){
      console.log(index,data);
  })
四.
  1. hasContent
    默认hasContent为false,当hasContent为false的时候slider支持图片区域;当hasContent为true的时候slider支持文字区域 相关说明:size 设置文字内容区域的文字大小

  2. canDown
    默认canDown为true,当canDown为true的时候图片/文字区域可以进行下拉;当canDown为false的时候图片/文字区域禁止下拉。

  3. hasCircle
    默认hasCircle为true,当hasCircle为true的时候在图片/文字区域显示圆点位置提示标志;当hasCircle为false时不显示 相关说明:site 设置圆点提示标志的位置,默认情况下site水平居中,'Right'圆点提示标志位于右边,'Left'圆点提示标志位于左边


第三组:黄华英 Vue.js计算属性VS方法

一、计算属性

计算属性是一个很邪门的东西,只要在它的函数里引用了 data 中的某个属性,当这个属性发生变化时,函数仿佛可以嗅探到这个变化,并自动重新执行

这个例子是一个典型的计算属性:

var vm = new Vue({
    el: '#example',//声明挂载
    data: {//初始化数据
        firstName: '马瑞',
        lastName: '克瑞斯马斯'
    },
    computed: {//计算属性
       fullName: function () {
           return this.firstName + ' ' + this.lastName; 
       }
    }
});

当需要读取fullname“属性”的时候,我们去读取了实例对象上的firstname和lastname属性,然后进行了字符串的拼接操作,经历了以上一系列的计算,将最终得到的结果作为fullname“属性”的值

二、方法

可以通过调用方法来实现表达式的效果,例如将输入的数据逆序输出

用计算属性实现:

Original message: "{{ message }}"

Computed reversed message: "{{ reversedMessage }}"

var vm = new Vue({ el: '#example', data: {message: 'Hello'},//初始 computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } }})

在表达式中调用方法来实现:

Reversed message: "{{ reversedMessage() }}"

var vm = new Vue({ el: '#example', data: {message: 'Hello'},//初始 methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } }})

以上两种方式的最终结果确实是完全相同的。不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要message还没有发生改变,多次访问reversedMessage计算属性会立即返回之前的计算结果,而不必再次执行函数。

Vue中的方法可以互相调用,如下:

Methods:{
A:function(){A的操作},
B:function(){//在B当中调用A方法
this.$options.methods.A.bind(this)();
}}

第四组:王芳 改变checkbox的默认样式

改变checkbox的默认样式总共有两种方法,大体思路都是一样的,先将checkbox隐藏,然后用一个样式元素来伪装成checkbox,主要的不同之处在于如何设置选中后的样式。

第一种方法是使用图片,将不同状态下的样式集合到一张图片上,根据改变background-positon来改变样式,类似于css sprite,之前分享的icheck就是这个原理,这种方法的兼容性比较好,但是不够灵活。

第二种方法是使用transform绘制选中后的样式,这样就可以根据自己的喜好随意修改样式了,但是兼容性不太强。

下图代码是第二种方法,其中红色方框部分为transform的绘制过程。

  1. html结构是这样的:
    label将样式元素span和checkbox绑定起来


    2017-12-27 绿茶、 AppCan Slider、Vue.js计算、改变checkbox默认样式、调试多线程程序_第1张图片
    image.png
  2. css是这样的:
    .input:checked+.span:after实现样式切换


    2017-12-27 绿茶、 AppCan Slider、Vue.js计算、改变checkbox默认样式、调试多线程程序_第2张图片
    image.png
  3. 源码:




     
     demo
     


     

第五组:姜葳 利用C#线程窗口调试多线程程序

  1. 在日志的某个地方写日志文件。
    优点:不会干扰程序的执行,特别是对网络的多线程通信。
    缺点:每次都需要打开日志文件以查看进程运行的信息。

  2. 利用断点进行调试。
    优点:直观,可以直接看到运行过程的值
    缺点:在多个线程设置断点,可能让程序跳来跳去,还需要额外地分出一部分精力用来理清程序的逻辑

  3. 利用弹出窗口来查看进程调试的信息。
    优点:直观
    缺点:在调试网路通信的时候,使得通信的过程产生延时,导致通信失败。

  4. 利用vs2010自带的线程窗口来调试
    优点:直观,可以直接从进程图上看到哪个进程是活动进程,哪些进程处于阻塞状态。
    缺点:需要结合断点调试,基本上就是断点调试的加强版

编译环境:vs2010
语言:C#

你可能感兴趣的:(2017-12-27 绿茶、 AppCan Slider、Vue.js计算、改变checkbox默认样式、调试多线程程序)