<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <style> .color{ color: red; } .style{ font-style: italic; } .size{ font-size: 20px; } .weight{ font-weight: bold; } </style></head><body> <div id="app"> <!-- v-clock 解决闪动 --> <div v-clock>{{clockData}}</div> <div v-text="msg">111</div> <div v-html="msg">111</div> <!-- v-bind 绑定属性，缩写: --> <p :title="titleMsg || 'this is my title'">show me</p> <!-- v-on 绑定事件，缩写@ --> <button @click="clickTest">click me</button> <!-- 事件修饰符 --> <!-- .stop 阻止冒泡 --> <div @click="clickFa"> <div @click.stop="clickTest"> <button @click="clickChild">stop child</button> <p>father2</p> </div> <p>father1</p> </div> <!-- .prevent 阻止默认行为 --> <a href="http://www.baidu.com" @click.prevent="clickTest">aaa</a> <!-- .capture 实现捕捉 --> <div @click.capture="clickFa"> <button @click="clickChild">prevent child</button> <p>father</p> </div> <!-- .self 只点击以后元素才触发 并不会对冒泡有本质影响，只是加了.self的那一层只有点击本人时才会触发 --> <div @click="clickFa"> <div @click.self="clickTest"> <button @click="clickChild">self child</button> <p>father2</p> </div> <p>father1</p> </div> <!-- .once 只触发一次 --> <a href="http://www.baidu.com" @click.prevent.once="clickTest">aaaOnce</a><br /> <!-- v-model 双向绑定 --> <!-- 不是双向数据流，只是语法糖 --> 单向绑定<input type="text" :value="inpMsg"> 双向绑定<input type="text" v-model="inpMsg"> <!-- class --> <p :class="['color','size',{'weight':flag}]">show class</p> <p :class="classObj">show class</p> <!-- style --> <p :style="styleObj1">show style</p> <p :style="[styleObj1,styleObj2]">show style</p> <!-- v-for --> <ul> <li v-for="(item,index) in list">{{index}} - {{item}}</li> <li v-for="(val,key,i) in obj">{{key}} : {{val}} -- {{i}}</li> <li v-for="count in 4">{{count}}</li> </ul> <!-- key 惟一标识符 --> <p> <span>val</span> <input type="text" v-model="name"> </p> <button @click="add">ADD</button> <ul> <li v-for="item in valList" :key="item.id"><input type="checkbox">{{item.id}} - {{item.name}}</li> </ul> <!-- v-if(会操作dom)/v-show --> <button @click="change">change flag</button> <p v-show="flag">v-show</p> <p v-if="flag">v-if</p> <!-- computed --> <p>{{fulldata}}</p> </div> <script> var vm = new Vue({ el:'#app', data:{ clockData:'123333', msg:'<h1>222</h1>', titleMsg:'title', inpMsg:'input value', flag:false, classObj:{color:true,style:true,size:true,weight:true}, styleObj1:{color:'red','font-size':'20px'}, styleObj2:{'font-weight':'bold'}, list:[2,4,6,8,10], obj:{a:1,b:2,c:3}, id:3, name:'', valList:[ {id:1,name:'qq'}, {id:2,name:'cc'}, {id:3,name:'sxq'}, ] }, methods: { clickTest(){console.log('click')}, clickFa(){console.log('Fa')}, clickChild(){console.log('child')}, add(){this.valList.unshift({id:++this.id,name:this.name})}, change(){this.flag=!this.flag} }, // 1. 一对多 watch:{ flag:{ // 此写法能够在渲染实现后，就触发一次 handler(newData,oldData){ console.log(newData,oldData,'newData,oldData--') }, immediate:true }, // 或 // 'flag'(newData,oldData){ // console.log(newData,oldData,'newData,oldData--') // } }, // 1. 表白更清晰 // 2. 缓存 // 3. 多对一 computed:{ 'fulldata'(){ return this.id + '---' + this.name; } } }) </script></body></html>