【Vue】例子学习篇1

MVC和MVVM？

1. MVC模式中，M(Model)负责提供数据，V(View)负责显示，C（controller）负责逻辑处理。流程是：
   (1)当用户需要发送请求时，首先是在View发送请求，由View将指令传送到Controller里。
   (2)Controller接收到指令之后，先完成所需要的业务逻辑，然后要求Model根据业务逻辑改变状态；
   (3)Model将新的数据发送给View，View则根据新的数据更新视图，从而用户的请求得到反馈。
   …
   具体的知识想看的时候再看吧，先在这里吃一下灰

继续Vue的学习

1. ref()让我们能创造一种对任意值的“引用”，并能够在不丢失响应性的前提下传递这些引用

 v-for="dict in List"
              :key="dict.id"//唯一值
              :label="dict.name"//显示的值
              :value="dict.id"//传给后台的值

4. 数组的map方法：

array.map(function(item,index,arr){})
map方法的返回值，返回映射后的新数组

5. innerHTML指的是从对象的起始位置到终止位置的全部内容，包括html标签；innerText指的是从起始位置到终止位置的内容，去掉html标签的
6. 小小例子
   判断鼠标的坐标：

<script setup>
import { ref, onMounted } from 'vue'
const x = ref(0)
const y = ref(0)
onMounted(()=>{addEventListener('mousemove',update)})
//及时remove掉也很有必要
onUnmounted(() => window.removeEventListener('mousemove', update))
const update = function(e){
  x.value = e.pageX
  y.value = e.pageY
}
</script>

<template>Mouse is at:({{x}},{{y}})</template>

computed

computed()方法期望接受一个getter函数，返回值为一个计算属性ref，Vue的计算属性会自动追踪响应式依赖。
计算属性会基于其响应式依赖被缓存

类与样式的绑定

Vue的样式绑定支持对象以及数组的绑定，通过:class='对象'可以进行样式的绑定

子组件的props

子组件声明props，里面的props项用camelCase去声明

<script setup>
const props = defineProps(['foo'])//声明成数组的形式
defineProps({
titile:String	//props的名称，以及对应的属性类型
likes:Number
})//声明成对象的形式
</script>

父组件向子组件传递的要是kebab-case形式；
不应该在子组件中去更改一个prop

依赖注入

主要解决的问题是：props逐级传递，传递链冗长的问题

模板引用

通过组合式API获得模板引用，需要声明一个同名的ref:

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

// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const input = ref(null)

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <input ref="input" />
</template>

如果不使用

export default {
  setup() {
    const input = ref(null)
    // ...
    return {
      input
    }
  }
}

动态组件

在tab标签之间切换页面，需要用到

<component :is=""></component>

:is的值可以是：

1. 被注册的组件名
2. 被导入的组件对象
   官方文档

keepAlive

上面的component存在一个问题，就是来回切换的过程中会刷新组件的状态
解决方法是用把这些动态组件给包裹起来

<!-- 非活跃的组件将会被缓存！ -->
<KeepAlive>
  <component :is="activeComponent" />
</KeepAlive>

DOM中的property和attribute

参考博客
attribute是元素标签的属性，它的值只能是字符串；
property是元素对象的属性，JS中的对象
attribute和property之间的数据绑定是单向的，attribute->property

自定义

DOM中的节点事实上是一个对象，因此可以添加自定义属性以及方法。
标准属性（Standard Attribute）：固有属性
自定义属性（Custom Property)：
Custom Attribute

自定义指令

在

<script setup>
// 在模板中启用 v-focus
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

<template>
  <input v-focus />
</template>