Vue3
一本正经的柠檬
一本正经冠冕堂皇地阐述着这个梦想
展开
-
vue3基础 —— 数据绑定
1. {{data.number}}:文本绑定2. v-bind:单向绑定(缩写:)——常用但不局限于style、class、attribute绑的是html元素的属性或者组件的prop,而不是像model那样绑的是表单控件的值 v-bind配合事件,也能实现双向绑定3. v-model:双向绑定——常用于input、select、textarea中只能用在html表单控件上(还有自定义组件),其他组件无效当v-bind和v-model同时用在一个元素上时,它们各自的作用没变,但v-...原创 2022-02-10 14:50:53 · 2973 阅读 · 0 评论 -
vue3 - axios
1. 安装npm install axios2. main.js中需要进行全局配置import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import './plugins/elementui'import './assets/global.css'import './assets/fonts/iconfont.css'//原创 2022-01-28 14:15:00 · 464 阅读 · 0 评论 -
vue3 - element-ui
一、element-ui 按需引入npm i element-ui -Snpm install babel-plugin-component -D1. 修改babel.config.js文件:module.exports = {// 源代码 presets: [ '@vue/cli-plugin-babel/preset' ],// 添加代码项 plugins: [ [ 'component', { libraryNa原创 2022-01-27 11:15:00 · 558 阅读 · 0 评论 -
vue3 - 创建项目
1. 安装node.jshttps://nodejs.org/en/2. 安装脚手架npm uninstall vue-cli -g /yarn global remove vue-clinpm install -g @vue/cli3. 创建工程cd Desktop--vue create name--Manually select featuresvscode--ctrl+`--npm run serve4. vscode插件ESLint、Vetur、live server、原创 2022-01-26 10:00:00 · 259 阅读 · 0 评论 -
1.2 - login页注意事项
一、API接口说明文档 1. 接口基础地址:http://1xx.0.0.x:xxxx/…… 2. 服务端已开启CORS跨域支持 3. 使用Token认证 4. 需要授权的API,必须在请求头中使用 Authorization 字段提供的 token 令牌 5. 使用HTTP Status Code标识状态 6. 数据返回格式统一使用JSON二、拦截器通过axios 请求拦截器添加 token,保证拥有获取数据的权限 axios.int...原创 2022-01-25 11:00:00 · 242 阅读 · 0 评论 -
1.1 - login页注意事项
一、登录业务流程 1. 在登录页输入用户名、密码 2. 调用后台接口进行验证 3. 通过验证之后,根据后台的响应状态跳转到项目主页二、登录业务的相关技术点 1. http是无状态的 2. 通过cookie在客户端记录登录状态 —— 不存在跨域问题时可用 3. 通过session在服务器端记录状态 —— 不存在跨域问题时可用 4. 通过token方式维持状态 —— 存在跨域问题时首选方法三、存储 1. sessionStorage:会话期...原创 2022-01-24 10:45:08 · 556 阅读 · 0 评论 -
composition API和option API
Option API —— 又称选项API(vue2.x)以vue为后缀的文件,通过定义methods,computed,watch,data等页面语法,共同处理页面逻辑缺点:1. 随着组件功能的增大,关联性大大降低,阅读难2. 逻辑过多时this会出现指向不明等问题3. 代码出错时,自动检测和类型检查是失效的,因为本身不是有效的js】代码composition API —— 组合API(vue3.x)根据逻辑功能来组织的,一个功能多定义的所有API会放在一起(高聚合、低耦合原创 2022-01-18 10:21:04 · 2906 阅读 · 1 评论 -
vue3基础 —— 子传父
须知:vue里子组件无法改变父组件的值思路:1. 父组件定义数据 ——const data = ref(false)2.把值传递给子组件 —— :sendData = "data"3.子组件接收数据,使用、修改完成后 —— props: ["sendData"] ——const a = props.sendData ——a =true4.触发父组件事件,传值 ——emit("emitEffect", { emit: a})5.被触发的父组件,接收值,并更新自己最开...原创 2021-12-24 14:51:21 · 21593 阅读 · 4 评论