【无标题】

-指令写法

//指令:为了操作底层dom。作者给留方案/
//实际应用–可以通过指领道什么时候dom创建完成，从而进行依赖dom的库的初始化工作

<div id="box">
<div v-hello=" 'yellow'">11111111</div>
<div v-hello=" 'red' ">22222222</div>
<div v-hello="whichcolor">33333333</div>

</div>

vue.directive( "hello",{
//指令的生命周期，，，，,
inserted(eL,binding){
console.log( "inserted",binding)
eL.style.background=binding.value}
},
update(el,binding){console.log("update")
eL.style.background=binding.value
}
})
new Vue({
el: " #box"
})

-指令应用

每插入一次，inserted执行一次

vue.directive( "swiper",{
inserted(el,binding){
// console.log(binding. value)
let {
index,
length
} = binding.value
if ( index === length - 1){
// new Swiper
new Swiper( ".kerwin", {
// direction : "vertical",//垂直
//如果需要分页器
pagination: {
el: '.swiper-pagination' ,
},
loop: true.
pagination: {
el: '.swiper-pagination',},
loop: true,autoplay: i
delay: 2500,
disableonInteraction: false,}
})
}

-指令补充&nextTick

vue-cli创建项目

修复小bug

-eslint修复

最后提交一次

-单文件组件-1

<style lang="scss">
$width: 300px;
ul{
li {
background:yellow;
with:$width;
}
}
}

单文件组件-2

添加scoped局部

<style lang="scss" scoped>
$width: 300px;
ul{
li {
background:red;width : $width;
}
}
</style>

-反向代理&别名

向自身发送请求

'/kerwin' : {
target: 'https://m.maoyan.com',
changeorigin: true,
pathRewrite: {
'^ /kerwin': ''}
}

改变网址再恢复
别名===> src的绝对路径

spa&路由引入

-级路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Films from '@/views/Films'
import Cinemas from '@/views/Cinemas'
import Center from '@/views/Center'
Vue.use(VueRouter)
// 注册路由插件

//配置表
const routes = [{
path: '/films ' ,component: Films},
{
path: '/cinemas' ,component: Cinemas},
{
path: '/center' ,component: Center}
]

在APP.vue中添加router-view>< / router-view>才可以引入

重定向

{
path: '*',
redirect: '/films '
}

<template>
<div>
<ul>
<li>
<a href="/#/films">电影</a></li>
<li>
<a href="/#/cinemas">影院</a></li>
<li>
<a href="/#/center">我的</a></li>
</ul>
<!--路由容器-->
<router-view></router-view>
</div>
</template>

点击跳转

-声明式导航

3.路由原理:
(1)hash路由==> location.hash切换
vindow.onhashchange 监听路径的切换

(2)history路由==> history.pushState切换
window.onpopsstate 监听路径的切换

目的：点击切换变色

<!-- vue-router声明式导航-->
<li>
<router-link to=" /films" active-class="kerwinactive":>
电影</router-link>
</li>
<li>
<router-link to="/cinemas" active-class="kerwinactive":>
影院</router-link>
</li>

新版本

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

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

完整版

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

嵌套路由

<template>
<div>
comingsoon
</div>
</template>

在子文件中写好

父文件

import Nowplaying from “@/views /films/Nowplaying”

{
path: '/films',
redirect: '/films/nowplaying'
}

-编程式导航

import Detail from '@/views/Detail'

{
path: '/detail',component: Detail,
},
声明式


methods: {
handleChangePage (){
//编程式导航
//location.href ='#/detail'
this.$router.push('/detail')//指定

}