微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > PartIII 06 模块与vue简介（0907mon）
博主信息
博文 62
粉丝 2
评论 1
访问量 58145
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
PartIII 06 模块与vue简介（0907mon）
老黑
原创
1592人浏览过

主要内容：模块与vue简介

  1. 模块理解：通过导入js来实现一定功能
  2. 在js文件中实现export，在html的js中import
    • 四个步骤：功能模块实现 -> export -> import -> 具体功能实现
    • 包括变量、函数、类都可以export、import
    • 如果具体模块（例如变量、函数、类）与html中的定义名重复，可以通过别名的方式来实现。
    • 可以单独export、import，也可以一次性或分批
    • 用*统一导入，用对象做“挂载点”，然后用key的方式来进行调用
    • js中的默认值设置只有一个，在import中可以随意设置名称来进行绑定
  3. 按照自己的理解：vue可以认定为一个帮助dom便捷绑定数据、改变属性等的工具或插件
  4. vue中的数据代理和委托

1. 模块理解：通过导入js来实现一定功能

  • 例如分别创建两个js，一个声明，一个调用使用

  • 然后在html调用两者，进行实现。

  • test1.js

  1. let username = "admin";
  • test2.js
  1. console.log(username);
  • demo1.html
    这样就可以输入结果
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>通过不同的js文件来模拟模块</title>
  7.   </head>
  8.   <body>
  9.     <script src="test1.js"></script>
  10.     <script src="test2.js"></script>
  11.   </body>
  12. </html>

2. 在js中实现并export，在html在import并实现

  • 四个步骤：功能模块实现 -> export -> import -> 具体功能实现
  • 包括变量、函数、类
  • 两个小技巧：
    • 如果具体模块（例如变量、函数、类）与html中的定义名重复，可以通过别名的方式来实现。
    • 可以单独export、import，也可以一次性或分批
  • module目录下的user.js
  1. // 模块
  2. // export let id = 1;
  3. // export let username = "peter-zhu";
  4. // export let email = "peter@php.cn";
  6. let id = 1;
  7. let username = "peter-zhu";
  8. let email = "peter@php.cn";
  9. // 首选
  10. export { id, username, email };
  12. // 函数
  13. // export function say() {
  14. //   return "Hello " + username;
  15. // }
  17. // 类
  18. // export class Product {
  19. //   constructor(name, price) {
  20. //     this.name = name;
  21. //     this.price = price;
  22. //   }
  23. // }
  25. // 函数
  26. function say() {
  27.   return "Hello " + username;
  28. }
  30. // 类
  31. class Product {
  32.   constructor(name, price) {
  33.     this.name = name;
  34.     this.price = price;
  35.   }
  36. }
  37. // 统一导出
  38. // export { say, Product };
  39. export { say as sayHello, Product };
  40. // sayHello就是别名
  42. // 不支持下面这种动态导出，同样html中不支持动态导入
  43. // if (true) {
  44. //     export status = true;
  45. // }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>模块</title>
  7.   </head>
  8.   <body>
  9.     <script src="module/user.js" type="module"></script>
  10.     <script type="module">
  11.       // es6模块: 静态
  12.       import { id, username, email } from "./module/user.js";
  13.       console.log(id);
  14.       console.log(username);
  15.       console.log(email);
  17.       function say() {}
  19.       // 导入的别名函数
  20.       import { sayHello } from "./module/user.js";
  21.       console.log(sayHello());
  23.       import { Product } from "./module/user.js";
  25.       // 类的实例化
  26.       console.log(new Product("方便面", 10));
  27.     </script>
  28.   </body>
  29. </html>

3. 用*统一导入，用对象做“挂载点”

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>统一导入全部成员</title>
  7.   </head>
  8.   <body>
  9.     <script src="./module/user.js" type="module"></script>
  10.     <script type="module">
  11.       // 用*代码外部导入的全部模块成员
  12.       // 用user对象表示所有模块导入的外部成员在本脚本中的"挂载点/对象"
  13.       import * as user from "./module/user.js";
  14.       console.log(user);
  15.       // 这个时候所有的导入变成一个对象，具体见下面的图。然后就可以像访问对象一样访问对象属性了。
  17.       console.log(user.username, user.email);
  18.       console.log(user.sayHello());
  19.       console.log(new user.Product("电脑", 8999));
  20.       console.log(new user.Product("电脑", 8999).name);
  21.       console.log(new user.Product("电脑", 8999).price);
  23.       //下面这种动态的模块目前是不支持的。
  24.       //   if (true) {
  25.       //     import { id } from "./module/user.js";
  26.       //   }
  27.     </script>
  28.   </body>
  29. </html>

将import中的所有东西变成一个对象。下面是通过console.log看到的东西。

4. 模块使用中的默认值

  • js中的默认值设置只有一个，在import中可以随意设置名称来进行绑定

  • default.js内容

  1. // export default 250;
  2. // 因为一个模块仅允许有一个默认值
  4. // export default function () {
  5. //   return "我是模块中的默认函数";
  6. // }
  7. function hello() {
  8.   return "我是模块中的默认函数";
  9. }
  11. // 默认成员
  12. export default hello;
  14. let count = 100;
  15. let username = "admin";
  17. // 非默认成员
  18. export { count, username };
  20. // 模块的私有成员
  21. let password = "88899";
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>模块默认值</title>
  7.   </head>
  8.   <body>
  9.     <script type="module">
  10.       //   import a from "./module/default.js";
  11.       //   console.log(a);
  12.       //   import b from "./module/default.js";
  13.       //   console.log(b());
  15.       // a或者b名称不重要，因为一般默认值只有一个。
  16.       // 导入时,如果既有默认成员 , 又有非默认成员。默认成员写到最前面。
  17.       import b, { count, username } from "./module/default.js";
  18.       console.log(b());
  19.       console.log(count, username);
  20.     </script>
  21.   </body>
  22. </html>

