1. 基础指令知识代码案例
v-bind指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-bind指令</title> <style> .active { border: solid 1px red; } </style> </head> <body> <div id="app"> <img v-bind:src="imgSrc" alt=""> <br> <img :src="imgSrc" alt="" :title="imgtitle+'!!!'" :class="isActive?'active':''" @click="changeActive"> <br> <img :src="imgSrc" alt="" :title="imgtitle+'!!!'" :class="{active:isActive}" @click="changeActive"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var app = new Vue({ el:'#app', data: { imgSrc : 'http://www.itheima.com/images/logo.png', imgtitle : '黑马泽权', isActive : false }, methods:{ changeActive:function (){ this.isActive = !this.isActive } } }) </script> </body> </html>
v-model指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- v-model 双向绑定数据--> <input type="button" @click="getM" value="修改message"> <input type="text" v-model="message" @keyup.enter="getM"> <h2>{{message}}</h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var app = new Vue({ el:'#app', data : { message: '黑马程序员' }, methods: { getM:function (){ // alert(this.message) this.message = '真牛逼' } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- 修饰符lazy--> <input type="text" v-model.lazy='message'> <h2>{{message}}</h2> <!-- 修饰符number--> <input type="text" v-model.number="age"> <h2>{{age}}-{{typeof age}}</h2> <!-- 修饰符trim--> <input type="text" v-model.trim="name"> <h2>您的名字是:{{name}}</h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var app = new Vue({ el:'#app', data:{ message : 'hello', age:18, name : '' } }) </script> </body> </html>
2. 组件化父子通讯
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cnp1 @addr="changetotal" @remove="changetotal"></cnp1> <h2>点击次数:{{totals}}</h2> </div> <template id="cnp"> <div> <button @click="addr">+1</button> <button @click="remove">-1</button> </div> </template> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const cnp = { template : id='#cnp', data(){ return { counter :0 } }, methods : { addr(){ this.counter++ this.$emit('addr',this.counter) }, remove(){ this.counter-- this.$emit('remove',this.counter) } } } var app = new Vue({ el:'#app', data : { totals : 0 }, methods: { changetotal(counter){ this.totals = counter } }, components : { cnp1 : cnp } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cnp1></cnp1> <cnp1></cnp1> <cnp1 ref="aaa"></cnp1> <button @click="btnClick">按钮</button> </div> <template id="cnp"> <div>我是子组件</div> </template> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var app = new Vue({ el:'#app', data: { }, methods: { btnClick(){ // 1.$children // console.log(this.$children) // this.$children[0].showMessage() // console.log(this.$children[0].name) // 2.$refs console.log(this.$refs.aaa.name) } }, components : { cnp1 : { template : id='#cnp', data(){ return { name : '我是name' } }, methods : { showMessage(){ console.log('showmessage') } } } } }) </script> </body> </html>
