Vue学习：三-优快云博客

本文链接：https://blog.youkuaiyun.com/self_correction/article/details/128973723

Vue学习

一、指令
二、指令函数简写
三、指令轮播
四、Vue3-指令轮播
五、轮播-nextTick
六、filter
七、启动和配置
八、单文件组件
九、一级路由和重定向
十、嵌套路由和动态路由
十一、路由模式和路由守卫

一、指令

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


    <script type="text/javascript">
      //指令 :为了操作底层dom。 作者给留方案/

      // 实际应用-- 可以通过指令知道什么时候dom创建完成， 从而进行 依赖dom的库的初始化工作

      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

        }
      })
      var vm = new Vue({
        el:"#box",
        data:{
          whichColor:"blue"
        }
      })
    </script>
</body>

二、指令函数简写

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


    <script type="text/javascript">
      //指令 :为了操作底层dom。 作者给留方案/

      // 实际应用-- 可以通过指令知道什么时候dom创建完成， 从而进行 依赖dom的库的初始化工作

      Vue.directive("hello",(el,binding)=>{
        // console.log("创建或者更新都会执行")
        el.style.background=binding.value
      })
      var vm = new Vue({
        el:"#box",
        data:{
          whichColor:"blue"
        }
      })
    </script>
</body>

三、指令轮播

<body>
    <div id="box">
        <header>导航-{{myname}}</header>

        <div class="swiper-container zzy">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(data,index) in datalist" :key="data" v-swiper="{
            index:index,
            length:datalist.length
        }">
                    <img :src="data" />
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

        </div>

        <footer>底部内容</footer>
    </div>
    <script>
        //初始化 swiper --初始化过早


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

        new Vue({
            el: "#box",
            data: {
                datalist: [],
                myname: "zzy"
            },
            mounted() {
                //ajax
                setTimeout(() => {
                    this.datalist = [
                        "https://static.maizuo.com/pc/v5/usr/movie/e856bdc65507b99800f22e47801fa781.jpg",
                        "https://static.maizuo.com/pc/v5/usr/movie/47aa5a3ad2ebff403d073288e4365694.jpg",
                        "https://static.maizuo.com/pc/v5/usr/movie/8b0755547313706883acc771bda7709d.jpg"
                    ]
                    //过早 

                }, 2000)
                //初始化过早
            }
            //   updated(){
            //     console.log(document.querySelectorAll(".swiper-slide").length)
            //       new Swiper(".zzy", {
            //         // direction:"vertical", //垂直
            //         // 如果需要分页器
            //         pagination: {
            //           el: '.swiper-pagination',
            //         },
            //         loop: true,
            //         autoplay: {
            //           delay: 2500,
            //           disableOnInteraction: false,
            //         }
            //       })

            //   }
        })

        /*
          1. 无法复用
          2. 如果当前页面 状态不止datalist一个，其他状态更新， update重新运行，new Swiper 执行多次， 出bug
        
        */
    </script>
</body>

四、Vue3-指令轮播


<body>
    <div id="box">
        <header>导航-{{myname}}</header>

        <div class="swiper-container zzy">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(data,index) in datalist" :key="data" v-swiper="{
            index:index,
            length:datalist.length
        }">
                    <img :src="data" />
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

        </div>

        <footer>底部内容</footer>
    </div>
    <script>
        //初始化 swiper --初始化过早
       var obj = {
            
            data(){
                return {
                    datalist: [],
                    myname: "zzy"
                }
            },
            mounted() {
                //ajax
                setTimeout(() => {
                    this.datalist = [
                        "https://static.maizuo.com/pc/v5/usr/movie/e856bdc65507b99800f22e47801fa781.jpg",
                        "https://static.maizuo.com/pc/v5/usr/movie/47aa5a3ad2ebff403d073288e4365694.jpg",
                        "https://static.maizuo.com/pc/v5/usr/movie/8b0755547313706883acc771bda7709d.jpg"
                    ]
                    //过早 

                }, 2000)
                //初始化过早
            }
        }

        var app = Vue.createApp(obj)
        //app.componennt()
        //app.componennt()
        app.directive("swiper", {
            mounted(el, binding) {
                console.log("1111111111111111111111111111")
                let {
                    index,
                    length
                } = binding.value
                if (index === length - 1) {
                    // new Swiper
                    new Swiper(".zzy", {
                        // direction:"vertical", //垂直
                        // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                        },
                        loop: true,
                        autoplay: {
                            delay: 2500,
                            disableOnInteraction: false,
                        }
                    })
                }
            }
        })
        app.mount("#box")
        /*
          1. 无法复用
          2. 如果当前页面 状态不止datalist一个，其他状态更新， update重新运行，new Swiper 执行多次， 出bug
        
        */

        /*
            //vue3 指令生命周器 约== 组件生命周期
        
        */
    </script>
