Vue.js入門筆記 Vue基本指令學習
- 2019 年 12 月 24 日
- 筆記
指令
- 解釋：指令 (Directives) 是帶有
v-前綴的特殊屬性 - 作用：當表達式的值改變時，將其產生的連帶影響，響應式地作用於 DOM
常用指令
v-text
- 解釋：更新元素的 textContent
<h1 v-text="msg"></h1>
v-html
- 解釋：更新元素的 innerHTML
<h1 v-html="msg"></h1>
v-bind
- 作用：當表達式的值改變時，將其產生的連帶影響，響應式地作用於 DOM
- 語法：
v-bind:title="msg" - 簡寫：
:title="msg"
<!-- 完整語法 --> <a v-bind:href="url"></a> <!-- 縮寫 --> <a :href="url"></a> <script> // 2 創建 Vue 的實例對象 var vm = new Vue({ // el 用來指定vue掛載到頁面中的元素，值是：選擇器 // 理解：用來指定vue管理的HTML區域 el: '#app', // 數據對象，用來給視圖中提供數據的 data: { url: 'http://www.baidu.com' } }) </script>
v-on
- 作用：綁定事件
- 語法：
v-on:click="say"orv-on:click="say('參數', $event)" - 簡寫：
@click="say" - 說明：綁定的事件從
methods中獲取
<!-- 完整語法 --> <a v-on:click="doSomething"></a> <!-- 縮寫 --> <a @click="doSomething"></a> <!-- 方法傳參 --> <a @click="doSomething（「123」）"></a> <script> // 2 創建 Vue 的實例對象 var vm = new Vue({ el: '#app', // methods屬性用來給vue實例提供方法（事件） methods: { doSomething: function(str) { //接受參數，並輸出 console.log(str); } } }) </script>
事件修飾符
- .stop 阻止冒泡
- .prevent 阻止默認事件
- .captrue 添加事件偵聽器時使用事件捕獲模式
- .self 只當事件在該元素本身（比如說不是子元素）觸發的回調
- .once 事件只觸發一次
V-Model
- 作用：在表單元素上創建雙向數據綁定
- 說明：監聽用戶的輸入事件以更新數據
<input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>
V-Class及V-Style
操作元素的 class 列表和內聯樣式是數據綁定的一個常見需求。因為它們都是屬性，所以我們可以用 v-bind 處理它們：只需要通過表達式計算出字符串結果即可。
- 說明：控制元素class樣式，使用v-bind，只需要通過表達式計算出字符串結果即可；
- 表達式類型：字符串、數組、對象。
// 公共樣式定義 <style> .red{ color: red; } .font35{ font-size: 35px; } .bgblue{ background-color: blue; } </style>
<div id="app"> <!-- v-bind:class用法 --> <!-- 1、class對象語法 --> <h2 v-bind:class="{ red:isActive, bgnlue:false}">你好么，世界！！</h2> <hr> <!-- 2、數組語法 --> <h2 v-bind:class="[classRed, classBgblue]">你好</h2> <hr> <!-- v-bind:style用法 --> <!-- 1、對象語法 --> <p v-bind:style = "PClass">hello world</p> <!-- 2、數組語法 --> <p v-bind:style="[csRed, csBgblue]">hello world</p> </div>
<script src="./lib/vue-2.6.10.js"></script> <script> var vm = new Vue({ el : '#app', data : { // v-bind:class 數據綁定 // 1、class對象語法 isActive : true, isHidden : false, // 2、數組語法 classRed : 'red', classBgblue : 'bgblue', // v-bind:style 數據綁定 // 1、對象語法 PClass : { color : 'red', font35 : true, }, // 2、數組語法 csRed: { color: 'red', }, csBgblue: { bgblue: true, }, }, methods: { }, }); </script>
V-for
- 作用：基於源數據多次渲染元素或模板塊
<!-- 1、迭代數組 --> <ul v-for="item in items"> <li>{{ item.message }}</li> </ul> <!-- 2、迭代數組中的屬性 --> <ul v-for="(item, i) in items" key="item"> <li>{{ item.message }}-----{{i}}</li> </ul> <!-- 3、迭代數字 --> <ul v-for="i in 10"> <li>這是第{{i}}個標籤</li> </ul>
var vm = new Vue({ el: '#app', data: { items: [ { message: 'a1111111' }, { message: 'b2222222' }, { message: 'c3333333' }, ] }, });
v-if 和 v-show
v-if：根據表達式的值的真假條件，銷毀或重建元素v-show：根據表達式之真假值，切換元素的 display CSS 屬性
