Vue学习笔记

发布于：2025-02-22 ⋅ 阅读:(98) ⋅ 点赞:(0)

2-19 :

(1)设置el与data的两种方法

<1>设置el的方法：

1.常规方法，较为固定化设置el

const v = Vue({

el : '#root', //getElementById('root');
data : {

} 

});

2.此方法更灵活些。

const v = Vue({

data : {

} 

});


v.$mount('#root');


const v = Vue({

data : {

} 

});

setTimeout(() => {
v.$mount('#root');
},3000);

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <div id = "root">
        <h1>{{name}}</h1>
    </div>
    <script>
        const v = new Vue({
            //el : '#root',
            data: {
                name : "Jack"
            }
        });
        console.log(v);
        v.$mount('#root');
    </script>
    
</body>
</html>

 <2>设置data的两种方式

1、对象式设置 :

const v = Vue({

data : {
  name : "Jack"
} 

});

setTimeout(() => {
v.$mount('#root');
},3000);

2、函数式设置：

const v = Vue({

data : function(){

return {
name : "Jack",
age : 18

}
}

});

setTimeout(() => {
v.$mount('#root');
},3000);

这部分的全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <div id = "root">
        <h1>{{name}}</h1>
    </div>
    <script>
        const v = new Vue({
            //el : '#root',
            // data: {
            //     name : "Jack"
            // }

            // data : function(){
            //     return {
            //         name : "Brown",
            //         age :20
            //     }
            // }


            data(){
                return {
                    name : "OO",
                    age : 19
                }
            }
        });
        console.log(v);
        v.$mount('#root'); //挂载
    </script>
    
</body>
</html>

（2）MVVM模型

MVVM（Model-View-ViewModel）是一种软件架构模式，旨在将应用程序的用户界面（View）、业务逻辑（Model）和视图逻辑（ViewModel）分离，从而提高代码的可维护性和可测试性。

1. 模型（Model）

  • 定义：模型代表应用程序的数据和业务逻辑，负责处理数据的存取、处理和操作。它通常包含数据结构、数据库操作、网络请求等。

  • 职责：

    • 管理应用程序的数据。
    • 定义数据的结构（如表单字段、数据库表结构等）。
    • 处理数据的增删改查操作。
    • 提供数据验证和业务逻辑。

  • 示例：

  // 定义用户模型
  interface UserModel {
    id: string;
    username: string;
    email: string;
    createdAt: Date;
  }

  // 用户服务类
  export class UserService {
    async addUser(user: UserModel) {
      // 使用 ORM 进行数据库操作
      await this.db.insert(UserModel).values({ ...user });
      return user;
    }

    async removeUser(id: string) {
      // 删除用户
      await this.db.delete(UserModel).where(UserModel.id === id).catch(() => null);
      return true;
    }
  }

2. 视图（View）

  • 定义：视图是应用程序的用户界面，负责展示数据给用户。它可以是 HTML 页面、React 组件或其他前端组件。

  • 职责：

    • 显示或编辑模型的数据。
    • 提供用户交互（如表单提交、搜索、筛选等）。
    • 负责数据的渲染和更新。

  • 示例：

  // 用户列表视图组件
  function UserListView({ users, onRemove }) {
    return (
      <div>
        <h1>User List</h1>
        <div className="user-list">
          {users.map((user) => (
            <div key={user.id}>
              <div>Username: {user.username}</div>
              <div>Email: {user.email}</div>
              <button onClick={() => onRemove(user.id)}>Remove</button>
            </div>
          ))}
        </div>
      </div>
    );
  }

3. 视图模型（ViewModel）

  • 定义：视图模型是介于模型和视图之间的组件，负责将模型的数据传递给视图，同时将视图的输入数据同步到模型。它通常继承自 ViewModel 类，并使用单向绑定机制。

  • 职责：

    • 将模型数据传递给视图。
    • 将视图的输入数据更新模型。
    • 实现数据的双向绑定。
    • 处理数据的增删改查操作。

  • 示例：

  // 用户视图模型
  class UserViewModel {
    constructor(userService) {
      this.userService = userService;
      this.users = [];
    }

    async loadUsers() {
      // 加载用户数据
      this.users = await this.userService.getUsers();
    }

    async removeUser(id) {
      // 删除用户
      await this.userService.removeUser(id);
      this.loadUsers(); // 重新加载用户列表
    }
  }

4. MVVM 模式的工作原理

MVVM 模式通过视图模型将模型和视图连接起来，实现数据的双向绑定。当视图发生改变时，视图模型会自动更新模型；当模型发生改变时，视图模型也会同步更新视图。

