目錄

初識Vue

遍歷陣列

v-bind

基本使用

v-bind動態系結class（物件語法）

v-bind動態系結style（物件語法）

computed 計算屬性

基本使用

v-on事件的監聽

v-on的引數問題

v-on的修飾符

條件判斷

v-if和v-else的使用

用戶登錄切換案例

v-for回圈遍歷

基本使用

補充：陣列中那些方法是回應式

點擊切換顏色 案例

v-mode(雙向系結)

v-mode基本使用

v-mode結合checkbox

v-mode修飾符

初識Vue

<div id="app">
    <!-- mustache語法中，不僅可以直接寫變數，也可以寫簡單的運算式 -->
    <h2>{{message+name}}</h2>
    <h2>{{mesage+' '+neme}}</h2>
    <h3>{{message}}</h3>
    <h1>{{name}}</h1>
  </div>

<script>
    //let(變數)/const(常量)
    //編程范式：宣告式編程
    const app = new Vue({
      el: "#app",//用于掛載要管理的元素
      data: {//定義資料
        message: '你好',
        name: "zaima"
      }
    })
        //js的編程范式是命令式編程，要一步一步明確指定
  </script>

遍歷陣列

<div id="app">
    <ul>
      <li v-for="item in movies">{{item}}</li>
    </ul>
  </div>

<script>
    const app = new Vue({
      el: "#app",
      data: {
        message: '你好',
        movies: ['海王', '星際穿越', '少年派', '盜夢空間']
      }
    })
  </script>

v-bind

基本使用

<!-- 不加v-bind就無法動態獲取vue里的東西 -->
  <div id="app">
    <!-- v-bind的簡寫是: -->
    <a :href="aHref"></a>
    <img v-bind:src="對應圖片地址" alt="">
  </div>

<script>
    // hook鉤子
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好吖',
        aHref: "www.baidu.com"
      }
    })
  </script>

v-bind動態系結class（物件語法）

<div id="app">    //哪個類名為true就添加哪個類
    <!-- <h2 v-bind:class="{類名1:true,類名2:布林值}">{{message}}</h2> -->
    <!-- 下面類名可以同時添加 -->
    <!-- <h2 class="title" v-bind:class="{active:isActive,line:isLine}">{{message}}</h2> -->
    <!-- 里面也可以加函式 -->
    <h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
  </div>

<script>
    // hook鉤子
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好吖',
        isActive: true,
        isLine: true
      },
      // 里面放事件，函式都放進來
      methods: {
        btnClick: function () {
          this.isActive = !this.isActive
        },
        // 呼叫data里的方法都要加this
        getClasses:function(){
          return {active:this.isActive,line:this.isLine}
        }
      }
    })
  </script>

v-bind動態系結style（物件語法）

<div id="app">
    <!-- <h2 v-bind:style="{key(屬性名):value(屬性值)}">{{message}}</h2> -->
    <!-- 屬性值變數不用加單引號，固定值加單引號，不加單引號會當變數決議 -->
                //fontSize = font-size 在vue里前面有-要大寫字母
    <h2 :style="{fontSize:finalSize + 'px',backgroundColor: finalColor}">{{message}}</h2>
    <h2 :style="getStyles()">{{message}}</h2>
  </div>
  <script>
   const app = new Vue({
      el: '#app',
      data: {
        message:'你好吖',
        finalSize:50,
        finalColor:'red'
      },
      methods:{
        getStyles:function(){
          return {fontSize:this.finalSize + 'px',backgroundColor: this.finalColor}
        }
      }
    })
</script>

computed 計算屬性

基本使用

<div id="app">
   <h2>總價格：{{totalPrice}}</h2>
  </div>
  <script>
   const app = new Vue({
      el: '#app',
      data: {
        books:[
        {id:110,name:"編程藝術",proce:119},
        {id:111,name:"代碼大全",proce:119},
        {id:112,name:"深入理解計算機原理",proce:119},
        {id:113,name:"現代作業系統",proce:119},
        ]
      },// computed計算屬性
      computed:{
        // 計算總價格
        totalPrice:function(){
          let result=0;
          for(let i=0; i<this.books.length; i++){
            result += this.books[i].proce
          }
          return result
        }
      }
    })
  </script>

v-on事件的監聽

v-on的引數問題

