小白學(xué)VUE——快速入門(mén)

2020-5-13    前端達(dá)人

文章目錄

小白學(xué)VUE——快速入門(mén)

前言：什么是VUE?

環(huán)境準(zhǔn)備：

vue的js文件

vscode

Vue入門(mén)程序

抽取代碼片段

vue標(biāo)準(zhǔn)語(yǔ)法：

什么是vue指令？

v-bind指令

事件單向綁定

v-model:事件雙向綁定

v-on事件監(jiān)聽(tīng)指令

v: on:submit.prevent指令

v-if 判斷指令

v-for 循環(huán)渲染指令

前言：什么是VUE?

Vue.js（讀音 /vju?/, 類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架。 Vue 只關(guān)注視圖層， 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)。 Vue 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。

點(diǎn)擊查看原圖

環(huán)境準(zhǔn)備：
vue的js文件
使用CDN外部導(dǎo)入方法
以下推薦國(guó)外比較穩(wěn)定的兩個(gè) CDN，把這些網(wǎng)址放進(jìn)script標(biāo)簽的src屬性下即可，國(guó)內(nèi)還沒(méi)發(fā)現(xiàn)哪一家比較好，目前還是建議下載到本地。

Staticfile CDN（國(guó)內(nèi)） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue/dist/vue.js, 會(huì)保持和 npm 發(fā)布的的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
2.VSCODE軟件
(2).使用內(nèi)部導(dǎo)入方法（自行下載js文件放進(jìn)工作區(qū)js文件夾即可）

2.png

vscode

前往vscode官網(wǎng)下載對(duì)應(yīng)版本的vscode

點(diǎn)擊查看原圖

Vue入門(mén)程序
首先了解一下什么是插值
插值：數(shù)據(jù)綁定最常見(jiàn)的形式就是使用 **{{…}}（雙大括號(hào)）**的文本插值：

單獨(dú)抽出這段來(lái)看一下：
Vue即是vue內(nèi)置的對(duì)象，el(element)指的是綁定的元素，可以用#id綁定元素，data指的是定義頁(yè)面中顯示的模型數(shù)據(jù)，還有未展示的methods，指的是方法

var app = new Vue({
            el: "#app",//綁定VUE作用的范圍
            data: {//定義頁(yè)面中顯示的模型數(shù)據(jù)
                message: 'hello vue'
            }
 });

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


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

</head>
<body>
    

    <!-- 插值表達(dá)式 獲取data里面定義的值 {{message}} -->
    <div id="app">{{ message }}</div>

    <script>
        //創(chuàng)建一個(gè)VUE對(duì)象
        var app = new Vue({
            el: "#app",//綁定VUE作用的范圍
            data: {//定義頁(yè)面中顯示的模型數(shù)據(jù)
                message: 'hello vue'
            }
        });

    </script>

</body>
</html>

抽取代碼片段

步驟：文件-首選項(xiàng)-用戶片段
輸入片段名稱回車(chē)

復(fù)制以下片段覆蓋之前的注釋內(nèi)容

{
"vh": {
"prefix": "vh", // 觸發(fā)的關(guān)鍵字 輸入vh按下tab鍵
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
"    <meta charset=\"UTF-8\">",
"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
"    <title>Document</title>",
"    <script src=\"js/vue.min.js\"></script>",
"</head>",
"",
"<body>",
"    <div id=\"app\"></div>",
"    <script>",
"        var vm=new Vue({",
"           el:'#app',",
"           data:{},",
"           methods:{}",
"        });",
"    </script>",
"</body>",
"",
"</html>",
],
"description": "vh components"
}
}

此時(shí)，新建一個(gè)html文件，輸入vh在按下tab鍵即可快速填充內(nèi)容

vue標(biāo)準(zhǔn)語(yǔ)法：
什么是vue指令？
在vue中提供了一些對(duì)于頁(yè)面 + 數(shù)據(jù)的更為方便的輸出,這些操作就叫做指令, 以v-xxx表示
類似于html頁(yè)面中的屬性 `

比如在angular中 以ng-xxx開(kāi)頭的就叫做指令
在vue中 以v-xxx開(kāi)頭的就叫做指令
指令中封裝了一些DOM行為, 結(jié)合屬性作為一個(gè)暗號(hào), 暗號(hào)有對(duì)應(yīng)的值,根據(jù)不同的值，框架會(huì)進(jìn)行相關(guān)DOM操作的綁定

下面簡(jiǎn)單介紹一下vue的幾個(gè)基礎(chǔ)指令： v-bind v-if v-for v-on等

v-bind指令
作用：

給元素的屬性賦值
可以給已經(jīng)存在的屬性賦值 input value
也可以給自定義屬性賦值 mydata
語(yǔ)法
在元素上 v-bind:屬性名="常量||變量名"
簡(jiǎn)寫(xiě)形式 :屬性名="變量名"
例：
<div v-bind:原屬性名="變量"></div> <div :屬性名="變量"></div>

事件單向綁定

事件單向綁定，可以用 v-bind:屬性名="常量||變量名，綁定事件，用插值表達(dá)式取出值

<body>
    <div id="app">
    
        <h1 v-bind:title="message">
            {{content}}
        </h1>

        <!-- 簡(jiǎn)寫(xiě)方式 -->
        <h2 :title="content">{{message}}</h2>


    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               content: '我是標(biāo)題',
               message: '頁(yè)面加載于' + new Date().toDateString()
           }
           
        });
    </script>
</body>

效果：
20200511203222885.png


————————————————
版權(quán)聲明：本文為CSDN博主「熱愛(ài)旅行的小李同學(xué)」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/m0_46275020/java/article/details/106055312


分享本文至：

日歷

鏈接

個(gè)人資料

存檔