vue基礎（二）

阿新 • • 發佈：2020-08-11

1.css樣式操作

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .classA {
      background-color: hotpink;
    }

    .classB {
      color 
: lawngreen;
    }

    .classC {
      font-size: 80px;
    }

    /* 1、類的操作
       2、style的操作
    */
  </style>
</head>

<body>
  <div id="root">
    <!-- 操作類 -->
    <!-- 當我不知道這個標籤類到底是誰，那麼就得動態獲取 -->
    <p :class="myClass">我愛你趙麗穎</p>

    <!-- 當我知道哪些類是有的，但是不知道哪個起作用  
-->
    <p :class="{classA:isA,classB:isB}">我愛你趙麗穎111</p>

    <!-- 當一個標籤有很多類都生效，那麼就使用陣列的寫法 -->
    <p :class="['classA','classB','classC']">我愛你趙麗穎222</p>


    <!-- 操作style -->
    <p :style="{color:myColor,fontSize:mySize}">我愛你趙麗穎333</p>
    <button  
@click="changeClass">點選修改類</button>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    new Vue({
      el:'#root',
      data(){
        return {
          myClass:'classA',
          isA:false,
          isB:true,
          myColor:'blue',
          mySize:'40px'
        }
      },
      
      methods: {
        changeClass(){
          this.myClass = 'classB' //操作的是第一個p
          this.isA = !this.isA
          this.isB = !this.isB
        }
      },
    })
  </script>
</body>

</html>

