Vue --第四天

1.自定义指令

a.自定义指令:

自己定义的指令,可以封装一些dom 操作,扩展额外功能

Vue --第四天_第1张图片

Vue --第四天_第2张图片

全局注册:

Vue --第四天_第3张图片

局部注册:

Vue --第四天_第4张图片

指令值:自定义指令

Vue --第四天_第5张图片

Vue --第四天_第6张图片

v-loading:

本质:

Vue --第四天_第7张图片

插槽:

1.定制插槽

Vue --第四天_第8张图片

2.插槽作用

Vue --第四天_第9张图片

Vue --第四天_第10张图片

Vue --第四天_第11张图片

组件封装:涵盖了以上所有的知识点

1.失去焦点  : @blur="  判定条件  "

2.得到当前动作的值: e.target.value

代码:在插槽拼接

路由:

Vue --第四天_第12张图片

Vue --第四天_第13张图片

使用步骤:(5+2)

Vue --第四天_第14张图片

实现:

Vue --第四天_第15张图片

Vue --第四天_第16张图片

这里很奇怪,为什么组件要有如下配置

Vue --第四天_第17张图片

使用总结:

Vue --第四天_第18张图片

路由和组件分类:

Vue --第四天_第19张图片

代码:

import Vue from 'vue'

import App from './App.vue'

// 路由的使用步骤 5 + 2

// 5个基础步骤

// 1. 下载 v3.6.5

// 2. 引入

// 3. 安装注册 Vue.use(Vue插件)

// 4. 创建路由对象

// 5. 注入到new Vue中,建立关联

// 2个核心步骤

// 1. 建组件(views目录),配规则

// 2. 准备导航链接,配置路由出口(匹配的组件展示的位置)

import Find from './views/Find'

import My from './views/My'

import Friend from './views/Friend'

import VueRouter from 'vue-router'

Vue.use(VueRouter) // VueRouter插件初始化


 

const router = new VueRouter({

  // routes 路由规则们

  // route  一条路由规则 { path: 路径, component: 组件 }

  routes: [

    { path: '/find', component: Find },

    { path: '/my', component: My },

    { path: '/friend', component: Friend },

  ]

})

Vue.config.productionTip = false

new Vue({

  render: h => h(App),

  router:router,

}).$mount('#app')

你可能感兴趣的:(vue.js,前端,javascript)