v-bind和v-model
<a v-bind:href="url">筆記1</a>
<a :href="url">筆記2</a><input type="text" v-model:value="name"/>
<input type="text" v-model="name"/>data(){return {url:"http://123.57.27.43:9908/mimi/index.html",name:"馬朋帥"}
}
例：
<form><!-- 復選框 值為value -->1<input type="checkbox" v-model="userInfo.hobby" value="study">2<input type="checkbox" v-model="userInfo.hobby" value="game">3<input type="checkbox" v-model="userInfo.hobby" value="eat"><!-- 下拉框 --><select v-model="userInfo.city"><option value="">請選擇</option><option value="beijing">北京</option><option value="shanghai">上海</option></select><!-- 文本域 體現v-model的修飾符--><textarea v-model.lazy="userInfo.other"></textarea><!-- 復選框 值為布爾值--><input type="checkbox" v-model="userInfo.agree">閱讀并接受
</form>
<script>userInfo:{hobby:[],city:'beijing',other:'',agree:'' // v-model的初始值是非數組收集的是checkbox的布爾值}
</script>
v-model只能用于表單元素的value
v-model的三個修飾符：
- lazy：失去焦點再收集數據
- number：輸入字符串轉為有效的數字
- trim：輸入首尾空格過濾
v-on
<button v-on:click="open1">1</button>
<button @click="open2">2</button>
<button @click="open3($event,66)">3</button><script>new Vue({el:"#root",methods:{open1(){console.log("v-on");},open2(){console.log("@");},open3(event,num){console.log(this); //vue對象console.log(event); //$event(vue中的標識符)就是這個按鈕2console.log(num);}}})
</script>
事件修飾符
- prevent：阻止默認事件（比如：a標簽href屬性的連接跳轉）
- stop：阻止事件冒泡
- once：事件只觸發一次
- capture：使用事件的捕獲模式
- self：只有event.target是當前操作的元素時才觸發
- passive：事件的默認行為立即執行，無需等待事件的回調執行完畢
- native：給組件綁定事件。例：
<Student @click.native="show()"/>
<body><div id="root"><a href="http://www.baidu.com" @click.prevent="showInfo">a標簽</a></div><script type="text/javascript">new Vue({el:"#root",data(){return {name:"馬朋帥"}},methods:{showInfo(){alert('事件修飾符')}}})</script>
</body>
捕獲模式：盒子從外到內執行元素的綁定事件
冒泡模式：從內到外執行元素的綁定事件（默認使用冒泡模式執行事件）（先捕獲后冒泡）
@scroll=“aaa” 滾動條滾動事件，@wheel=“aaa” 鼠標滾輪的滾動事件
@wheel先執行aaa函數，完成后鼠標滾輪滾動（可以用passive解決），@scroll無此類問題
@click.prevent.stop 可以連寫
v-if和v-show
v-if：把元素去掉或顯示（用于切換少）
v-if="“和v-else-if=”“和v-else=”"要一起用必須連這寫
v-show：把元素隱藏或顯示（用于切換頻繁）
v-for
<div id="root"><!-- 遍歷數組 --><ul><li v-for="(p,index) of persons" :key="index">{{p.name}}</li></ul><!-- 遍歷對象 --><ul><li v-for="(value,key) of car" :key="key">{{key}}-{{value}}</li></ul><!-- 遍歷字符串 --><ul><li v-for="(char,index) of str" :key="index">{{index}}-{{char}}</li></ul><!-- 遍歷指定次數 --><ul><li v-for="(num,index) of 6" :key="index">{{index}}-{{num}}</li></ul></div>
<script type="text/javascript">new Vue({el: "#root",data() {return {persons: [{id:'001',name:'張三'},{id:'002',name:'李四'},{id:'003',name:'王五'}],car:{name: '張三',age: 18},str: 'hello',}}})
</script>
key 的原理
用index作為key可能會引發的問題：
若對數據進行：逆序添加（在數組前面插入元素）、逆序刪除（刪除數組前面，中間的數據）等破壞順序的操作:
會產生沒有必要的真實DOM更新 ==> 界面沒問題（效率低）
原因：一次頁面渲染前后key對應的元素相同會復用（因為在數組最前面添加元素，index都會往后移一個，key對應的元素跟以前對不上不會復用）
如果結構中還包含輸入類的DOM（比如：Input框）：
會產生錯誤DOM更新 ==> 界面有問題（效率低）。
原因：一次頁面渲染前后key對應的元素相同會復用，Vue不會變的Input的value只判斷他的結構，結構相同會復用可能Input的value不同頁面發生錯誤
開發中如何選擇key（以上問題的解決方法）:
? a. 最好使用每條數據的唯一標識作為key， 比如id、手機號、身份證號、學號等唯一值。
? b. 如果不存在對數據的逆序添加、逆序刪除等破壞順序操作，僅用于渲染列表用于展示，使用index作為key是沒有問題的。
v-text和v-html
<div id="root"><div>{{name}}</div><div v-text="name"></div><div v-html="nameMmm"></div>
</div>
<script type="text/javascript">new Vue({el: "#root",data() {return {name : "張三",nameMmm: "<a href='#'>張三</a>"}}})
</script>
v-cloak
vue文件加載慢的時候頁面可能出現 {{name}}
解決方法（兩種）：
（第一種）把vue.js文件放在HTML文件的前面head里面
（第二種）v-cloak，用法：在有上述問題的標簽上加v-cloak標簽，當加載到vue.js文件后，就會去除該標簽
<head><style>[v-cloak]{display: none;}</style>
</head>
<body>
<div id="root"><div v-cloak>{{name}}</div>
</div>
<script type="text/javascript">const vm = new Vue({el: "#root",data() {return {name : "張三",}}})
</script>
v-once和v-pre
v-once:頁面第一次加載的時候讀取變量，之后變量變化值不改變
<div id="root"><div v-once>{{n}}</div><div>{{n}}</div><button @click="n++">n++</button>
</div>
<script type="text/javascript">new Vue({el: "#root",data() {return {n : 1,}}})
</script>
v-pre:vue不會解析帶有該屬性的標簽
