时间：2016-04-11
地点：新大楼 A区905

为什么选择vue.js

• 可以作为前端模板库的替换
• 简单
• 正在管理系统的前端中使用（财务系统）
• 应该会成为前端开发的主要方式（纯属个人臆测）

vue.js数据绑定

<div id="app1"> {{ message1 }}</div>
<div id="app2"> {{* message2 }}</div>//单次绑定
<div id="app3"> {{{ message3 }}}</div>//呈现HTML

var obj1=new Vue({
  el: '#app1',
  data: {
    message1: 'Hello World!'
  }
});
obj1.message1="Hello vue.js!";
var obj2=new Vue({
  el: '#app2',
  data: {
    message2: 'Hello World!'
  }
});
obj2.message2="Hello vue.js!";
var obj3=new Vue({
  el: '#app3',
  data: {
    message3: '¥'
  }
});

结果：

数据绑定

class绑定和style绑定

<div id="app1" v-bind:class="{'classA':isA,'classB':isB}"> </div>
<div id="app2" v-bind:class="classObj"> </div>
<div id="app3" v-bind:style="{color:activeColor}"> </div>
<div id="app4" v-bind:style="styleObj"> </div>

new Vue({
    el:'#app1',
    data:{
        isA:true,
        isB:false
    }
});
new Vue({
    el:'#app2',
    data:{
        classObj:{
            'classA':true,
            'classB':true
        }
    }
});
new Vue({
    el:'#app3',
    data:{
        activeColor:'red'
    }
});
new Vue({
    el:'#app4',
    data:{
        styleObj:{
            color:'red'
        }
    }
});

最终渲染结果：

class绑定和style绑定

计算属性

两种方式：

PS：
1.vue.js教程
2.jQuery是命令式开发；vue.js是声明式开发，对于深度jQuery依赖者，这个思维方式的转变貌似需要点儿时间（P，明明就是你的质量太大，导致惯性太大，从而导致刹车时的缓冲距离比较长吧）

课后作业
顺便提问：除了在data中新增加数组来控制样式或者使用DOM操作之外，什么方式可以简单实现分页的样式变化？