千鋒教育Vue組件--vue基礎的方法
阿新 • • 發佈：2019-01-12
boot sage net shee 變化 fun 技術分享 mode span
課程地址:
https://ke.qq.com/course/251029#term_id=100295989
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>vue基礎的方法</title> <link rel="stylesheet" href=""> <!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>--> <script src="../js/jquery-2.1.4.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- <script type="text/javascript" src="../js/vue.js"></script> --> <style type="text/css"> .test{ background-color:yellow; } .test2{ font-size: 40px; } .green{ color: green; } </style> </head> <body> <div id="vue"> <h1 >{{message}}</h1> <hr> <!--調用messageReverse方法--> <span>{{messageReverse}}</span> <hr> <!--v-on:click可以寫成@click v-bind:title可以寫成:title--> <!--v-model="message"綁定上之後,message相當於傳值引用的關系，message的改變會影響到所有引用它的地方--> <!--lazy當值改變時,失去焦點時才觸發--> <input type="text" v-model.lazy="message" :class="hd" @click="changBgColor" :title="message"> </div> </body> <script type="text/javascript"> var app=new Vue({ el:‘#vue‘, data:{ message:‘hello vue!!!‘, hd:{test:false,test2:false,green:true}, }, //計算方法 computed:{ messageReverse:function(){ return this.message.split(‘‘).reverse().join(‘‘); }, }, //方法 methods:{ //方法一: changBgColor(ev){ ev.target.style.background = ‘red‘; //調用下面的changBgColor2方法 this.changBgColor2() }, //方法二 changBgColor2(){ this.hd.test=true; this.hd.test2=true; this.hd.green=false; }, }, //初始化時,會自動執行 只是初始化時會執行一次 mounted(){ console.log(‘自動執行‘); }, //數據改變時執行 updated(){ console.log(‘數據改變時執行‘); }, //監聽data裏的word的變化,實時監聽message的變化, //把input裏加上lazy失去焦點時才改變message裏的值,這樣可以節省資源 watch:{ message(v_new,v_old){ console.log(v_new); console.log(v_old); } }, }); </script> </html>
效果:
千鋒教育Vue組件--vue基礎的方法