Vue框架入門

VueJS介紹

Vue.js是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的漸進(jìn)式框架堵未。Vue.js 的目標(biāo)是通過盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件扶平。它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合独榴。詳細(xì)介紹請(qǐng)查看官網(wǎng)僧叉。
官網(wǎng)地址:https://cn.vuejs.org/

首先引入vue.js文件

Snipaste_2019-07-11_21-06-35.png

Vue插值表達(dá)式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>       
    </head>
    <body>
        <!--如果id相同只有第一個(gè)起作用-->
        <div id="app"   >
            {{user.name}}
            {{msg}}
        </div>  
        <!--拿不到值-->
        <div id="app"   >
            {{user.name}}
            {{msg}}
        </div>  
    </body>
    <script>
            new Vue({
                el:"#app",
                data:{
                    msg:"hello",
                    user:{"name":"丟丟","age":44}
                }
            })          
        </script>
</html>

Vue的click事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>       
    </head>
    <body>
        <div id="app" >
            <!--
                作者：offline
                時(shí)間：2019-07-11
                描述：v-on:click是標(biāo)準(zhǔn)方式，@click簡(jiǎn)寫 方式棺榔，一般用簡(jiǎn)寫方式
            -->
            <input type="button" value="點(diǎn)我試試1" v-on:click="fn1"  />
            <input type="button" value="點(diǎn)我試試2" v-on:click="fn2(1)" />
            <input type="button" value="點(diǎn)我試試1" @click="fn1" />
            <input type="button" value="點(diǎn)我試試2" @click="fn2(1)" />
        </div>      
    </body>
    <script>
            var x=new Vue({
                el:"#app",
                methods:{
                fn1:function(){
                    alert("fn1")
                },
                fn2:function(a){
                    alert(a)
                }
                }
            })          
        </script>
</html>

Vue按鍵事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        
    </head>
    <body>
        <div id="app">
            <!--
                作者：gzy
                時(shí)間：2019-07-11
                描述：觸發(fā)的按鈕可以是按鍵編號(hào)（記不住瓶堕，一般不用），所以都直接用按鍵名症歇，如：enter郎笆。。
            -->
            <input type="text" value="" @keyup.enter="fn1"  />
        </div>
    </body>
    <script>
            var x=new Vue({
                el:"#app",
                data:{
                    
                },
                methods:{
                    fn1:function(){
                        //事件源
                        alert(event.keyCode);                                                                                                                                                                   
                    }
                }               
            })          
        </script>
</html>

