国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

如何快速上手Vue框架?

2年前作者：siaok分類：Toy博客閱讀(24)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了如何快速上手Vue框架?。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

編譯軟件：IntelliJ IDEA 2019.2.4 x64
運(yùn)行環(huán)境：Google瀏覽器
Vue框架版本：Vue.js v2.7.14

一. 框架是什么？

任何編程語(yǔ)言在最初的時(shí)候都是沒有框架的，后來(lái)隨著在實(shí)際開發(fā)過(guò)程中不斷的總結(jié)經(jīng)驗(yàn)，積累最佳的解決方案，慢慢地人們發(fā)現(xiàn)在很多特定場(chǎng)景的特定問題，總是可以套用固定的解決方案。

于是有人把成熟的固定解決方案收集起來(lái)，整合在一起，就形成了框架。

在使用框架時(shí)，我們往往并不會(huì)關(guān)心框架是如何編程實(shí)現(xiàn)，我們只會(huì)關(guān)心它能不能實(shí)現(xiàn)我們想要的代碼邏輯，當(dāng)然，前提是我們需要提前對(duì)框架進(jìn)行聲明，即告訴它要做什么，就像用洗衣機(jī)洗衣服時(shí)需要先放衣服，洗衣液，設(shè)置洗滌模式等相應(yīng)功能參數(shù)。

而我們使用Vue框架，就是在其導(dǎo)入了封裝的固定的解決方案的js文件的基礎(chǔ)上進(jìn)行編程開發(fā)。

二. 怎么寫一個(gè)Vue程序（以IDEA舉例）？

步驟：

在官網(wǎng)上下載Vue框架的js文件
在IDEA上新建工程文件，在其工程目錄新建一個(gè)js文件夾并創(chuàng)建一個(gè)空白的Vue.js文件，將官網(wǎng)上的Vue框架的js代碼全選復(fù)制粘貼至我們新建的Vue.js上

新建一個(gè)HelloWorld.html文件，在其上搭建Vue框架

a. 將Vue.js引入到網(wǎng)頁(yè)內(nèi)

ps：在IDEA里直接將Vue.js拖拽至HelloWorld.html里，自動(dòng)實(shí)現(xiàn)引入

<script src="vue.js"></script>

b. 在body標(biāo)簽內(nèi)設(shè)置一個(gè)區(qū)域(Vue要操作的區(qū)域)

//在body里設(shè)置一個(gè)空的 div 元素，具有 ID“app”
<body>
<div id="app"></div>
</body>

c. 在div標(biāo)簽的下方，創(chuàng)建Script標(biāo)簽并new Vue()對(duì)象

<body>
<div id="app"></div>
</body>
<script>
	//new Vue()對(duì)象
    new Vue({});
</script>

d. 給Vue對(duì)象傳遞一個(gè)js對(duì)象（通過(guò){}方式創(chuàng)建的js對(duì)象）

<script>
new Vue({
el:"#app",//指定為#app的目標(biāo)元素，用于Vue控制(選擇控制區(qū)域）
data:{},//一個(gè)空對(duì)象，將用于存儲(chǔ)此實(shí)例的數(shù)據(jù)模型。
methods:{} //一個(gè)空對(duì)象，將用于定義此實(shí)例可能使用的任何自定義方法。 
);
</script>

實(shí)現(xiàn)功能

a. 設(shè)置數(shù)據(jù)模型

//設(shè)置數(shù)據(jù)模型
data:{
msg:"div的內(nèi)容"
},

b. 將Vue對(duì)象中的數(shù)據(jù)模型和網(wǎng)頁(yè)的標(biāo)簽體做一個(gè)綁定關(guān)系

<body>
<div id="app">
	<!-- [{msg}}-->插值表達(dá)式 --> 綁定數(shù)據(jù)模型 -->
	<div>[{msg}}</div>
</div>
</body>

c. 這樣我們?cè)诓僮鱠iv中的內(nèi)容的時(shí)候，就是轉(zhuǎn)化為操作msg

在元素上綁定事件：

<input type="button"value="獲得div中的內(nèi)容"@click="getText"/>

在Vue對(duì)象的methods內(nèi)創(chuàng)建函數(shù)

