weixin_44867717的博客

原创 (六) -示例：Nuxt.js ——realworld-在线全套测试应用，含页面展示、接口api、样式代码

示例：Nuxt.js ——realworld-在线全套测试应用，含页面展示、接口api、样式代码视图模板布局Vuex 状态树经典方式模块方式插件配置命令和部署Nuxt.js 提供了一系列常用的命令, 用于开发或发布部署。命令描述nuxt启动一个热加载的Web服务器（开发模式） localhost:3000。nuxt build利用webpac...

原创 (五) -生命周期——客户端和服务端都调用-beforeCreate和created & create阶段仅客户端-$isServer

生命周期——客户端和服务端都调用-beforeCreate和created & create阶段仅客户端生命周期钩子需要注意的是，在任何 Vue 组件的生命周期内， 只有 beforeCreate 和 created 这两个方法会在 客户端和服务端被调用。其他生命周期函数仅在客户端被调用。前后端都调用：beforeCreatecreated在服务端渲染期间不被调用：...

原创 (四)02 -服务端和客户端执行——axios.get()异步获取数据 从浏览器（客户端）发出XMLHttpRequests & 从node.js（服务端）发出HTTP请求

服务端和客户端执行——axios.get()异步获取数据 从浏览器（客户端）发出XMLHttpRequests & 从node.js（服务端）发出HTTP请求github文档：https://github.com/axios/axiosasync异步数据会在组件创建之前执行（服务端）路由跳转的时候执行（客户端）axios基于Promise的HTTP客户端，可用于浏览器（...

原创 (四)01 -异步数据——asyncData方法获取异步数据 & Nuxt.js提供使用 async方法获取接口数据 & 在线测试接口的使用

异步数据——asyncData方法获取异步数据 & Nuxt.js提供使用 async方法获取接口数据 & 在线测试接口的使用教程Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。asyncData 方法asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更...

原创 (三) -演示单页——页面变化但是不会刷新跳转

演示单页——页面变化但是不会刷新跳转使用的 history-历史管理 模式实现的，而#是hash模式演示页面绑定数据（服务端渲染的）要在页面之间使用路由，我们建议使用<nuxt-link> 标签。例如:<template> <nuxt-link to="/">首页</nuxt-link></template>1...

原创 (二) -Nuxt创建项目

