发表于: 2021-06-01 21:32:24
0 1961
今天完成的事情:在询问师兄下 angular 获取到后台值,
明天计划的事情:知识补习,任务进行
遇到的问题:页面刷新直接跳后台页面还没搞定,双向绑定获取的值还没搞懂,
收获:
angular 的反向代理。
angular 的数据双向绑定:
数据绑定:网站页面中,是由数据和设计两部分组合而成。将设计转换成浏览器能理解的语言,便是html和css主要做的工作。而将数据显示在页面上,并且有一定的交互效果(比如点击等用户操作及对应的页面反应)则是js主要完成的工作。而在很多时候我们不可能每次更新数据来刷新页面(get请求),而是通过向后端请求相关数据,并通过无刷新加载的方式进行更新页面(post请求)。那么数据进行更新后,页面上相应的位置也能自动做出对应的修改,这就是数据绑定。
双向绑定:在用户操作页面(比如在Input中输入值)的时候,数据能及时发生变化,并且根据数据的变化,页面的另一处也做出对应的修改。例:淘宝中的购物车,在商品数量发生变化的时候,商品价格也能及时变化。这样便是一个双向绑定。
Angular实现了双向绑定机制。无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面。(获取input输入的值;改变值;页面的效果展示)
单向绑定:
模型变化过后,自动同步到界面上;
一般纯展示型的数据会用到单项数据绑定;使用表达式的方式都是单向的
双向绑定:
两个方向的数据自动同步:
模型发生变化自动同步到视图上;
视图上的数据发生变化过后自动同步到模型上;
Angular并没有一个双向绑定的实现,它的 双向绑定 就是 数据绑定 + 事件绑定 .模板语法 [()] ;[ ]+() = [()]
<input type="text" id="account" placeholder="请输入账号" maxlength="11" name="account" [(ngModel)]="account" />
JS知识的巩固:
数据类型的转换:
概念:
JavaScript 是一种动态类型语言,变量没有类型限制,可以随时赋予任意值。
var x = y ? 1 : 'a';
上面代码中,变量x
到底是数值还是字符串,取决于另一个变量y
的值。y
为true
时,x
是一个数值;y
为false
时,x
是一个字符串。这意味着,x
的类型没法在编译阶段就知道,必须等到运行时才能知道。
强制转换:强制转换主要指使用Number()
、String()
和Boolean()
三个函数,手动将各种类型的值,分别转换成数字、字符串或者布尔值。
自动转换:是以强制转换为基础。JavaScript 会自动转换数据类型,即转换是自动完成的,用户不可见。在运行后显示
第一种情况,不同类型的数据互相运算。
123 + 'abc' // "123abc"
第二种情况,对非布尔值类型的数据求布尔值。
if ('abc') { console.log('hello')
} // "hello"
第三种情况,对非数值类型的值使用一元运算符(即+
和-
)。
+ {foo: 'bar'} // NaN- [1, 2, 3] // NaN
自动转化为布尔值:
JavaScript 遇到预期为布尔值的地方(比如if
语句的条件部分),就会将非布尔值的参数自动转换为布尔值。系统内部会自动调用Boolean()
函数。
因此除了以下五个值,其他都是自动转为true
。
null
+0
或-0
NaN
''
(空字符串)
自动转化为字符串:字符串的自动转换,主要发生在字符串的加法运算时。当一个值为字符串,另一个值为非字符串,则后者转为字符串。这种自动转换很容易出错。
'5' + 1 // '51'
'5' + true //
"5true"
'5' + {} // "5[object Object]"
'5' + [] // "5"
'5' + function (){} // "5function (){}"
'5' + undefined // "5undefined"
'5' + null // "5null"
自动转化为数值:除了加法运算符(+
)有可能把运算子转为字符串,其他运算符都会把运算子自动转成数值。null
转为数值时为0
,而undefined
转为数值时为NaN
。
'5' - '2' // 3
'5' * '2' // 10
true - 1 // 0
false - 1 // -1
'1' - 1 // 0
'5' * [] // 0
false / '5' // 0
'abc' - 1 // NaN
null + 1 // 1
undefined + 1 // NaN
评论