當前位置：
首頁 >
vue、入门
發(fā)布時間：2025/3/21
40
豆豆
入門vue
v-on:click:chang? ?綁定事件點擊
生面周期，整個vue的執(zhí)行過程，他的應用執(zhí)行了生面周期，也就是執(zhí)行過程，這個執(zhí)行過程如下圖表，我們可以參考下圖，也可以訪問官方網址：https://vuejs.org/v2/guide/instance.html。
當變量進來的時候我們就要調用模板進行渲染等等。
初始化--->boeforecreate--->created--->beforeMout（渲染之前、掛載之前）--->mounted---->beforeupdate -----> updated? ?--這就是一個生命周期的流程。
實際上中間的很多東西我們是操作不了的，因為別人已經寫好了固定的模型，所以我們只要懂得業(yè)務邏輯就可以很好的做開發(fā)了。總體還有沒有了解透的可以點擊進去官方網址看看，我這里只是統(tǒng)計一個大概內容而已，并沒有完善整個資料。我們可以在它的整個生命周期來調用不同的函數(shù)和方法來執(zhí)行我們所需求的業(yè)務邏輯等，比如在掛載之前我們發(fā)起ajax去請求，等等度可以，這些代碼庫都是相互并用的，并不是一山不容二虎，恰好在他們并用的時候才能發(fā)揮更大的作用。
比如我們在某個過程中我們可以使用ajax發(fā)起http請求json文件，調用網址等等。生命周期的一點小理解：就是在他的某個階段前，操作某個事件，
條件渲染：
（1）、視圖的變化就是由數(shù)據(jù)來決定的。
v-if:渲染一個
v-show:渲染多個
?
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script><script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script></head><body><!--1、僅僅只需要關注數(shù)據(jù)、業(yè)務邏輯和事件，dom直接的操作隱藏起來，不用再重復去做這個事情。2、大大增加團隊效率，團隊協(xié)作能力3、模塊化，降低耦合度4、數(shù)據(jù)的雙向綁定,視圖和模型的數(shù)據(jù)是綁定在一起的，變更1個，那么所有都變更--><!--視圖--><div id="app"><h1>{{jsonMsg}}</h1><p>{{jsonContent}}</p><h1> 這是H1內容： {{ isA ? a : b}}</h1><!--將變量綁定到屬性上--><a v-bind:href="httpUrl">鏈接地址</a><a :href="httpUrl">鏈接地址</a><div>{{htmlElement}}</div><div v-html='htmlElement'></div><h1>{{msg}}</h1><h1 v-once>{{msg}}</h1><input type="text" v-model='msg' name="" id="" value="" /><button v-on:click='changeUrl'>更改為淘寶地址</button><!--v-on:可以縮寫成@--><button @click='changeMsg'>更改msg</button></div><!--vue模板：1、變量放在{{}}里面，里面可以正常運行JS表達式2、變量如果要放在HTML的屬性里面，那么就需要使用v-bind,縮寫即前面加冒號3、默認是將HTML以字符串的形式輸出到視圖，如果想要以HTML的形式輸出到視圖，那么需要使用v-html這個指令4、v-once只渲染1次5、綁定事件的書寫方式：v-on,vue應用生命周期（即執(zhí)行過程）new Vue(配置變量)---》初始化---》beforecreate---》created--》beforeMount(渲染之前、掛載之前)---》mounted--》beforeupdate---》updated---》beforeDestory---》destoryed條件渲染：--><script type="text/javascript">var obj = {el:'#app',data:{msg:'helloworld',num:'123456778',isA:false,a:8,b:4,httpUrl:'http://www.baidu.com',htmlElement:'<button>這是一個按鈕</button>',jsonMsg:'',jsonContent:''},methods:{changeMsg:function(){this.msg = '今天天氣不錯'},changeUrl:function(){this.httpUrl = 'http://www.taobao.com'}},beforeCreate:function(){console.log('創(chuàng)造之前執(zhí)行的函數(shù)')},created:function(){console.log('創(chuàng)造之后')},beforeMount:function(){console.log('掛載之前')var that = this$.ajax({url:'abc.json',success:function(res){console.log(res)that.jsonMsg = res.msgthat.jsonContent = res.content}})},mounted:function(){console.log('掛載之后')},beforeUpdate:function(){console.log('更新之前')},updated:function(){console.log('更新之后')}}var app = new Vue(obj)console.log(app)</script></body> </html> vue的基本使用 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><h1>{{ isLogin ? '登錄' : '注冊' }}</h1><form action="" v-if='isLogin' ><input type="text" placeholder="請輸入用戶名" /><input type="password" placeholder="請輸入密碼" /><input type="submit" name="" id="" value="登錄" /></form><form action="" v-if='!isLogin'><input type="text" placeholder="請輸入用戶名" /><input type="password" placeholder="請輸入密碼" /><input type="password" placeholder="請再次輸入密碼" /><input type="submit" name="" id="" value="注冊" /></form><hr /><hr /><form action="" v-show='isLogin' ><input type="text" placeholder="請輸入用戶名" /><input type="password" placeholder="請輸入密碼" /><input type="submit" name="" id="" value="登錄" /></form><form action="" v-show='!isLogin'><input type="text" placeholder="請輸入用戶名" /><input type="password" placeholder="請輸入密碼" /><input type="password" placeholder="請再次輸入密碼" /><input type="submit" name="" id="" value="注冊" /></form><!--條件渲染：v-if:在只渲染一次的情況下，那么性能最佳v-show:在頻繁切換的情況下，那么性能最佳，因為v-show，所有都生成出來，通過display來決定是否顯示--><button @click='login'>登錄</button><button @click='register'>注冊</button></div><script type="text/javascript">var app = new Vue({el:'#app',data:{isLogin:true},methods:{register:function(){this.isLogin = false},login:function(){this.isLogin = true}}})</script></body> </html> 條件渲染?
轉載于:https://www.cnblogs.com/wuzaipei/p/9492210.html
總結
- 上一篇： JavaScript校验身份证，包含省份
- 下一篇： 初识vue+elementUi