vue.js 中M V MV代表哪一部分
<插值表達式（v-cloak v-text v-html v-bind（縮寫是:） v-on（縮寫是@） v-model v-for v-if v-show ）
<body><div id="app"><!-- 使用 v-cloak 能夠解決 插值表達式閃爍（在網絡不好的情況下{{ msg }}展示出來）的問題 不會覆蓋元素中原本的內容--><p v-cloak>++++++++ {{ msg }} ----------</p><!-- 默認 v-text 是沒有閃爍問題的--><!-- v-text會覆蓋元素中原本的內容，但是 插值表達式 只會替換自己的這個占位符，不會把整個元素的內容清空 --><h4 v-text="msg">==================</h4><div>{{msg2}}</div><!-- v-html會覆蓋元素中原本的內容 解析標簽 --><div v-html="msg2">1212112</div><!-- v-bind: 是 Vue中，提供的用于綁定屬性的指令 --><!-- v-bind 只能實現數據的單向綁定，從 M 自動綁定到 V， 無法實現數據的雙向綁定 --><!-- 注意： v-bind: 指令可以被簡寫為 :要綁定的屬性 --><!-- v-bind 中，可以寫合法的JS表達式 --><!-- <input type="button" value="按鈕" v-bind:title="mytitle + '123'"> --><!-- Vue 中提供了 v-on: 事件綁定機制 --><!-- <input type="button" value="按鈕" :title="mytitle + '123'" v-on:click="alert('hello')"> --><!-- 使用 v-model 指令，可以實現 表單元素和 Model 中數據的雙向數據綁定 --><!-- 注意： v-model 只能運用在 表單元素中 --><!-- input(radio, text, address, email....) select checkbox textarea --><input type="text" style="width:100%;" v-model="msg"><!-- v-if 的特點：每次都會重新刪除或創建元素 --><!-- v-show 的特點： 每次不會重新進行DOM的刪除和創建操作，只是切換了元素的 display:none 樣式 --><!-- v-if 有較高的切換性能消耗 --><!-- v-show 有較高的初始渲染消耗 --><!-- 如果元素涉及到頻繁的切換，最好不要使用 v-if, 而是推薦使用 v-show --><!-- 如果元素可能永遠也不會被顯示出來被用戶看到，則推薦使用 v-if --><h3 v-if="flag">這是用v-if控制的元素</h3><h3 v-show="flag">這是用v-show控制的元素</h3></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var vm = new Vue({el: '#app',data: {msg: '123',msg2: '<h1>哈哈我驕傲</h1>',mytitle: '這是一個自己定義的title'},methods: { // 這個 methods屬性中定義了當前Vue實例所有可用的方法show: function () {alert('Hello')}}})</script>
</body>v-for
<body><div id="app"><!-- i索引值--><p v-for="(item, i) in list">索引值：{{i}} --- 每一項：{{item}}</p><p v-for="(user, i) in list2">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p><!-- 注意：在遍歷對象身上的鍵值對的時候， 除了 有 val key ,在第三個位置還有 一個 索引 --><p v-for="(val, key, i) in user">值是： {{ val }} --- 鍵是： {{key}} -- 索引： {{i}}</p> <!-- in 后面我們放過 普通數組，對象數組，對象， 還可以放數字 --><!-- 注意：如果使用 v-for 迭代數字的話，前面的 count 值從 1 開始 --><p v-for="count in 10">這是第 {{ count }} 次循環</p> </div><script>// 創建 Vue 實例，得到 ViewModelvar vm = new Vue({el: '#app',data: {list: [1, 2, 3, 4, 5, 6],list2: [{ id: 1, name: 'zs1' },{ id: 2, name: 'zs2' },{ id: 3, name: 'zs3' },{ id: 4, name: 'zs4' }],user: {id: 1,name: '托尼·屎大顆',gender: '男'}},methods: {}});</script>
</body>
v-for循環中key屬性的使用
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head><body><div id="app"><div><label>Id:<input type="text" v-model="id"></label><label>Name:<input type="text" v-model="name"></label><input type="button" value="添加" @click="add"></div><!-- 注意： v-for 循環的時候，key 屬性只能使用 number獲取string --><!-- 注意： key 在使用的時候，必須使用 v-bind 屬性綁定的形式，指定 key 的值 --><!-- 在組件中，使用v-for循環的時候，或者在一些特殊情況中，如果 v-for 有問題，必須 在使用 v-for 的同時，指定 唯一的 字符串/數字 類型 :key 值 --><p v-for="item in list" :key="item.id"><input type="checkbox">{{item.id}} --- {{item.name}}</p></div><script>// 創建 Vue 實例，得到 ViewModelvar vm = new Vue({el: '#app',data: {id: '',name: '',list: [{ id: 1, name: '李斯' },{ id: 2, name: '嬴政' },{ id: 3, name: '趙高' },{ id: 4, name: '韓非' },{ id: 5, name: '荀子' }]},methods: {add() { // 添加方法this.list.unshift({ id: this.id, name: this.name })}}});</script>
</body></html>事件修飾符 ： .stop .prevent .capture .self .once
<div id="app"><!-- 使用 .stop 阻止冒泡 --><!-- <div class="inner" @click="div1Handler"><input type="button" value="戳他" @click.stop="btnHandler"></div> --><!-- 使用 .prevent 阻止默認行為 --><!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有問題，先去百度</a> --><!-- 使用 .capture 實現捕獲觸發事件的機制 --><!-- <div class="inner" @click.capture="div1Handler"><input type="button" value="戳他" @click="btnHandler"></div> --><!-- 使用 .self 實現只有點擊當前元素時候，才會觸發事件處理函數 --><!-- <div class="inner" @click="div1Handler"><input type="button" value="戳他" @click="btnHandler"></div> --><!-- 使用 .once 只觸發一次事件處理函數 --><!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有問題，先去百度</a> --><!-- 演示： .stop 和 .self 的區別 --><!-- <div class="outer" @click="div2Handler"><div class="inner" @click="div1Handler"><input type="button" value="戳他" @click.stop="btnHandler"></div></div> --><!-- .self 只會阻止自己身上冒泡行為的觸發，并不會真正阻止 冒泡的行為 --><!-- <div class="outer" @click="div2Handler"><div class="inner" @click.self="div1Handler"><input type="button" value="戳他" @click="btnHandler"></div></div> --></div>vue.js中的樣式 class 樣式 style 樣式
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><style>.red {color: red;}.thin {font-weight: 200;}.italic {font-style: italic;}.active {letter-spacing: 0.5em;}</style>
</head><body><div id="app"><!-- <h1 class="red thin">這是一個很大很大的H1，大到你無法想象！！！</h1> --><!-- 第一種使用方式，直接傳遞一個數組，注意： 這里的 class 需要使用 v-bind 做數據綁定 --><!-- <h1 :class="['thin', 'italic']">這是一個很大很大的H1，大到你無法想象！！！</h1> --><!-- 在數組中使用三元表達式 --><!-- <h1 :class="['thin', 'italic', flag?'active':'']">這是一個很大很大的H1，大到你無法想象！！！</h1> --><!-- 在數組中使用 對象來代替三元表達式，提高代碼的可讀性 --><!-- <h1 :class="['thin', 'italic', {'active':flag} ]">這是一個很大很大的H1，大到你無法想象！！！</h1> --><!-- 在為 class 使用 v-bind 綁定 對象的時候，對象的屬性是類名，由于 對象的屬性可帶引號，也可不帶引號，所以 這里我沒寫引號； 屬性的值 是一個標識符 --><h1 :class="classObj">這是一個很大很大的H1，大到你無法想象！！！</h1></div><script>// 創建 Vue 實例，得到 ViewModelvar vm = new Vue({el: '#app',data: {flag: true,classObj: { red: true, thin: true, italic: false, active: false }},methods: {}});</script><div id="app2"><!-- 對象就是無序鍵值對的集合 --><!-- <h1 :style="styleObj1">這是一個h1</h1> --><h1 :style="[ styleObj1, styleObj2 ]">這是一個h1</h1></div><script>// 創建 Vue 實例，得到 ViewModelvar vm = new Vue({el: '#app2',data: {styleObj1: { color: 'red', 'font-weight': 200 },styleObj2: { 'font-style': 'italic' }},methods: {}});</script>
</body></html>
-NPM校正amp;CPK完整版教程，一步步帶你成為SMT設備大神！...)
稱獲取 當前機器的IP地址與子網掩碼信息)