"methods":{
//創(chuàng)建自定義函數(shù)getText用于獲取msg的值，其實(shí)是獲取div中的文本，以警示框彈出
"getText":function () {
	alert(this.msg);
},
//創(chuàng)建自定義函數(shù)setText用于設(shè)置msg的值，實(shí)際上修改的是div中的內(nèi)容
"setText":function () {
	this.msg="Vue設(shè)置的新值"
}

案例：對(duì)div標(biāo)簽體中的內(nèi)容進(jìn)行獲取或修改

代碼演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue_HelloWorld</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <div id="div01">{{msg}}</div>
    <input type="button" value="獲取div的內(nèi)容" id="btn01" @click="getText">      <!--    無(wú)參函數(shù)可以省略()，但有參函數(shù)不能省略-->
    <input type="button" value="修改div的內(nèi)容" id="btn02" @click="setText">
</div>
<script>
    new Vue({
        el:"#app",//el是選擇Vue可操作的區(qū)域
        data:{
          msg: "這是div的內(nèi)容"
        }, //設(shè)置數(shù)據(jù)模型
        methods:{
            getText:function () {
                alert(this.msg)
            },
            setText:function () {
                this.msg="這是Vue設(shè)置的新值"
            }
        }
    }
    )

</script>

</body>
</html>

如何快速上手Vue框架?

三. 什么是聲明式渲染?

3.1 聲明式

聲明式是相對(duì)于編程式而言的。

聲明式：告訴框架做什么，具體操作由框架完成
編程式：自己編寫代碼完成具體操作

3.2 渲染

如何快速上手Vue框架?
上圖含義解釋：

藍(lán)色方框：HTML標(biāo)簽
紅色圓形：動(dòng)態(tài)、尚未確定的數(shù)據(jù)
藍(lán)色圓形：經(jīng)過(guò)程序運(yùn)算以后，計(jì)算得到的具體的，可以直接在頁(yè)面上顯示的數(shù)據(jù)、
渲染：程序計(jì)算動(dòng)態(tài)數(shù)據(jù)得到具體數(shù)據(jù)的過(guò)程

舉例如下：

如何快速上手Vue框架?

四. Vue如何操作標(biāo)簽體(雙標(biāo)簽中的內(nèi)容)?

語(yǔ)法：

插值表達(dá)式：{{數(shù)據(jù)模型中的key值)}

代碼舉例如下：

 <div id="div01">{{msg}}</div>

 data:{
          msg: "這是div的內(nèi)容"
        }

五. Vue如何操作屬性值？

5.1 單向綁定

釋義：

修改數(shù)據(jù)模型，html頁(yè)面同步效果，但是用戶修改html屬性值，數(shù)據(jù)模型不會(huì)隨之改變

語(yǔ)法：

v-bind:原屬性名=“數(shù)據(jù)模型的key值”

可以簡(jiǎn)寫：

:原屬性名=“數(shù)據(jù)模型的key值”

案例：演示單向綁定的效果

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Vue_HelloWorld</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">


    <!-- 單向綁定 v-blind   -->
    <input type="text" v-blind:value="username" >
    <br>

    <br>
    <input type="button" value="顯示文本框中的內(nèi)容"  @click="getValue">

</div>
<script>
    new Vue({
            el:"#app",//el是選擇Vue可操作的區(qū)域
            data:{
                username:"admin"
            },
            methods:{
                getValue:function () {
                    alert(this.username)
                }
            }
        }
    )

</script>

</body>
</html>

案例演示結(jié)果：

①輸入前的變化

如何快速上手Vue框架?

②輸入后的變化

如何快速上手Vue框架?

5.2 雙向綁定

釋義：

修改數(shù)據(jù)模型，html頁(yè)面同步效果，用戶修改html屬性值，數(shù)據(jù)模型會(huì)隨之改變

語(yǔ)法：

v-model:原屬性名=“數(shù)據(jù)模型的key值”

可以簡(jiǎn)寫為，如下所示

v-model=“數(shù)據(jù)模型的key值”

注意：

在input標(biāo)簽中，雙向綁定只能修改value，因?yàn)榭蛻糁荒苄薷膙alue屬性，其他的屬性用戶也修改不了

案例：演示實(shí)現(xiàn)雙向綁定

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Vue_HelloWorld</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">


    <!-- 雙向綁定 v-blind   -->
    <input type="text" v-model:value="username" >
    <br>

    <br>
    <input type="button" value="顯示文本框中的內(nèi)容"  @click="getValue">

</div>
<script>
    new Vue({
            el:"#app",//el是選擇Vue可操作的區(qū)域
            data:{
                username:"admin"
            },
            methods:{
                getValue:function () {
                    alert(this.username)
                }
            }
        }
    )

