尚硅谷Vue系列教程学习笔记（10）

Posted 2023-02-23 Dream_WLB

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了尚硅谷Vue系列教程学习笔记（10）相关的知识，希望对你有一定的参考价值。

尚硅谷Vue系列教程学习笔记（10）

参考课程：《尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通》
参考链接：https://www.bilibili.com/video/BV1Zy4y1K7SH?vd_source=4f4d3466cdc2c5a2539504632c862ce7
笔记上传说明：上述课程中共有168节小课，对每10次课的笔记整合之后上传一次。
详细代码案例请移步本人gitee仓库： vue_basic案例代码实现
Vue-cli脚手架实现案例代码见仓库：vue01


<template>
  <div>
    <button @click="change">显示或隐藏</button>

    <transition>
         <h1 v-show="isShow">你好！</h1>
    </transition>
   
  </div>
</template>

<script>
export default 
    // eslint-disable-next-line vue/multi-word-component-names
    name:"Test",
    data()
        return 
            isShow:true
        
    ,
    methods:
        change()
            console.log("控制显示或隐藏调用成功...")
            this.isShow = !this.isShow
        
    

</script>

<style>

h1
    background-color: skyblue;



/*使用Vue中自带的动画写法*/
.v-enter-active
    animation: donghuaDemo 1s;


.v-leave-active
    animation: donghuaDemo 1s reverse;



/* .come
    animation: donghuaDemo 1s;
 */

/* .go
    animation: donghuaDemo 1s reverse;
 */


@keyframes donghuaDemo 
    from
        transform: translateX(-100%);
        

    to
        transform: translateX(0px);
    



</style>

同时，需要注意的是，还可以给每个动画取名字name，但是此时style中写的xxx-enter-actvie和xxx-leave-active。
案例代码：

<template>
  <div>
    <button @click="change">显示或隐藏</button>

    <transition name="hello">
         <h1 v-show="isShow">你好！</h1>
    </transition>
   
  </div>
</template>

<script>
export default 
    // eslint-disable-next-line vue/multi-word-component-names
    name:"Test",
    data()
        return 
            isShow:true
        
    ,
    methods:
        change()
            console.log("控制显示或隐藏调用成功...")
            this.isShow = !this.isShow
        
    

</script>

<style>

h1
    background-color: skyblue;



/*使用Vue中自带的动画写法*/
.hello-enter-active
    animation: donghuaDemo 1s;


.hello-leave-active
    animation: donghuaDemo 1s reverse;



/* .come
    animation: donghuaDemo 1s;
 */

/* .go
    animation: donghuaDemo 1s reverse;
 */


@keyframes donghuaDemo 
    from
        transform: translateX(-100%);
        

    to
        transform: translateX(0px);
    



</style>

重点：在transition标签中添加:appear="true"即可实现加载页面时即出现动画效果。

注意：上述的transition标签在解析的时候直接被删掉了。

092-过渡效果

使用过渡效果实现显示或隐藏动画的案例代码：

<template>
  <div>
    <button @click="change">显示或隐藏</button>

    <transition name="hello">
         <h1 v-show="isShow">你好！</h1>
    </transition>
   
  </div>
</template>

<script>
export default 
    // eslint-disable-next-line vue/multi-word-component-names
    name:"Test",
    data()
        return 
            isShow:true
        
    ,
    methods:
        change()
            console.log("Test2中控制显示或隐藏调用成功...")
            this.isShow = !this.isShow
        
    

</script>

<style scoped>

h1
    background-color: skyblue;
    transition: 0.5s linear;


/*使用Vue中自带的动画写法2*/
/*进入的起点*/
.hello-enter
    transform: translateX(-100%);


/*进入的终点*/
.hello-enter-to
    transform: translateX(0);


/*离开的起点*/
.hello-leave
    transform: translateX(0);


/*离开的终点*/
.hello-leave-to
    transform: translateX(-100%);


</style>



//上述样式中简写形式为：

/*使用Vue中自带的动画写法2*/
/*进入的起点, 离开的终点*/
.hello-enter, .hello-leave-to
    transform: translateX(-100%);


/*进入的终点, 离开的起点*/
.hello-enter-to, .hello-leave
    transform: translateX(0);



/*将切换效果设置到xxx-enter-active和xxx-leave-active中*/
.hello-enter-actrive, .hello-leave-active
    transition: 0.5s linear;

093-多个元素过渡效果实现

注意：transition标签仅仅可以被使用给一个单独的标签元素中。

多个元素过渡效果实现使用transition-group的代码：

<template>
  <div>
    <button @click="change">显示或隐藏</button>

    <transition-group name="demo" appear>
         <h1 v-show="isShow" key="1">你好！</h1>
         <h1 v-show="isShow" key="2">你好！</h1>
         <h1 v-show="isShow" key="3">你好！</h1>
         <h1 v-show="isShow" key="4">你好！</h1>
    </transition-group>
   
  </div>