<div id="app">
    <!-- 1.事件呼叫的方法沒有引數 -->
    <button @click="btn1Click()">按鈕一</button>
    <button @click="btn1Click">按鈕一</button>
    <!-- 2.事件在定義時，寫方法時省略了小括號，但是方法本身是需要一個引數的，
      這個時候，Vue會默認將瀏覽器生產的event事件物件作為引數傳入到方法 
       如果方法不需要引數可以省略小括號-->
      <!-- <button @click="btn2Click(123)">按鈕二</button>
      <button @click="btn2Click()">按鈕二</button> -->
      <button @click="btn2Click">按鈕二</button>
      <!-- 3.方法定義時，我們需要event物件，同時有需要其他引數 -->
      <!-- 在呼叫方式，如何手動獲取到瀏覽器引數的event物件：$event -->
                               <!-- abc不加引號就當作變數 -->
      <button @click="btn3Click(abc,$event)">按鈕三</button>
  </div>
  <script>
  const app = new Vue({
      el: '#app',
      data: {
        message:'你好吖',
        abc:123
      },
      methods:{
        btn1Click(){
          console.log("btn1Click");
        },
        btn2Click(event){
          console.log("------",event);
        },
        btn3Click(abc,event){
          console.log('+++++',abc,event);
        }
      }
    })
</script>

v-on的修飾符

<div id="app">
    <!-- 1.stop修飾符,阻止了下面事件的冒泡 -->
    <div @click="divClick">
      <button @click.stop="btnClick">按鈕</button>
    </div>
    <!-- 2.prevent修飾符,阻止了下面事件向百度提交 -->
    <form action="baidu">
      <input type="submit" value="提交" @click.prevent="submitClick">
    </form>
    <!-- 3.監聽某個鍵盤的鍵帽,enter只執行keyUP(回車)一個鍵位 -->
    <input type="text" @keyup.enter="keyUp">
    <!-- 4.once修飾符,只能執行一次 -->
    <button @click.once="btn2Click">按鈕2</button>
  </div>
  <script>
   var vm = new Vue({
      el: '#app',
      data: {

      },
      methods: {
        btnClick() {
          console.log("btnclick");
        },
        divClick() {
          console.log("divclick");
        },
        submitClick() {
          console.log("submitclick");
        },
        keyUp() {
          console.log("keyup");
        },
        btn2Click() {
          console.log("btn2click");
        }
      }
    });
</script>

條件判斷

v-if和v-else的使用

<div id="app">
    <!-- v-if 當條件為false時,包含v-if指令的元素,根本不會出現在dom中 -->
    <!-- v-show 當條件為false時,只是包含v-show指令的元素看不到了,但是還存在網頁代碼中 -->
    <!-- 跟js的if陳述句相似，也可以用函式判斷決定那個為true -->
    <h2 v-if="isShow">
      <div>abc</div>
      <div>abc</div>
      <div>abc</div>
    </h2>
    <h1 v-else>isShow為false時，顯示我</h1>
  </div>
  <script>
  const app = new Vue({
      el: '#app',
      data: {
        isShow:false,
      },
      methods: {}
    });
 </script>

用戶登錄切換案例

<div id="app">
    <span v-if="isUser">
      <!-- label里的username這個屬性指向input里的id,這樣點擊label里的文字也可以獲取焦點 -->
      <label for="username">用戶賬號</label>
      <!-- 如果不希望文本框的內容被復用就用key設定不同的值,這樣文本框才會重新渲染 -->
      <input type="text" id="username" placeholder="用戶賬戶" key="username">
    </span>
    <span v-else>
      <label for="email">用戶郵箱</label>
      <input type="text" id="email" placeholder="用戶郵箱" key="email">
    </span>
    <button @click="isUser = !isUser">切換型別</button>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isUser: true,
      },
      methods: {}
    });
  </script>

v-for回圈遍歷

基本使用

 <div id="app">
   <ul>
     <!-- <li v-for="item in info">{{item}}</li>把所有陣列或所有物件的value（屬性值） -->
     <!-- value獲取值，key獲取名字 info遍歷的物件-->
     <li v-for="(value,key) in info">{{value}}-{{key}}</li>
     <!-- index獲取下標 -->
     <li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li>
    </ul>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        info:{
          name:'why',
          age:18,
          height:1.88
        }
      },
      methods: {}
    });
  </script>

補充：陣列中那些方法是回應式