</script>

</body>
</html>

案例演示結(jié)果：

①輸入前：

如何快速上手Vue框架?

②輸入后的變化：

如何快速上手Vue框架?

tips：

v-model.trim="數(shù)據(jù)模型的key值” 去前后空格

六. Vue如何實(shí)現(xiàn)條件渲染？

6.1 什么是條件渲染？

根據(jù)Vue對(duì)象中，數(shù)據(jù)屬性的值來(lái)判斷是否對(duì)HTML頁(yè)面內(nèi)容進(jìn)行渲染。即控制元素是否顯示。

6.2 v-if

用法：

根據(jù)表達(dá)式的值來(lái)決定是否渲染元素或組件，當(dāng)表達(dá)式的值為真時(shí)才會(huì)渲染，否則不會(huì)渲染。

案例：使用v-if在按按鈕的同時(shí)改變div的內(nèi)容

代碼演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        #divs {
            border: 1px solid red;
            width: 100px;
            height: 150px;
        }

    </style>
    <script src="vue.js"></script>
</head>
<body>


<div id="app">
    <div v-if=flag id="divs">這是div的內(nèi)容</div>
    <input type="button" value="按鈕" @click="changeDiv">
</div>
<script>
    new Vue({
      el:"#app",
      data:{
          flag:true
      },
      methods:{
          changeDiv:function () {
              this.flag=!this.flag;
          }
      }


    })


</script>

</body>
</html>

案例演示效果：

①變化前

如何快速上手Vue框架?

②變化后

如何快速上手Vue框架?

6.3 v-else

用法：

true不顯示，false顯示

注意：

不能單獨(dú)使用，必須要和v-if搭配
v-if和v-else中間不能有多余標(biāo)簽

案例：演出實(shí)現(xiàn)二者搭配的效果

代碼演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        #divs {
            border: 1px solid red;
            width: 100px;
            height: 150px;
        }

    </style>
    <script src="vue.js"></script>
</head>
<body>


<div id="app">
    <div v-if=flag id="divs">這是加了v-if渲染的div</div>
    <div v-else=flag >這是加了v-else渲染的div</div>

    <input type="button" value="按鈕" @click="changeDiv">
</div>
<script>
    new Vue({
      el:"#app",
      data:{
          flag:true
      },
      methods:{
          changeDiv:function () {
              //按下按鈕觸發(fā)單擊事件的瞬間，flag被取反并同時(shí)作用于所渲染的標(biāo)簽體
              this.flag=!this.flag;
          }
      }


    })


</script>

</body>
</html>

案例演示效果：

①變化前

如何快速上手Vue框架?

②變化后

如何快速上手Vue框架?

6.4 v-show

用法：

根據(jù)表達(dá)式的值來(lái)決定是否顯示元素或組件，當(dāng)表達(dá)式的值為真時(shí)會(huì)顯示，否則會(huì)隱藏，但是元素仍然會(huì)被渲染到 DOM 中。

案例：演示實(shí)現(xiàn)v-show的效果

代碼演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        #divs {
            border: 1px solid red;
            width: 100px;
            height: 150px;
        }

    </style>
    <script src="vue.js"></script>
</head>
<body>


<div id="app">
<!--    <div v-if=flag id="divs">這是加了v-if渲染的div</div>-->
    <div v-show=flag id="divs">這是加了v-show渲染的div</div>

    <input type="button" value="按鈕" @click="changeDiv">

</div>
<script>
    new Vue({
      el:"#app",
      data:{
          flag:true
      },
      methods:{
          changeDiv:function () {
            //按下按鈕觸發(fā)單擊事件的瞬間，flag被取反并同時(shí)作用于所渲染的標(biāo)簽體
              this.flag=!this.flag;
          }
      }
    })


</script>

</body>
</html>

案例實(shí)現(xiàn)效果：

①渲染前

如何快速上手Vue框架?

②渲染后

如何快速上手Vue框架?

6.5 v-if 與v-show的區(qū)別

使用場(chǎng)景不同

v-if 適用于在條件滿足時(shí)只渲染一次的情況。
v-show 適用于需要頻繁切換顯示與隱藏的情況。

why？

因?yàn)?v-if 在條件不滿足時(shí)會(huì)從 DOM 中刪除元素，而 v-show 則只是通過(guò)修改 CSS 樣式來(lái)隱藏元素，因此 v-show 的性能比 v-if 更好。

