Vue

Vue 官方文档

Vue Router

官方文档

库

vue-cropper图片裁剪（vue2与vue3）

Index

Vue
├ Knowlegde Map 2019
├ Vue 2
├ ---
├ Vue CLI
├ Vue Router
├ vuex
├ Pinia
├ vue-loader
├ vue-server-renderer
├ vue-rx
├ vue-devtools
├ vue-class-component
├ Vue 多页面
├ SSR Nuxt.js
├ vue-resource
└ axios

Vue Developer Knowlegde Map 2019

Essential Concepts
- Core features
- Component-based design
- Single-page applications
- State management
Real-world Vue
- Project scaffolding
- Full-stack/Authenticated Vue
- Testing
- Optimization
Key related tools
- Modern JavaScript
- Babel
- Webpack
- TypeScript ✓
Vue Frameworks
- Nuxt.js
- Vuetify
- NativeScript-Vue
Miscellaneous
- Plugin development
- Animation
- Progressive Web Apps

Vue 2

Docs

基础
- 安装
- 介绍
- Vue 实例
- 模板语法
- 计算属性和侦听器
- Class 与 Style 绑定
- 条件渲染
- 列表渲染
- 事件处理
- 表单输入绑定
- 组件基础 ★
深入了解组件
- 组件注册
- Prop
- 自定义事件
- 插槽
- 动态组件 & 异步组件
- 处理边界情况
过渡 & 动画
- 进入/离开 & 列表过渡
- 状态过渡
可复用性 & 组合
- 混入
- 自定义指令
- 渲染函数 & JSX
- 插件
- 过滤器
工具
- 单文件组件 ★
- 测试
- TypeScript 支持
- 生产环境部署
规模化
- 路由
- 状态管理
- 服务端渲染
- 安全
内在
- 深入响应式原理
迁移
- 从 Vue 1.x 迁移
- 从 Vue Router 0.7.x 迁移
- 从 Vuex 0.6.x 迁移到 1.0
更多
- 对比其他框架
- 加入 Vue.js 社区
- ~~认识团队~~

内在

深入响应式原理

Vue.set(object, propertyName, value)
this.$set

Object.assign() 或 _.extend() 不会更新

Vue CLI 3

npm install -g @vue/cli # 需要卸载旧版 vue-cli

# 快速原型开发
npm install -g @vue/cli-service-global
vue server # 默认入口 main.js、index.js、App.vue 或 app.vue
vue build

# Create
vue create vue-demo
# use GUI
vue ui

# Pulling 2.x Templates, use "vue init"
npm install -g @vue/cli-init

# add plugin into created project
vue add @vue/eslint

npx vue-cli-service help
vue-cli-service serve
vue-cli-service build
vue-cli-service inspect

Vue

安装

npm install --global vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev

使用

vm.$data === data
v-once  # 一次性插值
v-html
v-bind  # :

v-if
v-show

v-for
<span v-for="n in 10">{{ n }} </span>

v-on:click  # @click
<button v-on:click="warn('Msg', $event)">Submit</button>

# 修饰符
.stop
.prevent
.capture
.self
.once

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
# 可以通过全局 config.keyCodes 对象自定义按键修饰符别名

.exact

.left
.right
.middle

v-model

# Class
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
<div v-bind:class="[{ active: isActive }, errorClass]"></div>

# Style
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px', "text-align": textAlign }"></div>
<div v-bind:style="[baseStyles, overridingStyles]"></div>
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
# 只会渲染数组中最后一个被浏览器支持的值

created()

注意

不要在选项属性或回调上使用箭头函数
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中
2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。
在文本区域插值 (<textarea></textarea>) 并不会生效，应用 v-model 来代替。

组件

Vue.component('com-name', {
    props: ['prop']
    template: '<div>{{prop.title}}</div>'
})

计算属性

不需要在 data 声明
比起 Methods 计算属性是基于它们的依赖进行缓存的

