Typescript, ES6 & ES5
React 专注于使用 Javascript ES6
Vue 使用 Javascript ES5 或 ES6
Angular 依赖于 TypeScript
模板 —— JSX 还是 HTML
React — JSX:可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构(DOM结构)的语法,它的目的不是要在浏览器或者引擎中实现,它的目的是通过各种编译器将这些标记编译成标准的JS语言
Vue 具有“单个文件组件”
Angular 模板使用特殊的 Angular 语法(比如 ngIf 或 ngFor)来增强 HTML框架和库
框架和库
React 和 Vue 是很灵活的。他们的库可以和各种包搭配(有了 React,甚至可以交换库本身的 API 兼容替代品)
Angular 是一个框架,因为它提供了关于如何构建应用程序的强有力的约束,并且还提供了更多开箱即用的功能。Angular 还有一个令人困惑的构建工具,样板,检查器(linter)和时间片来处理。
状态管理和数据绑定
React 经常与 Redux 在一起使用。Redux 以三个基本原则来自述:1、单一数据源(Single source of truth)2、State 是只读的(State is read-only)3、使用纯函数执行修改(Changes are made with pure functions)整个应用程序的状态存储在单个 store 的状态树中。这有助于调试应用程序,一些功能更容易实现。状态是只读的,只能通过 action 来改变,以避免竞争条件(这也有助于调试)。React 只有一种方法:先更新 model,然后渲染 UI 元素。React 的方式会有更好的数据总览,因为数据只能在一个方向上流动
Vue 可以使用 Redux,但它提供了 Vuex 作为自己的解决方案
双向绑定—当 UI 元素(例如,用户输入)被更新时,Angular 的双向绑定改变 model 状态。Angular 的方式实现起来代码更干净,开发人员更容易实现
Vue数据绑定
双向绑定(面试考点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<h1>{
{message}}</h1> // {
{message}}模板的输出方式
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app', // app是Vue实例的挂在对象
data: {
message: "Hello world" // 字面量
}
})
</script>
</body>
</html>
- 通过构造函数创建一个Vue实例 new Vue(),此时app就相当于 new Vue;
- 传入el,el是Vue对象中必不可少的,需要把el挂载到页面已存在的DOM(可以是DOM元素,或者是CSS选择器)上
- 在input标签上有一个v-model指令,它的值和Vue实例中data里的message对应,input可以修改message的值,同时当message改变时也可以体现在视图上;
React数据绑定
单向数据绑定
1.在constructor里注册数据
constructor(){
super();
this.title="注册"
}
2.使用{}进行数据绑定
<h3>{this.title}</h3>
双向数据绑定
1.在constructor里用this.state注册数据
constructor(){
super();
this.state={
user:"",
pass:"",
loginSuccess:false
}
}
2.使用onChange事件监听数据变化并赋值给this.state
handeChange(item,event){
for(let StateItem in this.state){
if(item===StateItem){
this.state[item]=event.target.value;
this.setState(this.state)
}
}
}
<div className="input-box">
<label htmlFor="" >用户名</label><input type="text" onChange={this.handeChange.bind(this,"user")} value={this.state.user}/>
</div>
<div className="input-box">
<label htmlFor="">密码</label><input type="password" onChange={this.handeChange.bind(this,"pass")} value={this.state.pass}/>
</div>
(1)HTML绑定:{ {}}
(2)属性绑定:[]