七. Vue如何實(shí)現(xiàn)列表渲染？

用法：

Vue 的列表渲染可以使用 v-for 指令，它可以遍歷數(shù)組或?qū)ο?，并將每個(gè)元素渲染出來(lái)。

位置：

循環(huán)遍歷哪個(gè)標(biāo)簽，v-for加在哪個(gè)標(biāo)簽上

語(yǔ)法：

v-for=" "

7.1 簡(jiǎn)單數(shù)組

案例：在hyml中的無(wú)序列表中遍歷數(shù)據(jù)模型中的hobbys并顯示在頁(yè)面中

代碼演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">

    <ul>
        <li v-for="hobby in hobbys">{{hobby}}</li>
    </ul>
    <input type="button" value="新增" @click="addHobby">
    <input type="button" value="刪除" @click="deleteHobby">
</div>
<script>
    new Vue({
        el:"#app",
        data: {
            hobbys:["Java","mysql","寫博客","刷視頻號(hào)"]
        } ,
        methods:{
            //新增一個(gè)習(xí)慣
            addHobby:function () {
                this.hobbys.push("CODM")
            },
            //刪除一個(gè)習(xí)慣，從后往前刪
            deleteHobby:function () {
                this.hobbys.splice(this.hobbys.length-1,1)
            }
        }


    })

</script>


</body>
</html>

如何快速上手Vue框架?

7.2 對(duì)象數(shù)值

案例：在table標(biāo)簽中將數(shù)據(jù)模型中的computers對(duì)象數(shù)組遍歷并顯示到頁(yè)面

代碼演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">

    <table>
        <tr>
            <th>序號(hào)</th>
            <th>品牌</th>
            <th>價(jià)格</th>
        </tr>
        <tr v-for="computer in computers">
            <td >{{computer.id}}</td>
            <td >{{computer.brand}}</td>
            <td >{{computer.price}}</td>
        </tr>

    </table>



</div>
<script>
    new Vue({
        el:"#app",
        //遍歷對(duì)象數(shù)值
        data: {
            computers:[
                {
                  id:1001,
                  brand:"華為",
                  price: 7800
                }, {
                  id:1002,
                  brand:"聯(lián)想" ,
                  price:8900
                }, {
                  id:1003,
                  brand:"蘋果",
                  price:13000
                }
            ]
        } 


    })

</script>


</body>
</html>

如何快速上手Vue框架?

需要索引的語(yǔ)法：

v-for=“(變量，index) in 數(shù)組”

索引index從0開始，可以加數(shù)學(xué)運(yùn)算

案例：在剛才的對(duì)象數(shù)組中加入序號(hào)

代碼演示如下：

</head>
<body>

<div id="app">

    <table>
        <tr>
            <th>索引</th>
            <th>序號(hào)</th>
            <th>品牌</th>
            <th>價(jià)格</th>
        </tr>
        <tr v-for="(computer,index) in computers">
            <td>{{index+1}}</td>
            <td >{{computer.id}}</td>
            <td >{{computer.brand}}</td>
            <td >{{computer.price}}</td>
        </tr>

    </table>



</div>
<script>
    new Vue({
        el:"#app",
        //遍歷對(duì)象數(shù)值
        data: {
            computers:[
                {
                  id:1001,
                  brand:"華為",
                  price: 7800
                }, {
                  id:1002,
                  brand:"聯(lián)想" ,
                  price:8900
                }, {
                  id:1003,
                  brand:"蘋果",
                  price:13000
                }
            ]
        }


    })

</script>


</body>
</html>

如何快速上手Vue框架?

八. Vue如何實(shí)現(xiàn)事件驅(qū)動(dòng)？

語(yǔ)法：

v-on:事件類型=“函數(shù)調(diào)用”

案例：實(shí)現(xiàn)單擊事件和change事件

代碼演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <!--  單擊事件  -->
    <input type="button" value="按鈕" v-on:click="clickTest(10,'java')"><br>
    <!--  change事件  -->
    <input type="text" v-on:change="changeTest">

</div>
<script>
    new Vue(
        {
        el:"#app",
        data:{},
        methods:{
                clickTest:function (a,b) {
                    alert("這是vue綁定并測(cè)試的單擊事件")
                    alert("傳入的值:"+a+"\t"+b)
                },
                changeTest:function () {
                    alert("這是vue綁定并測(cè)試的change事件")
                }
            }
        }
    )


