VUE React Angular

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>
  1. 通过构造函数创建一个Vue实例 new Vue(),此时app就相当于 new Vue;
  2. 传入el,el是Vue对象中必不可少的,需要把el挂载到页面已存在的DOM(可以是DOM元素,或者是CSS选择器)上
  3. 在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)属性绑定:[]

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值