logologo
CodeBetter
基础
HTML
CSS
JavaScript
TypeScript
web端
Vue
React
Nuxt
Next
移动端
Flutter
React Native
桌面端
Electron
小程序
微信小程序
基础
Node
框架
Express
Koa
Nest
数据库
MongoDB
MySQL
工程化
性能优化
云服务器
项目笔记
三方库
其它
基础
HTML
CSS
JavaScript
TypeScript
web端
Vue
React
Nuxt
Next
移动端
Flutter
React Native
桌面端
Electron
小程序
微信小程序
基础
Node
框架
Express
Koa
Nest
数据库
MongoDB
MySQL
工程化
性能优化
云服务器
项目笔记
三方库
其它
  • v-bind为css绑定变量
logologo
CodeBetter
Vue
服务端渲染

vue3

创建Vue3项目
项目结构介绍
vscode 代码片段
setup
生命周期
ref
reactive
computed
watch
watchEffect
插槽
props
emit
$attrs
$parent
$refs
mitt
provide 和 inject
v-model
nextTick方法
Hooks
传送门
css功能

vue2

vue2
v-bind
v-clock
v-for
v-html
v-if
v-memo
v-model
v-on
v-once
v-pre
v-show
v-slot
v-text
Vue指令
计算属性
Filter
Watch
生命周期
nextTick
keep-alive
ref和$refs
Mixins
组件
项目手记
扩展

vuex

Vuex
State
Getters
Mutations
Actions
Module
辅助函数

pinia

pinia
定义Store
State
Getter
Action

router

Router
路由模式
路由懒加载
魔法注释
路由占位
路由跳转方式
命名路由
路由传参
路由守卫
嵌套路由
路由重定向

css功能#

v-bind为css绑定变量#

1<template>
2  <div class="box"></div>
3</template>
4
5<script lang="ts" setup>
6import { ref } from 'vue'
7
8const ys = ref('#ffd100')
9</script>
10
11<style scoped>
12.box {
13  width: 500px;
14  height: 500px;
15  background-color: v-bind(ys);
16}
17</style>
上一页传送门
下一页vue2
目录
  • v-bind为css绑定变量