爱创课堂前端开发体课验堂笔记.docxVIP

爱创课堂前端培训AngularJS第1天课堂笔记班级：北京前端训练营2期讲师：张容铭日期：2016年9月8日AngularJS1复习3第一天3第二天4第三天6Angular8获取8体验angular8Ng-init8Ng-bind9Angular.module9ng-controller9下午复习11事件12Ng-show ng-hide13插值表达式13过滤器13json13filter13Date14Uppercase15Lowercase15limitTo15Number15orderBy15自定义过滤器16复习第一天VueMVVM 特点就是一个双向绑定M 表示模型，机器可读性强的数据，对象，数组V 表示视图，人眼可读性强的数据，页面中的一些组件VM 表示视图模型， Vue实例化对象选择器 就是vue实例化对象可操作的一个容器元素，容器外部的元素，我们是无法控制的El 支持css选择器，类选择器，id选择器，元素名称选择器数据绑定 我们将模型中数据绑定到Vue实例化对象中给，通过data属性Data：值是一个对象，每一个属性会创建一个相应变量，对象的叶子节点一定是一个值类型的数据插值 将视图模型中的数据（模型上的数据）渲染到视图中，语法 {{}} 大括号内容是data属性中的变量属性插值 我们可以将数据插入到元素的属性值中 语法{{}}单次插值 如果想插入的数据不在改变，我们可以通过单次插值实现 {{*}}过滤html插值 默认情况下，我们在字符串中的html中标签会进行转移在插入页面中，我们想在页面中保留这些元素，我们可以通过过滤html插值语法实现 {{{}}},在该语法中我们可以使用单次插值语法{{{*}}}插值表达式 我们插值语法提供了一个js环境，在里面我们可以对插值使用插值表达式插值过滤器 我们有时候想对插值处理复用，我们可以通过插值过滤器实现，Vue建议我们用过滤器，不建议用表达式，因为表达式不能复用动态数据绑定Computed 动态数据绑定，他的值是一个对象，对象的中每个属性表示一个动态变量，我们可以在插值时候使用对象中的每个属性值表示一个函数，函数的返回值就是作为插入的数据函数中的作用域是Vue实例化对象，因此可以使用vue中的属性方法数据双向绑定V-model 是实现了数据双向绑定的一个方向，是从视图到模型的一个过程数据双向绑定分成两个过程从模型到vue实例化对象（data数据绑定），再从vue实例化对象到视图（插值）从视图到vue实例化对象（v-model），再从vue实例化对象到模型（data重赋值）类的三种绑定方式第一种插值，不推荐，第二种 v-bind:class=”[]”数组每个成员是一个类的变量，变量的值是类的名称，我们可以通过这个变量来控制显示哪个类，注意这个变量只能控制一个类第三种 v-bind：class = ‘{}’对象的每个属性名称表示一个类的名称对象的属性值，是一个布尔值，表示是否保留该类，True保留False删除样式的三种绑定第一种插值（不推荐）第二种 v-bind:style=”[]”数组每个成员表示一组css样式，可以是一个变量，也可以是一个对象，如果是变量的话，他的值就是一组css样式对象，要定义在Vue实例化对象中第三种 v-bind：style=“{}”对象的属性名称表示css中样式名称对象属性值表示css中样式属性对应值模板条件判断模板在underscore中的template语法中定义条件模板用js中if语句在vue中定义条件模板用v-if指令，v-if指令只能控制该指令所在元素及其所有子元素，不能控制兄弟元素如果想控制兄弟元素，我们要用template模板自定义元素，来实现，实现原理，是将这些兄弟元素放在一个父元素中。循环模板在underscore中template语法中，定义循环模板使用js中的for循环，在vue中定义循环模板，用v-for指令V-for指令只能控制该指令所在元素及其所有子元素，不能控制兄弟元素如果想控制兄弟元素，我们要用template自定义元素来试下，实现原理，就是将这些兄弟元素放在一个父元素容器中第二天单选 在vue中使用方式跟html一模一样，只不过他的值通过vue控制多选 在vue中使用方式跟html一模一样，只不过他的值通过vue控制不同点 1 他们都是通过v-model绑定数据的，但是单选的所有v-model是同一个变量，多选的v-model对应一个不同的变量，通常这些变量保存一个变量中方便管理2 单选的值需要vlaue属性设置，多选不用3 单选value会映射到v-model上，多选的值默认就是一个boolean值，如果想设置它的值就要通过（true-value和false-value）4 多选可以通过v-bind:tru