vue学习前传(一)

发表于   |   分类于   |  

react的项目结完最近又来了一个可视化的需求，在热力图上定制。好奇宝宝一直想知道angular跟vue的数据绑定跟react有什么区别，就试着上手了下vue，结果有点坑的是，公司的版本是0.12的，有些语法跟1.0的还不一样，比如v-repeat啥的,class的动态绑定比较鸡肋etc…害的我调了半天摔…

下面就来个demo把。
vue实例demo

See the Pen vue实例demo by lu (@luchen) on CodePen.

为什么jsfiddle经常挂= =，作业部落的markdown居然不能支持codepen直接嵌入html…就勉强戳链接看下啦。


截图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//html
<h3>测试部分</h3>
<div id="app">
  vue 0.12版本的class绑定<br>
  
  {{customClass?customClass+' red':"red"}}
  <div class="{{customClass?customClass +' red':'red'}}">class test</div>
</div>
<h3>实例demo</h3>
<ul v-show="isChaoxi" class="target-wrapper clearfix">
    <li v-repeat="product in productLines" class="{{'sm-box-item '+product.customClass}}" v-on="click:changeProduct(product.name)">
        <span class="box-item-data">{{product.data}}</span>
        <span class="box-item-name">{{product.zh_name}}</span>
     </li>
  </ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
//css
.red{
  color:red;
}
.box-border{
  border:1px solid black;
}
.target-wrapper{
  list-style:none;
    display: flex;
  margin-left: -10px;
}
.sm-box-item{
    flex: 1;
    margin-left: 10px;
    padding: 10px 20px;
    height: 78px;
    box-sizing: border-box;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
}
.box-item-data,.box-item-name{
    width: 100%;
    display: block;
}
.box-item-data{
    text-align: left;
    font-size: 20px;
}
.box-item-name{
    text-align: right;
    font-size: 16px;
}
.chaoxi{
    background-color: #fd6252;
}
.kuaiche{
    background-color:#54c3bc;
}
.taxi{
    background-color: #106ed5;
}
.sfc{
    background-color: #00cd99;
}
.zhuanche{
    background-color: #9587e9;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//javascript
var testVue = new Vue({
        el:"#app",
    
    data:{
        show:false,
      customClass:"box-border",
      test:"test"
      
    }
});
var demoVue = new Vue({
  el:".target-wrapper",
  data:{
    isChaoxi:true,
    productLines: [
      {data:'10000',zh_name:"潮汐",customClass:'chaoxi'},
      {data:'30000',zh_name:"出租车",customClass:'taxi'},
      {data:'8000',zh_name:"快车",
      customClass:'kuaiche'},
      {data:'200',zh_name:"专车",customClass:'zhuanche'},
      {data:'100',zh_name:"顺风车",customClass:'sfc'}
    ]
  }
});

关于set,需要注意的是

  • 在new Vue的时候没有设置的属性，是不可以用vobj.key = value来更新的。只能用$set.但是官方建议是在data中进行声明，不要动态设置。

    原因有两点：

    • 代码易读性
    • 动态添加会强制所有的 watcher 重新计算，因为它之前不存在，没有 watcher 追踪它。虽然性能上差别不是很大，但是不建议。
      1
      editVobj.$set("fenceName",this.name);

  • 而且如果key对应的value是一个对象的话，$set设置实际上会进行替换，而不是extend/object.assign。