</body>

五、轮播-nextTick

<body>
    <div id="box">
        <header>导航-{{myname}}</header>

        <div class="swiper-container zzy">
            <div class="swiper-wrapper">
                <!-- <div class="swiper-slide">111111111111</div>
        <div class="swiper-slide">222222222222</div>
        <div class="swiper-slide">3333333333</div> -->
                <div class="swiper-slide" v-for="data in datalist" :key="data">
                    <img :src="data" />
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

        </div>

        <footer>底部内容</footer>
    </div>
    <script>
        //初始化 swiper --初始化过早

        var vm = new Vue({
            el: "#box",
            data: {
                datalist: [],
                myname: "zzy"
            },
            mounted() {
                //ajax
                setTimeout(() => {
                    this.datalist = [
                        "https://static.maizuo.com/pc/v5/usr/movie/e856bdc65507b99800f22e47801fa781.jpg",
                        "https://static.maizuo.com/pc/v5/usr/movie/47aa5a3ad2ebff403d073288e4365694.jpg",
                        "https://static.maizuo.com/pc/v5/usr/movie/8b0755547313706883acc771bda7709d.jpg"
                    ]


                    this.$nextTick(() => {
                        console.log("我比updated执行的都晚，而且只执行一次")
                        new Swiper(".zzy", {
                            // direction:"vertical", //垂直
                            // 如果需要分页器
                            pagination: {
                                el: '.swiper-pagination',
                            },
                            loop: true,
                            autoplay: {
                                delay: 2500,
                                disableOnInteraction: false,
                            }
                        })
                    })

                }, 2000)
                //初始化过早

            },
            updated() {
                console.log("updated")
            }
        })

        /*
          1. 无法复用
          2. 如果当前页面 状态不止datalist一个，其他状态更新， update重新运行，new Swiper 执行多次， 出bug
        
        */
    </script>
</body>

六、filter

<body>
    <div id="box">
        <button @click="handleAjax">click-ajax</button>

        <ul>
            <li v-for="item in datalist" :key="item.id">
                <img :src="item.img | imgFilter1 | imgFilter2" />
                {{item.nm}}
            </li>
        </ul>
    </div>

    <script>
        Vue.filter("imgFilter1", (url) => {
            return url.replace('w.h/', '')
        })
        Vue.filter("imgFilter2", (url) => {
            return url + '@1l_1e_1c_128w_180h'
        })

        new Vue({
            el: "#box",
            data: {
                datalist: []
            },
            methods: {
                handleAjax() {
                    axios.get("./json/maoyan.json").then(res => {
                        console.log(res.data.movieList)
                        this.datalist = res.data.movieList

                        //for 处理
                    })
                }
            }
        })
        // vue3 过滤器不支持
    </script>
</body>

七、启动和配置

<script>
import Vue from 'vue' // ES6 导入方式
import App from './App.vue' // 导入根组件App
// import router from './router'
// import store from './store'
Vue.config.productionTip = false

new Vue({
  // router,
  // store,
  render: h => h(App) // vue支持的新写法
}).$mount('#app')

var obj = {
  name: 'zzy',
  age: 100
}
console.log(obj)
</script>

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>


<template>
  <div class="home">
    6666
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

<template>
  <div>
    hello app1111
  </div>
</template>

八、单文件组件

<template>
  <div>
    hello appp-{{myname}}
    <!-- <img src="/demo.gif"/> -->
    <input type="text" v-model="mytext"/>
    <button @click="handleAdd">add</button>
    <ul>
      <li v-for="data in datalist" :key="data">
        {{data}}
      </li>
    </ul>

    <navbar myname="home" :myright="false" @event="handleEvent">
      <div>22222222</div>
    </navbar>

    <sidebar v-show="isShow"></sidebar>

    <div v-hello>111111111111111111</div>
    <div v-hello>222222222222222222</div>

    <img :src="imgUrl | imgFilter"/>
  </div>