<div id="app">
    <ul>
      <!-- 加key可以提高效率,一般加 :key="item -->
      <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="btnClick">按鈕</button>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        letters: ['a', 'b', 'c', 'd']
      },
      methods: {
        btnClick() {
          // 1.push方法，從最后添加多個元素
          // this.letters.push('aaa','bbb')
          // 4.unshift(),從陣列最前面添加元素多個元素
          // this.letters.unshift('aaa')
          // 2.pop()，從最后洗掉
          // this.letters.pop();
          //  3.shift(),從第一個洗掉
          // this.letters.shift();
          // splice()作用：洗掉/插入/替換元素
          // 洗掉元素：第二個引數傳入你要洗掉幾個元素（如果不傳，就洗掉后面所有）
          // 替換元素：第二個引數，表示我們要替換幾個元素，后面是用來替換前面的元素
          // (可以說第二個值后面都是添加的值，加幾個都可以)
          // this.letters.splice(1,2,'m','n','l','o')
          // 插入元素：第二個寫0，并跟上要插的元素
          // this.letters.splice(1,0,'ha','he')
          // 5.sort()排序
          // 6.reverse()反轉
          // this.letters.reverse()
          // 7.vue里的內部的函式
          // Vue.set(要修改的物件，索引值，修改后的值)
          // Vue.set(this.letters,0,'bbb')

          // 2.通過索引值修改陣列中的元素,頁面不會自動重繪，因為不是回應式的方法,別用這種方式
          // this.letters[0]='bbb';
          // function sum(...num){
          //   ...可以添加多個元素
          // }
          // sum(1,2,3,4);
        }
      }
    });
  </script>

點擊切換顏色 案例

<div id="app">
    <ul>       <!--class里的active為true才用這個類 ,      點擊第幾個下標-->
      <li v-for="(item,index) in movies"
       :class="{active:currentIndex === index}" @click="liClick(index)">{{item}}
      </li>
    </ul>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        movies: ['海王', '海賊王', '海爾兄弟', '加勒比海盜'],
        currentIndex: 0
      },
      methods: {
        liClick(index) {
          // 讓currentIndex等于點擊的下標,這樣第幾個下標就變色了
          this.currentIndex = index
        }
      }
    });
  </script>

v-mode(雙向系結)

v-mode基本使用

 <div id="app">
    <!-- v-mode用于表單的雙向系結，文本框的值改變data里對應的值也改變 -->
    <label for="male">
      <!-- input里添加name屬性值相同他們就只能選擇一個選項，互斥 -->
      <!-- v-model的值相同也會互斥 -->
    <input type="radio" id="male" value="男" v-model="sex">男
    </label>
    <label for="female">
      <input type="radio" id="female" value="女" v-model="sex">女
      </label>
      <h2>您選擇的性別是：{{sex}}</h2>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // 這里寫啥就默認選中啥，傳的是value值
        sex:'男'
      },
      methods: {}
    });
  </script>

v-mode結合checkbox

<div id="app">
    <!-- 1.checkbox單選框 ,v-model對應布爾型別-->
    <!-- <label for="agree"> -->
    <!-- 點擊之后isAgree就true了,因為下面disabled取反了 -->
    <!-- <input type="checkbox" id="agree" v-model="isAgree">同意協議 -->
    <!-- </label> -->
    <!-- <h2>您的選則是：{{isAgree}}</h2> -->
    <!-- disabled的值為ture就禁止點雞了 -->
    <!-- <button :disabled="!isAgree">下一步</button> -->

    <!-- 2.checkbox多選框,v-model對應陣列型別 -->
    <!-- 選中之后獲取value值 -->
    <input type="checkbox" value="籃球" v-model="hobbies">籃球
    <input type="checkbox" value="足球" v-model="hobbies">足球
    <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
    <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
    <h2>您的愛好是:{{hobbies}}</h2>
  </div>

  <script>
    const app = new Vue({
      el: '#app',

      data: {
        isAgree: false,//單選框
        hobbies: []  //多選框
      },
      methods: {

      }
    });
  </script>

v-mode修飾符

<div id="app">
    <!-- 1.修飾符：lazy  這個修飾符滑鼠焦點消失之后才傳給vue值 -->
    <input type="text" v-model.lazy="message">
    <h2>{{message}}</h2>
    <!-- 2.修飾符：number  改成數字型別，原本是字串型別    
      ， type="number"這個表示只能輸入數字，但獲取的是字串的數字 -->
    <input type="number" v-model.number="age">
    <h2>{{age}}-{{typeof age}}</h2>
    <!-- 3.修飾符：trim     去除兩側空格-->
    <input type="text" v-model.trim="name">
    <h2>您輸入的名字：{{name}}</h2>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message:'你好吖',
        age:0,
        name:''
      },
      methods: {}
    });
  </script>

期待各位小伙伴加入我們一起學習的隊伍哦?