首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  AngularJS

爱创课堂 前端教程 angular 课堂笔记 第一天

  •  
  •   icketang · 2017-12-25 16:49:44 +08:00 · 571 次点击
    这是一个创建于 480 天前的主题,其中的信息可能已经有所发展或是发生改变。

    第一天 Vue

    MVVM 特点就是一个双向绑定

    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 自定义元素来试下,实现原理,就是将这些兄弟元素放在一个父元素容器中

    目前尚无回复
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   760 人在线   最高记录 4385   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 18ms · UTC 21:01 · PVG 05:01 · LAX 14:01 · JFK 17:01
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1