當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

vue、入门

發(fā)布時(shí)間：2025/3/21 vue 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue、入门小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

入門vue

　　v-on:click:chang? ?綁定事件點(diǎn)擊

　　生面周期，整個(gè)vue的執(zhí)行過程，他的應(yīng)用執(zhí)行了生面周期，也就是執(zhí)行過程，這個(gè)執(zhí)行過程如下圖表，我們可以參考下圖，也可以訪問官方網(wǎng)址：https://vuejs.org/v2/guide/instance.html。

當(dāng)變量進(jìn)來的時(shí)候我們就要調(diào)用模板進(jìn)行渲染等等。

　　初始化--->boeforecreate--->created--->beforeMout（渲染之前、掛載之前）--->mounted---->beforeupdate -----> updated? ?--這就是一個(gè)生命周期的流程。

　　實(shí)際上中間的很多東西我們是操作不了的，因?yàn)閯e人已經(jīng)寫好了固定的模型，所以我們只要懂得業(yè)務(wù)邏輯就可以很好的做開發(fā)了。總體還有沒有了解透的可以點(diǎn)擊進(jìn)去官方網(wǎng)址看看，我這里只是統(tǒng)計(jì)一個(gè)大概內(nèi)容而已，并沒有完善整個(gè)資料。我們可以在它的整個(gè)生命周期來調(diào)用不同的函數(shù)和方法來執(zhí)行我們所需求的業(yè)務(wù)邏輯等，比如在掛載之前我們發(fā)起ajax去請求，等等度可以，這些代碼庫都是相互并用的，并不是一山不容二虎，恰好在他們并用的時(shí)候才能發(fā)揮更大的作用。

　　比如我們在某個(gè)過程中我們可以使用ajax發(fā)起http請求json文件，調(diào)用網(wǎng)址等等。生命周期的一點(diǎn)小理解：就是在他的某個(gè)階段前，操作某個(gè)事件，

　　條件渲染：

　　　　（1）、視圖的變化就是由數(shù)據(jù)來決定的。

　　　　　　　　v-if:渲染一個(gè)

　　　　　　　　v-show:渲染多個(gè)

<!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><div id="app"><h1>{{jsonMsg}}</h1><p>{{jsonContent}}</p><h1> 這是H1內(nèi)容： {{ 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><button @click='changeMsg'>更改msg</button></div><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>這是一個(gè)按鈕</button>',jsonMsg:'',jsonContent:''},methods:{changeMsg:function(){this.msg = '今天天氣不錯(cuò)'},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="請?jiān)俅屋斎朊艽a" /><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="請?jiān)俅屋斎朊艽a" /><input type="submit" name="" id="" value="注冊" /></form><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> 條件渲染

轉(zhuǎn)載于:https://www.cnblogs.com/wuzaipei/p/9492210.html

總結(jié)

以上是生活随笔為你收集整理的vue、入门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

入门
Vue

上一篇： JavaScript校验身份证，包含省份
下一篇： LeetCode：跳跃游戏【55】