</script>


</body>
</html>

如何快速上手Vue框架?

注意：

上述事件驅(qū)動(dòng)的語(yǔ)法可這樣簡(jiǎn)寫：

v-on:click=“clickTest” ==> @click="clickTest"

下面的methods里的自定義函數(shù)可這樣簡(jiǎn)寫（不常用）：

 clickTest:function (a,b) {
                    alert("這是vue綁定并測(cè)試的單擊事件")
                    alert("傳入的值:"+a+"\t"+b)
                }

clickTest(){
	alert("點(diǎn)擊事件綁定成功")
}

九. Vue如何實(shí)現(xiàn)取消控件默認(rèn)行為？

9.1 什么是控件默認(rèn)行為？

控件的默認(rèn)行為指的是：

點(diǎn)擊超鏈接跳轉(zhuǎn)頁(yè)面
點(diǎn)擊表單提交按鈕提交表單

9.2 超鏈接與表單取消控件默認(rèn)行為

語(yǔ)法

js:event.preventDefault(); //取消控件的默認(rèn)行為
Vue:@click.prevent=“clickTest” //100%取消

案例：模擬實(shí)現(xiàn)超鏈接與表單取消控件默認(rèn)行為

代碼演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <a href="https://www.baidu.com/" @click="clickTest">跳轉(zhuǎn)至百度</a>

    <form  action="helloworld.html" method="get" @submit.prevent="submitTest" >
        <input type="text" name="username">
        <input type="submit" >
    </form>
</div>
<script>
    new Vue({
        el:"#app",
        data:{},
        methods:{
            clickTest:function () {
                //如果你不根讓超鏈接進(jìn)行跳轉(zhuǎn)
                alert("將要跳轉(zhuǎn)至百度")
                //取消控件的默認(rèn)行為
                event.preventDefault();

            },
            submitTest:function () {
                //如果你不根讓超鏈接進(jìn)行跳轉(zhuǎn)
                alert("將要提交表單")
                //取消控件的默認(rèn)行為
                // event.preventDefault();
            }
        }
    })

</script>


</body>
</html>

如何快速上手Vue框架?

十. Vue如何實(shí)現(xiàn)阻止事件冒泡？

10.1 關(guān)于事件修飾符

Vue事件修飾符是Vue提供的一種語(yǔ)法糖，用于簡(jiǎn)化事件處理程序的編寫。事件修飾符是在事件后面添加的特殊后綴，用于改變事件的行為。

常見的事件修飾符有以下幾種：

.stop：阻止事件冒泡
.prevent：阻止默認(rèn)事件
.capture：事件捕獲階段觸發(fā)事件處理程序
.self：只有在事件的目標(biāo)元素上觸發(fā)事件才會(huì)觸發(fā)事件處理程序
.once：只觸發(fā)一次事件處理程序
.passive：告訴瀏覽器不需要阻止默認(rèn)事件，以提高性能

10.2 什么是事件冒泡？

指在 HTML 元素嵌套的結(jié)構(gòu)中，當(dāng)一個(gè)事件被觸發(fā)時(shí)，它會(huì)從最內(nèi)層的元素開始，逐層向外傳遞，直到傳遞到最外層的元素為止。在這個(gè)過(guò)程中，如果某個(gè)元素綁定了事件處理函數(shù)，它就會(huì)被調(diào)用執(zhí)行。

例如，當(dāng)用戶在一個(gè)按鈕上點(diǎn)擊鼠標(biāo)時(shí)，click 事件就會(huì)被觸發(fā)，并且會(huì)從按鈕元素開始沿著層次結(jié)構(gòu)向外傳遞，直到傳遞到整個(gè)文檔的最外層。在傳遞的過(guò)程中，任何綁定了 click 事件的元素都會(huì)被調(diào)用執(zhí)行相應(yīng)的事件處理函數(shù)。

10.3 如何實(shí)現(xiàn)阻止事件冒泡

語(yǔ)法：

js:event.stopPropagation(); //阻止事件冒泡
vue:@click.stop="div2Test"

案例：模擬實(shí)現(xiàn)阻止事件冒泡

代碼演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        #div1{
            border: 2px solid red;
            width: 300px;
            height: 300px;
        }
        #div2{
            border: 2px solid blue;
            width: 150px;
            height: 150px;
        }


    </style>
</head>
<body>

