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
    评论
Vue, React, and Angular are all popular JavaScript frameworks used for building web applications. Vue is a relatively lightweight framework that is known for its simplicity and ease of use. It is often favored by developers who are new to JavaScript frameworks or who prefer a more minimalist approach to development. Vue also has a strong focus on performance and can be used for building both small and large-scale applications. React is developed and maintained by Facebook and is widely used for building complex user interfaces. It uses a virtual DOM and a one-way data flow model which enables it to efficiently manage state and handle large amounts of data. React can be used with other libraries and frameworks, making it highly flexible and customizable. Angular is a full-featured framework developed by Google. It is known for its powerful features and its ability to handle large and complex applications. Angular uses a two-way data binding approach and has a steep learning curve compared to Vue and React. However, it offers a wide range of features, including dependency injection, routing, and animations, making it a popular choice for enterprise-level applications. Ultimately, the choice between Vue, React, and Angular will depend on the specific needs and preferences of the developer or development team. Each framework has its own strengths and weaknesses, and the decision should be based on the project requirements, available resources, and the experience level of the developers involved.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值