什么是绑定语法
让HTML中的内容也可随程序中的变量改变而自动改变！——也就是给HTML中添加变量功能。
一. Vue.js
1. 文本插值
{ { }}Mustache标签
<span>Hello {
{
name }}</span>
原理：
(1). 首次加载页面内容时，会用data中同名变量的初始值代替{
{变量名}}位置
(2). 当data中同名变量在new Vue()中被更改时，自动更新{
{变量名}}位置为新值
2. 指令
什么是: 为HTML元素添加新功能的特殊属性
包括: 13种
(1).元素的属性值动态改变：v-bind指令
(2).控制元素的显示隐藏
v-show:
a. 如何: <元素 v-show=“js条件”>
b. 原理: new Vue()扫描到v-show时，自动执行js条件，如果条件为true，则该元素原样显示。否则如果js条件执行结果为false，则new Vue()自动为当前元素加display:none，隐藏
v-if:
a. 也能控制一个元素显示隐藏，上例中v-show可直接换成v-if。
b. 但是原理不同：v-if在扫描时，如果条件为true，则保留该元素。否则如果条件为false，则删除该元素！
v-show vs v-if
v-show 采用display:none方式隐藏元素，不改变DOM树，效率高！
v-if 采用添加删除元素方式控制元素显示隐藏，可能频繁修改DOM树，效率低！
(3).控制两个元素二选一显示:
<元素1 v-if="条件">
<元素2 v-else>
(4).控制多个元素多选一显示:
<元素1 v-if="条件1">
<元素2 v-if="条件2">
... ...
<元素n v-else>
(5).反复生成多个相同结构的HTML元素: v-for
<要反复生成的元素 v-for="(value, i) of 数组">
v-for一定要放在那个要反复生成的元素上，而不是放在父元素上！
注意：如果v-for遍历的是数组时，在程序中通过下标修改数组元素值，页面上的HTML元素不会自动更改！
解决:
用数组家函数！才能自动更新页面，函数都是受监控的。数组中的数字类型的下标012…无法添加访问器属性，也就不受监控！
为什么v-for必须加:key
避免修改数组元素时，重新生成所有HTML元素，而是只更新其中一个HTML元素即可！提高修改效率！
(6).绑定HTML片段内容:v-html
{
{}}本质相当于DOM中的textContent，会将HTML内容原样显示，不会被编译！
绑定的变量内容是一段HTML片段时，都用v-html来绑定！
(7).防止用户短暂看到{ {}}
<h1 v-cloak>Welcome: {
{
uname}}</h1>
[v-cloak]{
display:none
}
<元素 v-text="包含{
{}}的js表达式"></元素>
(8).绑定事件
<元素 @事件名="处理函数(参数值,$event)" />
(9).只在首次加载页面时绑定一次: v-once
(10).阻止内容中的{ {}}被vue编译: v-pre
3. 双向绑定v-model
既能将data中的变量值，自动同步更新到HTML页面中。又能讲页面上的修改自动更新回data的变量中。
只有绑定表单元素时，才有必要用双向绑定！
因为只有表单元素，用户才能在页面上修改的它的内容
每种表单元素绑定的原理不同
文本框/文本域: 绑定的是value属性
单选、多选按钮: 绑定的是checked属性
下拉选择：绑定的是select元素的value
底层原理：
//vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的
//vue是通过Object.defineProperty()来实现数据劫持的,两个常用描述属性get和set。
//get就是在读取name属性这个值触发的函数，set就是在设置name属性这个值触发的函数
//执行console.log(book.name)的同时，直接给书名加个书名号
var Book = {
}
var name = '';
Object.defineProperty(Book, 'name', {
set: function (value) {
name = value;
console.log('你取了一个书名叫做' + value);
},
get: function () {
return '《' + name + '》'
}
})
Book.name = 'vue权威指南'; // 你取了一个书名叫做vue权威指南
console.log(Book.name); // 《vue权威指南》
二. React
文本插值
{
/* jsx语法中, 使用 {} 来代表js代码范围 */}
<span>{
props.title}:</span>
事件绑定
{
/* vue和angular 中的js 和 html 代码是分开书写 */}
{
/* react中 js和 jsx 写在同一个类中, 所以使用 this 来读取方法 */}
onClick={
()={
}}
onClick={
this.jiantou}
双向数据绑定
<h3>双向数据绑定</h3>
{
/* vue: v-model ng: [(ngModel)] */}
{
/* 值绑定了 属性, 则此输出框只能靠 onChange事件来修改值, 否则将会是只读的输入框 */}
<input
type="text"
value={
this.state.word}
onChange={
this.doChange.bind(this)}
/>
doChange(event) {
//事件本身是虚拟事件, 需要还原
// event.persist(); //此代码才能看到打印的效果
// console.log(event);
console.log(event.target.value);
let newValue = event.target.value;
//实时更新数据到数据中, setState会自动更新到页面上!
this.setState({
word: newValue });
}
条件渲染
使用js提供的if判断方式来进行
show() {
//进行逻辑判断
if (this.state.isLogin) {
return this.show2();
} else {
return this.show1();
}
}
三. Angular
文本插值
<!-- 数据绑定的写法 与 vue 是相同的, 略有差异 -->
<p>{
{
name }}</p>
<!-- 对象类型使用 . 写法取值 -->
<p>{
{
boss.name }}</p>
<!-- 数组类型, 使用下标取值 [] -->
<p>{
{
names[0] }}</p>
<!-- 不支持 ++ -- -->
<!-- <p>{
{
age++ }}</p> -->
<!-- 逻辑与&& 逻辑或|| 逻辑非! -->
<p>{
{
age < 19 && age > 18 }}</p>
<!-- 对象方法调用 -->
<p>{
{
enname.toUpperCase() }}</p>
<!-- 方法调用 -->
<p>{
{
show() }}</p>
<!-- vue的差异: -->
<!-- ng 不支持实例化操作 -->
<!-- <p>{
{
new Date() }}</p> -->
<!-- 不支持JSON格式化写法 -->
<!-- <p>{
{
JSON.stringify(boss) }}</p> -->
属性和事件的绑定
<!-- 属性的绑定 -->
<h2 title="{
{ title }}">标题1</h2>
<!-- 另一种写法, 更加推荐 -->
<h2 [title]="title">标题2</h2>
<p [style]="{ color: 'green', 'font-size': '30px' }">属性绑定</p>
<!-- vue中事件绑定的写法: v-on:click 简写:@click -->
<button (click)="show()">点我</button>
循环
<!-- 快捷: ng-for-index -->
<li *ngFor="let item of names; let i = index">
条件渲染
<h3 *ngIf="score >= 90">优秀</h3>
<p *ngSwitchCase="0">欢迎9号机,来自艾欧尼亚的黑铁大神</p>
<p *ngSwitchCase="1">欢迎9号机,来自艾欧尼亚的青铜大神</p>
双向数据绑定
<!-- (ngModelChange)="" 类似于 vue中的@change=""; 检测输入框中值的变化 -->
<input type="text" [(ngModel)]="data" (ngModelChange)="doChange()" />
<input type="text" [(ngModel)]="data" />
<!--
切记: 默认angular不提供Form表单的双向绑定功能!
必须在配置文件中进行加载才可以! app.module.ts
-->