</template>
<script>
// ES6 导出规范 -babel(ES6==>ES5)
// @ 别名===> src的绝对路径
import navbar from '@/mycomponents/Navbar' // webpack 配置的别名。
import sidebar from '@/mycomponents/Sidebar'
import Vue from 'vue'
import axios from 'axios'
// 全局或则 局部注册的
// Vue.component('navbar', navbar)
Vue.directive('hello', {
  inserted (el, binding) {
    // console.log(el)
    el.style.border = '1px solid black'
  }
})
Vue.filter('imgFilter', (path) => {
  return path.replace('/w.h', '') + '@1l_1e_1c_128w_180h'
})
export default {
  data () {
    return {
      myname: 'zzy',
      mytext: '',
      datalist: [],
      isShow: true,
      imgUrl: 'http://p0.meituan.net/w.h/movie/056d4f1a658e3e35c9f9e6c44c2aa3fe1831930.jpg'

    }
  },
  components: {
    navbar,
    sidebar
  }, // 局部注册
  methods: {
    handleAdd () {
      console.log(this.mytext)
      this.datalist.push(this.mytext)
    },
    handleEvent () {
      this.isShow = !this.isShow
    }
  },
  computed: {

  },
  watch: {

  },
  mounted () {
    axios.get('/zzy/ajax/movieOnInfoList?token=&optimus_uuid=74B5F0A032A711EB82DD6B9282E93C676D27D7B9731D4E608D7612C3E708C120&optimus_risk_level=71&optimus_code=10').then(res => {
      console.log(res.data)
    })
  }
}
</script>
<style lang="scss">
  $width:300px;
  ul{
     li {
      background:yellow;
      width:$width;
    }
  }
</style>

九、一级路由和重定向

<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>
<script>
export default {
  data () {
    return {

    }
  }
}
</script>
<style lang="scss">

</style>

<template>
    <div>
        center
    </div>
</template>

<template>
    <div>
        cinemas
    </div>
</template>

<template>
    <div>
        films
    </div>
</template>

十、嵌套路由和动态路由

<template>
  <div>
    <ul>
      <!-- vue-router(3之前，包括3) -1- 声明式导航 -->

        <!-- <router-link to="/films" active-class="kerwinactive" tag="li">电影</router-link>

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

        <!-- vue-router（4） -2- 声明式导航 -->

         <router-link to="/films" custom v-slot="{navigate,isActive}">
            <li @click="navigate" :class="isActive?'kerwinactive':''">电影</li>
         </router-link>
        <router-link to="/cinemas" custom v-slot="{navigate,isActive}">
           <li @click="navigate" :class="isActive?'kerwinactive':''">影院</li>
        </router-link>
         <router-link to="/center" custom v-slot="{navigate,isActive}">
           <li @click="navigate" :class="isActive?'kerwinactive':''">我的</li>
        </router-link>
    </ul>

    <!-- 路由容器 -->
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data () {
    return {

    }
  }
}
</script>
<style lang="scss">
.kerwinactive{
  color:red;
}
</style>

十一、路由模式和路由守卫

<template>
    <div>
        center
    </div>
</template>
<script>
export default {
  // 路由生命周期
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    if (localStorage.getItem('token')) {
      next()
    } else {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }
  }
}
</script>

<template>
    <div>
        detail
    </div>
</template>
<script>
export default {
  created () {
    // 当前匹配的路由
    console.log('created', this.$route.params.id)

    // axios 利用 id 发请求到详情接口 ，获取详细数据 ，布局页面
  }
}
</script>

<template>
    <div>
        <div style="height:200px;background:yellow;">大轮播</div>

        <div>
            二级的声明式导航
        </div>

        <router-view></router-view>
    </div>
</template>

<template>
    <div>
        login
        <button @click="handleLogin">登录</button>
    </div>
</template>

<script>
export default {
  methods: {
    handleLogin () {
      setTimeout(() => {
        localStorage.setItem('token', '后端返回的token字段')
        // this.$router.back() // 返回

        // 1. 获取 query字段
        console.log(this.$route.query)
        // 2. 跳转到当时想要跳的页面去
        this.$router.push(this.$route.query.redirect)
      }, 0)
    }
  }
}
</script>

<template>
  <div>
    <ul>
      <!-- vue-router(3之前，包括3) -1- 声明式导航 -->

        <!-- <router-link to="/films" active-class="zzyactive" tag="li">电影</router-link>

        <router-link to="/cinemas" active-class="zzyactive" tag="li">影院</router-link> -->

        <!-- vue-router（4） -2- 声明式导航 -->

         <router-link to="/films" custom v-slot="{navigate,isActive}">
            <li @click="navigate" :class="isActive?'zzyactive':''">电影</li>
         </router-link>
        <router-link to="/cinemas" custom v-slot="{navigate,isActive}">
           <li @click="navigate" :class="isActive?'zzyactive':''">影院</li>
        </router-link>
         <router-link to="/center" custom v-slot="{navigate,isActive}">
           <li @click="navigate" :class="isActive?'zzyactive':''">我的</li>
        </router-link>
    </ul>

    <!-- 路由容器 -->
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data () {
    return {

    }
  }
}
</script>
<style lang="scss">
.zzyactive{
  color:red;
}
</style>