From 61972201f1c67857fe2dd51b809e5a1e78036119 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E9=83=81=E9=BD=90?= <2050634948@qq.com> Date: Sun, 2 Apr 2023 15:03:00 +0000 Subject: [PATCH 1/6] =?UTF-8?q?=E6=96=B0=E5=BB=BA=2046=E7=8E=8B=E9=83=81?= =?UTF-8?q?=E9=BD=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "46\347\216\213\351\203\201\351\275\220/.keep" | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 "46\347\216\213\351\203\201\351\275\220/.keep" diff --git "a/46\347\216\213\351\203\201\351\275\220/.keep" "b/46\347\216\213\351\203\201\351\275\220/.keep" new file mode 100644 index 0000000..e69de29 -- Gitee From afed4c5c4e44479b3d3f679156b74359783d9b0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E9=83=81=E9=BD=90?= <2050634948@qq.com> Date: Sun, 2 Apr 2023 15:03:38 +0000 Subject: [PATCH 2/6] 1 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 王郁齐 <2050634948@qq.com> --- .../20230328_\345\210\235\345\247\213.md" | 22 ++++++ .../20230331_\345\210\233\345\273\272.md" | 67 +++++++++++++++++++ 2 files changed, 89 insertions(+) create mode 100644 "46\347\216\213\351\203\201\351\275\220/20230328_\345\210\235\345\247\213.md" create mode 100644 "46\347\216\213\351\203\201\351\275\220/20230331_\345\210\233\345\273\272.md" diff --git "a/46\347\216\213\351\203\201\351\275\220/20230328_\345\210\235\345\247\213.md" "b/46\347\216\213\351\203\201\351\275\220/20230328_\345\210\235\345\247\213.md" new file mode 100644 index 0000000..15422b6 --- /dev/null +++ "b/46\347\216\213\351\203\201\351\275\220/20230328_\345\210\235\345\247\213.md" @@ -0,0 +1,22 @@ +Vue.js是什么？ Vue（法语）同view(英语) + +Vue.js是一套构建用户界面（view）的MVVM框架。Vue.js的核心库只关注视图层，并且非常容易学习，非常容易与其他库或已有的项目整合。 + +1.1 Vue.js的目的 + +Vue.js的产生核心是为了解决如下三个问题： + +解决数据绑定的问题； + +Vue.js框架生产的主要目的是为了开发大兴单页面应用（SPA：Single Page Application） + +Angular.js中对PC端支持的比较良好，但是对移动端支持就一般。而Vue.js主要支持移动端，也支持PC端。 + +它还支持组件化。也就是可以将页面封装成若干个组件，采用积木式编程 ，这样是页面的复用度达到最高（支持组件化）。 +1.2 Vue.js特性 MVVM模式 M: model 业务模型，用处：处理数据，提供数据 + +V: view 用户界面、用户视图业务模型model中的数据发生改变的时候， + +用户视图view也随之变化。用户视图view改变的时候，业务模型model中的数据也可以发生改变。 + +组件化 指令系统 Vue.js 2.0开始支持虚拟DOM（Vue.js 1.0 是操作的真是DOM，而不是虚拟DOM） 虚拟DOM可以提升页面的刷新速度。 \ No newline at end of file diff --git "a/46\347\216\213\351\203\201\351\275\220/20230331_\345\210\233\345\273\272.md" "b/46\347\216\213\351\203\201\351\275\220/20230331_\345\210\233\345\273\272.md" new file mode 100644 index 0000000..7eb7095 --- /dev/null +++ "b/46\347\216\213\351\203\201\351\275\220/20230331_\345\210\233\345\273\272.md" @@ -0,0 +1,67 @@ +第一种方法yarn创建项目 首先环境都先整好 + +node.js直接下一步就行： + +下载官网:Node.js (nodejs.org) + +1.首先全局安装webpack npm install webpack -g + +2.全局安装vue脚手架 npm install -g @vue/cli-init + +3.安装Yarn yarn比npm更快更高效是Facebook发布的node.js包管理器 + +安装命令: + +npm i yarn -g -verbose + +yarn安装之后把淘宝镜像给安装下 + +yarn config set registry https://registry.npm.taobao.org + +注意vue和Yarn都需要配置环境变量 + +生成项目: + +生成之前把环境换成: npm config set chromedriver_cdnurl https://npm.taobao.org/mirrors/chromedriver + +vue init webpack 项目名 + +安装依赖: + +　#进入项目 + +　　cd 项目名 + +　　#安装依赖 + +　　yarn install + +　　#安装完成之后启动 + +　　npm run dev + +第二种方法使用vue/cli创建 vue create 项目名 + +可以先进入一个目录方便找到 + +cd D: + +D盘创建一个cs的文件夹并进入 + +mkdir cs; + +cd cs; + +创建项目 + +vue create项目名 + +选着最后一个features自定义（空格选着，回车确定） + +选择插件 + +选着vue版本 + +步骤如下: + +创建完成 \ No newline at end of file -- Gitee From e62f5326119e562c5c4b7b6c7ad636b9c4c3f9af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E9=83=81=E9=BD=90?= <2050634948@qq.com> Date: Sun, 2 Apr 2023 15:05:13 +0000 Subject: [PATCH 3/6] 1 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 王郁齐 <2050634948@qq.com> --- .../20230330_\344\273\213\347\273\215.md" | 45 +++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 "46\347\216\213\351\203\201\351\275\220/20230330_\344\273\213\347\273\215.md" diff --git "a/46\347\216\213\351\203\201\351\275\220/20230330_\344\273\213\347\273\215.md" "b/46\347\216\213\351\203\201\351\275\220/20230330_\344\273\213\347\273\215.md" new file mode 100644 index 0000000..5aba7ae --- /dev/null +++ "b/46\347\216\213\351\203\201\351\275\220/20230330_\344\273\213\347\273\215.md" @@ -0,0 +1,45 @@ +## 1.Vue的介绍 +随着前端技术的不断发展，前端开发能够处理的业务越来越多，网页也变得越来越强大和动态化，这些进步都离不开JavaScript。在目前的开发中，已经把很多服务端的代码放到了浏览器中来执行，这就产生了成千上万行的JavaScript代码，他们连接着各式各样的HTML和CSS文件，但是缺乏正规的组织形式。这也是为什么越来越多的前端开发者使用JavaScript框架的原因，目前比较流行的前端框架有Angular、Reac、Vue等。 + +Vue是一款友好的、多用途且高性能的JavaScript框架，它能够帮助你创建可维护性和可测试性更强的代码库。Vue是渐进式的JavaScript框架，也就是说，如果你已经有了现成的服务端应用，你可以将Vue作为该应用的一部分嵌入其中，带来更加丰富的交互体验。或者如果你希望将更多业务逻辑放到前端来实现，那么Vue的核心库及其生态系统也可以满足你的各式需求。 + +和其他框架一样，Vue允许你将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方。如果我们构建了一个大型的应用，可能需要将东西分割成为各自的组件和文件，使用Vue的命令行工具，使快速初始化一个真实的工程变得非常简单。 + + +## vue最大的特点：数据驱动 +## 什么是数据驱动 + + +数据驱动是Vue.js最大的特点。在vue中，所谓的数据驱动就是当数据发生变化时，用户界面发生相应的变化，开发者不需要手动的去修改DOM。 +比如，我们点击一个button，需要元素的文本做一个 “是/否” 的切换操作，在传统的jQuery中，对于页面修改的流程通常是：对button绑定事件，然后获取文案对应元素的dom对象，最后根据切换来修改dom对象的文本值。 + +## vue实现数据驱动 +vue实现数据双向绑定主要采用数据劫持，配合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter 和 getter ，在数据变动时发布消息给订阅者，触发相应监听回调。 + +当一个普通 JavaScript 对象传给 Vue 实例来作为它的 data 选项时，vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter 。用户看不到 getter/setter ，但是在内部它们让vue追踪依赖，在属性被访问和修改时通知变化。 + +vue的数据双向绑定将MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的Model的数据变化，通过Compile来解析编译模板指令（vue中用来解析{{}}模板语法），最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到 数据变化 —> 视图更新；视图交互变化（input）—> 数据model变更 双向绑定效果。 + + +![](https://img-blog.csdnimg.cn/20200405171542794.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3A0NDUwOTgzNTU=,size_16,color_FFFFFF,t_70#pic_center) + + + +## getter和setter的理解 + +当打印出vue实例下的data对象里的属性，它的每个属性都有两个对应的get和set方法。顾名思义，get为取值方法，set为赋值方法。正常情况下，取值和赋值是用 obj.prop 的方式，但是这样做有一个问题，我们如何知道对象的值改变了？ + +我们可以把get和set理解为function，当我们调用对象的属性时，会进入到 get.属性(){…} 中，先判断对象是否有这个属性，如果没有，那么就添加一个name属性，并给它赋值；如果有name属性，那么就返回name属性。可以把get看成一个取值的函数，函数的返回值就是它拿到的值。 + +当给实例赋值时，会进入 set.属性(val){…} 中，形参val就是赋给属性的值，在这个函数里做了很多事情，比如双向绑定等等。因为这个值每次都要经过set，其他方式无法对该值做修改。在ES5中，对象原型有两个属性，_defineGetter_ 和 _defineSetter_ ，专门用来给对象绑定get和set。 + + + +## 注意： + +vue3 的变化Object.defineProperty有以下缺点。 +无法监听es6的Set、Map 变化； +无法监听Class类型的数据； +属性的新加或者删除也无法监听； +数组元素的增加和删除也无法监听。 +针对Object.defineProperty的缺点，ES6 Proxy都能够完美得解决，它唯一的缺 点就是，对IE不友好,所以vue3在检测到如果是使用IE的情况下（没错，IE11都不 支持Proxy），会自动降级为Object.defineProperty的数据监听系统。 \ No newline at end of file -- Gitee From ac4b9884daddd3d0a3dccd1d0c398dd7ca662f92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E9=83=81=E9=BD=90?= <2050634948@qq.com> Date: Sun, 2 Apr 2023 15:05:38 +0000 Subject: [PATCH 4/6] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=202023?= =?UTF-8?q?0328=5F=E5=88=9D=E5=A7=8B.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "20230328_\345\210\235\345\247\213.md" | 22 ---------------------- 1 file changed, 22 deletions(-) delete mode 100644 "20230328_\345\210\235\345\247\213.md" diff --git "a/20230328_\345\210\235\345\247\213.md" "b/20230328_\345\210\235\345\247\213.md" deleted file mode 100644 index 15422b6..0000000 --- "a/20230328_\345\210\235\345\247\213.md" +++ /dev/null @@ -1,22 +0,0 @@ -Vue.js是什么？ Vue（法语）同view(英语) - -Vue.js是一套构建用户界面（view）的MVVM框架。Vue.js的核心库只关注视图层，并且非常容易学习，非常容易与其他库或已有的项目整合。 - -1.1 Vue.js的目的 - -Vue.js的产生核心是为了解决如下三个问题： - -解决数据绑定的问题； - -Vue.js框架生产的主要目的是为了开发大兴单页面应用（SPA：Single Page Application） - -Angular.js中对PC端支持的比较良好，但是对移动端支持就一般。而Vue.js主要支持移动端，也支持PC端。 - -它还支持组件化。也就是可以将页面封装成若干个组件，采用积木式编程 ，这样是页面的复用度达到最高（支持组件化）。 -1.2 Vue.js特性 MVVM模式 M: model 业务模型，用处：处理数据，提供数据 - -V: view 用户界面、用户视图业务模型model中的数据发生改变的时候， - -用户视图view也随之变化。用户视图view改变的时候，业务模型model中的数据也可以发生改变。 - -组件化 指令系统 Vue.js 2.0开始支持虚拟DOM（Vue.js 1.0 是操作的真是DOM，而不是虚拟DOM） 虚拟DOM可以提升页面的刷新速度。 \ No newline at end of file -- Gitee From 7645083f66b62710da8a3fdb050fbc6cf54288b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E9=83=81=E9=BD=90?= <2050634948@qq.com> Date: Sun, 2 Apr 2023 15:05:46 +0000 Subject: [PATCH 5/6] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=202023?= =?UTF-8?q?0330=5Fvue=E4=BB=8B=E7=BB=8D.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "20230330_vue\344\273\213\347\273\215.md" | 45 ----------------------- 1 file changed, 45 deletions(-) delete mode 100644 "20230330_vue\344\273\213\347\273\215.md" diff --git "a/20230330_vue\344\273\213\347\273\215.md" "b/20230330_vue\344\273\213\347\273\215.md" deleted file mode 100644 index 491eb00..0000000 --- "a/20230330_vue\344\273\213\347\273\215.md" +++ /dev/null @@ -1,45 +0,0 @@ -## 1.Vue的介绍 -随着前端技术的不断发展，前端开发能够处理的业务越来越多，网页也变得越来越强大和动态化，这些进步都离不开JavaScript。在目前的开发中，已经把很多服务端的代码放到了浏览器中来执行，这就产生了成千上万行的JavaScript代码，他们连接着各式各样的HTML和CSS文件，但是缺乏正规的组织形式。这也是为什么越来越多的前端开发者使用JavaScript框架的原因，目前比较流行的前端框架有Angular、Reac、Vue等。 - -Vue是一款友好的、多用途且高性能的JavaScript框架，它能够帮助你创建可维护性和可测试性更强的代码库。Vue是渐进式的JavaScript框架，也就是说，如果你已经有了现成的服务端应用，你可以将Vue作为该应用的一部分嵌入其中，带来更加丰富的交互体验。或者如果你希望将更多业务逻辑放到前端来实现，那么Vue的核心库及其生态系统也可以满足你的各式需求。 - -和其他框架一样，Vue允许你将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方。如果我们构建了一个大型的应用，可能需要将东西分割成为各自的组件和文件，使用Vue的命令行工具，使快速初始化一个真实的工程变得非常简单。 - - -## vue最大的特点：数据驱动 -## 什么是数据驱动 - - -数据驱动是Vue.js最大的特点。在vue中，所谓的数据驱动就是当数据发生变化时，用户界面发生相应的变化，开发者不需要手动的去修改DOM。 -比如，我们点击一个button，需要元素的文本做一个 “是/否” 的切换操作，在传统的jQuery中，对于页面修改的流程通常是：对button绑定事件，然后获取文案对应元素的dom对象，最后根据切换来修改dom对象的文本值。 - -## vue实现数据驱动 -vue实现数据双向绑定主要采用数据劫持，配合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter 和 getter ，在数据变动时发布消息给订阅者，触发相应监听回调。 - -当一个普通 JavaScript 对象传给 Vue 实例来作为它的 data 选项时，vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter 。用户看不到 getter/setter ，但是在内部它们让vue追踪依赖，在属性被访问和修改时通知变化。 - -vue的数据双向绑定将MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的Model的数据变化，通过Compile来解析编译模板指令（vue中用来解析{{}}模板语法），最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到 数据变化 —> 视图更新；视图交互变化（input）—> 数据model变更 双向绑定效果。 - - -![](https://img-blog.csdnimg.cn/20200405171542794.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3A0NDUwOTgzNTU=,size_16,color_FFFFFF,t_70#pic_center) - - - -## getter和setter的理解 - -当打印出vue实例下的data对象里的属性，它的每个属性都有两个对应的get和set方法。顾名思义，get为取值方法，set为赋值方法。正常情况下，取值和赋值是用 obj.prop 的方式，但是这样做有一个问题，我们如何知道对象的值改变了？ - -我们可以把get和set理解为function，当我们调用对象的属性时，会进入到 get.属性(){…} 中，先判断对象是否有这个属性，如果没有，那么就添加一个name属性，并给它赋值；如果有name属性，那么就返回name属性。可以把get看成一个取值的函数，函数的返回值就是它拿到的值。 - -当给实例赋值时，会进入 set.属性(val){…} 中，形参val就是赋给属性的值，在这个函数里做了很多事情，比如双向绑定等等。因为这个值每次都要经过set，其他方式无法对该值做修改。在ES5中，对象原型有两个属性，_defineGetter_ 和 _defineSetter_ ，专门用来给对象绑定get和set。 - - - -## 注意： - -vue3 的变化Object.defineProperty有以下缺点。 -无法监听es6的Set、Map 变化； -无法监听Class类型的数据； -属性的新加或者删除也无法监听； -数组元素的增加和删除也无法监听。 -针对Object.defineProperty的缺点，ES6 Proxy都能够完美得解决，它唯一的缺 点就是，对IE不友好,所以vue3在检测到如果是使用IE的情况下（没错，IE11都不 支持Proxy），会自动降级为Object.defineProperty的数据监听系统。 \ No newline at end of file -- Gitee From c9eb4fb721d767cebd4af3c41f8409d0f2f0a3a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E9=83=81=E9=BD=90?= <2050634948@qq.com> Date: Sun, 2 Apr 2023 15:05:53 +0000 Subject: [PATCH 6/6] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=202023?= =?UTF-8?q?0331=5F=E5=88=9B=E5=BB=BA.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "20230331_\345\210\233\345\273\272.md" | 67 -------------------------- 1 file changed, 67 deletions(-) delete mode 100644 "20230331_\345\210\233\345\273\272.md" diff --git "a/20230331_\345\210\233\345\273\272.md" "b/20230331_\345\210\233\345\273\272.md" deleted file mode 100644 index 7eb7095..0000000 --- "a/20230331_\345\210\233\345\273\272.md" +++ /dev/null @@ -1,67 +0,0 @@ -第一种方法yarn创建项目 首先环境都先整好 - -node.js直接下一步就行： - -下载官网:Node.js (nodejs.org) - -1.首先全局安装webpack npm install webpack -g - -2.全局安装vue脚手架 npm install -g @vue/cli-init - -3.安装Yarn yarn比npm更快更高效是Facebook发布的node.js包管理器 - -安装命令: - -npm i yarn -g -verbose - -yarn安装之后把淘宝镜像给安装下 - -yarn config set registry https://registry.npm.taobao.org - -注意vue和Yarn都需要配置环境变量 - -生成项目: - -生成之前把环境换成: npm config set chromedriver_cdnurl https://npm.taobao.org/mirrors/chromedriver - -vue init webpack 项目名 - -安装依赖: - -　#进入项目 - -　　cd 项目名 - -　　#安装依赖 - -　　yarn install - -　　#安装完成之后启动 - -　　npm run dev - -第二种方法使用vue/cli创建 vue create 项目名 - -可以先进入一个目录方便找到 - -cd D: - -D盘创建一个cs的文件夹并进入 - -mkdir cs; - -cd cs; - -创建项目 - -vue create项目名 - -选着最后一个features自定义（空格选着，回车确定） - -选择插件 - -选着vue版本 - -步骤如下: - -创建完成 \ No newline at end of file -- Gitee