<div id="app">
    <div id="div1" @click="div1Test">
        <div id="div2" @click.stop="div2Test"></div>
    </div>

</div>
<script>
    new Vue({
        el:"#app",
        data:{},
        methods:{
            div1Test:function () {
                alert("點(diǎn)擊了大紅框");
            },
            div2Test:function () {
                //發(fā)生了事件冒泡：即點(diǎn)中了小藍(lán)框，小藍(lán)框的單擊事件于大紅框的單擊事件先后觸發(fā)
                alert("點(diǎn)擊了小藍(lán)框");
                //現(xiàn)有需求：點(diǎn)擊小藍(lán)框，只觸發(fā)小藍(lán)框的單擊事件
                //js的原生阻止方法
                // event.stopPropagation();
            }
        }


    })

</script>


</body>
</html>

如何快速上手Vue框架?

如何快速上手Vue框架?

十一. Vue如何進(jìn)行屬性的偵聽

釋義：

屬性偵聽是指在Vue實(shí)例中，監(jiān)聽某個(gè)屬性的變化，當(dāng)屬性發(fā)生變化時(shí)，執(zhí)行相應(yīng)的操作。

功能：

當(dāng)數(shù)據(jù)模型的值放生變化時(shí)，被Vue監(jiān)聽到，然后執(zhí)行一個(gè)函數(shù)

案例：尊姓和大名后面的文本要隨著用戶輸入的值變化而變化，且全名中的文本也要一起變化

代碼演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">

<p>尊姓:{{firstname}}</p>
<p>大名:{{lastname}}</p>

<input type="text" v-model="firstname"><br>
<input type="text" v-model="lastname">
    <p>全名:{{fullname}}</p>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            firstname:"本",
            lastname:"拉登",
            fullname:"本.拉登"
        },
        methods:{},
        watch:{
            firstname: function () {
                this.fullname=this.firstname+"."+this.lastname;
            },
            lastname: function () {
                this.fullname=this.firstname+"."+this.lastname;
            }
        }

    })

</script>

</body>
</html>

如何快速上手Vue框架?

如何快速上手Vue框架?

十二. Vue的生命周期

Vue生命周期詳細(xì)圖解如下：

①官網(wǎng)版

如何快速上手Vue框架?

②中文圖解版

如何快速上手Vue框架?

對(duì)象的創(chuàng)建前：beforeCreate
對(duì)象的創(chuàng)建后：created
渲染（掛載）前：beforeMount
渲染（掛載）后：mounted
修改前：beforeUpdate
修改后：updated
銷毀前：beforeDestroy
銷毀后：Destroy

十三. 鉤子函數(shù)

功能：

讓開發(fā)者在vue的生命周期階段執(zhí)行自定義函數(shù)

位置：

和el/data/methods/watch同級(jí)別

案例：創(chuàng)建自定義函數(shù)模擬演示beforeCreate，created，beforeMount，mounted這四種生命周期的狀態(tài)

代碼演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">

    <div id="div01">{{msg}}</div>

</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"這是div中的內(nèi)容"
        },
        methods:{
            fun01:function () {
                console.log("這是fun01函數(shù)");
            }
        },
        beforeCreate:function () {
            console.log("vue對(duì)象初始化前執(zhí)行...");
            console.log(this.msg);//沒有
            this.fun01();//報(bào)錯(cuò)
        },
        created:function () {
            console.log("vue對(duì)象初始化后執(zhí)行...");
            console.log(this.msg);//有值
            this.fun01();//可以調(diào)用到
        },
        beforeMount:function () {
            console.log("vue對(duì)象渲染前執(zhí)行...");
            console.log(document.getElementById("div01").innerText);//{{msg}}
        },
        mounted:function () {
            console.log("vue對(duì)象渲染后執(zhí)行...");
            console.log(document.getElementById("div01").innerText);//這是div中的內(nèi)容
        }

    })

</script>

</body>
</html>

如何快速上手Vue框架?

十四. 綜合案例：Vue版動(dòng)態(tài)表格

案例需求

① 創(chuàng)建一個(gè)table，初始化員工的一些信息(編號(hào)、姓名、年齡、專業(yè)等)
② 創(chuàng)建一個(gè)表單，用戶輸入員工的信息
③ 表單中創(chuàng)建添加按鈕，點(diǎn)擊添加按鈕，輸入的員工信息追加到表格內(nèi)
④ 每條員工信息后都有一個(gè)刪除的超鏈接，點(diǎn)擊刪除，刪除當(dāng)前員工信息