鼠標(biāo)懸停事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        <style>
            div{
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <!--
            作者：gzy
            時(shí)間：2019-07-11
            描述：鼠標(biāo)懸停事件
        -->
        <div id="app" @mouseover="fn1" style="border:1px solid red;height: 20px;" >
            
        </div>
    </body>
    <script>
            var x=new Vue({
                el:"#app",
                data:{
                    
                },
                methods:{
                    fn1:function(){
                        alert(event)
                    }
                }               
            })          
        </script>
</html>

事件修飾符

Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細(xì)節(jié)忘晤，如：event.preventDefault() 或 event.stopPropagation()宛蚓。 Vue.js通過由點(diǎn)(.)表示的指令后綴來調(diào)用修飾符。
.stop ：事件不冒泡德频，及不觸發(fā)父容器事件苍息。
.prevent：取消默認(rèn)點(diǎn)擊事件，如<a>跳轉(zhuǎn)事件
.once:只能點(diǎn)擊一次

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        
    </head>
    <body>
        <div id="app" @click="fn2" style="border:1px solid #FF0000;height: 50px;"  >
            <!--
                作者：gzy
                時(shí)間：2019-07-11
                描述：只能點(diǎn)擊一次切不觸發(fā)<a>跳轉(zhuǎn)事件
            -->
            <a  @click.prevent   @click.once="fn1" >跳轉(zhuǎn)到淘寶</a>
            <!--
                不觸發(fā)<a>跳轉(zhuǎn)事件壹置，不觸發(fā)父容器事件
            -->
            <a  @click.prevent.stop="fn1" >跳轉(zhuǎn)到百度</a>
        </div>
    </body>
    <script>
            var x=new Vue({
                el:"#app",
                data:{
                    
                },
                methods:{
                    fn1:function(){
                        alert("被點(diǎn)擊了1..");
                    },
                    fn2:function(){
                        alert("被點(diǎn)擊了2..");                       
                    }
                }               
            }           
        </script>
</html>

vue的v-text和v-html綁定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        
    </head>
    <body>
        <div id="app" xx="yy">
            <!--
                作者：gzy
                時(shí)間：2019-07-11
                描述：寫啥都是文本
            -->
            <p v-text="msg"></p>
            <!--
            可以 識(shí)別html代碼
            -->
            <p v-html="msg"></p>
        </div>
    </body>
    <script>
            var x=new Vue({
                el:"#app",
                data:{
                    msg:"我是一條消息<a 
                }               
            })          
        </script>
</html>

vue的v-bind屬性綁定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        
    </head>
    <body>
        <div id="app" >
            <!--
                標(biāo)準(zhǔn)方式屬性綁定
            -->
                <p v-bind:title="product.title">{{product.pname}}</p>
                <p><font v-bind:color="product.color">就是這個(gè)顏色</font></p>
            
                <hr>
                <!--
                簡(jiǎn)寫方式屬性綁定
            -->
                <p :title="product.title">{{product.pname}}</p>
                <p><font :color="product.color">就是這個(gè)顏色</font></p>
        </div>
    </body>
    <script>
            var x=new Vue({
                el:"#app",
                data:{
                    product:{pname:"小米手機(jī)紅色版",color:'green',title:"放上來看看...."}
                }
            })          
        </script>
</html>

vue的v-model數(shù)據(jù)雙向綁定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        
    </head>
    <body>
        <div id="app" >
            用戶名:<input type="text" v-model:value="user1.username" /><br />
            密碼:<input type="text"  v-model:value="user1.password" /><br />
            <input type="button" value="點(diǎn)我是不是雙向綁定" @click="fn" />
        </div>
    </body>
    <script>
            new Vue({
                el:"#app",
                data:{
                    user1:{username:"小明",age:18,password:123}
                },
                methods:{
                    fn:function(){
                        //alert(this.user1.username+";;;;"+this.user1.password)
                        this.user1.username="雙向綁定嘍奧"
                    }
                }               
            })
            
        </script>
</html>

vue的v-for循環(huán)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        
    </head>
    <body>
        <div id="app">
            <table border="1px" cellspacing="0px" align="center" width="70%">
                <thead>
                    <th>名字</th>
                    <th>年齡</th>
                    <th>密碼 </th>
                </thead>
                <tbody>
                    <tr v-for="user in users">
                        <td>{{user.username}}</td>
                        <td>{{user.age}}</td>
                        <td>{{user.password}}</td>
                    </tr>
                </tbody>
            </table>
            <ul>
                <li v-for="(u,index) in users">
                    {{u.username}}
                </li>
            </ul>
            <p v-for="(pvalue,pname) in user">
                {{pvalue}}----{{pname}}
            </p>
        </div>
    </body>
    <script>
            new Vue({
                el:"#app",
                data:{
                    users:[
                        {username:"小明",age:18,password:123123},
                        {username:"小紅",age:18,password:1231231},
                        {username:"小綠",age:20,password:1231}
                    ],
                    names:["大郎","次郎","蓮蓮"],
                    user:{username:"小明",age:18,password:123123}
                }               
            })  
        </script>
</html>

v-if與v-show

v-if是根據(jù)表達(dá)式的值來決定是否渲染元素（當(dāng)值為false時(shí)元素根本不會(huì)創(chuàng)建）竞思。
v-show是根據(jù)表達(dá)式的值來切換元素的display css屬性（當(dāng)值為false時(shí)，元素只是單純的隱藏钞护，元素還是存在的）盖喷。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        
    </head>
    <body>
        <div id="app" >
            <div v-if="flag">{{user1.username}}</div>
            <div v-show="flag">{{user1.username}}</div>
            <input type="button" value="點(diǎn)我切換" @click="fn1" />
        </div>
    </body>
    <script>
            var x=new Vue({
                el:"#app",
                data:{
                    user1:{username:"小明",age:18,password:123},
                    flag:true
                },
                methods:{
                    fn1:function(){
                        this.flag=!this.flag;
                    }
                }               
            })          
        </script>
</html>

VueJS生命周期

每個(gè) Vue 實(shí)例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue生命周期   </title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id="app">  
            {{message}}
        </div>
        
        <script>
            //創(chuàng)建vue對(duì)象
            var vm = new Vue({
                el:"#app",  // 選擇器    $("#app")
                data:{
                    message:"hello"
                },
                beforeCreate: function() {
//                  console.log(this);
                    showData('創(chuàng)建vue實(shí)例前', this);
                },
                created: function() {
                    //寫ajax請(qǐng)求 后端服務(wù)器 要數(shù)據(jù)...
                    showData('創(chuàng)建vue實(shí)例后', this);
                },
                beforeMount: function() {
                    showData('掛載到dom前', this);
                },
                mounted: function() {
                    showData('掛載到dom后', this);
                },
                beforeUpdate: function() {
                    showData('數(shù)據(jù)變化更新前', this);
                },
                updated: function() {
                    showData('數(shù)據(jù)變化更新后', this);
                },
                beforeDestroy: function() {
                    vm.test = "3333";
                    showData('vue實(shí)例銷毀前', this);
                },
                destroyed: function() {
                    showData('vue實(shí)例銷毀后', this);
                }
            });
            
             function showData(process, obj) {
                console.log(process);
                console.log('data 數(shù)據(jù)：' + obj.message)
                console.log('掛載的對(duì)象：')
                console.log(obj.$el)
                realDom();
                console.log('------------------')
                console.log('------------------')
            }            
            function realDom() {
                console.log('真實(shí)dom結(jié)構(gòu)：' + document.getElementById('app').innerHTML);
            }           
            vm.message = "hello world";
            vm.$destroy(); //銷毀
        </script>
    </body>
</html>

VueJS ajax

vue-resource

vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP進(jìn)行Web請(qǐng)求和處理響應(yīng)的服務(wù)难咕。當(dāng)vue更新到2.0之后课梳，作者就宣告不再對(duì)vue-resource更新，而是推薦的axios余佃，在這里大家了解一下vue-resource就可以暮刃。
vue-resource的github: https://github.com/pagekit/vue-resource

axios

Axios 是一個(gè)基于 promise 的 HTTP 庫(kù)，可以用在瀏覽器和 node.js 中
axios的github:https://github.com/axios/axios

引入axios

首先就是引入axios,如果你使用es6爆土，只需要安裝axios模塊之后
import axios from 'axios';
//安裝方法 npm install axios
//或bower install axios
當(dāng)然也可以用script引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

為什么推薦用axios

其實(shí)他本質(zhì)和jquery的ajax請(qǐng)求是相同的椭懊，都是回調(diào)函數(shù)，服務(wù)端不響應(yīng)步势，就不會(huì)往下執(zhí)行氧猬，但是它提供了語(yǔ)法糖背犯，讓開發(fā)者用的舒服些。

使用案列

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/axios-0.18.0.js" ></script>
    </head>
    <body>
        <div id="app">
            {{msg}}
        </div>
        <script>
            new Vue({
                el:"#app",
                data:{
                    msg:""
                },
                created:function(){
                    //域問題：ajax請(qǐng)求里用this指的是整個(gè)頁(yè)面所以需
                    //將vue對(duì)象 傳給一個(gè)變量盅抚，再在ajax里使用漠魏。
                    var x=this;
                    //發(fā)請(qǐng)求
                    axios.get('http://localhost:8080/user/test/1')
                      .then(function (re) {                 
                        x.msg=re.data;
                      })            
                }
            })                              
        </script>
    </body>
</html>

上面代碼用拉姆達(dá)表達(dá)式寫法（推薦）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/axios-0.18.0.js" ></script>
    </head>
    <body>
        <div id="app">
            {{msg}}
        </div>
        <script>
            new Vue({
                el:"#app",
                data:{
                    msg:""
                },
                created:function(){                                 axios.get('http://localhost:8080/user/test/1')
                      .then( (resp)=> { 
                       //這里的this直接就代表   vue對(duì)象           
                        this.msg=re.data;
                      })            
                }
            })                              
        </script>
    </body>
</html>

最后編輯于：2019.07.12 20:33:24

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市妄均，隨后出現(xiàn)的幾起案子柱锹，更是在濱河造成了極大的恐慌，老刑警劉巖丛晦，帶你破解...
沈念sama閱讀 219,270評(píng)論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件奕纫，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡烫沙，警方通過查閱死者的電腦和手機(jī)匹层，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,489評(píng)論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來锌蓄，“玉大人升筏，你說我怎么就攤上這事∪乘” “怎么了您访？”我有些...
開封第一講書人閱讀 165,630評(píng)論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)剪决。經(jīng)常有香客問我灵汪，道長(zhǎng)，這世上最難降的妖魔是什么柑潦？我笑而不...
開封第一講書人閱讀 58,906評(píng)論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任享言，我火速辦了婚禮，結(jié)果婚禮上渗鬼，老公的妹妹穿的比我還像新娘览露。我一直安慰自己，他們只是感情好譬胎，可當(dāng)我...
茶點(diǎn)故事閱讀 67,928評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布差牛。她就那樣靜靜地躺著，像睡著了一般堰乔。火紅的嫁衣襯著肌膚如雪偏化。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,718評(píng)論 1贊 305
城市分裂傳說
那天镐侯，我揣著相機(jī)與錄音夹孔，去河邊找鬼。笑死析孽，一個(gè)胖子當(dāng)著我的面吹牛搭伤，可吹牛的內(nèi)容都是我干的彤敛。我是一名探鬼主播熙暴，決...
沈念sama閱讀 40,442評(píng)論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼荐虐，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼亚享！你這毒婦竟也來了海洼？” 一聲冷哼從身側(cè)響起淹接，我...
開封第一講書人閱讀 39,345評(píng)論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤鲸鹦，失蹤者是張志新（化名）和其女友劉穎憋沿，沒想到半個(gè)月后汞扎，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體季稳，經(jīng)...
沈念sama閱讀 45,802評(píng)論 1贊 317
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,984評(píng)論 3贊 337
?白月光啟示錄
正文我和宋清朗相戀三年澈魄，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了景鼠。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 40,117評(píng)論 1贊 351
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡痹扇，死狀恐怖铛漓，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情鲫构，我是刑警寧澤浓恶，帶...
沈念sama閱讀 35,810評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站结笨，受9級(jí)特大地震影響包晰，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜炕吸，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,462評(píng)論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一伐憾、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧算途，春花似錦塞耕、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,011評(píng)論 0贊 22
一樁弒父案扫外，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)。三九已至廓脆，卻和暖如春筛谚，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背停忿。一陣腳步聲響...
開封第一講書人閱讀 33,139評(píng)論 1贊 272
情欲美人皮
我被黑心中介騙來泰國(guó)打工驾讲，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個(gè)月前我還...
沈念sama閱讀 48,377評(píng)論 3贊 373
代替公主和親
正文我出身青樓吮铭，卻偏偏與公主長(zhǎng)得像时迫，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子谓晌，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,060評(píng)論 2贊 355