![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：其实, 颠覆本行业的, 往往都是外行人, 例如, 美团颠覆了外卖行业,但自己却并不是餐食企业
Collection
Collection
然后在html调用两者，进行实现。
test1.js
let username = "admin";
console.log(username);
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>通过不同的js文件来模拟模块</title></head><body><script src="test1.js"></script><script src="test2.js"></script></body></html>
// 模块// export let id = 1;// export let username = "peter-zhu";// export let email = "peter@php.cn";let id = 1;let username = "peter-zhu";let email = "peter@php.cn";// 首选export { id, username, email };// 函数// export function say() {// return "Hello " + username;// }// 类// export class Product {// constructor(name, price) {// this.name = name;// this.price = price;// }// }// 函数function say() {return "Hello " + username;}// 类class Product {constructor(name, price) {this.name = name;this.price = price;}}// 统一导出// export { say, Product };export { say as sayHello, Product };// sayHello就是别名// 不支持下面这种动态导出，同样html中不支持动态导入// if (true) {// export status = true;// }
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>模块</title></head><body><script src="module/user.js" type="module"></script><script type="module">// es6模块: 静态import { id, username, email } from "./module/user.js";console.log(id);console.log(username);console.log(email);function say() {}// 导入的别名函数import { sayHello } from "./module/user.js";console.log(sayHello());import { Product } from "./module/user.js";// 类的实例化console.log(new Product("方便面", 10));</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>统一导入全部成员</title></head><body><script src="./module/user.js" type="module"></script><script type="module">// 用*代码外部导入的全部模块成员// 用user对象表示所有模块导入的外部成员在本脚本中的"挂载点/对象"import * as user from "./module/user.js";console.log(user);// 这个时候所有的导入变成一个对象，具体见下面的图。然后就可以像访问对象一样访问对象属性了。console.log(user.username, user.email);console.log(user.sayHello());console.log(new user.Product("电脑", 8999));console.log(new user.Product("电脑", 8999).name);console.log(new user.Product("电脑", 8999).price);//下面这种动态的模块目前是不支持的。// if (true) {// import { id } from "./module/user.js";// }</script></body></html>
将import中的所有东西变成一个对象。下面是通过console.log看到的东西。
js中的默认值设置只有一个，在import中可以随意设置名称来进行绑定
default.js内容
// export default 250;// 因为一个模块仅允许有一个默认值// export default function () {// return "我是模块中的默认函数";// }function hello() {return "我是模块中的默认函数";}// 默认成员export default hello;let count = 100;let username = "admin";// 非默认成员export { count, username };// 模块的私有成员let password = "88899";
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>模块默认值</title></head><body><script type="module">// import a from "./module/default.js";// console.log(a);// import b from "./module/default.js";// console.log(b());// a或者b名称不重要，因为一般默认值只有一个。// 导入时,如果既有默认成员 , 又有非默认成员。默认成员写到最前面。import b, { count, username } from "./module/default.js";console.log(b());console.log(count, username);</script></body></html>
网上有一段对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对服务器的压力相对大一些？
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- 引入vue.js库 --><script src="lib/vue.js"></script><title>Vue实例</title></head><body><!-- 在页面的挂载点中使用插值来显示变量表达式的值。也叫“大胡子模式” --><!-- vue的一个作用就是将页面中需要展示的数据不断承接、接管过来 --><div class="app">{{words}}</div><script>// vue实例const vm = new Vue({// 配置// 1. 挂载点// el: document.querySelector(".app"), 也可以简化为下面的el: ".app",// 2. 挂载点中的数据对象/ Model / 模型层data: {words: "Hello php中文网",},});// 下面两个是一致的，第一个是原生访问，data前面必须加$。这个叫"数据代理/委托"console.log(vm.$data.words);// console.log(vm.words);console.log(vm.$data.words === vm.words);</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>数据代理/委托</title></head><body><script>const user = {$base: {name: "peter zhu",email: "peter@php.cn",},$private: {mobile: "139*********",salary: 999999,},};console.log(user.$base.name);console.log(user.$base.email);console.log("-------------------");// 数据访问代理。o：相当于做了一个快捷方式。// user.$base.name , 想用: user.name就能访问,绕过了$base// name的访问代理Object.defineProperty(user, "name", {get: () => user.$base.name,set: (value) => (user.$base.name = value),});console.log(user.name);// user.$base.name = "jack";user.name = "Mike";console.log(user.name);// email的访问代理Object.defineProperty(user, "email", {get: () => user.$base.email,set: (value) => (user.$base.email = value),});console.log(user.email);user.email = "a@qq.com";console.log(user.email);</script></body></html>
天蓬老师