Vue語法-插值運算式

在app.vue內書寫

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>{{ obj.name }}</h2>
    <h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3>
  </div>
</template>

<script>
export default {
  data() { // 格式固定, 定義vue資料之處
    return {  // key相當于變數名
      msg: "hello, vue",
      obj: {
        name: "小vue",
        age: 5
      }
    }
  }
}
</script>

插值運算式

雙大括號可以把Vue變數直接顯示在標簽內

Vue中變數宣告

data函式內 return的物件物件內的key就是變數名

Vue基礎-MVVM設計模式

如果你按照上一篇文章內下載好了插件,那么就可以通過vue控制臺來操控修改資料

這樣可以減少dom操作方便操作

Vue指令-v-bind動態屬性

<template>
  <div>
<!-- vue指令-v-bind屬性動態賦值 -->
   <a v-bind:href="url">我是a標簽</a>
  
  </div>
</template>

<script>
export default {
  data() { // 格式固定, 定義vue資料之處
    return {  // key相當于變數名
   url:'http://www.baidu.com'
    }
  }
}
</script>

只需要修改url 即可改變跳轉地址啦

Vue指令-v-on事件系結

<template>
  <div>
<p>你要買商品的數量: {{count}}</p>
<button v-on:click="addFn">增加1個</button>
<button v-on:click="addCountFn(5)">一次加5件</button>

<button @click="subFn">減少</button>
  </div>
</template>

<script>
    export default {
        data(){
          return{
            count:10
          }
        },
        methods: {
            addFn(){ // this代表export default后面的組件物件(下屬有data里return出來的屬性)
                this.count++
            },
            addCountFn(num){
                this.count += num
            },
            subFn(){
                this.count--
            }
        }
    }
</script>

vue 隨機打出一段文字

<template>
  <div>
    <p>{{ word }}</p>
    <button @click="jockBtnFn">點擊說笑話</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      word: '這里是一條笑話',
      jockArr: ['我去相親網站去了, 那你找到物件了嗎? 不! 我找到了他們網站的一個Bug', '這個需求很簡單, 怎么實作我不管, 明天上線', '程式員是推動這個世界進步的人']
    }
  },
  methods: {
    jockBtnFn(){
      let randNum = Math.floor(Math.random() * this.jockArr.length)
      let str = this.jockArr[randNum]
      this.word = str
    }
  }
}
</script>

寫需求要先寫靜態標簽，再考慮動態效果
系結點擊事件, 然后亂數從陣列里取字串
把字串賦予給變數word, 影響p標簽顯示內容

Vue指令-v-on事件物件阻止默認行為

<template>
  <div>
    <a @click="one" href="http://www.baidu.com">阻止百度</a>
    <hr>
    <a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
  </div>
</template>

<script>
export default {
  methods: {
    one(e){
      e.preventDefault()
    },
    two(num, e){
      e.preventDefault()
    }
  }
}
</script>

無實參的情況下只需要寫函式名字即可無需傳參

有實參情況下需要手動調入$event

Vue指令-v-on修飾符

.stop - 阻止事件冒泡
.prevent - 阻止默認行為

<template>
  <div @click="fatherFn">
    <!-- vue對事件進行了修飾符設定, 在事件后面.修飾符名即可使用更多的功能 -->
    <button @click.stop="btn">.stop阻止事件冒泡</button>
    <a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默認行為</a>
  </div>
</template>

<script>
export default {
  methods: {
    fatherFn(){
      console.log("father被觸發");
    },
    btn(){
      console.log(1);
    }
  }
}
</script>

Vue指令-v-on按鍵修飾符

@keyup.enter - 監測回車按鍵
@keyup.esc - 監測回傳按鍵

<template>
  <div>
    <input type="text" @keydown.enter="enterFn">
    <hr>
    <input type="text" @keydown.esc="escFn">
  </div>
</template>

<script>
export default {
 methods: {
   enterFn(){
     console.log("enter回車按鍵了");
   },
   escFn(){
     console.log("esc按鍵了");
   }
 }
}
</script>

翻轉字串

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="btn">逆轉世界</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "HELLO, WORLD",
    };
  },
  methods: {
    btn(){
      this.message = this.message.split("").reverse().join("")
    }
  }
};
</script>

Vue指令-v-model雙向系結

<template>
  <div>
    <!-- 
    	v-model:是實作vuejs變數和表單標簽value屬性, 雙向系結的指令
    -->
    <div>
      <span>用戶名:</span>
      <input type="text" v-model="username" />
    </div>
    <div>
      <span>密碼:</span>
      <input type="password" v-model="pass" />
    </div>
    <div>
      <span>來自于: </span>
      <!-- 下拉選單要系結在select上 -->
      <select v-model="from">
        <option value="北京市">北京</option>
        <option value="南京市">南京</option>
        <option value="天津市">天津</option>
      </select>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      pass: "",
      from: ""
    }
  }
};
</script>