</template>

<script>
export default 
    // eslint-disable-next-line vue/multi-word-component-names
    name:"Test",
    data()
        return 
            isShow:true
        
    ,
    methods:
        change()
            console.log("Test2中控制显示或隐藏调用成功...")
            this.isShow = !this.isShow
        
    

</script>

<style scoped>

h1
    background-color: skyblue;



/*使用Vue中自带的动画写法1*/
.demo-enter-active
    animation: test3Donghua 0.5s;


.demo-leave-active
    animation: test3Donghua 0.5s reverse;


@keyframes test3Donghua 
    from
        transform: translateX(-100%);
        

    to
        transform: translateX(0px);
    


</style>

094-集成第三方动画

重点：使用方法（以Animate.css库为例）案例代码：

<template>
  <div>
    <button @click="change">显示或隐藏</button>

    <transition-group 
    name="animate__animated animate__   bounce" 
    enter-active-class="animate__swing"
    leave-active-class="animate__backOutUp"
    appear>
         <h1 v-show="isShow" key="1">你好！</h1>
         <h1 v-show="isShow" key="2">你好！</h1>
         <h1 v-show="isShow" key="3">你好！</h1>
         <h1 v-show="isShow" key="4">你好！</h1>
    </transition-group>
   
  </div>
</template>

<script>
//引入animate.css样式库
import 'animate.css'
export default 
    // eslint-disable-next-line vue/multi-word-component-names
    name:"Test",
    data()
        return 
            isShow:true
        
    ,
    methods:
        change()
            console.log("Test2中控制显示或隐藏调用成功...")
            this.isShow = !this.isShow
        
    

</script>

<style scoped>

h1
    background-color: skyblue;


</style>

095-总结动画与过渡（略）

096-Vue配置代理-方式1

目的：解决ajax请求跨域的问题。

常见的发送一个ajax请求的方法：
1.xhr（不常用的方法）
2.jQuery（底层封装了xhr）：$.get $.post请求等；在Vue/React项目中很少使用jQuery发送请求，因为jQuery库主要是操作DOM；
3.axios（底层封装了xhr，推荐使用）；
4.fetch（和xhr是平级的）：不推荐使用，因为兼容性较差；

解决跨域问题的方法：
1.使用cors解决跨域；
2.使用jsonp解决跨域，不常用的最主要原因是只能解决get请求问题；
3.代理服务器（开发中间用的最多），理解：代理服务器和服务器之间的通信是http协议，且不受浏览器同源限制；

使用代理服务器的方法：
1.使用nginx实现；
2.vue-cli脚手架实现；

重点：public文件夹里面有的资源，都算是8080服务器中有的。

使用Vue中的代理服务器存在的不足：
1.8080服务器中有的，会直接返回给请求，而不会请求其他服务器；
2.使用该种方式配置代理服务器时，不能配置多代理；

使用vue-cli脚手架实现代理服务器的代码：


//在Vue.config.js文件中配置如下代码：

const  defineConfig  = require('@vue/cli-service')
module.exports = defineConfig(
  transpileDependencies: true,
  //开启代理服务器
  devServer: 
    proxy:"http://localhost:5000"
  
)





//在App.vue组件中使用如下代码：
    <template>
  <div id="root">
    <button @click="getStudents">获取学生信息</button>
  </div>
</template>
    <script>
    //引入axios
    import axios from 'axios'

export default 
  name: "App",
  methods:
    getStudents()
      axios.get('http://localhost:8080/students').then(
        response => console.log("请求成功了", response.data),
        error => console.log("请求失败了", error.message)
      )
    
  
;
</script>

    <style>
body 
  background: #fff;
 
</style>

上述代码即可解决浏览器的同源限制问题。

097-Vue配置代理-方式2

使用Vue自带的代理服务器请求目标服务器方法案例代码：

const  defineConfig  = require('@vue/cli-service')
module.exports = defineConfig(
  transpileDependencies: true,
  //开启代理服务器（方式1）
  // devServer: 
  //   proxy:"http://localhost:5000"
  // 

  //配置代理服务器（方式2）
  devServer: 
    proxy: 
      '/demo': 
        target: 'http://localhost:5000',
        pathRewrite: //重写请求路径，将前缀/demo替换为空字符串
          '^/demo':''
        ,
        ws: true,//用于支持webSocket
        changeOrigin: true//用于在代理服务器和目标服务器之间决定代理服务器是否说谎，称自己是否和目标服务器端口号一致。
      
    
  

)

总结：
1.上述的/api表示，如果想走Vue配置的代理红服务器，需要在请求前边加上api前缀；
2.上述的target表示，请求的目标服务器地址；
3.添加pathRewrite属性即可将前缀去掉，然后即可实现对服务器的访问；