computed: {
  fullName: {
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

侦听器 watch

当需要在数据变化时执行异步或开销较大的操作时

数组更新检测

// 变异方法
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

// 非变异方法
filter()
concat()
slice()

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

// Vue 不能检测以下变动的数组
vm.items[indexOfItem] = newValue
vm.items.length = newLength
// 解决方法
Vue.set(vm.items, indexOfItem, newValue)
vm.items.splice(indexOfItem, 1, newValue)
vm.$set(vm.items, indexOfItem, newValue)  // 全局 Vue.set 的别名
vm.items.splice(newLength)

// Vue 不能检测对象属性的添加或删除
// 解决方法
Vue.set(vm.userProfile, 'age', 27)
vm.$set(vm.userProfile, 'age', 27)
// 添加多个新属性
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

组件基础

自定义事件

子组件Test中：

this.$emit('event-name');

父组件中：

<Test @event-name="someFunc"></Test>

组件注册

<my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

路由

config/index.js assetsPublicPath

Vue Router

路由传参对象模式函数模式

Vuex

Module 插件测试热重载

组件开发

https://blog.csdn.net/litter_lj/article/details/105579542 https://element.eleme.cn/#/zh-CN/component/quickstart 开发vue组件库 https://blog.csdn.net/KlausLily/article/details/104787982/

Vue3

基础
- 表单输入绑定
- 组件基础
深入组件
过渡 & 动画
可复用 & 组合
高阶指南
工具
规模化
- 路由
- 状态管理
- 服务端渲染
- 安全
无障碍

<div id="counter">
  Counter: {{ counter }}
</div>

const Counter = {
  data() {
    return {
      counter: 0
    }
  }
}

Vue.createApp(Counter).mount('#counter')

Component：

const TodoList = {
  data() {
    return {
      groceryList: [
        { id: 0, text: 'Vegetables' },
        { id: 1, text: 'Cheese' },
        { id: 2, text: 'Whatever else humans are supposed to eat' }
      ]
    }
  }
}

const app = Vue.createApp(TodoList)

app.component('todo-item', {
  props: ['todo'],
  template: `<li>{{ todo.text }}</li>`
})

app.mount('#todo-list-app')

const app = Vue.createApp({})
app.component('SearchInput', SearchInputComponent)
app.directive('focus', FocusDirective)
app.use(LocalePlugin)

Vue.createApp({})
  .component('SearchInput', SearchInputComponent)
  .directive('focus', FocusDirective)
  .use(LocalePlugin)

如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

碎片

vue3 不能直接改整个 reactive 定义的变量。

vue3 template 可以直接写 props 的属性

// props

// 第一种
const props = defineProps<{
  modelValue?: any;
  disabled?: boolean;
  isDisabled?: string;
}>();

// 第二种
const props = defineProps<any>({
  id: {
    type: String,
    default: () => {
      return '';
    }
  },
  isActive: {
    type: Boolean,
    default: () => false
  }
});
// 默认值
const props = withDefaults(
  defineProps<{
    modelValue: boolean;
    type?: number;
  }>(),
  {
    modelValue: false,
    type: 1
  }
);

// emits

const emit = defineEmits<{
  (e: 'update:modelValue', value: any): void;
}>();

h(Input, {
    modelValue: foo,
    'onUpdate:modelValue': (value: string) =>
      (foo = value)
});

// watch
// TODO: 监控数据使用函数 return
watch([() => props.data, () => props.isActive], () => {});

CSS 穿透

# vue3
# :v-deep 缩写
:deep(selector)

# vue2
::v-deep selector
# >>> × 弃用
# /deep/ × 弃用

vue props never used

Vue Property Decorator

@Prop()
  visible!: boolean

  get showDialog() {
    return this.visible
  }

  set showDialog(val: boolean) {
    this.$emit('update:visible', val)
  }

配置

支持 SCSS

Vite的官方文档说的很清楚：https://cn.vitejs.dev/guide/features.html#css

Vite已经内置了对sass、scss的支持，无需借助于其他loader插件，只需要安装sass即可：

npm i -D sass

Vue3