vue3学习笔记

1vue介绍

参考官网

2属性绑定和事件绑定

如果不使用vue就会改变dom层面数据

使用vue后 mounted会在浏览器加载完成后 执行 是在数据层面上加的

渲染结果

以上就是数据驱动视图

鼠标悬浮的信息

v-bind:title="message"

渲染结果

用户响应

v-on:click="方法名"

3数据双向绑定 v-model

<input v-model=’'message">

用户名 密码响应 双向绑定

4 条件循环 v-if=‘变量名’

效果是点一下隐藏 点一下出来
v-if=‘show’ 在data()中定义为true

v-for=“todo in todos”

5组件

将其放到另一个组件的模板中：
ps：记得放在conter下面 因为是挂载在conter下面

<ol>
  <!-- 创建一个 todo-item 组件实例 -->
  <todo-item></todo-item>
</ol>

效果如下：

父组件是connter 子组件是TodoItem

这里是将父的参数传递给子参数
通过组件形式传递
分成了导航栏和view view又分成了sidebar和content两个组件

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

6应用和组件实例

组件全局注册

   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)

Conter是根组件 counter是div

生命周期的钩子函数

7文本和html

v-html

效果

10 计算属性和监听器

计算 computed是处理响应式数据

方法和计算属性效果一样 但是计算有缓存 方法需要调用多次

监听器
监听版本

const vm = Vue.createApp({
  data() {
    return {
      firstName: 'Foo',
      lastName: 'Bar',
      fullName: 'Foo Bar'
    }
  },
  watch: {
    firstName(val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName(val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
}).mount('#demo')

计算版本

const vm = Vue.createApp({
  data() {
    return {
      firstName: 'Foo',
      lastName: 'Bar'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
}).mount('#demo')

11class style

active样式

12条件渲染

v-if vs v-show

13列表渲染

v-for

也可以用于对象中

不能同时使用 v-for 和v-if 否则会出问题
v-for需要绑定一个key属性 一般不用index 用name或id key是渲染的标识

14事件绑定

会在按钮sayhi 中先后弹出button和hi


多事件处理 用逗号隔开

15多选框 表单输入绑定

15选择框

2.1初识nodejs

2.2yarn和npm

2.3es6解构

{}取出值

2.4es6 模块化

import 和export default

2.5es6-promise

实现延迟1s打印一个，将异步变同步,回调地狱，通过promise解决

2.6vue脚手架

2.7 vue-router

2.8代码改造

和路由相关的代码放在 router下的index.js

2.9动态路由匹配

const User = {
  template: '<div>User {{ $route.params.id }}</div>',
}

路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。因此，我们可以通过更新 User 的模板来呈现当前的用户 ID （this 是vm实例）

2.10路由匹配语法

在参数中自定义正则

由于，orderId 总是一个数字，而 productName 可以是任何东西，所以我们可以在括号中为参数指定一个自定义的正则：

const routes = [
  // /:orderId -> 仅匹配数字
  { path: '/:orderId(\\d+)' },
  // /:productName -> 匹配其他任何内容
  { path: '/:productName' },
]

现在，转到 /25 将匹配 /:orderId，其他情况将会匹配 /:productName

可重复的参数

如果你需要匹配具有多个部分的路由，如 /first/second/third，你应该用 *（0 个或多个）和 +（1 个或多个）将参数标记为可重复：

接受的是一个数组['12','23','12']

2.11嵌套路由

在router下的index.js中用children引入子路由

在user下的index.vue下嵌套子页面


修改：跳转的id不写死 而是通过$route.parama.id获得

2-12路由命名和视图命名

除了 path 之外，你还可以为任何路由提供 name。这有以下优点：

没有硬编码的 URL
params 的自动编码/解码。
防止你在 url 中出现打字错误。
绕过路径排序（如显示一个）

const routes = [
  {
    path: '/user/:username',
    name: 'user',
    component: User
  }
]

<router-link :to="{ name: 'user', params: { username: 'erina' }}">
  User
</router-link>

在这两种情况下，路由将导航到路径 /user/erina。

简单来说，就用路由名字代替复杂的url

12号用户的url与13号用户的url的传递方式 对比，12号是通过参数的形式传递

视图命名

同一个页面 存在两个组件
有多个router view 时的渲染，这样会同时出现Home和About的关系

2.13编程式导航

注意：在 Vue 实例中，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

当你点击 <router-link> 时，内部会调用这个方法，所以点击 <router-link :to="..."> 相当于调用 router.push(...) ：

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })


//如果提供了 path，params 会被忽略，
//上述例子中的 query 并不属于这种情况。
//取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path  
const username = 'eduardo'
// 我们可以手动建立 url，但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo
// 同样
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user

由于属性 to 与 router.push 接受的对象种类相同，所以两者的规则完全相同。

router.push 和所有其他导航方法都会返回一个 Promise，让我们可以等到导航完成后才知道是成功还是失败。
在根主键App内 访问/时 利用setTimeout函数3s后自动跳转到about页面

2.14重定向和别名

重定向

也是通过 routes 配置来完成，下面例子是从 /home 重定向到 /：

const routes = [{ path: '/home', redirect: '/' }]

别名

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

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

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

2.15路由组件传参

你的组件中使用 $route 会与路由紧密耦合，这限制了组件的灵活性，因为它只能用于特定的 URL。虽然这不一定是件坏事，但我们可以通过 props 配置来解除这种行为：

我们可以将下面的代码

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const routes = [{ path: '/user/:id', component: User }]

替换成

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const routes = [{ path: '/user/:id', component: User, props: true }]

当 props 设置为 true 时，route.params 将被设置为组件的 props

命名视图

2.16不同的历史记录

2.17导航守卫

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

路由独享的守卫

2.18动态路由

3.1vuex

什么是“状态管理模式”？ 让我们从一个简单的 Vue 计数应用开始

const Counter = {
  // 状态
  data () {
    return {
      count: 0
    }
  },
  // 视图
  template: `
    <div>{{ count }}</div>
  `,
  // 操作
  methods: {
    increment () {
      this.count++
    }
  }
}

createApp(Counter).mount('#app')

其实 有state属性就可以做到全局共享变量，我们甚至可以通过对state.count来修改对应的值，但是state是全局的，是多个组件的共享属性，那么对这个属性的操作就不应该放在具体的组件当中，
所以需要mutations，保存了对共享数据的修改逻辑

可以通过 store.state 来获取状态对象，并通过 store.commit 方法触发状态变更：

store.commit(‘increment’)

console.log(store.state.count) // -> 1
plus函数通过store.commit(‘increment’)来对共享变量进行操作逻辑

3.3async 和await
在store index.js下引入store 的实例

await 后面接一个会return new promise的函数并执行它
await 只能放在async函数里

使用computed 中this.$store.state.count 直接在template中引用count

mapstatus

3.5getter

或者 通过… 复合不同类型的函数

3.6 mutation

3.7action

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作
  

调用dispatch函数

action 提交mutation 然后m修改state的数据

3.8模块化

module

3.9 element-plus

3.10组合式api

在vue3.0 不使用setup 的写法
Delete 需要在export中导出

setup的理解：setup中return的东西可以暴露给任何一个组件


ref 变量变成响应式的
import {ref} from ‘vue’

效果

3.12 datepincker

3.13组合式api

3.14完成登录页面