2.v-if 和v-show 條件渲染

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box{
      width: 300px;
      height: 300px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="root">
    <!-- v-if和v-show都會用
    v-if是刪除了這個節點，也就是dom樹上是沒有這個節點的，記憶體中沒有
    如果我們獲取這個節點，獲取不到，切換不頻繁可以用來節省記憶體

    v-show不是對節點進行刪除操作，而是給節點元素新增樣式去操作的 display:none
    如果使用這個東西，節點是永遠存在在dom樹上的。記憶體中也是存在的，我們獲取的時候怎麼都可以拿到
    但是有可能拿到的東西樣式是display:none  切換很頻繁的時候，我們使用v-show


    -->
    <p v-if="isOk">表白成功</p>
    <p v-else>表白失敗</p>
    

    <p v-show="isOk">求婚成功</p>
    <p v-show="!isOk">求婚失敗</p>

    <button @click="update">點選切換</button>
    <!-- <div id="box"></div> -->
  </div>
  <script src="./js/vue.js"></script>
  <script>
    const vm = new Vue({
      el:'#root',
      data:{
        isOk:true,
      },
      methods: {
        update(){
          this.isOk = !this.isOk
        }
      },
    })
      // let box = document.getElementById('box')
      // let flag = true
      // box.onclick = function(){
      //   if(flag){
      //     box.style.backgroundColor = 'green'
      //   }else{
      //     box.style.backgroundColor = 'red'
      //   }
      //   flag = !flag
      // }

  </script>
</body>
</html>

3,列表的過濾

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <input type="text" placeholder="請輸入查詢的關鍵字" v-model="keyword">
    <ul>
      <li v-for="(person, index) in newPersons" :key="person.id">
          {{person.id}} --- {{person.name}} --- {{person.age}}
      </li>
    </ul>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    /*
      分析：
        根據效果分析，陣列用的是原來的資料還是新的陣列
        1、假設用原來的資料，一上來展示沒問題
        2、當keyword變化的時候監視它，我們可以在原陣列當中刪除不包含keyword的項
        3、當keyword的值又變為空串的時候，我們想回去回不去了
        到此為止，卡死了
        4、既然原陣列沒法做效果，就必須使用新的一個數組，而且這個陣列一上來和原陣列資料一樣
        5、既然是新陣列，那就一定要用計算屬性，根據已有的原陣列和keyword
    */

    new Vue({
      el:'#root',
      data(){
        return {
          //data當中的資料包含初始化的資料和要收集的資料
          
          keyword:'',
          persons:[
            {id:1,name:'zhaoliying',age:33},
            {id:2,name:'yangmi',age:34},
            {id:3,name:'ouyangnana',age:20},
            {id:4,name:'liuyifei',age:18},
          ] //代表的就是ajax回來的資料
        }
      },
      computed: {
        //這裡面的資料不是初始化資料也不是要收集的資料，而是後面根據已有資料計算而來的
         // newpersons為compuated的屬性，返回一個新陣列
        newPersons(){
          // let keyword = this.keyword
          // let persons = this.persons
          let {keyword,persons} = this //物件的解構賦值


          // 原生js一步一步來
          // let result = []
          // for(let i = 0; i < persons.length; i++){
          //   if(persons[i].name.indexOf(keyword) !== -1){
          //     result.push(persons[i])
          //   }
          // }

          //原始函式
          // let result = persons.filter(function(item,index){
          //   //return後面一定是一個條件表示式 結果一定true或者false
          //   return item.name.indexOf(keyword) != -1
          // })
          
          //箭頭函式（箭頭函式在用的時候，如果內部有this,小心）
          // 字串的indexOf方法，返回某個指定的子字串值在字串中首次出現的位置，如果沒有出現，返回-1
          // 過濾掉沒匹配的物件
          let result = persons.filter(item => item.name.indexOf(keyword) != -1)

          return result
        }
      },
      methods: {
        //無論是自己定義的回撥函式 
        //還是以後我們共用的一些函式 
        //都在這個裡面去寫
      },
      watch:{
        //監視已有的資料，已有的資料發生了改變，我們就可以乾點什麼
      }
    })


  </script>
</body>
</html>

4.列表過濾和排序

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <input type="text" placeholder="請輸入查詢的關鍵字" v-model="keyword">
    <ul>
      <li v-for="(person, index) in newPersons" :key="person.id">
          {{person.id}} --- {{person.name}} --- {{person.age}}
      </li>
    </ul>
    <!-- @click="sortType = 0" 回撥函式如果內部只有一行程式碼，完全可以把這行程式碼寫在這，不用定義 -->
    <button @click="sortType = 0">原樣排序</button>
    <button @click="sortType = 1">年齡升序</button>
    <button @click="sortType = 2">年齡降序</button>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    /*
      過濾分析：
        根據效果分析，陣列用的是原來的資料還是新的陣列
        1、假設用原來的資料，一上來展示沒問題
        2、當keyword變化的時候監視它，我們可以在原陣列當中刪除不包含keyword的項
        3、當keyword的值又變為空串的時候，我們想回去回不去了
        到此為止，卡死了
        4、既然原陣列沒法做效果，就必須使用新的一個數組，而且這個陣列一上來和原陣列資料一樣
        5、既然是新陣列，那就一定要用計算屬性，根據已有的原陣列和keyword
    */
    /*
      排序分析：
        1、排序首先要有一個參照資料，所以在data當中我們需要自定義一個數據用來表示排序規則和型別
        2、點選排序按鈕的時候這個資料要發生響應變化，變化的值我們是自己設定好的
        3、再來說排序的邏輯，其實就是在計算屬性過濾的基礎上去加邏輯

    */

    new Vue({
      el:'#root',
      data(){
        return {
          //data當中的資料包含初始化的資料和要收集的資料
          keyword:'',
          persons:[
            {id:1,name:'zhaoliying',age:33},
            {id:2,name:'yangmi',age:34},
            {id:3,name:'ouyangnana',age:20},
            {id:4,name:'liuyifei',age:18},
          ], //代表的就是ajax回來的資料
          sortType:0  //0代表原樣排序  1代表升序   2代表降序
        }
      },
      computed: {
        //這裡面的資料不是初始化資料也不是要收集的資料，而是後面根據已有資料計算而來的
        newPersons(){
          //過濾
          let {keyword,persons,sortType} = this //物件的解構賦值
          // 過濾出name中包含keyword，返回新陣列
          let result = persons.filter(item => item.name.indexOf(keyword) != -1)

          // let arr = [10,7,30]
          // arr.sort(function(a,b){
          //   return a - b
          // })

          //排序
          if(sortType !== 0){
            result.sort((a,b) => {
              if(sortType === 1){
                return a.age-b.age
              }else{
                return b.age-a.age
              }
            })
          }

          return result
        }
      },
      methods: {
        //無論是自己定義的回撥函式 
        //還是以後我們共用的一些函式 
        //都在這個裡面去寫
        // changeType(num){
        //   this.sortType = num
        // }
      },
      watch:{
        //監視已有的資料，已有的資料發生了改變，我們就可以乾點什麼
      }
    })
  </script>
</body>
</html>

5，列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <ul>
      <li v-for="(person, index) in persons" :key="person.id">
          {{person.id}} --- {{person.name}} --- {{person.age}}
      </li>
      <!-- 
        如果我們只是為了展示用的，key使用index沒問題
        如果我們以後對這個資料還有增刪改的操作，那麼index效率不高並且更可怕的是會出問題
        key以後我們要使用的幾乎都是id值，使用這個唯一標識可以提高我們列表渲染以及修改的效率
       -->
    </ul>
    <button @click="changeFirstObjName">點選修改第一個人的姓名</button>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    new Vue({
      el:'#root',
      data(){
        return {
          persons:[
            {id:1,name:'zhaoliying',age:33},
            {id:2,name:'yangmi',age:34},
            {id:3,name:'ouyangnana',age:20},
            {id:4,name:'liuyifei',age:18},
          ]
        }

        
      },
      methods: {
        changeFirstObjName(){
          //第一種
          // this.persons[0].name = 'yingbao'
          //第二種 不行,修改資料，頁面資料不會跟著改變
          // this.persons[0] = {id:1,name:'yingbao',age:33}
          // console.log(this.persons)
          //第三種,第一個引數為index, 第二個引數為刪除元素的數量，第三個引數為代替的元素
          this.persons.splice(0,1,{id:1,name:'yingbao',age:33})
        }
        // data當中的資料，所有的物件屬性都是響應式的,修改物件的屬性，就會影響到頁面更改
        // 修改陣列的整體第一個值，頁面不會發生改變，因為陣列下標不是物件的屬性，不是響應式資料
        //其實vm內部這個陣列第一個資料已經改了，只是沒有影響到頁面

        // 陣列的部分原生方法，被vue做了改變，名字和原生名字一樣，但是已經不是原生方法了
        // vue 給這些方法添加了修改頁面的功能，使得頁面可以修改
      },
    })



    // {
        //   name:'liuyuan',
        //   girlF:{
        //     name:'zly',
        //     age:33,
        //     movies:[
        //       {id:1,name:'乘風破浪'}
        //     ]
        //   }
        // }
  </script>
</body>
</html>

6，事件相關

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <!-- 最初始的寫法 -->
    <button v-on:click="test1">test1</button>
    <!-- 事件新增的簡寫 -->
    <button @click="test2">test2</button>
    <!-- 事件回撥不帶引數預設傳遞的是事件物件$event -->
    <button @click="test3">test3</button>
    <!-- 事件回撥帶了自己的引數 -->
    <button @click="test4('zhaoliying')">test4</button>
    <!-- 事件回撥不但帶了自己引數還要用到事件物件的東西 -->

    <button @click="test5($event,'zhaoliying')">test5</button>
    <!-- 原生事件物件：當事件觸發的時候，瀏覽器會呼叫這個回撥函式，瀏覽器會幫我們自動的封裝一個物件
    作為實參傳給回撥函式的第一個形參，事件物件內部是和這次觸發事件相關的所有資訊 -->


    <!-- 阻止事件冒泡 -->
    <div style="width:300px;height:300px;background-color:red" @click="outer">
      <div style="width:100px;height:100px;background-color:green" @click.stop="inner"></div>
    </div>

    <!-- 取消瀏覽器的預設行為 -->
    <a href="http://www.atguigu.com" @click.prevent="removeDefault">點我去學習</a>

    <!-- 按鍵行為 -->
    <input type="text" @keyup.enter="testKey">

  </div>
  <script src="./js/vue.js"></script>
  <script>

    //清除控制檯報錯
    Vue.config.productionTip = false

    new Vue({
      el:'#root',
      methods: {
        test1(){
          console.log('test1呼叫')
        },
        test2(){
          console.log('test2呼叫')
        },
        //事件回撥函式如果沒有傳遞其它引數，預設傳遞過來的就是事件物件
        test3(event){
          console.log('test3呼叫',event.target.innerHTML)
        },
        test4(str){
          console.log('test4呼叫',str)
        },
        test5(event,str){
          console.log('test5呼叫',str,event.target.innerHTML)
        },
        outer(){
          console.log('outer執行')
        },
        inner(event){
          console.log('inner執行')
          //原生阻止冒泡
          // event.stopPropagation();
        },
        removeDefault(event){
          console.log('哈哈')
          //原生阻止瀏覽器預設跳轉行為
          // event.preventDefault();
        },
        testKey(event){
          // if(event.keyCode === 13){
          //   console.log('回車觸發')
          // }

          console.log('回車觸發')
        }

      },
    })
  </script>
</body>
</html>

7，自動收集表單資料

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="root">
    <!-- //收集value值 -->
    <form action="">
      使用者名稱：<input type="text" placeholder="請輸入使用者名稱" v-model="userInfo.username">
      密碼：<input type="password" placeholder="請輸入使用者名稱" v-model="userInfo.password">
      <br>
      <!-- //單選框， -->
      性別：
      <input type="radio" name="sex" value="male" v-model="userInfo.gender">男
      <input type="radio" name="sex" value="female" v-model="userInfo.gender">女
      <br>

      <!-- 多選框 -->
      愛好：