語法: v-model="vue資料變數"
雙向資料系結
- 資料變化 -> 視圖自動同步
- 視圖變化 -> 資料自動同步
最后演示: 用戶名系結 - Vue內部是MVVM設計模式

Vue指令-v-model雙向系結2

<template>
  <div>
    <div>
      <!-- (重要)
      遇到復選框, v-model的變數值
      非陣列 - 關聯的是復選框的checked屬性
      陣列   - 關聯的是復選框的value屬性
       -->
      <span>愛好: </span>
      <input type="checkbox" v-model="hobby" value="抽煙">抽煙
      <input type="checkbox" v-model="hobby" value="喝酒">喝酒
      <input type="checkbox" v-model="hobby" value="寫代碼">寫代碼
    </div>
    <div>
      <span>性別: </span>
      <input type="radio" value="男" name="sex" v-model="gender">男
      <input type="radio" value="女" name="sex" v-model="gender">女
    </div>
    <div>
      <span>自我介紹</span>
      <textarea v-model="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hobby: [], 
      sex: "",
      intro: "",
    };
    // 總結:
    // 特別注意: v-model, 在input[checkbox]的多選框狀態
    // 變數為非陣列, 則系結的是checked的屬性(true/false) - 常用于: 單個系結使用
    // 變數為陣列, 則系結的是他們的value屬性里的值 - 常用于: 收集勾選了哪些值
  }
};
</script>

Vue指令-v-model修飾符

v-model.修飾符="vue資料變數"

.number 以parseFloat轉成數字型別
.trim 去除首尾空白字符
.lazy 在change時觸發而非inupt時

<template>
  <div>
    <div>
      <span>年齡:</span>
      <input type="text" v-model.number="age">
    </div>
    <div>
      <span>人生格言:</span>
      <input type="text" v-model.trim="motto">
    </div>
    <div>
      <span>自我介紹:</span>
      <textarea v-model.lazy="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: "",
      motto: "",
      intro: ""
    }
  }
}
</script>

.number - 轉成數值型別后再賦予給Vue資料變數
.trim - 去除兩邊空格后把值賦予給Vue資料變數
.lazy - 等表單失去焦點，才把值賦予給Vue資料變數

Vue指令-v-html

注意點

該html 會把原標簽內容清空覆寫

<template>
  <div>
    <p v-html="str"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: "<span>我是一個span標簽</span>"
    }
  }
}
</script>

Vue指令-v-show和v-if

語法:
- v-show="vue變數"
- v-if="vue變數"
原理
- v-show 用的display:none隱藏 (頻繁切換使用)
- v-if 直接從DOM樹上移除
高級
- v-else使用

<template>
  <div>
    <h1 v-show="isOk">v-show的盒子</h1>
    <h1 v-if="isOk">v-if的盒子</h1>

    <div>
      <p v-if="age > 18">我成年了</p>
      <p v-else>還得多吃飯</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOk: true,
      age: 15
    }
  }
}
</script>

案例-折疊面板

在做這個之前先把以下包安裝了

yarn add less@3.0.4 less-loader@5.0.0 -D

<template>
  <div id="app">
    <h3>案例：折疊面板</h3>
    <div>
      <div class="title">
        <h4>芙蓉樓送辛漸</h4>
        <span class="btn" @click="isShow = !isShow">
          {{ isShow ? '收起' : '展開' }}
        </span>
      </div>
      <div class="container" v-show="isShow">
        <p>寒雨連江夜入吳, </p>
        <p>平明送客楚山孤，</p>
        <p>洛陽親友如相問，</p>
        <p>一片冰心在玉壺，</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    }
  }
}
</script>

#######Vue指令-v-for########重點哈

<template>
  <div id="app">
      <!-- 省略其他 -->
      <p>學生詳細資訊</p>
      <ul>
        <li v-for="obj in stuArr" :key="obj.id">
          <span>{{ obj.name }}</span>
          <span>{{ obj.sex }}</span>
          <span>{{ obj.hobby }}</span>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // ...省略其他
      stuArr: [
        {
          id: 1001,
          name: "孫悟空",
          sex: "男",
          hobby: "吃桃子",
        },
        {
          id: 1002,
          name: "豬八戒",
          sex: "男",
          hobby: "背媳婦",
        }
      ]
    }
  }
}
</script>