098-静态组件

需要实现的功能需求；
用户输入想要寻找的github用户名，然后点击按钮，即可将服务器返回来的用户头像和用户名展示到List组件中。

引入官方样式的方法：
1.引入其他官方的样式时，如果官方的样式中存在对没有的资源的引入，那么在App.vue组件中使用import引入时会出现错误警告。
2.在public文件夹中建立一个css文件夹，然后将官方的样式放入到其中，并在index.html文件中引入即可。

案例实现代码：


//在App.vue中的代码
    <template>
  <div id="root">
    <div class="container">
    <Search/>
    <List/>
    </div>
  </div>
</template>
    <script>

//引入组件
import Search from "./components/Search.vue";
import List from "./components/List.vue";

export default 
  name: "App",
  components: 
    Search,
    List,
  ,
;
</script>


//在Search.vue组件中代码
<template>
   <section class="jumbotron">
        <h3 class="jumbotron-heading">Search Github Users</h3>
        <div>
          <input
            type="text"
            placeholder="enter the name you search"
          />&nbsp;<button>Search</button>
        </div>
      </section>
</template>

<script>
export default 
    // eslint-disable-next-line vue/multi-word-component-names
    name:"Search",
    methods:
        SearchClick()
            console.log('SearchClick...')
        
    ,
    

</script>

<style>

</style>


//在List.vue组件中代码
<template>
  <div class="row">
    <div class="card">
      <a href="https://github.com/xxxxxx" target="_blank">
        <img src="https://cn.vuejs.org/images/logo.svg" style="width: 100px" />
      </a>
      <p class="card-text">xxxxxx</p>
    </div>
    <div class="card">
      <a href="https://github.com/xxxxxx" target="_blank">
        <img src="https://cn.vuejs.org/images/logo.svg" style="width: 100px" />
      </a>
      <p class="card-text">xxxxxx</p>
    </div>
    <div class="card">
      <a href="https://github.com/xxxxxx" target="_blank">
        <img src="https://cn.vuejs.org/images/logo.svg" style="width: 100px" />
      </a>
      <p class="card-text">xxxxxx</p>
    </div>
    <div class="card">
      <a href="https://github.com/xxxxxx" target="_blank">
        <img src="https://cn.vuejs.org/images/logo.svg" style="width: 100px" />
      </a>
      <p class="card-text">xxxxxx</p>
    </div>
    <div class="card">
      <a href="https://github.com/xxxxxx" target="_blank">
        <img src="https://cn.vuejs.org/images/logo.svg" style="width: 100px" />
      </a>
      <p class="card-text">xxxxxx</p>
    </div>
  </div>
</template>

<script>
export default 
  // eslint-disable-next-line vue/multi-word-component-names
  name: "List",
;
</script>

<style scoped>
.album 
  min-height: 50rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #f7f7f7;


.card 
  float: left;
  width: 33.3333%;
  padding: 0.78rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;


.card > img 
  margin-bottom: 0.75rem;
  border-radius: 100px;


.card-text 
  font-size: 85%;


</style>

099-列表展示

github用户头像/用户名等信息的列表展示案例代码：

//使用pubsub实现组件间的通信
//Search.vue组件中的代码
<template>
   <section class="jumbotron">
        <h3 class="jumbotron-heading">Search Github Users</h3>
        <div>
          <input
            type="text"
            placeholder="enter the name you search"
            v-model="keyWords"
          />&nbsp;<button @click="SearchClick">Search</button>
        </div>
      </section>
</template>

<script>
//引入axios
import axios from 'axios'
//采用消息订阅的方式在组件之间传送数据
import pubsub from 'pubsub-js'
export default 
    // eslint-disable-next-line vue/multi-word-component-names
    name:"Search",
    methods:
        SearchClick()
            //使用axios发送get请求，并使用，模板字符串解析
            axios.get(`https://api.github.com/search/users?q=$this.keyWords`).then(
                response => 
                    console.log("请求成功，得到数据为：",response.data.items)
                    //发送消息
                    pubsub.publish("userItems", response.data.items)

                ,
                error => 
                    console.log("请求失败了，得到的错误信息为：",error.message)
                
            )
            console.log('SearchClick...')
        
    ,
    data()
        return 
            keyWords:""
        
    
    

</script>

<style>

</style>



//List组件中代码
<template>
  <div class="row">
    <div class="card" v-for="user in users" :key="user.login">
      <a :href="user.html_url" target="_blank">
        <img :src="user.avatar_url" style="width: 100px" />
      </a>
      <p class="card-text">user.login</p>
    </div>
  </div>
</template>

<script>
//引入pubsub-js组件
import pubsub from "pubsub-js";