5. 认识vue.js

  • 网上有一段对vue.js作者的访谈。这人原来是设计出身，因此对前端很感兴趣。学了js。然后有一些出品，被google招聘。

  • 采访 Vue 作者尤雨溪（下面为部分摘录）

当我在美国上大学的时候，老实说，我不知道我想要做什么，而且我的专业是室内艺术和艺术史。当我快毕业时，我感觉很难找到和专业相关的工作。

我盘算着或许我可以去一个适合我的硕士课程，学习更多的技能。我去了 Parsons，读了一个美术设计和技术的硕士。这是一个非常好的专业，因为每个人都是既学习设计也学习编程。他们会教一些比如 openFrameworks，处理，动画算法之类的课程，而且你也必须写应用程序和交互界面。

Parsons 没有真正涉及很多的 JavaScript，但是 JavaScript 很吸引我，因为它能够快速构建一些东西并分享给别人。把它放在网上，通过一个网址，任何有浏览器的人都可以看到。这就是吸引我开始 Web 开发和 JavaScript 编程的原因。

当时 Chrome experiments 这个网站刚刚发布，我深深的被震撼了。我立即开始学习 JavaScript，并开始开发类似 Chrome experiments 的项目。我把这些项目放在我的简历上，然后被 Google 创意实验室的招聘人员注意到了。我加入了Five program。每年创意实验室会招五名应届毕业生，组成一个小组，一个人写文案，一个人搞技术，一个人做平面设计，一个人统筹安排和一个打杂的。

我在 Google 的工作需要在浏览器上进行大量原型设计，于是我想要尽快获得有形的东西。当时有些项目使用了 Angular。Angular 提供了一些用数据绑定和数据驱动来处理 DOM 的方法，所以你不必自己碰 DOM。它也有一些副作用，就是按照它规定的方式来构建代码。对于当时的场景而言实在是太重了。

我想，我可以只把我​​喜欢的部分从 Angular 中提出来，建立一个非常轻巧的库，不需要那些额外的逻辑。我也很好奇 Angular 的源码到底是怎么设计的。我最开始只是想着手提取 Angular 里面很小的功能，如声明式数据绑定。Vue 大概就是这么开始的。

作者：Threeki水机
链接：https://www.jianshu.com/p/3092b382ee80
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

  • 这样的话，按照自己的理解：vue可以认定为一个帮助dom便捷绑定数据、改变属性等的工具或插件

  • vue是MVVM的一个实现，纯数据驱动。MVC对服务器的压力相对大一些？

5-1. MVC

  • M: Model, 从后台获取的数据
  • V: View, 动态展示数据
  • C: Controller, 处理用户请求,完成指定操作
  • 整个数据流是单向的

5-2. MVVM

  • mvc 的扩展。很多东西都放到了前端来执行，而非给服务器太多压力。
  • mvvm: 纯数据驱动
  • 不需要用户主动去操作 DOM 元素

" class="reference-link">

6. Vue实例

  • o：vue的一个作用就是将页面中需要展示的数据不断承接、接管过来
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <!-- 引入vue.js库 -->
  7.     <script src="lib/vue.js"></script>
  8.     <title>Vue实例</title>
  9.   </head>
  10.   <body>
  11.     <!-- 在页面的挂载点中使用插值来显示变量表达式的值。也叫“大胡子模式” -->
  12.     <!-- vue的一个作用就是将页面中需要展示的数据不断承接、接管过来 -->
  13.     <div class="app">{{words}}</div>
  14.     <script>
  15.       // vue实例
  16.       const vm = new Vue({
  17.         // 配置
  18.         // 1. 挂载点
  19.         // el: document.querySelector(".app"), 也可以简化为下面的
  20.         el: ".app",
  21.         // 2. 挂载点中的数据对象/ Model / 模型层
  22.         data: {
  23.           words: "Hello php中文网",
  24.         },
  25.       });
  27.       // 下面两个是一致的，第一个是原生访问，data前面必须加$。这个叫"数据代理/委托"
  28.       console.log(vm.$data.words);
  29.       //   console.log(vm.words);
  31.       console.log(vm.$data.words === vm.words);
  34.     </script>
  35.   </body>
  36. </html>

7. 数据代理/委托

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>数据代理/委托</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       const user = {
  11.         $base: {
  12.           name: "peter zhu",
  13.           email: "peter@php.cn",
  14.         },
  15.         $private: {
  16.           mobile: "139*********",
  17.           salary: 999999,
  18.         },
  19.       };
  21.       console.log(user.$base.name);
  22.       console.log(user.$base.email);
  23.       console.log("-------------------");
  25.       // 数据访问代理。o：相当于做了一个快捷方式。
  26.       //   user.$base.name , 想用: user.name就能访问,绕过了$base
  27.       // name的访问代理
  28.       Object.defineProperty(user, "name", {
  29.         get: () => user.$base.name,
  30.         set: (value) => (user.$base.name = value),
  31.       });
  33.       console.log(user.name);
  34.       //   user.$base.name = "jack";
  35.       user.name = "Mike";
  36.       console.log(user.name);
  38.       // email的访问代理
  39.       Object.defineProperty(user, "email", {
  40.         get: () => user.$base.email,
  41.         set: (value) => (user.$base.email = value),
  42.       });
  44.       console.log(user.email);
  45.       user.email = "a@qq.com";
  46.       console.log(user.email);
  47.     </script>
  48.   </body>
  49. </html>
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：其实, 颠覆本行业的, 往往都是外行人, 例如, 美团颠覆了外卖行业,但自己却并不是餐食企业
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录