Vue.js | 易学教程

Vue入坑——vue-cli（脚手架）搭建

阅读更多关于 Vue入坑——vue-cli（脚手架）搭建

一起学vue—— vue学习总路线 ——————————^~^我是萌萌哒分割线^~^———————————————— 语法学了，现在就该实操了。安装个脚手架试试。一、安装环境（1）、安装node 先从 node.js官方下载，安装过程很简单，这里就不赘述了（傻瓜式安装）安装完成后，用命令行输入：node -v，显示版本号，就说明安装成功安装好node以后就自带npm安装包管理工具了，npm的服务器是国外的，因此会很慢，也许对后面的操作产生影响，因此在这里安装淘宝镜像：输入： npm install -g cnpm --registry= https://registry.npm.taobao.org 安装完之后，输入：cnpm -v，显示版本号则安装成功（2）、安装webpack 输入： npm install webpack -g 这里的-g是全局安装的意思，如果不想全局安装可以不要安装好后，还是查看一下版本号以确认是否安装成功：webpack -v （3）、安装vue-cli脚手架：输入： npm install vue-cli -g 安装完后输入：vue -V（V是大写哦！）二、构建项目通过以上步骤，环境我们都搭建好了，现在开始构建我们的项目 1、在你想要建项目的目录下，打开命令行，如果安装了git，可以使用git bash here 2、输入：vue

实现Vue的双向绑定

阅读更多关于实现Vue的双向绑定

一、概述之前有讲到过 vue实现整体的整体流程，讲到过数据的响应式，是通过Object.defineProperity来实现的，当时只是举了一个小小的例子，那么再真正的vue框架里是如何实现数据的双向绑定呢？是如何将vm.data中的属性通过“v-model”和“{{}}”绑定到页面上的呢？下面我们先抛弃vue中DOM渲染的机制，自己来动手实现一双向绑定的demo。二、实现步骤 1、html部分根据Vue的语法，定义html需要绑定的DOM，如下代码 2、js部分由于直接操作DOM是非常损耗性能的，所以这里我们使用DocumentFragment（以下简称为文档片段），由于createDocumentFragment是在内存中创建的一个虚拟节点对象，所以往文档片段里添加DOM节点是不太消耗性能的；此处我们将app下面的节点都劫持到文档片段中，在文档片段中对DOM进行一些操作，然后将文档片段总体重新插入app容器里面去，而且此处插入到app中的节点都是属于文档片段的子孙节点。代码如下： 1 // 劫持DOM节点到DocumentFragment中 2 function nodeToFragment(node) { 3 var flag = document.createDocumentFragment(); 4 while (node.firstChild) { 5

vue 双向绑定

阅读更多关于 vue 双向绑定

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue双向绑定原理分析</title> </head> <style> body{ margin: 0; padding: 0; } </style> <body> <div id="app"> {{name}} </div> </body> <script> //vue类 class Vue { constructor(options={}) { this.data = options.data this.el = options.el // 数据劫持 observe(this.data) // 模版编译 compile(this.el || document.body,this) } } class Ovserver { constructor(data) { this.data = data this.walk(this.data) } walk(data) { Object.keys(data).forEach(key=>objectDefinedDate(data,key,data[key])) } } observe=(data)=>{ if (!data || typeof data !=='object') { return }

vue-cli脚手架——3.0版本项目案例

阅读更多关于 vue-cli脚手架——3.0版本项目案例

一、【准备工作】 node与git部分见 vue-cli2.0 搭建案例 vue-cli3.0 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件： CLI ： @vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令） CLI 服务： @vue/cli-service 是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供如： serve 、 build 和 inspect 命令） CLI 插件：给Vue 项目提供可选功能的 npm 包（如： Babel/TypeScript 转译、ESLint 集成、unit和 e2e测试等）全局安装过旧版本的 vue-cli (1.x 或 2.x)要先卸载它，否则vue -V查看依旧是2.x旧版： npm uninstall vue-cli -g // 或者 yarn global remove vue-cli vue-cli3.0需要 nodeJs ≥ 8.9 (官方推荐 8.11.0+，你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本） node -v // 查看版本安装@vue/cli（vue-cli 3.0的包名称由 vue-cli 改成了 @vue

Vue知识点整理

阅读更多关于 Vue知识点整理

