Vue3学习笔记-自定义指令及路由

前端五年级学生
1,542 阅读5分钟

Vue3自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。

下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
    <p>页面载入时，input 元素自动获取焦点：</p>
    <input v-focus>
</div>

<script>
const app = Vue.createApp({})
// 注册一个全局自定义指令 `v-focus`
app.directive('focus', {
  // 当被绑定的元素挂载到 DOM 中时……
  mounted(el) {
    // 聚焦元素
    el.focus()
  }
})
app.mount('#app')
</script>
</body>
</html>

我们也可以在实例使用 directives 选项来注册局部指令，这样指令只能在这个实例中使用：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
    <p>页面载入时，input 元素自动获取焦点：</p>
    <input v-focus>
</div>

<script>
const app = {
   data() {
      return {
      }
   },
   directives: {
      focus: {
         // 指令的定义
         mounted(el) {
            el.focus()
         }
      }
   }
}
 
Vue.createApp(app).mount('#app')
</script>
</body>
</html>

钩子

钩子函数

指令定义函数提供了几个钩子函数（可选）：

  • created : 在绑定元素的属性或事件监听器被应用之前调用。
  • beforeMount : 指令第一次绑定到元素并且在挂载父组件之前调用。。
  • mounted : 在绑定元素的父组件被挂载后调用。。
  • beforeUpdate: 在更新包含组件的 VNode 之前调用。。
  • updated: 在包含组件的 VNode 及其子组件的 VNode 更新后调用。
  • beforeUnmount: 当指令与元素解除绑定且父组件已卸载时，只调用一次。
  • unmounted: 当指令与元素解除绑定且父组件已卸载时，只调用一次。
import { createApp } from 'vue'
const app = createApp({})

// 注册 app.directive('my-directive', { 
// 指令是具有一组生命周期的钩子： 
// 在绑定元素的 attribute 或事件监听器被应用之前调用 
created() {}, 
// 在绑定元素的父组件挂载之前调用 
beforeMount() {}, 
// 绑定元素的父组件被挂载时调用 
mounted() {}, 
// 在包含组件的 VNode 更新之前调用 
beforeUpdate() {}, 
// 在包含组件的 VNode 及其子组件的 VNode 更新之后调用 
updated() {}, 
// 在绑定元素的父组件卸载之前调用 
beforeUnmount() {}, 
// 卸载绑定元素的父组件时调用 
unmounted() {} })
// 注册 (功能指令) 
app.directive('my-directive', () => { 
// 这将被作为 `mounted` 和 `updated` 调用 }) 
// getter, 如果已注册，则返回指令定义 
const myDirective = app.directive('my-directive')

钩子函数参数

钩子函数的参数有：

el

el 指令绑定到的元素。这可用于直接操作 DOM。

binding

binding 是一个对象，包含以下属性：

  • instance：使用指令的组件实例。
  • value：传递给指令的值。例如，在 v-my-directive="1 + 1" 中，该值为 2。
  • oldValue：先前的值，仅在 beforeUpdate 和 updated 中可用。值是否已更改都可用。
  • arg：参数传递给指令 (如果有)。例如在 v-my-directive:foo 中，arg 为 "foo"。
  • modifiers：包含修饰符 (如果有) 的对象。例如在 v-my-directive.foo.bar 中，修饰符对象为 {foo: true，bar: true}。
  • dir：一个对象，在注册指令时作为参数传递。例如，在以下指令中：
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

dir 将会是以下对象：

{
  mounted(el) {
    el.focus()
  }
}

vnode

作为 el 参数收到的真实 DOM 元素的蓝图。

prevNode

上一个虚拟节点，仅在 beforeUpdate 和 updated 钩子中可用。

以下实例演示了这些参数的使用：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js"></script>
</head>
<body>
   <div id="app">
	   <div v-runoob="{ name: '百度', url: 'www.baidu.com' }"></div>
   </div>

<script>
const app = Vue.createApp({})
app.directive('runoob', (el, binding, vnode) => {
  console.log(binding.value.name) // => "百度"
  console.log(binding.value.url) // => "www.baidu.com"
  var s = JSON.stringify
  el.innerHTML = s(binding.value)
})
app.mount('#app')
</script>
</body>
</html>

有时候我们不需要其他钩子函数，我们可以简写函数，如下格式：

Vue.directive('runoob', function (el, binding) {
  // 设置指令的背景颜色
  el.style.backgroundColor = binding.value.color
})

指令函数可接受所有合法的 JavaScript 表达式，以下实例传入了 JavaScript 对象：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="app">
    <div v-runoob="{ color: 'green', text: '百度!' }"></div>
</div>

<script>
const app = Vue.createApp({})
app.directive('runoob', (el, binding, vnode) => {
    el.innerHTML = binding.value.text
    el.style.backgroundColor = binding.value.color
})
app.mount('#app')
</script>
</body>
</html>

Vue3 路由

Vue 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue 可以实现多视图的单页 Web 应用（single page web application，SPA）。

Vue.js 路由需要载入 vue-router 库

中文文档地址：vue-router 文档。

安装

1、直接下载 / CDN

https://unpkg.com/vue-router@4

NPM

推荐使用淘宝镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install vue-router@4

简单实例

Vue.js + vue-router 可以很简单的实现单页应用。

<router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。

以下实例中我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-router 在哪里渲染它们。代码如下所示：

HTML代码:
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

router-link

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

router-view

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

JavaScript 代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue-router@4"></script>
</head>
<body>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

<script>
// 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')
 
// 现在，应用已经启动了！
</script>
</body>
</html>

点击过的导航链接都会加上样式 class ="router-link-exact-active router-link-active"。

相关属性

接下来我们可以了解下更多关于 的属性。

to

表示目标路由的链接。 当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

replace

设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。

<router-link :to="{ path: '/abc'}" replace></router-link>

append

设置 append 属性后，则在当前 (相对) 路径前添加其路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

<router-link :to="{ path: 'relative/path'}" append></router-link>

tag

有时候想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

active-class

设置 链接激活时使用的 CSS 类名。可以通过以下代码来替代。

<style>
   ._active{
      background-color : red;
   }
</style>
<p>
   <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

注意这里 class 使用 active-class="_active"。

exact-active-class

配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。

<p>
   <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

event

声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

以上代码设置了 event 为 mouseover ，及在鼠标移动到 Router Link 1 上时导航的 HTML 内容会发生改变。

今日份分享结束------------------------------------

avatar
文章
阅读
粉丝