学习笔记3/22

UNIAPP

导入文件
在使用 src="vue/js" 导入文件时，确保路径正确。

.el 类只对第一个生效
要确保 .el 类对所有元素都生效，可以使用选择器 .el 前面加上元素类型，例如 div.el。

数据声明
避免刻意使用 _ 和 ￥ 声明数据，因为在 Vue 源码中会使用这些符号。

v-指令
使用 v- 开头的指令来操作 DOM，例如 v-bind, v-on。

响应式
Vue 中的响应式是指数据的变化会影响到视图的更新，确保数据和视图保持同步。

Vuex、Router、Axios
这些是常用的 Vue.js 生态系统的组件，分别用于状态管理、路由和 HTTP 请求。
// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    },
  },
});
// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

const router = new VueRouter({
  routes,
});

export default router;
// 使用 Axios 发送 GET 请求
import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

// 使用 Axios 发送 POST 请求
axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: 'foo',
  body: 'bar',
  userId: 1,
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error posting data:', error);
  });

Flex布局
Flex 布局是一种灵活的布局方式，可以实现各种复杂布局需求。

display: flex：使用 flex 布局
flex-wrap：控制是否换行
align-items：交叉轴对齐方式
align-content：多轴线对齐方式
justify-content：主轴对齐方式
flex-grow、flex-shrink、flex-basis：控制元素的放大、缩小和基础大小
快捷方式
使用 flex-grow: 1 可以让元素自动拉伸，flex-shrink: 0 可以防止元素缩小。

登录保持
通过 Token 实现登录保持，客户端传递用户名密码到服务器端进行鉴权，成功后服务器端返回 Token 字符串，客户端带着 Token 发送请求到服务端，服务端验证 Token 的有效性。

JWT
JSON Web Token（JWT）是一种用于传输信息的安全方式，包含 Header、Payload 和 Signature。

页面传参
页面传参可以通过 URL 参数传递，也可以使用事件传递数据。

组件调用
使用自定义组件可以提高代码复用性，父子组件通信可以通过 props 和事件进行。

判断环境与平台
通过 process.env.NODE_ENV 可以判断开发环境和生产环境，通过条件编译可以判断不同平台。

跨端兼容
通过条件编译和平台判断，可以实现跨端兼容。

全局定义及通信
全局定义组件和事件可以让不同组件之间进行通信。