vue

迷茫,现在不知道写什么项目，做个知识总结吧

基础用法尽量概括一下

vue的目录结构就不说了，

组合式 script template style

碎碎念知识点从vue官方文档写缩略概况

文本插值 {{message}}
v-html = “html” html插入

属性 v-bind:id 简写 :id 自定义属性
一个可以有一个自定义和一个静态的，动态的优先级高于静态
但是下面代码

<div id="111" :id="222"></div>
//id="111" 难道是第一次渲染过后锁定了?

:disabled=”true or false” //写函数按钮是否显现判断 script写逻辑

动态绑定多个值

const object ={
    id: 'id',
    class: 'class',
    style: 'style'
}

<div v-bind="object"></div>

支持单一表达式
{{}}

v-if v-else v-for
v-for 和v-if不能放在一个标签上
vue3v-if优先级大于v-for 会先进行v-if判断
v-for 需要加key 为了diff算法管理

:Arguments :href

v-on:click
@click

动态属性 attributeName=”href”
:[attributeName]

@[eventName]

为字符串 null表示移除

css属性避免使用大写字母浏览器会强制转换小写, 单文件组件内的模板不受此限制

装饰符
submit.prevent

ref 深层响应性都可以
shallowRef 取消深层响应性
reactive 接收对象数组
showReactive 取消深层响应性

解构会丢失响应性
toRefs() 恢复

dom更新需要等dom更新完成在进行操作需要使用nextTick() 异步的 async await nextTick()
//下面书写dom更新完成需要执行的代码
…
//

计算属性（可读）避免直接修改计算属性的值

计算属性相对于方法有缓存
如果响应式依赖没有改变会直接返回上一次计算的值，相对方法不需要进行getter

写的很好,归我了哈哈哈(-.><.-)

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
</script>

绑定类的方法

//绑定对象
:class="{active: isActive}"

const classobject =reactive({
    active: true ,
    'text-danger': false
})
<div :class="classobject"></div>
//绑定数组
const activeClass = ref('active')
const errorClass = ref('text-danger')
<div :class ="[activeClass, errorClass]"></div>
//[写三元表达式,套对象]

绑定样式的方式

//camelCase 官方推荐这个 ,感觉写对象和这个最佳
<div :style="{color: activeColor ,fontSize: fontSize + 'px'}"></div>
//键值对
<div :style ="{'font-size': fontSize + 'px'}">
//对象
const styleObject =reactive({
    color: 'red',
    fontSize: '30px'
})
<div :style = "styleObject"></div>

//绑定数组 同理

会匹配浏览器最后能匹配的值

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

数组方法

挺重要的,虽然学javascript也用过,但是写项目需求更多
push() pop() shift() unshift() 末尾加末尾减头删头加
splice() sort() reverse() 删除添加正排序反排序

filter() 返回一个满足条件新数组

concat() 两个数组合并

slice(start, end) 返回从start到end的元素

计算属性不应该更改数组(不用) reverse() 和 sort() 会更改原始数组

修饰符

事件修饰符

.stop
.prevent
.self
.capture
.once
.passive

<!-- 添加事件监听器时，使用 `capture` 捕获模式 -->
<!-- 例如：指向内部元素的事件，在被内部元素处理前，先被外部处理 -->
<div @click.capture="doThis">...</div>

<!-- 点击事件最多被触发一次 -->
<a @click.once="doThis"></a>

<!-- 滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成 -->
<!-- 以防其中包含 `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>

按键修饰符

<!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
<input @keyup.enter ="submit"/>
<input @keyup.page-down="onPageDown" />

.enter
.tab
.delete (捕获“Delete”和“Backspace”两个按键)
.esc
.space
.up
.down
.left
.right

与 keyup 事件一起使用时，该按键必须在事件发出时处于按下状态。
keyup.ctrl 只会在你仍然按住 ctrl 但松开了另一个键时被触发。若你单独松开 ctrl 键将不会触发。
.ctrl
.alt
.shift
.meta

.exact 精确控制
click.ctrl.exact

鼠标按键修饰符
.left
.right
.middle

v-model

<input
  :value="text"
  @input="event = > text = event.target.value">

v-model=”message” input 的message监听
v-model=”message” textarea 的message监听
v-model=”checked”
v-model=”selected”
select v-model=”selected” multiple
option
option

const checkedName =ref([])
v-model= “checkedName”

select v-model=”selected”
option :value=”{number:123}”

selected将被设置为{number:123}

.lazy change事件更新 IME拼字除外 (IME拼字更新需要第一段代码)

.number 转数字

.trim 去除内容两端空格

生命周期

setup

beforceCreate
created
beforceMount

                    beforceUpdate

mounted ——————->
updated

beforceUnmount
Unmounted

watch 重要 watcheffect

immediate：在侦听器创建时立即触发回调。第一次调用时旧值是 undefined。
deep：如果源是对象，强制深度遍历，以便在深层级变更时触发回调。参考深层侦听器。
flush：调整回调函数的刷新时机。参考回调的刷新时机及 watchEffect()。
onTrack / onTrigger：调试侦听器的依赖。参考调试侦听器。
once：回调函数只会运行一次。侦听器将在回调函数首次运行后自动停止

watch(ref(‘’))
watch(()=>state)
watch([], ([],[]))

深度监听懒监听第一次不监听
watch(obj(响应式对象),(newValue,oldValue)=>{

}, 修饰deep)

watchEffect(()=>{
不需要声明obj简化
})

const count =ref('0')
watchEffect(()=>{
    console.log(count.value)
})
//0
count.value++
//1

watch 只追踪明确侦听的数据源
watchEffect 自动追踪所有能访问到的响应式属性

停止需要调用返回函数 同步时不需要会自动停止,异步式不会挂载到当前组件上需要停止
const stop =watch(,(,_)=>{})
stop()
const stopEffect =watchEffect(()=>{})
stopEffect

// 需要异步请求得到的数据
const data = ref(null)

watchEffect(() => {
  if (data.value) {
    // 数据加载后执行某些操作...
  }
})

模板引用

需要组件挂载后才有

const div =ref('null')

<div ref='div'></div>
console.log(div.value) //divElement元素

vue 3.5 版本

const name =useTemplateRef('div')
<div ref='div'></div>
onsole.log(name.value) //divElement元素

拿到的是v-for下的Elements所有元素
const itemsRef =ref([])
v-for ref=”itemsRef”

组件

props emits
slot

// JavaScript 中的 camelCase
const BlogPost = {
  props: ['postTitle'],
  emits: ['updatePost'],
  template: `
    <h3>{{ postTitle }}</h3>
  `
}
template
<!-- HTML 中的 kebab-case -->
<blog-post post-title="hello!" @update-post="onUpdatePost"></blog-post>

动态组件

onActived()
onDeactived()

<component :is="activeComponent"/>
<KeepAlive include="a,b">
<component :is="activeComponent"/>
</KeeAlive>

// :include="/a|b/"
// :include="['a', 'b']"
//:max="10"

传递组件模板

to css选择器字符串,DOM元素对象模板片段传送到元素下

<Teleport :disabled="isMobile">
</Teleport>