时间：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操作之外，什么方式可以简单实现分页的样式变化？
