生命周期 组件
【生命周期 组件】
生命周期
引出生命周期
生命周期
又名生命周期回调函数、生命周期函数、生命周期钩子
是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
生命周期函数中的this 指向是vm或组件实例对象
12345678910111213141516171819202122232425262728293031<div id="root"> <h2 v-if="a">你好啊</h2> <h2 :style="{opacity}">看笔记学Vue</h2></div><script type="text/javascript"> Vue.config.productionTip = false new Vue({ el: '#root', data: { a: ...
内置指令 自定义指令
【内置指令 自定义指令】
内置指令
之前学过的指令：
v-bind 单向绑定解析表达式，可简写为**:**
v-model 双向数据绑定
v-for 遍历数组 / 对象 / 字符串
v-on 绑定事件监听，可简写为**@**
v-show 条件渲染 (动态控制节点是否展示)
v-if 条件渲染（动态控制节点是否存存在）
v-else-if 条件渲染（动态控制节点是否存存在）
v-else 条件渲染（动态控制节点是否存存在）
v-text 指令
v-text指令：(使用的比较少)
1.作用：向其所在的节点中渲染文本内容。
2.与插值语法的区别：v-text会替换掉节点中的内容，则不会。
123456789101112131415161718<!-- 准备好一个容器--><div id="root"> <div>你好，{{name}}</div> <div v-text="name"& ...
Vue数据监视 v-model双向绑定
【Vue数据监视 v-model双向绑定】
Vue数据监视
问题演示
先来个案例引入一下：
123456789101112131415161718192021222324252627282930313233343536<!-- 准备好一个容器--><div id="root"> <h2>人员列表</h2> <button @click="updateMei">更新马冬梅的信息</button> <ul> <li v-for="(p,index) of persons" :key="p.id"> {{p.name}}-{{p.age}}-{{p.sex}} </li> </ul> </div&g ...
绑定样式 条件渲染 列表渲染
【绑定样式 条件渲染 列表渲染】
绑定样式
class样式
写法：:class=“xxx” xxx可以是字符串、对象、数。
所以分为三种写法，字符串写法，数组写法，对象写法
字符串写法
字符串写法适用于：类名不确定，要动态获取。
1234567891011121314151617181920<style> .normal{ background-color: skyblue; }</style><!-- 准备好一个容器--><div id="root"> <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 --> <div class="basic" :class="mood" @click="changeMood">{{name}}</div></div><script> ...
计算属性 侦听属性
【计算属性 侦听属性】
计算属性
插值语法实现
123456789101112131415161718<title>姓名案例_插值语法实现</title><div id="root"> 姓：<input type="text" v-model="firstName"> <br/> 名：<input type="text" v-model="lastName"> <br/> 全名：<span>{{ firstName }}-{{ lastName }}</span></div><script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:&#x ...
数据代理 事件处理
【数据代理 事件处理】
数据代理
了解数据代理需要js的一些知识：Object.defineProperty()，属性标志，属性描述符，getter，setter。。。
数据代理
建议学习文章地址：
https://zh.javascript.info/property-descriptors
https://zh.javascript.info/property-accessors
这里简单介绍一下：
属性标志:
对象属性（properties），除 value 外，还有三个特殊的特性（attributes），也就是所谓的“标志”
writable — 如果为 true，则值可以被修改，否则它是只可读的
enumerable — 如果为 true，则表示是可以遍历的，可以在for… .in Object.keys()中遍历出来
configurable — 如果为 true，则此控制属性可以被删除，默认值是false
Object.defineProperty(obj, prop, descriptor)
obj：要定义属性的对象。
prop：要定义或修改的属性的名称
...
el和data的两种写法 MVVM模型
【el和data的两种写法 MVVM模型】
el和data的两种写法
el有2种写法
创建Vue实例对象的时候配置el属性
先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值
data有2种写法
对象式：data： { }
函数式：data() { return { } }
如何选择：目前哪种写法都可以，以后到组件时，data必须使用函数，否则会报错
一个重要的原则
由Vue管理的函数，一定不要写箭头函数，否则 this 就不再是Vue实例了
123456789101112131415161718192021222324252627282930313233<body> <div id="root"> <h1>你好，{{name}}</h1> </div></body><script type="text/javascript"> // el的两种写法 // const ...
Vue简介 初识Vue 模板语法和数据绑定
【Vue简介 初识Vue 模板语法和数据绑定】
Vue简介
官网
英文官网
中文官网
介绍与描述
Vue 是一套用来动态构建用户界面的渐进式JavaScript框架
○构建用户界面：把数据通过某种办法变成用户界面
○渐进式：Vue可以自底向上逐层的应用，简单应用只需要一个轻量小巧的核心库，复杂应用可以引入各式各样的Vue插件
作者：尤雨溪
Vue 的特点
1 遵循MVVM模式
2 编码简洁，体积小，运行效率高，适合移动/PC端开发
3 它本身只关注 UI，可以引入其它第三方库开发项目
4采用组件化模式，提高代码复用率、且让代码更好维护
5 声明式编码，让编码人员无需直接操作DOM，提高开发效率
使用虚拟DOM 和 Diff算法，尽量复用DOM节点
与其他 JS 框架的关联
借鉴 angular 的 模板 和 数据绑定 技术
借鉴 react 的 组件化 和 虚拟DOM 技术
Vue 周边库
vue-cli：vue 脚手架
vue-router：路由
vuex：状态管理（它是 vue 的插件但是没有用 vue-xxx 的命名规则）
vue-lazyload：图片懒加 ...
Koa基本使用
【Koa基本使用】
简介
koa 是由 Express 原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用，通过组合不同的 generator，可以免除重复繁琐的回调函数嵌套，并极大地提升错误处理的效率。koa 不在内核方法中绑定任何中间件，它仅仅提供了一个轻量优雅的函数库，使得编写 Web 应用变得得心应手。
快速开始
安装koa2
12345# 初始化package.jsonnpm init# 安装koa2 npm install koa
hello world 代码
12345678const Koa = require('koa')const app = new Koa()app.use( async ( ctx ) => { ctx.body = 'hello koa2' //json数据})app.listen(3000)
启动
1node index.js
koa vs express
通常都会说 Koa 是洋葱模型，这重点在于中间件的设计。但是 ...
文件上传
【文件上传】
初始化准备
安装依赖
首先创建一个express-multer-upload工程项目，然后在项目中下好各种依赖包。
multer中间件
Multer 是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它主要用于上传文件。
注意: Multer 不会处理任何非 multipart/form-data 类型的表单数据。
下面是我下载的依赖以及版本。
项目结构划分
本着以比较规范的形式去完成这个项目，所以有必要进行合理的项目结构划分。如下：
multer上传逻辑
multer配置
在 multer 目录下创建 multerConfig.js，编写如下代码：
引入依赖
封装处理路径函数
设置 multer 的配置对象
为 multer 添加配置
1234567891011121314151617181920212223242526272829303132333435// 1. 引入依赖const multer = require('multer')const path = require('pa ...
