FadingLight9291117 / wps

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

车亮召

第二次课

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

  1. Grid 高级布局

自动多列填充

  1. 响应式图片

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

  1. 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() {},
};

为什么叫选项式,因为datamethodsmounted等等都是可选的,需要就添加,不需要可以不写。

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

image-20220526143743479

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')
  }
});
  1. <script setup>
<script lang="ts" setup>
const emit = defineEmits<{
  (e: "submit", value: string): void;
  (e: "update", id: string): void;
}>();
</script>

vue-router

this.$routethis.$router 得到区别

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

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

第八次课

Vuex

官方文档

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);

About


Languages

Language:HTML 24.7%Language:Vue 23.5%Language:TypeScript 22.1%Language:CSS 19.5%Language:JavaScript 10.0%Language:Go 0.2%Language:PowerShell 0.0%Language:Shell 0.0%