步骤：

  1. 定义模型：创建一个模型类，定义数据结构和业务逻辑。
  2. 创建服务：定义处理模型数据的业务逻辑，如增删改查。
  3. 创建视图：设计用户界面，显示和编辑模型数据。
  4. 创建视图模型：实现数据的双向绑定，将模型和视图连接起来。
  5. 绑定视图模型：将视图模型实例注入到视图组件中，实现数据同步。

5. MVVM 模式的优势

  • 数据一致性：通过视图模型实现数据的双向绑定，确保数据在模型和视图之间的一致性。
  • 分离关注点：将数据逻辑、用户界面逻辑和业务逻辑分离，提高代码的可维护性和可扩展性。
  • 快速开发：通过组件化和模板化，减少重复代码，加快开发速度。
  • 动态更新：视图可以根据视图模型的绑定动态更新，无需手动刷新。

6. MVVM 模式的常见应用场景

  • 表单管理：处理表单数据的增删改查操作。
  • 数据展示：展示数据库中的数据，支持筛选、排序、搜索。
  • 用户管理：管理用户表中的数据，如注册、登录、编辑、删除。
  • 订单管理：处理订单数据的增删改查，显示订单详情。

 (3)数据代理：

在 JavaScript 和 Vue.js 中，数据代理（Data Proxy）是一种设计模式，允许通过一个对象来访问和操作另一个对象的属性。

JavaScript 中的数据代理

在 JavaScript 中，数据代理通常通过 Object.defineProperty() 或 ES6 的 Proxy 对象来实现。

  1. 使用 Object.defineProperty()：该方法可以在对象上定义新属性，或修改现有属性的特性。通过为对象的属性定义 getter 和 setter，可以拦截对该属性的访问和修改，实现数据代理。

    let target = { x: 100 };
let proxy = {};
Object.defineProperty(proxy, 'x', {
  get() {
    return target.x;
  },
  set(value) {
    target.x = value;
  }
});
proxy.x = 200; // 实际上是修改 target.x
console.log(target.x); // 输出 200

  2. 使用 Proxy 对象：Proxy 是 ES6 引入的功能，允许创建一个对象来代理另一个对象的操作。它可以拦截对对象的各种操作，如读取、写入、函数调用等。

    let target = { x: 100 };
let handler = {
  get(target, prop) {
    return prop in target ? target[prop] : 42; // 默认值
  },
  set(target, prop, value) {
    target[prop] = value;
    return true; // 表示设置成功
  }
};
let proxy = new Proxy(target, handler);
console.log(proxy.x); // 输出 100
proxy.x = 200;
console.log(target.x); // 输出 200

Vue.js 中的数据代理

在 Vue.js 中，数据代理是指通过 Vue 实例来访问和操作 data 对象中的属性。这使得我们可以直接在模板中使用 data 中的属性，而无需通过 this._data 或其他方式访问。

Vue.js 在 2.x 版本中使用 Object.defineProperty() 实现数据代理。当我们在 Vue 实例的 data 选项中定义属性时，Vue 会通过 Object.defineProperty() 为每个属性添加 getter 和 setter，从而实现对属性的访问和修改的拦截。

const vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});
console.log(vm.message); // 输出 'Hello, Vue!'
vm.message = 'Hello, World!';
console.log(vm.message); // 输出 'Hello, World!'

在 Vue 3.x 版本中，Vue 改用了 Proxy 对象来实现数据代理。Proxy 提供了更强大的拦截能力，能够更方便地处理对象的各种操作。

const vm = Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue 3!'
    };
  }
}).mount('#app');
console.log(vm.message); // 输出 'Hello, Vue 3!'
vm.message = 'Hello, World!';
console.log(vm.message); // 输出 'Hello, World!'

通过数据代理，Vue.js 实现了响应式数据绑定，使得视图和数据保持同步，简化了开发者的工作。

需要注意的是，Object.defineProperty() 和 Proxy 在性能和功能上有所差异。Proxy 更加灵活，能够拦截更多种类的操作，但在某些老旧浏览器中可能不被支持。因此，Vue.js 在 2.x 版本中使用 Object.defineProperty()，而在 3.x 版本中使用 Proxy。

总之，数据代理是一种通过代理对象来访问和操作另一个对象属性的设计模式，在 JavaScript 和 Vue.js 中都有广泛应用。

//实现数据绑定,数据代理
        const Person = {
            name : 'Jck',
            age : 18
        }
       
        const Dog = {
            name : 'Mimi',
            age : 3
        }

        Object.defineProperty(Person,'It is your dog?',{
            get(){
                console.log("有人询问你:你的狗叫什么名字");
                return Dog.name;
            },
            set(value){
                console.log("你修改了你的狗的名字，它的新名字是 ： ",value);
                Dog.name = value;
            }
        });

        Object.defineProperty(Dog,'Who is your master?',{
            get(){
                return Person.name;
            },

            set(value){
                Person.name = value;
            }
        })

 

 

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布