Vue學習基礎day-3

Twjin￥發表於2020-12-19
Vue

watch偵聽

簡單的直接屬性值變化的偵聽

  • 函式名稱必須和偵聽的屬性名稱完全一致
  • 引數：新值，舊值
  • 只有依賴項發生變化才會觸發
  • 要想偵聽器自動觸發，就手動把依賴項改變
	<template>
	<div>
	  <p>{{msg}}</p>
	  <input type="text" v-model="msg">
	  <p>{{res}}</p>
	</div>
	</template>
	
	<script>
	export default {
	  data(){
	    return{
	      msg:'',
	      res:''
	    }
	  },
	  watch: {
	    msg(news, olds) {
	      this.res = this.msg.toUpperCase()
	    }
	  },
	  //手動觸發
	  mounted() {
	    this.msg="aaa"
	  }
	}
	</script>
	
	<style scoped>
	
	</style>

深度偵聽
可以偵聽物件的屬性值的變化

<template>
  <div>
    <h1>這個檔案主要說明watch如何實現簡單的間接屬性值變化的偵聽</h1>
    <h2>這裡我們想偵聽obj物件的屬性值的變化</h2>
    <h3>深度偵聽，簡單說就是可以偵聽物件的屬性值的變化</h3>
    <input type="text"
           v-model="obj.name">
    <input type="text"
           v-model="obj.age">
    <!-- <button @click='obj={name: "jack",age:20}'>空它</button> -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      obj: {
        name: 'jack',
        age: 20
      }
    }
  },
  watch: {
    // obj () {
    //   console.log(123);
    // }
    // 第一種寫法：它可以偵聽物件的所有屬性值的變化
    // 屬性名稱: { handler () { }, deep: true }
    obj: {
      handler () {
        console.log(2)
      },
      deep: true
    }
    // 第二種寫法:只有指定的屬性發生了變化才會觸發
    // '物件.屬性' () { }
    // 'obj.name' () {
    //   console.log(22);
    // }
  }
}
</script>
<style>
</style>

Axios

Axios官方中文文件
Axios是基於promise 的 HTTP 庫，可以用在NodeJs和瀏覽器上
在Vue裡面我們可以使用他來是實現非同步請求

語法
傳送Get請求

// get方式的無參請求
// 成功或失敗的回撥都能夠接收到相應的返回結果
axios.get(’請求地址‘)
	.then(成功後回撥函式)
	.catch(失敗的回撥函式)
----------------------------------------------
// get方式的帶參請求--url傳遞引數
axios.get(’請求地址?引數=值&引數=值.....‘)
	.then(成功後回撥函式)
	.catch(失敗的回撥函式)
----------------------------------------------
// get方式的帶參請求-引數包裝為物件,物件的鍵只能叫params,值就是你的引數物件
axios.get('請求地址',{
	params:{引數}
})
	.then(成功後回撥函式)
	.catch(失敗的回撥函式)

例項
下面的例項是根據我這邊公司的伺服器發起的請求，你們可以另試

	<template>
	  <input type="button" @click="getlist" value="點選啊哥哥">
	</template>
	
	<script>
	import axios from 'axios'
	export default {
	  data(){
	    return{}
	  },
	  methods:{
	    getlist(){
	      console.log(1221)
	      axios.get("http://157.122.54.189:9083/post")
	      .then(res=>{
	        console.log(res)
	      })
	      .catch(err=>{
	        console.log(err)
	      })
	    }
	  }
	}
</script>

<style scoped>

</style>

發起post請求
語法

axios.post('請求地址',{引數物件})
	.then(成功後回撥函式)
	.catch(失敗的回撥函式)

例項

<template>
  <div>
    <h1>這個檔案主要說明使用axios如何發起post請求</h1>
    使用者名稱：<input type="text"
               v-model="user.username"> <br>
    密碼<input type="text"
             v-model="user.password"> <br>
    <button @click='login'>發起post請求</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      user: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    login () {
      // 語法 ：axios.post(完整地址,{引數物件})
      // .then(回撥函式)
      // .catch(回撥函式)
      axios.post('http://157.122.54.189:9083/login', this.user)
          .then((res) => {
            console.log(res);
          })
          .catch((err) => {
            console.log(err);
          })
    }
  }
}
</script>
<style>
</style>

實現封裝

import axios from 'axios'

axios.defaults.baseURL = 'http://127.0.0.1:3000'

export default axios

// export default axios.create({
//     baseURL: 'http://127.0.0.1:3000',
// })

使用封裝的axios物件

import myaxios from '@/utils/myaxios.js'

使用封裝的axios發起請求

myaxios.post('/addCate', this.cate)
    .then(res => {
    console.log(res)
})
    .catch(err => {
    console.log(err)
})

過渡動畫

過渡動畫的新增

  • 自定義樣式實現動畫效果
  • 使用樣式實現動畫效果
  • 使用鉤子函式來實現動畫效果

新增過渡動畫的前提

  • 為元素新增v-if或者v-show
  • 必須將過渡動畫的元素包裹在transition標籤中
  • 如果是使用自定義樣式則需要為transition設定name，這個name屬性的值就是後期類樣式的字首

使用自定義類樣式實現過渡動畫

自動嗅探目標元素是否應用了 CSS 過渡或動畫，如果是，在恰當的時機新增/刪除 CSS 類名。

六個時機

  1. v-enter:開始進入
  2. v-enter-active:進入中的過程
  3. v-enter-to:進入完畢
  4. v-leave:準備離開
  5. v-leave-active:離開的過程
  6. v-leave-to:離開完畢

為六個時機新增樣式

  • 應該為transition標籤設定name屬性，值是樣式的字首，這樣做可以避免後期的樣式覆蓋
  • 只要為六個時機設定了樣式，那麼vue就能夠在恰當的時候為元素新增樣式效果
<style>
    p{
        width: 200px;
        background-color: #ff0;
    }
    /* 準備進入，起始狀態 */
    .move-enter{
        margin-left: 400px;
        opacity: 0;
    }
    .move-enter-active{
        transition: all 2s;
    }
    .move-enter-to{
        margin-left: 0px;
        opacity: 1;
    }

    .move-leave{
        margin-left: 0px;
        opacity: 1;
    }
    .move-leave-active{
        transition: all 2s;
    }
    .move-leave-to{
        margin-left: 400px;
        opacity: 0;
    }
</style

使用第三方動畫庫
中文官網
在這裡我們使用animate.css這個動畫庫

先下包：npm i animate.css

引入包：import ‘animate.css’

<template>
  <div>
    <button v-on:click="isshow = !isshow">
      Toggle
    </button>
    <transition name="fade" enter-active-class="animate__animated animate__backOutDown"
	leave-active-class="animate__animated animate__rotateOut"
	>
      <p v-if="isshow">我是你爸爸</p>
    </transition>
  </div>
</template>

<script>
	import "animate.css"
export default {
  data(){
    return{
      isshow:false
    }
  }
}
</script>

<style>
  p{
    width: 200px;
    background-color: pink;
  }
</style

相關文章