vue63-83

指令写法

自定义封装指令，来供自己所用

<div id="box">
<div v-hello>11111111</div>
<div v-hello>11111111</div>

</div>
<script type="text/javascript">
//指令：为了操作底层dom。作者给留方案/
//实际应用--可以通过指令知道什么时候dom创建完成，从而进行依赖dom的库的
初始化工作
Vue.directive("hello",{
//指令的生命周期，
inserted(el,binding){
console.log("inserted",el)
el.style.background="red"
}
}）

拿到的binding是一个对象

补充指令&nextTick

vue3指令生命周器约==组件生命周期

this.$nextTick(()=>{
console.log("我比updated执行的都晚，而且只执行一次"）
}）

单文件组件

记得写key

<style lang="scss">
$width:300px;
ul{
1i {
background:yellow;
width:$width;
}
}
</style>

lang:language的缩写
组件引入：

import navbar from  './mycomponents/Navbar'
import Vue from 'vue'

并进行注册

Vue.component("navbar",navbar)

缺任何都会报错

或者局部注册

components:
navbar,
sidebar
工
}，//局部注册

2

export default {
props:{
myname:{
type: String,
default:'
}，
myright:
type: Boolean,
default: true

反向代理&别名

配置反向代理

//@别名===>src的绝对路径
nport navbar from '@/mycomponents/Navbar'  //配置的别名
import sidebar from '@ymycomponents/Sidebar'

spa&路由引入

文件最好放在views文件夹里

import VueRouter from 'vue-router'
Vue.use(VueRouter)//注册路由插件
//配置表
const routes = [
{
path:"/film",
component:Films
}
}

重定向

//重定向
{
path:'*',
redirect:'/films'
}

声明式导航

通过to去相关链接

<li>
<router-link to="/films"active-class="kerwinactive">电影</
router-link>
</li>
<li>
<router-linkto="/cinemas"active-class="kerwinactive">影院</
router-link>
</li>

写法2：

<router-link to="/films" custom v-slot="{navigate,isActive}">
<li @click="navigate">电影--{{isActive}}</li>
</router-link>

<router-link to="/cinemas" custom v-slot="{navigate,isActive}
">
<li@click="navigate">影院-{{isActive}}</li>
</router-link>

嵌套路由（二级路由）

import Films from ‘@/views/Films’
import Nowplaying from ‘@/views/films/Nowplaying’
import Comingsoon from ‘@/views/films/Comingsoon’

二级路由不能忘记引入

{
path: '/cinemas/search',
component: Search
}

编程式导航

通过绑定事件，来实现路径的跳转

methods: {
handleChangePage (L{
//编程式导航
//location.href = '#/detail'

this.$router.push('/detail')
}
}

动态路由

path:'/detail/:id'，//动态二级路由
component: Detail
}，

命名路由

name：'kerwinDeta1',//命名路由
path:'/detail/:id',//动态二级路由
component: Detail
},

路由模式

详情看后端配置