export default 
  // eslint-disable-next-line vue/multi-word-component-names
  name: "List",
  data() 
    return 
      users: [],
    ;
  ,
  //设置挂载的时候，订阅消息
  mounted() 
    //获得接收消息的pubId，便于在该组件销毁之前取消订阅消息
    this.pubId = pubsub.subscribe("userItems", (msgName, users) => 
      console.log("List组件中得到了用户数据：", users);
      this.users = users
    );
  ,
  //
  beforeUnmount() 
    pubsub.unsubscribe(this.pubId);
    console.log("取消了List组件的消息订阅...");
  ,
;
</script>

<style scoped>
...
</style>

0100-github案例-完善案例

上述github案例完善后代码如下。

重点：将页面组件中的状态定义为一个statusObj对象。


//Search.vue组件中的代码
<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <div>
      <input
        type="text"
        placeholder="enter the name you search"
        v-model="keyWords"
      />&nbsp;<button @click="SearchClick">Search</button>
    </div>
  </section>
</template>

<script>
//引入axios
import axios from "axios";
//采用消息订阅的方式在组件之间传送数据
import pubsub from "pubsub-js";
export default 
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Search",
  data() 
    return 
      keyWords: "",
    ;
  ,
  methods: 
    SearchClick() 
      //定义一个状态对象
      let statusObj = 
        isFirst: false,
        isLoading: true,
        errMsg: "",
        users: [],
      ;

      //请求前
      pubsub.publish("getListData", statusObj);
      console.log("请求前loading状态...");

      //请求中
      //使用axios发送get请求，并使用，模板字符串解析
      axios.get(`https://api.github.com/search/users?q=$this.keyWords`).then(
        (response) => 
          //更新数据对象中的属性值
          statusObj.isLoading = false;
          statusObj.errMsg = "";
          statusObj.users = response.data.items;

          //发送消息
          pubsub.publish("getListData", statusObj);
          console.log("请求成功状态...");
        ,
        (error) => 
          //更新状态对象
          statusObj.errMsg = error.message;
          statusObj.isLoading = false;

          pubsub.publishs("getListData", statusObj);
          console.log("请求失败状态...");
        
      );
      console.log("SearchClick...");
    ,
  ,
;
</script>

<style>
</style>



//List.vue组件中的代码
<template>
  <div class="row">
    <!--展示用户列表与否取决于api返回的数组长度-->
    <div
      v-show="userInfo.users.length"
      class="card"
      v-for="user in userInfo.users"
      :key="user.login"
    >
      <a :href="user.html_url" target="_blank">
        <img :src="user.avatar_url" style="width: 100px" />
      </a>
      <p class="card-text"> user.login </p>
    </div>
    <!--展示欢迎词-->
    <div v-show="userInfo.isFirst">
      <h1>Welcome to the Search GitHub!</h1>
    </div>

    <!--展示加载中-->
    <div v-show="userInfo.isLoading">
      <h1>Welcome to the Search GitHub!</h1>
    </div>
    <!--展示错误信息-->
    <div v-show="userInfo.errMsg">
      <h1> userInfo.errMsg </h1>
    </div>
  </div>
</template>

<script>
//引入pubsub-js组件
import pubsub from "pubsub-js";

export default 
  // eslint-disable-next-line vue/multi-word-component-names
  name: "List",
  data() 
    return 
      deep:true,
      userInfo: 
        //增加几个额外的状态信息
        isFirst: true, //是否为首次请求api
        isLoading: false, //是否在加载中
        errMsg: "", //请求错误时返回的错误信息
        users: [],
      
    ;
  ,
  //设置挂载的时候，订阅消息
  mounted() 
    //获得接收消息的pubId，便于在该组件销毁之前取消订阅消息
    this.pubId = pubsub.subscribe("getListData", (msgName, statusObj) => 
      console.log("List组件收到了用户更新的数据为：", statusObj);
      this.userInfo = ...this.userInfo, ...this.statusObj;
    );
  ,
  //
  beforeUnmount() 
    pubsub.unsubscribe(this.pubId);
    console.log("取消了List组件的消息订阅...");
  ,
;
</script>

<style scoped>
...
</style>

//截止到2022.8.30下午18：04止

以上是关于尚硅谷Vue系列教程学习笔记（10）的主要内容，如果未能解决你的问题，请参考以下文章

尚硅谷Vue系列教程学习笔记（10）

尚硅谷Vue系列教程学习笔记

尚硅谷Vue系列教程学习笔记（10）

尚硅谷Vue系列教程学习笔记（10）

目录

091-动画效果

092-过渡效果

093-多个元素过渡效果实现

094-集成第三方动画

095-总结动画与过渡（略）

096-Vue配置代理-方式1

097-Vue配置代理-方式2

098-静态组件

099-列表展示

0100-github案例-完善案例