案例圖解

如何快速上手Vue框架?
案例代碼演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue實(shí)現(xiàn)動(dòng)態(tài)表格</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <table border="1" cellspacing="0px" width="250px"  align="center" id="users">
        <tr>
            <th>序號(hào)</th>
            <th>用戶</th>
            <th>性別</th>
            <th>操作</th>
        </tr>
        <tr v-for="student in students">
            <td>{{student.id}}</td>
            <td>{{student.name}}</td>
            <td>{{student.gender}}</td>
            <td>
                <input type="button" value="刪除" @click="deleteUser" >
            </td>
       </tr>
    </table>

    <table border="0" cellspacing="0px" width="250px"  align="center" id="input">
        <tr>
            <td>序號(hào)</td>
            <td colspan="3"><input type="text" v-model:value="id" > </td>

        </tr>
        <tr>

            <td>姓名</td>
            <td colspan="3"><input type="text" v-model:value="name" ></td>

        </tr>
        <tr>
            <td>性別</td>
            <td colspan="3"><input type="text" v-model:value="gender" ></td>

        </tr>
        <tr>
            <td colspan="4" align="center">
                <input type="button" value="添加用戶"  @click="addUser">
            </td>

        </tr>
    </table>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            students:[
                {
                    id:1,
                    name:"張三",
                    gender:"男",
                },
                {
                    id:2,
                    name:"李四",
                    gender:"女"
                },
                {
                    id:3,
                    name:"王五",
                    gender:"男"
                }
                ],
            id:"null",
            name:"null",
            gender:"null",
        },
        methods:{
            //刪除用戶
            deleteUser:function () {
               //event.target.parentNode --> 獲取觸發(fā)單擊事件的按鈕元素的父元素
                //event.target.parentElement  --> 獲取觸發(fā)單擊事件的按鈕元素的父元素
                event.target.parentElement.parentElement.remove();

            },

            //思路：將新添加的數(shù)據(jù)加入到data中students數(shù)組中，即可
            addUser:function () {
                var data= new Object();
                data.id=this.id;
                data.name=this.name;
                data.gender=this.gender;
                this.students.push(data);
            }
            
        }

    })



</script>


</body>
</html>

如何快速上手Vue框架?

如何快速上手Vue框架? 文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-409594.html

到了這里，關(guān)于如何快速上手Vue框架?的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

