FadingLight9291117 / wps

车亮召

第二次课

css3

0. 盒子模型

0.1 块级盒子(block box)

• 换行

• width height

• padding margin border

  0.2 内联盒子(inline box)

• 不换行

• 无 width height

  0.3 背景和边框

官方文档

.box {
  background: no-repeat center/80% url("../img/image.png");
}

1. 定位

2. 布局

2.1 flex 布局

官方教程

example

section {
  display: flex;
  flex-direction: row; /* or column */
  flex-wrap: wrap; /* 换行 */
  /* felx-flow: row wrap; <=> flex-direction: row; flew-wrap: wrap;  */
}

article {
  flex: 1 200px; /* 1是动态尺寸, 200px是弹性盒子内子代元素的宽度至少为200px; */
}

article:nth-of-type(3)  /* 第3个占2格 */ {
  flex: 2 200px;
}

2.2 grid 网格布局

官方教程

example

.container {
  display: grid;
  /* grid-template-columns: 200px 200px 200px; /* 加3个宽度为200px的列 */
  /* grid-template-columns: 1fr 1fr 2fr; /* fr单位，灵活网格 */
  grid-template-columns: repeat(3, 1fr) /* 重复构建行列 */
  grid-gap: 20px; /* 网格间隙, grid-column-gap 列间隙；grid-row-gap 行间隙；grid-gap 同时设定 */
  gap: 20px; /* 新标准为了通用gap代替grid-gap，两个都写上，保证健壮性 */
}

第三次课

移动端适配

适配方案

1. 媒体查询

css 的@media为不同的媒体查询设置不同的 css

2. Grid 高级布局

自动多列填充

3. 响应式图片

不同分辨率指定不同的图片

4. rem 方案

rem是相对于 html 根节点字体大小的尺寸单位

第四次课 - TypeScript

script 模板

html 中的定义 script 模板

<script type="text/template" id="tpl">
  <li><a href="{{site}}"} class="link">{{name}}</a></li>
</script>

可以直接使用 Dom 操作操纵该模板，就跟操作普通 html 页面一样

localStorage

localStorage 是 html5 网络存储对象，将数据存储在本地客户端，如果不删除将永久存储；

只能存储字符串

let xiaoming = { name: "xiaomin", age: 30 };
localStorage.setItem("person", JSON.stringify(person));

let person = JSON.parse(localStorage.getItem("person"));

第五次课 - Vue basic

Options VS. Compositon

Class 写法不管

Options 选项式 API

export default {
  data() {
    return {};
  },
  methods: {},
  computed: {},
  mounted() {},
};

为什么叫选项式，因为data，methods，mounted等等都是可选的，需要就添加，不需要可以不写。

Component 组合式 API

import { reactive } from "vue";

export default {
  setup() {
    const state = reactive({ count: 0 });

    function increment() {
      state.count++;
    }

    // don't forget to expose the function as well.
    return {
      state,
      increment,
    };
  },
};

或者 <script setup>，这个是重点，

<script setup>
import { reactive } from "vue";

const state = reactive({ count: 0 });

function increment() {
  state.count++;
}
</script>

<template>
  <button @click="increment">
    {{ state.count }}
  </button>
</template>

Component API

reactive() & ref() 区别

官方解释

reactive()的两点限制：

1. 只适用于对象类型(object, array, collections types)；原始类型（string, number, boolean）无法使用

2. 引用丢失

let state = reactive({ count: 0 });
// the above reference ({ count: 0 }) is no longer being tracked (reactivity connection is lost!)
state = reactive({ count: 1 });

这也会导致，解构赋值或者函数传递属性，会导致丢失响应式连接(reactivity connection)。

第六次课 - Browser

storage

• localStorage
• sessionStorage
• Cookies

vue 配置 api 代理

在vue.configjs文件中

解决开发时的跨域访问问题

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      "/api/": {
        target: "http://localhost:3280",
        changeOrigin: true,
      },
    },
  },
});

原理 vue 中的 proxy 就是利用了 Node 代理，通过 Node 服务器端代理转发，因为服务器端不存在跨域的问题。

第六次作业

html 中的 click 和 onclick 区别

onclik 是 html 中的 v-on:click(@click) 是 vue 定义的

第七次课

组件自定义事件

setup

两种

1. setup

export default defineComponent({
  props: {},
  data(): {return {}},
  emits: ['submit'],
  setup(props, ctx) {
    ctx.emit('submit')
  }
});

2. <script setup>

<script lang="ts" setup>
const emit = defineEmits<{
  (e: "submit", value: string): void;
  (e: "update", id: string): void;
}>();
</script>

vue-router

this.$route 和 this.$router 得到区别

this.$router 相当于一个全局路由对象， 包含很多属性和对象（比如 history 对象），任何页面都可以调用其 push()，replace()，go()等方法。

this.$route 表示当前路由对象，每一个路由有一个 route 对象，是一个局部对象，可以获取对应的 name，path，params，query 等属性

第八次课

Vuex

官方文档

示例

import { createStore } frmo "vuex";
export default createStore({
  state: {},      // => 存储状态
  getters: {},    // => 获取状态
  mutations: {},  // => 同步修改状态
  actions: {},    // => 异步修改状态
  modules: {},    // => 分割状态到模块中
})

1. 通过 getters 获取状态

css modules

tips

tips: 使用 computed 调用 vuex 的 getters，因为 computed 会返回一个 computed ref， computed 的特点:1. cache；2. 仅响应式依赖项发生改变的时候才会更新。

这个将不会更新

const now = computed(() => Date.now());

const store = useStore();
const name = computed(() => store.getters.getName);