2020年09月_薛定谔的猿...

原创组件化开发

（十一）组件化开发11.1 组件化的基本使用简单的组件示例 <div id="app">  <my-cpn></my-cpn> <my-cpn></my-cpn> <my-cpn></my-cpn> <cpnc></cpnc> </div> <script src="https://

2020-09-28 10:03:51 390

原创组件化高级

（十二）组件化高级12.1 slot-插槽的基本使用我们在使用组件的时候有时候希望，在组件内部定制化内容，例如京东这样。这两个都是导航栏，组件的思想是可以复用的，把这个导航栏看做一个组件。这个组件都可以分成三个部分，左边中间右边，如果可以分割组件，就可以定制化组件内容了。  <div id="app"> <cpn></cpn> <cpn> <span style="

2020-09-28 10:03:31 397

（十三）Vue实例的生命周期13.1 生命周期图 Vue实例的生命周期中有多个状态。测试代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA

2020-09-28 10:02:54 271

原创 vue-cli

（十六）vue-cli16.1 vue-cli起步16.1.1 什么是vue-cliVue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：通过 @vue/cli 搭建交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。一个运行时依赖 (@vue/cli-service)，该依赖：可升级；基于 webpack 构建，并带有合理的默认配置；可以通过项目内的配置文件进行配置；可以通过插件进行扩展。一

2020-09-28 10:01:56 422

原创 vue-router(路由)

（十七）vue-router17.1 路由简介什么是路由？路由就是通过互联的网络把信息用源地址传送到目的地的活动路由提供了两种机制：路由和传送路由是决定数据包从来源到目的地的路径转送就是将数据转移路由表路由表本质就是一个映射表，决定了数据包的指向17.2 前端/后端路由后端渲染（服务端渲染）jsp技术后端路由，后端处理URL和页面映射关系，例如springmvc中的@requestMapping注解配置的URL地址，映射前端页面前后端分离（ajax请求数据

2020-09-28 10:01:23 561

原创 VUEX

（十九）Vuex19.1 什么是VuexVuex就是一个状态管理模式，为什么叫模式？因为Vuex包含了一套对state(状态)的操作规范，集中存储管理应用的所有组件的状态。状态管理简单来说就是管理各个组件共享的数据，类似sessionsession可以存数据，存的过程就是管理，数据的每一次赋值就是当次状态。Vuex在Vue实例顶层中。Vuex也可以理解为java中的一个map，这个map是static（静态资源）的，每次获取map的值，都需要调用java的api，比如map.g

2020-09-28 10:00:51 164

原创 v-model

（十）v-model10.1 v-model的基本使用 <div id="app">  <input type="text" v-model="message">{{message}} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue

2020-09-21 15:50:16 509

原创综合练习

（九）综合练习9.1 综合练习综合前面的知识，需要通过一个小demo来串联起知识。如图所示，点击“+”按钮，总价增加，点击“-”按钮总价减少，点击移除，移除当列。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"

2020-09-21 15:49:19 313

原创遍历循环

（八）遍历循环8.1 v-for遍历数组<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &l

2020-09-21 15:48:10 580

原创条件判断

（七）条件判断7.1 v-if、v-eles、v-else-if v-if用于条件判断，判断Dom元素是否显示。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-

2020-09-21 15:46:19 333

原创事件监听

（六）事件监听6.1 v-on的基本使用在前面的计数器案例中使用了v-on:click监听单击事件。这里在回顾一下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-

2020-09-21 15:45:10 225

原创计算属性

（五）计算属性5.1 计算属性的基本使用现在有变量姓氏和名字，要得到完整的名字。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

2020-09-21 15:43:34 1144

原创动态绑定属性

（四）动态绑定属性4.1 v-bind的基本使用某些时候我们并不想将变量放在标签内容中，像这样<h2>{{message}}</h2>是将变量h2标签括起来，类似js的innerHTML。但是我们期望将变量imgURL写在如下位置，想这样<img src="imgURL" alt="">导入图片是希望动态获取图片的链接，此时的imgURL并非变量而是字符串imgURL，如果要将其生效为变量，需要使用到一个标签v-bind:，像这样<img v-bind:sr

2020-09-21 15:39:37 3296

原创插值操作

