VUE React Angular

作者：在线问答5 | 2024-07-07 23:55:44

踩

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>

通过构造函数创建一个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)
}
}
}

(1)HTML绑定：{ {}}

(2)属性绑定:[]

注意:属性绑定通常赋值为变量，如果赋值为常量(如字符串常量)

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/在线问答5/article/detail/797092