⑦vue-移动端项目记录（下）
12、HTML人民币书写用“¥”
网页上的人民币标识￥请统一使用转义字符（¥ 或者 ¥）。
直接写中文字符￥无论你用全角还是半角都是不规范的写法；
13、watchEffect()在tab切换同时请求数据时的妙用
Effect无惰性，立即执行，页面加载的第一次也会执行；
不需要传递要侦听的内容，自动会感知watchEffect中数据对外界的代码依赖；
不需要传递很多参数，只需要一个回调函数；
watchEffect不能获取数据改变之前的原始值，只能获取当前改变后的值；
可用于ajax等异步请求，纯函数中的异步请求，使输出变得不确定性，故而产生副作用，此处effect更形象；
1234567891011121314151617// 列表内容相关的逻辑import { reactive,toRefs, watchEffect } from 'vue'const useCurrentListEffect = (currentTab, shopId) => { const ...
⑦vue-移动端项目记录（上）
1、css 基础样式集 浏览器支持和理解的CSS规范不同，导致渲染页面时效果不一致，会出现很多兼容性问题。有两种解决方案。
1.1、一种是 css reset1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768/* KISSY CSS Reset理念：清除和重置是紧密不可分的特色：1.适应中文 2.基于最新主流浏览器维护：玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)*//* 清除内外边距 */body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */dl, dt, dd, ul, ol, li, /* list elements 列表元素 */pre, /* text formatting elements 文本格式 ...
⑦vue-VueRouter&VueX
1.1、router-link
路由跳转的标签；
1.2、router-view
负责展示当前路由对应的组件内容；
1234567<template> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> <router-view/> </div></template>
1.3、路由懒加载
异步/懒 加载，首页刷新不需要下载该方式懒加载的路由，达到首屏快速响应目的；
12345678910111213const routes = [ { path: '/', name: 'Home', ...
⑥vue-Composition API
产生背景：当我们的组件变得更大时，业务逻辑关注点的代码也会变长，假如想找到某个在多处代码中有频繁操作的属性进行新需求的具体操作，会在100甚至更多行代码中跳来跳去，找到属于该属性的逻辑，尤其是刚接手项目的新人来说，这会导致组件难以阅读和理解。CompositionAPI中能够配置与相同逻辑问题相关的代码，这正是我们需要的。
6-1 Setup 函数的使用
Composition API 所有代码编写之前，一定建立在setup()函数之上;
setup(props, context){}在created 实例被完全初始化之前执行；
由于setup是在实例被初始化之前执行的，故在setup中的this上没有任何东西;
故 **setup中不能使用this**；
故 **setup中不能调用外部方法(template/mounted/methods/……)**；
而 在setup外部app实例的 方法/生命周期函数 中可以通过this.$options.setup()调用setup中return{}的所有内容
setup(){&# ...
⑤vue-高级语法
5-1 Mixin 混入的基础语法
组件中 data、methods 优先级高于mixin中 data、methods 优先级；
底层：数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先；
底层：同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用；
生命周期函数，先执行 mixin 里面的，再执行组件中的；
局部 mixin 使用时，需在每一层组件中注册mixins: [myMixin],123456789101112131415161718192021222324252627282930313233343536373839404142const myMixin = { data() { return { num: 999, count: 666 } }, created() { console.log("mixin created") ...
④vue-动画
一、使用 Vue 实现基础的 CSS 过渡与动画效果
数据控制css交互
css中书写样式；
data中书写样式；12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>基础的 CSS 过渡与动画效果</title> <script ...
(3)前端工具链：node client + node server + GitHub OAuth发布系统
发布系统包括三个子系统：
线上系统（服务端）—- Linux/server—————- 为真实用户服务。
本地/server —- 复制到服务器—-Linux/server
发布系统（服务端）—- Linux/publish-server—- 为程序员向线上发布服务。
本地/publish-server —-复制到服务器—-Linux/publish-server
发布系统（客户端）—- 本地/publish-tool——– 命令行工具与线上服务系统同步对接。
最终发布流程：
发布系统（客户端）==文件==> 发布系统（服务端）==文件==> 线上系统（服务端）
以上“线上系统–服务端” & “发布系统–服务端”，可以同级部署，也可以是独立集群。
1、实现线上 web 服务1.1、安装虚拟机及环境 由于没有现成服务器，此处安装 Linux 虚拟机，虚拟机上运行 node.js 模拟线上服务器。
准备工作：安装虚拟机Oracle virtualBox
创造虚拟机，选择Linux系统
选择光盘镜像，选择安装的Server ...
③vue-组件
组件理念一、组件的定义及复用性，局部组件和全局组件1、组件具备复用性，而组件中的数据是独立的；2、app.component()定义的全局组件
随时随地可以使用，但会一直占用内存，性能较低，使用简单；
建议名字为小写字母单词，中间横线间隔；123456789101112131415161718192021222324252627282930313233<script> const app = Vue.createApp({ template: ` <div> <counter-parent/> <counter/> <counter/> </div> ` }); app.component("counter-parent", { template: `<coun ...
②vue-基础语法（下）
七、列表循环渲染1、v-for 循环中使用 :key= 提高渲染效率
如下例，v-for的循环中使用:key={{item}}，提高循环渲染的效率
点击按钮事件后，数据中的数组改变，页面重新渲染，v-for遍历的样式跟着改变；
为循环遍历的每一项都加上:key="item"（注：item是唯一的），为每一个经过循环渲染的元素做区分；
Vue会在底层判断相同的 key 值的元素可以复用，不用重新渲染，从而提高了循环渲染的效率；
如下例，v-for可以直接循环数字，<div v-for="item in 10">{{item}}</div>；1234567891011121314151617181920212223242526272829<script> const app = Vue.createApp({ data() { return { ...
②vue-基础语法（上）
一、vue中应用和组件的基础概念
createApp 表示，创建一个Vue应用，存储到app变量中；
传入的参数表示，这个应用最外层的组件应该如何展示；
MVvM 设计模式：
m -> model 数据；
v -> view 视图；
vm -> viewModel 视图数据连接层；
const vm = app.mount("#root");：vm代表的就是Vue应用的根组件，也是视图数据连接层；
console.log(vm.$data.message)：在根组件上，调用$data，可以操作数据；
二、vue中的生命周期函数
生命周期函数：某一时刻自动执行的函数
beforeCreate()：在实例生成之前，自动执行；
created()：在实例生成之后，自动执行；
若参数中含有 template:'';
则将 template:''; 编译成 render() 函数，再继续执行 beforeMount() ；
若参数中没有 template:'';
则将 id=”#root” 节点的 ...