（三）插值操作3.1 Mustache语法 mustache是胡须的意思，因为{{}}像胡须，又叫大括号语法。在vue对象挂载的dom元素中，{{}}不仅可以直接写变量，还可以写简单表达式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s

2020-09-21 15:36:11 180

原创 HelloVue

（二）HelloVue2.1 HelloVuejs 如何开始学习Vue，当然是写一个最简单的demo，直接上代码。此处通过cdn<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>获取vuejs。 vue是声明式编程，区别于jquery的命令式编程。2.1.1命令式编程原生js做法（命令式编程）创建div元素，设置id属性定义一个变量叫message将messa

2020-09-21 15:34:35 340

原创 ES6相关知识点

（一）ES6补充1.1块级作用域 ES6之前没有块级作用域，ES5的var没有块级作用域的概念，只有function有作用域的概念，ES6的let、const引入了块级作用域。 ES5之前if和for都没有作用域，所以很多时候需要使用function的作用域，比如闭包。1.1.1 什么是变量作用域变量在什么范围内可用，类似Java的全局变量和局部变量的概念，全局变量，全局都可用，局部变量只在范围内可用。ES5之前的var是没有块级作用域的概念，使用var声明的变量就是全局的。{ var

2020-09-21 15:32:55 143

原创 vue学习笔记二

1. vuex是什么github站点: https://github.com/vuejs/vuex在线文档: https://vuex.vuejs.org/zh-cn/简单来说: 对应用中组件的状态进行集中式的管理(读/写)2. 状态自管理应用state: 驱动应用的数据源view: 以声明方式将state映射到视图actions: 响应在view上的用户输入导致的状态变化(包含n个更新状态的方法)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SHKXKw

2020-09-14 14:46:38 69

原创 vue学习笔记一

1. Vue.js是什么?1). 一位华裔前Google工程师(尤雨溪)开发的前端js库2). 作用: 动态构建用户界面3). 特点: * 遵循MVVM模式 * 编码简洁, 体积小, 运行效率高, 移动/PC端开发 * 它本身只关注UI, 可以轻松引入vue插件和其它第三库开发项目4). 与其它框架的关联: * 借鉴angular的模板和数据绑定技术 * 借鉴react的组件化和虚拟DOM技术5). vue包含一系列的扩展插件(库): * vue-cli: vue脚手架 * vue-

2020-09-14 14:45:44 182

原创 vue学习笔记三

1. 准备1.[].slice.call(lis): 将伪数组转换为真数组2.node.nodeType: 得到节点类型3.Object.defineProperty(obj, propertyName, {}): 给对象添加/修改属性(指定描述符) configurable: true/false 是否可以重新define enumerable: true/false 是否可以枚举(for..in / keys()) value: 指定初始值 writable: true/false va

2020-09-14 14:44:53 73

原创 vue学习笔记四

1. vue脚手架用来创建vue项目的工具包创建项目: npm install -g vue-cli vue init webpack VueDemo 开发环境运行: cd VueDemo npm install npm run dev 生产环境打包发布 npm run build npm install -g serve serve dist

2020-09-14 14:43:45 67

原创剖析Vue实现原理 - 如何实现双向绑定mvvm

剖析Vue实现原理 - 如何实现双向绑定mvvm本文能帮你做什么？1、了解vue的双向数据绑定原理以及核心代码模块2、缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现，本文相关代码主要摘自vue源码, 并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环依赖等，也难免存在一些问题，欢迎大家指正。不过这些并不会影响大家的阅读和理解，相信看完本文后对大家在阅读vue源码的时候会更有帮助本文所有相关代码均在github上面可找到 https://github.com/DMQ/mvv

2020-09-14 14:39:18 121

原创 cnpm报错 : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本

在vsCode下使用cnpm时报如下错误：困扰了我很久，下面贴出解决方案：以管理员身份运行power shell，输入set-ExecutionPolicy RemoteSigned，输入A 回车：再次输入cnpm -v就可以运行了

2020-09-07 15:55:54 206

原创 Vue中安装element-ui失败问题原因

开启npm.cmd，输入npm install element-ui -S命令，正常情况会安装成功，但也有安装不成功的情况，若安装不成功，则检查npm和vue是否安装成功，使用：npm -vvue -Vps:这里的V大写来查看版本，看不到版本号，便重新安装npm或vue。解决方式：npm install npm -g...

2020-09-07 15:46:41 4220

qq_33879627的博客