Vue小结

Vue小结

Vue是什么Vue是渐进式框架

文本插入

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法（双大括号）

原始HTML

双大括号将数据解释为纯文本，而不是HTML。若想插入HTML,需要使用指令v-html

例如：

//xxx是vue实列里面data定义的属性值
<div v-html='xxx'>
    '<h1>
        哈哈
    </h1>'
</div>

Attribute（属性）绑定

双大括号不能在HTML attributes中使用。想要响应式的绑定一个attribute,应该使用v-bind指令后面接需要绑定的属性（attributes）的名称 v-bind的简写 ：class=‘xxx’

Class与Style绑定

绑定HTML class

我们可以通过==：class== v-bind:class传递一个对象来动态切换class;

<div :class='{active:isActive}'>
    
</div>

上面的语法表示active是否存在取决于数据属性isActive值的真假

绑定内联样式

绑定对象

:style v-bind:style支持绑定JavaScript对象值，对应的是HTML元素的style属性

<div :style="{color:activeColor,fontSize:fontSize+'px'}">
    
</div>

nextTick()

当你更改响应式状态后，DOM 会自动更新。然而，你得注意 DOM 的更新并不是同步的。相反，Vue 将缓冲它们直到更新周期的 “下个时机” 以确保无论你进行了多少次状态更改，每个组件都只需要更新一次。

若要等待一个状态改变后的 DOM 更新完成，你可以使用 nextTick() 这个全局 API：

import { nextTick } from 'vue'

function increment() {
  state.count++
  nextTick(() => {
    // 访问更新后的 DOM
  })
}

计算属性（computed）

计算下来的属性会有缓存，而方法mosted不会有缓存

计算属性缓存vs方法

我们将函数定义为一个方法而不是计算属性，两种方式结果上确实完全相同，然而，不同之处在于计算属性值会基于响应式依赖被缓存。一个计算属性权会在其响应依赖更新时才会重新计算。

当我们需要多次使用一个大量的值的逻辑计算时候就建议使用计算属性，要不然来回从头计算这个值相对来说耗能较大

V-if V-for优先级

V-if 优先级高于 V-for

V-if

v-if指令会基于表达式值的真假来插入/移除该节点元素

• v-else-if
• v-else

V-show

v-show和v-if指令都是按照条件来显示或者隐藏元素

二者不同点：v-show会在DOM渲染中保留该元素它只是通过display来控制DOM的透明度而v-if则是控制DOM是否渲染 当平凡来回切换的时候建议使用v-show因为v-if它是通过来回创建节点频繁切换相对浏览器的耗能较大

事件处理

使用v-on指令（简写为@）来监听DOM事件，并在事件触发时执行对应的JavaScript。用法：v-on:click='xxx’或@click=‘xxx’

获取事件DOM

方法事件处理会自动接收原生DOM事件并触发执行。在函数形参里触底event或者e去接收触发事件的DOM。通过event.target.tagName获取DOM元素

注意当我们在写函数的时候需要传入多个参数而且需要获取元素那么传入的event就应该改变成==$event==

案例：https://blog.csdn.net/qq_52600282/article/details/127751110?spm=1001.2014.3001.5501

事件修饰符

• .stoop 防止冒泡事件
• .prevent 阻止默认事件
• .capture 事件捕获
• .self 只会触发自己范围内的事件，不包含子元素
• .once 只会触发一次

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>

<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>

表单输入绑定

v-model 数据双向绑定指令

实现原理

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

//等同于
<input v-model="text">

生命周期函数

• beforeCreate 创建前
• created 创建后
• beforeMount 挂载前
• Mounted 挂载后
• beforeUpdate 修改器
• Updated 修改后
• beforeUnmount 卸载前
• unmounted 卸载后

侦听器watch

使用：

https://blog.csdn.net/qq_52600282/article/details/127739815?spm=1001.2014.3001.5501

组件基础

定义一个组件：当使用构造步骤时，我们会将Vue组件定义在一个单独的.vue文件中，这被叫做单文件组件（简称SFC)

使用组件

要使用一个子组件，我们需要在父组件中导入他。但是在此组件中我们需要将它给暴露出来。接下来我们需要在components选项上注册它。这个组件将会以其注册时候的名字作为模板中的标签名

组件的全局使用

通过vue应用实例的app.component() 方法，让组件在当前Vue应用中全局可用。

通常来说在main.js中配置

import { createApp } from 'vue'
import MyComponent from './App.vue'
const app = createApp({})

app.component('MyComponent', MyComponent)

全局注册的注意点：