创建项目使用脚手架创建项目：npx create-nuxt-app 项目名称cd 项目目录npm run dev从头开始新建项目目录结构路由自动配置路由默认会把 pages 中的页面，自动生成路由配置信息手动配置路由创建 nuxt.config.js配置module.exports = { router: { // routes 默认的路由...

原创 (二)03 -自定义路由-extendRoutes-扩展路由-自定义404页面

自定义路由-extendRoutes-扩展路由-自定义404页面配置router该配置项可用于覆盖 Nuxt.js 默认的 vue-router 配置。关于 router 配置项的详细文档extendRoutes-扩展路由类型: Function您可能希望扩展Nuxt.js创建的路由。您可以通过extendRoutes选项执行此操作。例如添加自定义路由:第十一步：新建nuxt...

原创 (二)02 -路由——基础路由-pages的目录结构 & 路由参数校验-Nuxt.js在动态路由组件中定义参数校验方法 & 嵌套路由-通过vue-router的子路由创建Nuxt.js应用的嵌套路由

路由——基础路由-pages的目录结构 & 路由参数校验-Nuxt.js 可以让你在动态路由组件中定义参数校验方法 & 嵌套路由-通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由路由教程Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。要在页面之间使用路由，我们建议使用 标签。例如:<temp...

原创 (二)01 -Nuxt-基于 Vue.js 的通用应用框架 & 安装-基于node.js，服务端执行该代码

NuxtNuxt.js 是一个基于 Vue.js 的通用应用框架。官网 ：https://nuxtjs.org/介绍：https://zh.nuxtjs.org/guideNuxt.js 集成了以下组件/框架，用于开发完整而强大的 Web 应用：Vue 2Vue-RouterVuex (当配置了 Vuex 状态树配置项 时才会引入)Vue 服务器端渲染 (排除使用 mode:...

原创 (一)02 -Vue的SSR演示——服务端渲染-基于vue渲染，把vue模板转换成html字符串，输出给浏览器，有利于seo，但既有客户端代码，又有服务端代码，较麻烦

示例1：基于node的程序第一步：在命令行中输入如下，生成package.json文件npm init -y第二步：新建app1.js文件，运行在node环境中渲染一个-vue-实例 ：基础模板代码进行修改// 第 1 步：创建一个 Vue 实例const Vue = require('vue') //导入vue //创建vue实例const app = new Vue...

原创 (一)01 -vue的服务端渲染SSR——通用，大部分代码都可以在服务器和客户端上运行

vue的服务端渲染——通用，大部分代码都可以在服务器和客户端上运行介绍Server Side Render (服务端渲染 SSR)：服务器直接生成 HTML 文档返回给浏览器，但页面交互能力有限。适合于任何后端技术：PHP、Java、Python、Go 等。优点：响应速度快(首屏渲染速度快)，有利于 SEO（搜索引擎优化）缺点：前后端代码混合在一起，难以开发和维护，不适合进行前后端分离...

原创 (四)03 -JavaScript 方式调用的组件——$mount()不带参数，会把组件在内存中渲染完毕 & Vue.extend()根据组件对象，创建一个组件的构造函数& $el组件对应的dom元素

JavaScript 方式调用的组件——$mount()不带参数，会把组件在内存中渲染完毕 & Vue.extend()根据组件对象，创建一个组件的构造函数 & $el组件对应的dom元素**需求：**JS方式调用弹出框步骤：1.把.vue文件当成模块加载到index.js中import MyModal from './index.vue'2.通过Vue.extend()...

原创 (四)02 -v-model的使用——是双向的，是语法糖-简化写法 & $event 是事件处理函数的参数 & v-model 默认是隐藏的-参数是false& $event 是事件处理函数的参数

v-model的使用——是双向的，是语法糖-简化写法 & $event 是事件处理函数的参数 & v-model 默认是隐藏的-参数是falsev-bind是单向传递数据的，v-mode是双向的，是语法糖-简化写法v-model 等价于 v-bind:value="searchText" v-on:input="searchText = $event"在组件上使用 ...

原创 (四)01 -模态框组件——codepen.io使用方法 & 组件的新建、引入、注册、使用 & v-model双向控制显示和隐藏

模态框组件——codepen.io使用方法 & 组件的新建、引入、注册、使用 & v-model双向控制显示和隐藏模态框组件-codepen.io测试codepen.io使用方法：第一步：打开官网 https://codepen.io/，用途：构建、测试和发现前端代码的最佳场所。第二步：输入关键词进行搜索，如：vue modal第三步：列表中选择一个样例进行演示第四步：...

原创 (三) -动态组件和异步组件——使用 keep-alive和:is 保存动态组件的状态 & 路由的懒加载，就是加载异步组件-用到的时候加载，不用的时候不加载

动态组件和异步组件——使用 keep-alive 和:is保存动态组件的状态 & 路由的懒加载，就是加载异步组件-用到的时候加载，不用的时候不加载例如：登录和注册切换的时候——类似于v-show，但其不能缓存组件地址：动态组件和异步组件动态组件什么是动态组件：就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。动态切换：（:is后面...

原创 (二)02 -设置事件——$listeners 设置父组件传来的所有事件

设置事件——$listeners 设置父组件传来的所有事件<moo placeholder="" required @focus="handleFocus" @blur="handleBlur"></moo>父组件调用传入的是自定义事件，需要在子组件中触发事件<input type="text" @focus="$emit('focus', $event)...

原创 (二)01 -设置子组件的特性&事件——父组件的特性默认会传递给子组件内的根元素 & 子组件有 props 则不能设置元素的特性class-style

设置子组件的特性&事件——父组件的特性默认会传递给子组件内的根元素 & 子组件有 props 则不会设置元素的特性封装通用组件的时候使用调用组件的时候给目标标签设置属性调用组件的时候给组件内部的元素设置原生事件设置属性替换-合并已有的特性父组件的特性默认会传递给子组件内的根元素class 和 style 会合并如果子组件有 props 则不会设置元素的特...

原创 (一) -访问组件&元素(不推荐)——访问根实例-vue根实例& 访问父组件-子访问父组件成员 & 访问子组件-父访问子组件成员& 依赖注入-父组件提供成员，子组件注入父组件中provide提供的成员

访问组件 & 元素(不推荐)——访问根实例-vue根实例 & 访问父组件-子组件访问父组件成员 & 访问子组件-父组件访问子组件成员 & 依赖注入-父组件提供成员，子组件注入父组件中provide提供的成员在绝大多数情况下，我们最好不要触达另一个组件实例内部或手动操作 DOM 元素。访问元素 & 组件不过也确实在一些情况下做这些事情是合适的:...

原创 npm run serve 和 npm start ，在命令行中启动vue项目指令的区别

npm run serve 和 npm start ，在命令行中启动项目指令的区别基于vue-cli搭建的文件，为了测试方便，不使用 npm run serve启动项目时，可进行如下操作启动项目在package.json文件中：{ "name": "01-demo", "version": "0.1.0", "private": true, "scripts": {+ ...

原创 (六) -set用法-给目标对象增加一个响应式数据

set用法-给目标对象增加一个响应式数据https://cn.vuejs.org/v2/api/#Vue-set用法：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')注意对象不能是 Vue 实例，或者 Vue 实例...

原创 (五) -compiler——编译模板：编译解析模板中的差值表达式和指令，从而实现数据变化更新视图，视图变化更新数据

compiler——编译模板：编译解析模板中的差值表达式和指令，从而实现数据变化更新视图，视图变化更新数据vue.js文件的作用——把data中的成员挂载到vue实例上，并设置setter和getterobserver.js文件的作用——数据劫持——即：监听数据的变化1.把$data中的属性设置为getter/setter2.当数据发生改变的时候，要发送通知(发送消息)数据劫持也是在vu...

原创 (四) -Observer-代表一个对象，监听数据的变化，即：数据劫持-把$data中的属性设置为gettersetter - 当数据发生改变的时候，要发送通知(

Observer-代表一个对象，监听数据的变化，即：数据劫持-把$data中的属性设置为getter/setter - 当数据发生改变的时候，要发送通知(数据劫持——即：监听数据的变化1.把$data中的属性设置为getter/setter2.当数据发生改变的时候，要发送通知(发送消息)observer.js中// 数据劫持——即：监听数据的变化// 1.把$data中的属性设置为g...

原创 (三) -模拟和测试 Vue 的构造函数——el作为 Vue 实例的挂载目标 & 数据劫持，就是把data中的成员设置为settergetter，作为响应式数据-数据驱动视图

模拟 Vue 的构造函数——el作为 Vue 实例的挂载目标 & 数据劫持，就是把data中的成员设置为setter/getter，作为响应式数据-数据驱动视图el——https://cn.vuejs.org/v2/api/#elel 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。在实例挂载...

原创 (二) -DOM 操作-DOM树-文档对象模型：把文档抽象成对象

DOM 操作-DOM树-文档对象模型：把文档抽象成对象每个对象都是一个节点，有标签节点、属性节点、文本节点节点类型：Node.nodeType子节点：Node.childNodes属性节点：Element.attributes原理实现示例<!DOCTYPE html><html lang="en"><head> <meta cha...

原创 (一) -事件发布和订阅——子给父传值 & 1注册事件$on-父组件是订阅者& 2触发事件$emit-子组件是发布者& 3测试 同页面或不同组件& .call改变事件处理函数的this指向为事件对象

事件发布/订阅——理解为：子给父传值 & 1注册事件 $on—— 该父组件是订阅者 & 2触发事件 $emit——该子组件是发布者 & 3测试 可同页面也可不同组件 & .call改变事件处理函数的this指向为事件对象,不然为window观察者模式发布/订阅模式// 监听一个自定义事件bus.$on('事件类型', 处理函数)// 发布事件bu...

原创 各种有用网站合集（建议收藏）

原创 MVVM 原理 和 JavaScript数据劫持——Object.defineProperty（）方法和Proxy-对象级别

MVVM 原理常见的面试问题：Vue 数据绑定的原理？MVVM 数据绑定的原理？Vue 双向数据绑定的原理？Vue 数据响应式原理？数据响应式原理？当前比较流行的前端框架都是采用的 MVVM 的方式：什么是 MVVM？简单一句话：数据驱动视图。介绍感受 MVVM传统的 DOM 操作方式模板引擎方式数据驱动视图方式（MVVM）什么是 MVVM简单一句话：...

原创 (七) -差值表达式的处理——用正则表达式，匹配差值表达式的模式,实现值的修改

差值表达式的处理——用正则表达式，匹配差值表达式的模式,实现值的修改用正则表达式，匹配差值表达式的模式,实现值的修改<body> <script> // 实现——用 name的值'zs' ，替换 Name 中的 插值表达式（其内可能存在空格） // 方法——用正则表达式，匹配差值表达式的模式 var data =...

原创 (六) -set的用途-实现响应式，还有给目标对象 设置值的时候，对值进行合法性的校验

set的用途-实现响应式，还有给目标对象 设置值的时候，对值进行合法性的校验示例1：<body> <script> var obj = { name: 'zs', age: 18 } var p = new Proxy(obj, { get (target, key) { console...

原创 (五) -Proxy-对象级别——给对象设值更方便，是ES6新增属性 & target-目标对象 ， key-obj目标对象中的某个属性 ，value-设置的新的值

Proxy-对象级别——给对象设值更方便，是ES6新增属性 & target-目标对象 ， key-obj目标对象中的某个属性 ，value-设置的新的值Object.defineProperty()方法-属性级别参考资料：MDN - Proxy阮一峰 - ProxyProxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提...

原创 (四) -实现对一个对象所有成员的代理——Object.defineProperty()方法中的描述符功能展示

实现对一个对象所有成员的代理——Object.defineProperty()方法中的描述符功能展示需求：const data = { foo: 'bar', user: { name: '张三', age: 18 }}// data.foo 被访问了data.foo// data.foo 被改变了data.foo = xxx// data.use...

原创 (三) -Object.keys()方法 遍历对象中的所有属性（遍历数组中的所有成员）

Object.keys()方法 遍历对象中的所有属性（遍历数组中的所有成员）https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keysObject.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循...

原创 (二)04 -描述符 writable 该属性是否是可写-只读状态

3.writable 该属性是否是可写writable:false且 去掉严格模式 ，在打印台输入 vm.name ,显示为： xxx ,不是hello，赋值失败；说明此时是不可写的，writable:false是只读状态开启严格模式'use strict'，就会报错描述符全实例代码：<body> <script> // 开启严格模式（es5中...

原创 (二)03 -描述符enumerable-可枚举方法（遍历数据属性） & 描述符configurable-是否可以配置（删除数据） & 严格模式-消除了javascript中一些原有静默错误

enumerable-可枚举方法（遍历数据属性） & configurable-是否可以配置（删除数据） & 严格模式-消除了javascript中一些原有静默错误1. enumerable 可枚举方法，同get获取数据 set修改数据显示结果为：name当enumerable：false时，不可打印，页面不可打印，不显示内容2. configurable 是否可...

原创 (二)02 -Object.defineProperty（）方法——直接在一个对象上修改一个对象的现有属性 & 属性描述符类似value-get获取数据 set修改数据

Object.defineProperty——直接在一个对象上修改一个对象的现有属性 & 属性描述符类似value-get获取数据 set修改数据参考资料：MDN - Object.defineProperty**Object.defineProperty()** 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。语法Object.de...

原创 (二)01 -JavaScript 数据劫持——观察数据的变化 & Vue3 升级使用 Proxy

JavaScript 数据劫持——观察数据的变化 & Vue 3 会升级使用 Proxy数据劫持？Observer 数据观察数据拦截器如何实现修改一个对象成员就修改了DOM？const data = { message: 'Hello World'}// 监视 data.message 的改变// watch('data.message', () => {...

原创 (一) -MVVM 原理-数据驱动视图

MVVM 原理-数据驱动视图常见的面试问题：Vue 数据绑定的原理？MVVM 数据绑定的原理？Vue 双向数据绑定的原理？Vue 数据响应式原理？数据响应式原理？当前比较流行的前端框架都是采用的 MVVM 的方式：什么是 MVVM？简单一句话：数据驱动视图。介绍感受 MVVM传统的 DOM 操作方式模板引擎方式数据驱动视图方式（MVVM）什么是 MVVM...

原创 移动App开发

移动 App 开发Native App-原生开发开发技术原生的 Android 平台原生的 iOS 平台JavaScript bridge用于原生应用中的 Web 和原生平台进行交互。https://github.com/lzyzsd/JsBridge博学谷 - 在职加薪课《和原生交互的 Web 开发》原生应用中的 Web 怎么做?Native APP 指的...

原创 (三)02 -发布移动APP——把vue项目文件通过vue-cli和webpack打包成的dist目录进行原生App（云打包）& Android模式-公共证书-去广告-打包&全屏显示-手机状态栏被覆盖

五、发布 移动APP发布移动 App结合使用 DCloud 平台1：在 HBuilder 中打开 dist 目录（拖拽进来）​ 点击manifest.json 文件，应用名称，改为：头条App图标配置：选图片，建议为1024*1024;点击自动生成所有图标并替换此时，dist文件夹下会自动生成unpackage图标文件夹启动图配置，需要美工UI提供不同尺寸图，因...

原创 (三)01 -Vue项目打包发布移动App——vue.config.js中配置相对路径publicPath为空字符串 & 在public中添加HBuilderX的打包配置文件manifest.json

Vue 项目打包发布移动 App——npm run build打包 & vue.config.js文件中配置相对路径publicPath为空字符串 & 在 public中添加HBuilderX的打包配置文件manifest.json 文件一、 如果需要发布移动App，则在 public 中添加 manifest.json 文件参考文档：http://ask.dcloud....