vue3 H5页面 Camila Waz 2024-05-23 14:54:12
vue3 H5页面 Camila Waz 2024-05-23 14:54:07
724访问人次
Camila Waz 2022-03-07 10:46:42
vue3 H5页面 Camila Waz 2024-05-23 14:53:52
vue3 H5页面 Camila Waz 2024-05-23 14:53:47
10
vue-router 路由模式有几种?
  • 有 Hash 和 History 两种模式
  • Hash: 使用URL的hash值来作为路由。支持所有浏览器。
  • History: 以来HTML5 History API 和服务器配置。
vue-router有哪几种导航钩子?
  • 有3种。
  • 1、第一种是全局导航钩子:router.beforeEach(to,from,next)。作用是跳转前进行判断拦截。
  • 2、第二种是组件内的钩子。
  • 3、第三种是单独路由独享组件。
router-link上事件无效解决方法
  • 使用 @click.native 。原因:router-link会阻止click事件,.native指直接监听一个原生事件。
vue3 H5页面 Camila Waz 2024-05-23 14:53:43
vue3 H5页面 Camila Waz 2024-05-23 14:53:24
vue3 H5页面 Camila Waz 2024-05-23 14:53:17
vue3 H5页面 Camila Waz 2024-05-23 14:53:12
6

KeepAlive是什么?

  • KeepAlive是vue内部的一个组件
  • 包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染

kep- alive有两个生命周期

  • 1、activated在keep- alive组件激活时调用;
  • 2、deactivated在keep-live组件停用时调用。
vue3 H5页面 Camila Waz 2024-05-23 14:53:08
vue3 H5页面 Camila Waz 2024-05-23 14:53:03
vue3 H5页面 Camila Waz 2024-05-23 14:52:49
vue3 H5页面 Camila Waz 2024-05-23 14:52:40
vue3 H5页面 Camila Waz 2024-05-23 14:52:35
vue3 H5页面 Camila Waz 2024-05-23 14:52:30
vue3 H5页面 Camila Waz 2024-05-23 14:52:24
62
Provide (提供)
  • 要为组件后代提供数据,需要使用到 provide() 函数:
<script setup>
import { provide } from 'vue'

provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
</script>
Inject (注入)
  • 要注入上层组件提供的数据,需使用 inject() 函数:
<script setup>
import { inject } from 'vue'

const message = inject('message')
</script>
vue3 H5页面 Camila Waz 2024-05-23 14:52:19
vue3 H5页面 Camila Waz 2024-05-23 14:52:13
vue3 H5页面 Camila Waz 2024-05-23 14:52:09
16
  • v-model 可以在组件上使用以实现双向绑定。
  • 从 Vue 3.4 开始,推荐的实现方式是使用 defineModel()
  • 例如
  • 父组件:
<!-- Parent.vue -->
<Child v-model="countModel" />
  • 子组件
<!-- Child.vue -->
<script setup>
const model = defineModel()

function update() {
  model.value++
}
</script>

<template>
  <div>Parent bound v-model is: {{ model }}</div>
</template>
vue3 H5页面 Camila Waz 2024-05-23 14:52:03
vue3 H5页面 Camila Waz 2024-05-23 14:51:57
vue3 H5页面 Camila Waz 2024-05-23 14:51:50
11
  • 组件注册有两种方式:全局注册和局部注册。
  • 全局注册
  • 使用 Vue 应用实例的 .component() 方法,让组件在当前 Vue 应用中全局可用。
import { createApp } from 'vue'

const app = createApp({})

app.component(
  // 注册的名字
  'MyComponent',
  // 组件的实现
  {
    /* ... */
  }
)
vue3 H5页面 Camila Waz 2024-05-23 14:51:44
vue3 H5页面 Camila Waz 2024-05-23 14:51:38
8
  • 组合式 API 获得该模板引用,需要声明一个匹配模板 ref attribute 值的 ref:
<script setup>
import { ref, onMounted } from 'vue'

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

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

<template>
  <input ref="input" />
</template>
vue3 H5页面 Camila Waz 2024-05-23 14:51:19
296
watchEffect()
  • watchEffect()是深层侦听器的简写 例如深度监听代码:
const todoId = ref(1)
const data = ref(null)

watch(
  todoId,
  async () => {
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
    )
    data.value = await response.json()
  },
  { immediate: true }
)
  • watchEffect()简写后的代码:
watchEffect(async () => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  data.value = await response.json()
})
vue3 H5页面 Camila Waz 2024-05-23 14:51:12
16

生命周期钩子

  • onMounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码:
<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`the component is now mounted.`)
})
</script>

生命周期图示

good博客 图片

vue3 H5页面 Camila Waz 2024-05-23 14:51:01
23
  • .lazy
  • 默认情况下,v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据:
<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" />
  • .number

如果你想让用户输入自动转换为数字,你可以在 v-model 后添加 .number 修饰符来管理输入:

<input v-model.number="age" />
  • 如果该值无法被 parseFloat() 处理,那么将返回原始值。
  • number 修饰符会在输入框有 type="number" 时自动启用。
  • .trim
  • 如果你想要默认自动去除用户输入内容中两端的空格,你可以在 v-model 后添加 .trim 修饰符:
<input v-model.trim="msg" />
vue3 H5页面 Camila Waz 2024-05-23 14:50:54
14

事件修饰符

  • 1、stop
  • 2、prevent
  • 3、self
  • 4、capture
  • 5、once
  • 6、passive