【Arduino框架】ESP32中藍(lán)牙快速上手使用~
????????歡迎來(lái)到本博客???????? 本人持續(xù)分享更多關(guān)于電子通信專業(yè)內(nèi)容以及嵌入式和單片機(jī)的知識(shí)，如果大家喜歡，別忘點(diǎn)個(gè)贊加個(gè)關(guān)注哦，讓我們一起共同進(jìn)步~ BluetoothSerial.h 是ESP32 Arduino中的藍(lán)牙串口庫(kù)，可以通過(guò)藍(lán)牙串口與其他設(shè)備進(jìn)行通信。常用的函數(shù)如
2024年02月05日
瀏覽(29)
一分鐘學(xué)會(huì)、三分鐘上手、五分鐘應(yīng)用，快速上手責(zé)任鏈框架詳解 | 京東云技術(shù)團(tuán)隊(duì)
作者：京東物流覃玉杰責(zé)任鏈模式是開發(fā)過(guò)程中常用的一種設(shè)計(jì)模式，在SpringMVC、Netty等許多框架中均有實(shí)現(xiàn)。我們?nèi)粘５拈_發(fā)中如果要使用責(zé)任鏈模式，通常需要自己來(lái)實(shí)現(xiàn)，但自己臨時(shí)實(shí)現(xiàn)的責(zé)任鏈既不通用，也很容易產(chǎn)生框架與業(yè)務(wù)代碼耦合不清的問題，增加Code Rev
2024年02月03日
瀏覽(45)
快速上手Linux核心命令（十）：Linux安裝軟件
目錄前言 rpm rpm包管理器 yum 自動(dòng)化RPM包管理工具這期呢主要說(shuō)一說(shuō)Linux中包軟件管理相關(guān)命令，這一期的命令雖然只有兩個(gè)。但軟件包的安裝和卸載都是我們平常最常用的，需要熟練掌握。 rpm和yum 是CentOS 主要的包軟件管理。兩個(gè)命令各有用處，①yum需要互聯(lián)網(wǎng)，yum會(huì)去網(wǎng)
2024年02月01日
瀏覽(23)
軟件測(cè)試 - 商城性能測(cè)試LoadRunner快速上手教學(xué)
Virtual User Generator ，記錄用戶流程并創(chuàng)建一個(gè)自動(dòng)化性能測(cè)試腳本 Controller ，單一控制點(diǎn)，輕松、有效地控制所有 Vuser ，執(zhí)行期間監(jiān)控場(chǎng)景性能 Analysis ，生成性能測(cè)試報(bào)告，以圖表形式呈現(xiàn)。由于教程篇幅較大，盡可能地照顧大部分學(xué)習(xí)情況，更多還是要大家多讀官方文檔
2024年02月08日
瀏覽(51)
【Vue】快速上手--Vue 3.0
Vue (發(fā)音為 /vju?/，類似? view ) 是一款用于構(gòu)建用戶界面的 JavaScript 框架。它基于標(biāo)準(zhǔn) HTML、CSS 和 JavaScript 構(gòu)建，并提供了一套聲明式的、組件化的編程模型，幫助你高效地開發(fā)用戶界面。無(wú)論是簡(jiǎn)單還是復(fù)雜的界面，Vue 都可以勝任。下面是一個(gè)最基本的示例： js template 結(jié)
2024年02月10日
瀏覽(19)
springcloud：快速上手定時(shí)任務(wù)框架xxl-job（十五）
實(shí)際開發(fā)中，我們常常遇到需要定時(shí)執(zhí)行的任務(wù)，我們可以利用定時(shí)線程池或schedule框架等來(lái)實(shí)現(xiàn)定時(shí)任務(wù)，但這些方式都有效率、性能上的缺陷，在微服務(wù)框架下，我們期望一種更加規(guī)整、輕量、可靠的定時(shí)任務(wù)框架來(lái)幫助我們實(shí)現(xiàn)定時(shí)任務(wù)，以及可視化的管理定時(shí)任務(wù)。
2023年04月08日
瀏覽(27)
快速上手 vue.js ＜二＞
續(xù) vue 一組件化的核心思想：對(duì)組件進(jìn)行拆分，拆分成一個(gè)個(gè)小的組件再將這些組件嵌套再一起最終形成我們的應(yīng)用程序最終整個(gè)程序會(huì)變成組件樹父子組件之間的通信：父組件傳遞給子組件：通過(guò) props 屬性子組件傳遞給父組件：通過(guò) $emit 觸發(fā)事件 7.2.1 父組件傳遞給子
2024年01月22日
瀏覽(25)
從Vue快速上手React
還沒使用過(guò)React 的 vue同學(xué)可以通過(guò)這篇博客快速上手React。 Vue 數(shù)據(jù)讀寫： React 數(shù)據(jù)讀寫： Vue提供了 watch 幫忙監(jiān)聽數(shù)據(jù)變化 React提供了 useEffect 幫忙監(jiān)聽數(shù)據(jù)變化，但請(qǐng)注意，useEffect還有其他用途，并不局限于此注意：vue中的數(shù)據(jù)監(jiān)聽watch可以直接獲取新舊值，而react中數(shù)據(jù)
2024年02月13日
瀏覽(24)
如何在Intellij-idea如何編譯maven工程
在 IntelliJ IDEA 中編譯 Maven 工程，你需要遵循以下步驟：打開 IntelliJ IDEA ：首先，啟動(dòng) IntelliJ IDEA。打開 Maven 項(xiàng)目：在歡迎界面上，選擇 \\\"Get from Version Control\\\"，然后選擇你的 Maven 項(xiàng)目的倉(cāng)庫(kù)地址?；蛘撸绻阋呀?jīng)有了項(xiàng)目文件（如? .idea ?和? pom.xml ），你可以直接打開這
2024年01月18日
瀏覽(99)
快速上手VUE：中文亂碼問題解決
????????吾有一友，名為小帥。 ????????某天早晨，我正學(xué)習(xí)、試用API，他路過(guò)： ????????小帥：“咱這皮毛都沒的Chinglish水平，還寫全英文的？中文整上??！” ????????幾分鐘后，滿屏亂碼...... ????????我： ????????按照經(jīng)驗(yàn)，首先懷疑網(wǎng)頁(yè)設(shè)置有問
2024年02月15日
瀏覽(25)