Vue学习（二）——数据传递以及指令

vue是一个非常灵活的前端架构。
div=界面上的分区
控件：位于分区中，包括下拉菜单，单选多选，文本输入框等等；
data=某个控件使用的数据。虽然这些数据会通过el字段来定位自己属于哪个分区，使用{{}}搬运到分区中，但是具体实施的时候，数据以及数据的变种是局限于某个分区的某个控件中的；
css=某个分区下辖的所有的控件以及数据所使用的样式，这些样式也是通过el字段来定位自己属于哪个分区。对于某个分区下不同的数据、控件，有不同名称的css对象分别进行操作；
指令：位于控件中，对控件本身以及控件管辖范围内的data和css进行操作，
a）对控件本身：

静态的，id永远等于"message"

动态的，id随着message这个变量的值变化而变化。
var vm= new Vue{
el:"#app"
data:{
message:“hello world”}
}
在这种情况下，div的id是hello world。
也可以简写成：

省略v-bind。
b) 对控件、样式以及数据联动操作：

• 
  {{item.title}} //这句话的意思就是说对于span这个控件，如果item.del=TRUE，则数据就使用{{item.message}}
  {{item.title}}//这句话的意思就是说对于span这个控件，如果item.del不等于TRUE，则数据就使用{{item.message}}，并且在这个数据上面划一条横线表示删除。
  
• 
  

var vm= new Vue{
el:"#app"
data:{
message:“hello world”
item:{title:“课程”，
del:false}
}
}
比如说对data进行反转，对css进行选择（背景是红色还是绿色）

v-for语句

• 
  {{item.title}}
  {{item.title}}
  
• 
  

var vm= new Vue{
el:"#app"
data:{
message:“hello world”
list:[{title:“课程1”，del：false},
{title：“课程2”,del:TRUE}]
}
}
指令的目的是操作块、控件、数据以及css，但是指令本身是否执行的判断条件也是基于数据，所以是基于某些数据操作另外一些数据。这些数据全部都在data中以字典的形式定义。

同理：v-bind:class，v-bind:style 都是可以实现对div本身的动态渲染。只要使用不同var，并用el指定到不同的div id，就可以通过data以及method对这个div、div控件以及对应的数据基于var进行动态的渲染。

组件：块和块的组合，其中的块包括了块和它对应的控件、数据和CSS，即包括了data和template（div，控件和css）。
a）父组件：父组件是所有组件的重叠部分
b) 子组件：父组件+父组件之外自己的特色部分。
这样父组件部分就不用重复写了，可以直接继承。