vue3 H5页面 Camila Waz 2024-05-23 14:50:17
18
  • 组件上使用 v-for

  • 我们可以直接在组件上使用 v-for,和在一般的元素上使用没有区别 (别忘记提供一个 key):
<MyComponent v-for="item in items" :key="item.id" />
  • 但是,这不会自动将任何数据传递给组件,因为组件有自己独立的作用域。为了将迭代后的数据传递到组件中,我们还需要传递 props:
<MyComponent
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
/>
vue3 H5页面 Camila Waz 2024-05-23 13:41:09
220
  • v-if 和 v-show

  • 1、v-if 创建、删除DOM元素,v-show 仅切换了该元素上名为 display 的 CSS 属性。
  • 2、v-show 不支持在 <template> 元素上使用,也不能和 v-else 搭配使用。
  • 3、频繁切换,使用 v-show 较好;如果在运行时绑定条件很少改变,则 v-if 会更合适。
  • v-if 和 v-for

  • 当 v-if 和 v-for 同时存在于一个元素上的时候,v-if 会首先被执行。
vue3 H5页面 Camila Waz 2024-05-23 13:41:03
vue3 H5页面 Camila Waz 2024-05-23 13:40:06
64

计算属性缓存 vs 方法

  • 计算属性具有缓存性 相关属性变化时才重新计算,否则返回之前计算的结果

  • 方法 调用总是会在重渲染发生时再次执行函数

  • 将逻辑代码写在计算属性里

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

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

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// 一个计算属性 ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>
vue3 H5页面 Camila Waz 2024-05-23 13:30:47
24

声明响应式状态

  • ref()
  • 在组合式 API 中,推荐使用 ref() 函数来声明响应式状态:
import { ref } from 'vue'

const count = ref(0)
  • reactive()
  • 还有另一种声明响应式状态的方式,即使用 reactive() API。与将内部值包装在特殊对象中的 ref 不同,reactive() 将使对象本身具有响应性:
import { reactive } from 'vue'

const state = reactive({ count: 0 })

reactive() 的局限性

  • 1、 有限的值类型:它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型。
  • 2、不能替换整个对象:由于 Vue 的响应式跟踪是通过属性访问实现的,因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象,因为这样的话与第一个引用的响应性连接将丢失:
vue3 H5页面 Camila Waz 2024-05-23 13:21:32
vue3 H5页面 Camila Waz 2024-05-23 13:09:34
25

应用实例

  • 通过 createApp 函数创建一个新的 应用实例:
import { createApp } from 'vue'

const app = createApp({
  /* 根组件选项 */
})
vue3 H5页面 Camila Waz 2024-05-23 12:59:01
25
  • 在命令行中运行以下命令
npm create vue@latest
  • 接着是TypeScript 和测试支持之类的可选功能提示:
? Project name: … <your-project-name>
? Add TypeScript? … No / Yes
? Add JSX Support? … No / Yes
? Add Vue Router for Single Page Application development? … No / Yes
? Add Pinia for state management? … No / Yes
? Add Vitest for Unit testing? … No / Yes
? Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
? Add ESLint for code quality? … No / Yes
? Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./<your-project-name>...
Done.
  • 如果不确定是否要开启某个功能,可以直接按下回车键选择 No。在项目被创建后,通过以下步骤安装依赖并启动开发服务器:
cd <your-project-name>
npm install
npm run dev
vue3 H5页面 Camila Waz 2024-05-23 12:50:16
138
Vue 是渐进式框架
  • 1、无需构建步骤,渐进式增强静态的 HTML
  • 2、在任何页面中作为 Web Components 嵌入
  • 3、单页应用 (SPA)
  • 4、全栈 / 服务端渲染 (SSR)
  • 5、Jamstack / 静态站点生成 (SSG)
  • 6、开发桌面端、移动端、WebGL,甚至是命令行终端中的界面
vue3 H5页面 Camila Waz 2024-05-23 01:59:10
22
<body onhashchange="myFn()">
    <a href="#123">123</a>
    <a href="#456">456</a>
</body>
<script>
    function myFn() {
        console.log('good1230.com')
    }
</script>
JavaScript H5页面 Camila Waz 2023-06-17 10:19:32
15
let textarea = document.querySelector('textarea')
    textarea.onbeforeinput = function (e) {
        let RegEx = /[0-9]/
        if (RegEx.test(e.data)) {
            e.returnValue = false
        }
    }
JavaScript H5页面 Camila Waz 2023-06-17 09:53:41
13
[root@localhost ~]# groupadd [选项] 组名
[root@localhost ~]# groupmod [选现] 组名
[root@localhost ~]# groupdel 组名
linux教程 H5页面 Camila Waz 2022-11-20 18:42:03
11

查看用户hlj的uid和gid

[hlj@localhost html]$ id hlj
uid=1002(hlj) gid=1004(hlj) 组=1004(hlj)

把hlj用户加入root组后,查看用户hlj的uid和gid

[root@localhost /]# usermod -G root  hlj
[hlj@localhost html]$ id hlj
uid=1002(hlj) gid=1004(hlj) 组=1004(hlj),0(root)
linux教程 H5页面 Camila Waz 2022-11-20 18:23:03
linux教程 H5页面 Camila Waz 2022-11-20 18:00:38
linux教程 H5页面 Camila Waz 2022-11-19 10:01:16