• 全局注册，并没有被使用的组件无法在生产打包时被自动移除（也叫‘tree-shaking)。如果你全局注册了一个组件，即使它并没有被实际使用，它任然会出现在打包后的js文件中。
• 全局注册在大型项目的依赖关系变得不那么明确。在父组件中使用子组件时，不太容易定位子组件的实现。和使用过多的全局变量一样，这可能会影响应用长期的可维修性。

< KeepAlive>

当我们使用切换其他组件的时候 我们当前组件写入的内容就会被清除 keepAlive就起缓存的效果

路由 VueRouter

router-link

• 使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。

router-view

• 示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

// 1. 定义路由组件.
// 也可以从其他文件导入
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})

// 5. 创建并挂载根实例
const app = Vue.createApp({})
//确保 _use_ 路由实例使
//整个应用支持路由。
app.use(router)

app.mount('#app')

// 现在，应用已经启动了！

动态路由

也就是路由地址后面传入一些参数的路由

动态路由的应用场景： 从新闻列表页面点击到新闻的详情页面

const User = {
  template: '<div>User</div>',
}

// 这些都会传递给 `createRouter`
const routes = [
  // 动态字段以冒号开始
  { path: '/users/:id', component: User },
]

嵌套路由

children 子类路由

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        // 当 /user/:id/profile 匹配成功
        // UserProfile 将被渲染到 User 的 <router-view> 内部
        path: 'profile',
        component: UserProfile,
      },
      {
        // 当 /user/:id/posts 匹配成功
        // UserPosts 将被渲染到 User 的 <router-view> 内部
        path: 'posts',
        component: UserPosts,
      },
    ],
  },
]

组件UserProfile想要显示就要把 router-view放置到User组件中

重定向

重定向也是通过 routes 配置来完成

// 从 /home 重定向到 /
const routes = [{ path: '/home', redirect: '/' }]

// 重定向的目标也可以是一个命名的路由：
const routes = [{ path: '/home', redirect: { name: 'homepage' } }]


//甚至是一个方法，动态返回重定向目标：
const routes = [
  {
    // /search/screens -> /search?q=screens
    path: '/search/:searchText',
    redirect: to => {
      // 方法接收目标路由作为参数
      // return 重定向的字符串路径/路径对象
      return { path: '/search', query: { q: to.params.searchText } }
    },
  },
  {
    path: '/search',
    // ...
  },
]

别名

重定向是指当用户访问 /home 时，URL 会被 / 替换，然后匹配成 /。那么什么是别名呢？

将 / 别名为 /home，意味着当用户访问 /home 时，URL 仍然是 /home，但会被匹配为用户正在访问 /。

//  alias   启用别名 /home  
const routes = [{ path: '/', component: Homepage, alias: '/home' }]

完整的导航解析流程

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫(2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

数据交互（接口) Axios

配置Axios

import { createApp } from 'vue'
import router from './router'
import store from './store'
import Axios from 'axios'
import Utils from '@/tool/utils'
import App from './App.vue'

// ...

const app = createApp(App)

/* 挂载全局对象 start */
app.config.globalProperties.$http = Axios
app.config.globalProperties.$utils = Utils
/* 挂载全局对象 end */

app.use(router).use(store);
app.mount('#app')

配置了全局的$http 就直接去用即可

// 使用也就是

状态管理

pinia状态管理 它比本地存储的要可以控制更多状态 而且它一旦改变 其他页面使用到的状态也就里面改变

• state 定义状态的控制变量
• Getter 完全等同于 store 的 state 的计算值。可以通过 defineStore() 中的 getters 属性来定义它们。推荐使用箭头函数，并且它将接收 state 作为第一个参数：
• Action 相当于组件中的 method。它们可以通过 defineStore() 中的 actions 属性来定义，并且它们也是定义业务逻辑的完美选择。

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})



//Getter
export const useStore = defineStore('main', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
})



//Action 相当于组件中的 method。它们可以通过 defineStore() 中的 actions 属性来定义，并且它们也是定义业务逻辑的完美选择。
export const useStore = defineStore('main', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
    randomizeCounter() {
      this.count = Math.round(100 * Math.random())
    },
  },
})

Vuex也是状态管理 但是不管是vuex是pinai最终都要转换成本地存储

getters: {
doubleCount: (state) => state.count * 2,
},
})

//Action 相当于组件中的 method。它们可以通过 defineStore() 中的 actions 属性来定义，并且它们也是定义业务逻辑的完美选择。
export const useStore = defineStore(‘main’, {
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++
},
randomizeCounter() {
this.count = Math.round(100 * Math.random())
},
},
})

Vuex也是状态管理  但是不管是vuex是pinai最终都要转换成本地存储