Vue重学语法 key 的重要性由于 vue 循环时不是将 dom 元素循环创造, 而是一个 dom 元素重复使用, 而它的 diff 机制是同层元素进行对比; 如下图: 如上图: 对比的原则是父节点 A 与父节点 A 对比,下面的子节点与子节点进行对比. 如果右边的 A 节点变为 B 节点, 但是 B 下面的子元素还是 B1, B2, B3 . Vue 的 diff 机制会删除 A 节点, 同时连带下面的子节点也会删除, 并创造 B 节点, 再依次创建下面的 B1, B2, B3 子节点; 如果我们如图所示, B1,B2,B3 是循环出来的相同 dom , 在 B1 和 B2 中间加入一个 B4 节点, 如果没有设置 key 属性时, Vue 的机制是将 B2 改变成 B4 , 将 B3 改变成 B2 , 在创建一个 B3 节点; 如果有 key 属性时, 直接在 B1 与 B2 之间插入 B4 节点就可以了; 而且索引并不推荐它作为 key , 我们在进行对数组的数据操作中, 每一个数组内的元素的索引是在不断变化的,因此并不能很绝对的代表一个节点; v-for 与 v-if 不要同时出现在一个节点上建议使用 computed 过滤掉不要显示的数据后再做循环 this.$forceUpdate() 强制更新组件来源： oschina 链接： https://my

部署前后端分离项目

阅读更多关于部署前后端分离项目

路飞前后端项目部署前言使用软件 vue 部署前段 uwsgi uWSGI是一个全功能的HTTP服务器，实现了WSGI协议、uwsgi协议、http协议等。它要做的就是把HTTP协议转化成语言支持的网络协议。比如把HTTP协议转化成WSGI协议，让Python可以直接使用。 centos7 系统环境 virtulenv 在虚拟环境中部署后端项目 nginx 使用nginx做反向代理 redis 存储数据 mysql(mariadb) 存储数据 supervisor Linux/Unix系统下的一个进程管理工具，不支持Windows系统。它可以很方便的监听、启动、停止、重启一个或多个进程。用Supervisor管理的进程，当一个进程意外被杀死，supervisort监听到进程死后，会自动将它重新拉起，很方便的做到进程自动恢复的功能，不再需要自己写shell脚本来控制。项目部署准备工作 1 将项目上传到服务器上方法一:使用xftp工具，进项上传文件夹，将项目代码，传到linux服务器当中这个页面操作,实在不会百度方式2: 使用scp从本地将文件上传到linux服务器中 scp -r 本地文件夹远程用户名@远程ip:远程文件夹/ 2 将mysql数据迁移到服务器数据库服务器端安装mysql(mariadb)数据库链接: https://www.cnblogs.com

Node-SASS安装 scss

阅读更多关于 Node-SASS安装 scss

今天第一次用vue-cli 构建一个项目时，前期一直很正常，在编写了sass 时就报错了，错误如下 This dependency was not found: * !!vue-style-loader!css-loader?{"sourceMap":false}!../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-211ec51b","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":false}!../../../node_modules/vue-loader/lib/selector?type=styles&index=1!./index.vue in ./src/views/login/index.vue To install it, you can run: npm install --save !!vue-style-loader!css-loader?{"sourceMap":false}!../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-211ec51b",

npm install vue-cli -g 报错

阅读更多关于 npm install vue-cli -g 报错

npm 安装vue脚手架报错报错详情 npm ERR! Unexpected end of JSON input while parsing near '...TuHxXJaknDulF3AdSBoul' npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\xxx\AppData\Roaming\npm-cache\_logs\2019-12-22T03_12_06_342Z-debug.log 最后解决方法 npm cache clean --force npm i -g npm 不行再试一遍这些 npm ls --depth 0 -g // 看看哪些失效了 npm prune -g // 修剪下全局包 npm rebuild -g // 重建下全局包 npm update -g // 更新下全局包的版本 npm cache clear --force -g // 删除全局包的缓存（慎重）对了重装是没有用得（我试过了）再次安装 C:\Users\xxx>npm install vue-cli -g npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli npm

Recommended strategy to sync vuex state with server

阅读更多关于 Recommended strategy to sync vuex state with server

问题 Imagine this simple case. You have a Vue JS application in which users can create lists of tasks and sort them. These lists should be stored in a database by the server. Let's assume we have a ListComponent which does the bulk of the UX. My question is, which pattern should I use to handle front-end and back-end data synchronisation? A) Go through vuex : Store the active lists (those being shown, edited or created) in the vuex store . The ListComponent will change the store and then , the

Recommended strategy to sync vuex state with server

阅读更多关于 Recommended strategy to sync vuex state with server

订阅 Vue.js