vue、入门
入門vue
v-on:click:chang? ?綁定事件點擊
生面周期，整個vue的執行過程，他的應用執行了生面周期，也就是執行過程，這個執行過程如下圖表，我們可以參考下圖，也可以訪問官方網址：https://vuejs.org/v2/guide/instance.html。
當變量進來的時候我們就要調用模板進行渲染等等。
初始化--->boeforecreate--->created--->beforeMout（渲染之前、掛載之前）--->mounted---->beforeupdate -----> updated? ?--這就是一個生命周期的流程。
實際上中間的很多東西我們是操作不了的，因為別人已經寫好了固定的模型，所以我們只要懂得業務邏輯就可以很好的做開發了?？傮w還有沒有了解透的可以點擊進去官方網址看看，我這里只是統計一個大概內容而已，并沒有完善整個資料。我們可以在它的整個生命周期來調用不同的函數和方法來執行我們所需求的業務邏輯等，比如在掛載之前我們發起ajax去請求，等等度可以，這些代碼庫都是相互并用的，并不是一山不容二虎，恰好在他們并用的時候才能發揮更大的作用。
比如我們在某個過程中我們可以使用ajax發起http請求json文件，調用網址等等。生命周期的一點小理解：就是在他的某個階段前，操作某個事件，
條件渲染：
（1）、視圖的變化就是由數據來決定的。
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、僅僅只需要關注數據、業務邏輯和事件，dom直接的操作隱藏起來，不用再重復去做這個事情。2、大大增加團隊效率，團隊協作能力3、模塊化，降低耦合度4、數據的雙向綁定,視圖和模型的數據是綁定在一起的，變更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應用生命周期（即執行過程）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('創造之前執行的函數')},created:function(){console.log('創造之后')},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