Vue入門

1. 建立Vue項目

npm init vue@latest


% 初始化后執(zhí)行
cd <項目名>
cnpm install
npm run dev

2. Vue目錄詳解


node_modules	---	Vue項目運行依賴庫
public	---	資源文件夾
src	---	源代碼
index.html	---	入口html文件
package.json	---	信息描述文件
README	---	自述文件
vite.config.js	---	Vue配置文件

3. 模板語法

3.1 文本插值

<template>
    <p>{{ msg }}</p>
</template>
<script>
export default{
    data(){
        return {
            msg: "神奇的魔法"
        }
    }
}
</script>

3.2 JS表達式

每個綁定僅支持單一表達式冈在，也就是一段能求值的JS代碼暴浦。如果一段代碼可以放在return后面客情，即可作為表達式：

<template>
  <p>{{ msg }}</p>
  <p>{{ hello }}</p>
  <p>{{ num + 1 }}</p>
  <p>{{ ok ? 'Yes':'No' }}</p>
  <p>{{ hello.split(' ').reverse().join(' ') }}</p>
</template>
<script>
export default{
    data(){
        return {
            msg: "神奇的魔法",
            hello: "Hello world!",
            num: 100,
            ok: true,
        }
    }
}
</script>

3.3 原始HTML

要想插入html，需要使用v-html指令

<p>{{ rawHtml }}</p>
<p v-html="rawHtml"></p>
<script>
export default{
    data(){
        return {
            rawHtml:"<a 
        }
    }
}
</script>

4 屬性綁定

雙大括號不能在HTML的attributes中使用抖韩，需要使用v-bind指令

<template>
  <div v-bind:class="dynamicClass" v-bind:id="dynamicId">測試</div>
</template>

<script>
export default {
  data(){
    return {
      dynamicClass: "appclass",
      dynamicId: "appid",
    }
  }
}
</script>

如果屬性值被設(shè)置為null或undefined，則該屬性會從渲染的元素上移除

簡寫：用冒號代替v-bind:

4.1 Boolean Attribute

4.2 動態(tài)綁定多個值


<template>
  <div v-bind="objectOfAttrs">測試</div>
</template>

<script>
export default {
  data(){
    return {
      objectOfAttrs : {
        id   : "appid",
        class: "appclass",
      }
    }
  }
}
</script>

5 條件渲染

類似于條件語句：

v-if
v-else
v-else-if
v-show

<template>
    <h3>條件渲染</h3>
    <div v-if="flag">你能看見我么</div>
    <div v-else>你看不見我</div>
    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else-if="type === 'C'">C</div>
    <div v-else>Not A/B/C</div>
    <div v-show="flag">你能看見我么</div>
</template>
<script>
export default {
    data() {
        return {
            flag: true,
            type: "D"
        }
    },
}
</script>

v-show與v-if區(qū)別：

v-show修改的是display屬性祠斧，因此具有較高的初始渲染開銷
v-if如果最開始設(shè)置為false，則元素在最開始就不會被渲染捆探。

6 列表渲染

使用v-for指令

<template>
    <h3>列表渲染</h3>
    <p v-for="item in names">{{item}}</p>
</template>
<script>
export default {
    data(){
        return {
            names:["程序員1", "程序員2", "程序員3"],
        }
    }
}
</script>

也可以使用index來獲取位置信息

<template>
    <h3>列表渲染</h3>
    <p v-for="(item, index) in names">{{item}}：{{ index }}</p>
</template>
<script>
export default {
    data(){
        return {
            names:["程序員1", "程序員2", "程序員3"],
        }
    }
}
</script>

可以用of來代替in，更接近js的語法

<div v-for="item of items"></div>

v-for還可以用于遍歷對象的屬性站粟，順序分別為（value, key, index）

7 事件處理

使用v-on（或簡寫為@）來監(jiān)聽DOM時間：

v-on:click="methodName"或@click="handler"

7.1 內(nèi)聯(lián)事件處理器

<template>
    <h3>內(nèi)聯(lián)事件處理器</h3>
    <button @click="count++">Add</button>
    <p>{{ count }}</p>
</template>
<script>
export default {
    data() {
        return {
            count: 0,
        }
    }
}  
</script>

7.2 方法事件處理器

<template>
    <h3>內(nèi)聯(lián)事件處理器</h3>
    <button @click="addCount">Add</button>
    <p>{{ count }}</p>
</template>
<script>
export default {
    data() {
        return {
            count: 0,
        }
    }, 
    methods:{
        addCount(){
            this.count+=1
        }
    }
}  
</script>

8 事件參數(shù)

需要在內(nèi)聯(lián)事件處理器中訪問原生 DOM 事件黍图，可以向該處理器方法傳入一個特殊的 $event 變量

<template>
    <h3>內(nèi)聯(lián)事件處理器</h3>
    <button @click="addCount('hello',$event)">Add</button>
    <p>{{ count }}</p>
</template>
<script>
export default {
    data() {
        return {
            count: 0,
        }
    }, 
    methods:{
        addCount(input, e){
            e.target.innerHTML = input + this.count
            this.count+=1
        }
    }
}  
</script>

9 事件修飾符

在處理事件時調(diào)用 event.preventDefault() 或 event.stopPropagation() 是很常見的。盡管我們可以直接在方法內(nèi)調(diào)用奴烙，但如果方法能更專注于數(shù)據(jù)邏輯而不用去處理 DOM 事件的細節(jié)會更好助被。

為解決這一問題，Vue 為 v-on 提供了事件修飾符切诀。修飾符是用 . 表示的指令后綴恰起，包含以下這些：

.stop阻止事件冒泡
.prevent阻止默認(rèn)事件
.self
.capture
.once事件只被處理一次
.passive

<template>
    <h3>事件修飾符</h3>
    <a  @click.prevent="clickHandle">你好vue</a>
    <div @click="clickDiv">
        <p @click.stop="clickP">
            點我
        </p>
    </div>
</template>
<script>
export  default {
    methods:{
        clickHandle(e){
            console.log("click this!")
        },
        clickDiv(e){
            console.log("click div!")
        },
        clickP(e){
            console.log("click p!")
        }
    },
}
</script>

10. 數(shù)組變化監(jiān)測

10.1 變更方法

當(dāng)使用如下方法變更數(shù)組內(nèi)容時，Vue可以自動更新UI：

push
pop
shift
unshift
splice
sort
reverse

10.2 替換數(shù)組

filter()趾牧、concat()和slice()等g發(fā)不會變更原數(shù)組，而是返回一個新數(shù)組肯污，因此當(dāng)數(shù)組調(diào)用這些方法時不會自動更新UI

<template>
    <h3>數(shù)組變化偵聽</h3>
    <button @click="addListHandle">變更數(shù)組</button>
    <button @click="addListHandle1">不會變更數(shù)組</button>
    <ul>
        <li v-for="(name, index) in names" :key="index">{{ name }}</li>
    </ul>
</template>
<script>
export default {
    data() {
        return {
            //
            names : ['a','b','c'],

        }
    },
    methods: {
        //
        addListHandle(){
            // 數(shù)組變化偵聽
            this.names.push('d')
            
        },
        addListHandle1(){
            // 數(shù)組變化不會引起UI自動更新
            this.names.concat(['e','f'])
            console.log(this.names)
        }
    }
}
</script>

11 計算屬性

模板中的表達式雖然方便翘单，但也只能用來做簡單的操作。如果在模板中寫太多邏輯蹦渣，會讓模板變得臃腫哄芜，難以維護。因此柬唯，可以使用計算屬性认臊。

<template>
    <h3>計算屬性</h3>
    <p>{{ computedData }}</p>
</template>
<script>
export default {
    data() {
        return {
            mydata:{
                name: "計算屬性",
                content: ['Python', 'Java', 'Vue'],
            }
        }
    },
    computed: {
        // 計算屬性
        computedData() {
            return this.mydata.content.length > 0 ? 'Yes' : 'No'
        }
    }
}
</script>

計算屬性值會基于其響應(yīng)式依賴被緩存

12 Class綁定和Style綁定

<template>
    <h3>Class綁定</h3>
    <p :class="{'activate': isActivate, 'err':isError}">Class樣式綁定</p>
    <p :class="classObj">Class樣式綁定2</p>
    <p :class="[arrActivate, arrError]">Class樣式綁定3</p>
    <p :class="[isActivate?'activate':'err']">Class樣式綁定4</p>
    <button @click="clickHandler">去掉警告</button>
</template>
<script>
export default {
    data() {
        return {
            isActivate: true,
            isError: true,
            classObj: {
                'activate': true,
                'err': false
            },
            arrActivate:'activate',
            arrError:'err',
        }
    },
    methods: {
        clickHandler() {
            this.isError = false;
        }
    }
}
</script>
<style>
.activate {
    font-size: 30px;
}
.err {
    color: red;
}
</style>

樣式綁定時，只能數(shù)組里嵌套對象锄奢，不能反其道而行之失晴。

<template>
    <h3>Style綁定</h3>
    <p :style="{color:activateColor, fontSize:fontsize + 'px'}">Style綁定1</p>
    <p :style="styleObj">Style綁定2</p>
    <p :style="[styleObj]">Style綁定3</p>
</template>
<script>
export default {
    data() {
        return {
            // 綁定style
            activateColor: 'green',
            fontsize: 20,
            // 綁定style對象
            styleObj: {
                color: 'red',
                fontSize: '30px'
            }
            // 綁定style數(shù)組

        }
    }
}
</script>

13 偵聽器

<template>
    <h3>偵聽器</h3>
    <p> {{msg}}</p>
    <button @click="updateHandle">改變偵聽器</button>
</template>
<script>
export default {
    data(){
        return {
            msg: '偵聽器'
        }
    },
    methods:{
        updateHandle(){
            this.msg = '偵聽器改變'
        }
    },
    //偵聽器
    watch:{
        // newValue: 新的值
        // oldValue: 舊的值
        // 函數(shù)名必須與偵聽的數(shù)據(jù)名稱一致
        msg(newValue, oldValue){
            // 數(shù)據(jù)發(fā)生變化時，會回調(diào)該函數(shù)
            console.log(newValue, oldValue)
        },
    }
}
</script>

14 表單輸入綁定

在前端處理表單時拘央，我們常常需要將表單輸入框的內(nèi)容同步給 JavaScript 中相應(yīng)的變量涂屁。手動連接值綁定和更改事件監(jiān)聽器可能會很麻煩。v-model 指令幫我們簡化了這一步：

<template>
    <h3>表單輸入綁定</h3>
    <form>
        <input type="text" v-model="message">
        <p>{{ message }}</p>
        <input type="checkbox" id="cb_test" v-model="checked" />
        <label for="cb_test">{{ checked }}</label>
    </form>
</template>
<script>
export default {
    data() {
        return {
            // 表單雙向綁定
            message: 'hello',
            checked: true,
        }
    },
    methods: {
    }
}
</script>

修飾符

`.lazy`

默認(rèn)情況下灰伟，v-model 會在每次 input 事件后更新數(shù)據(jù) 拆又，有時為了一些不需要那么及時的響應(yīng)，可以添加 lazy 修飾符來改為在每次 change 事件后更新數(shù)據(jù)：

`.number`

可以在 v-model 后添加 .number 修飾符來管理輸入栏账，使用戶輸入自動轉(zhuǎn)換為數(shù)字帖族，如果該值無法被 parseFloat() 處理，那么將返回原始值挡爵。

`.trim`

自動去除用戶輸入內(nèi)容中兩端的空格

15 模板引用

雖然 Vue 的聲明性渲染模型為你抽象了大部分對 DOM 的直接操作竖般，但在某些情況下，仍然需要直接訪問底層 DOM 元素了讨。要實現(xiàn)這一點捻激，可以使用特殊的 ref attribute：

<template>
    <h3>模板引用</h3>
    <div ref="container" class="container">{{ content }}</div>
    <button @click="btnClick">獲取元素</button>
</template>
<script>
// 內(nèi)容改變：{{}}
// 屬性改變：v-bind(:)
// 事件改變：v-on(@)
export default {
    data() {
        return {
            content: "hello world"
        };
    },
    methods: {
        btnClick() {
            console.log(this.$refs.container);
            // 獲取元素
            this.$refs.container.style.color = "red";
        }
    }
};
</script>

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

人面猴
序言：七十年代末制轰，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子胞谭，更是在濱河造成了極大的恐慌垃杖，老刑警劉巖，帶你破解...
沈念sama閱讀 216,324評論 6贊 498
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件丈屹，死亡現(xiàn)場離奇詭異调俘，居然都是意外死亡，警方通過查閱死者的電腦和手機旺垒，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,356評論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門彩库，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人先蒋，你說我怎么就攤上這事骇钦。” “怎么了竞漾？”我有些...
開封第一講書人閱讀 162,328評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵眯搭，是天一觀的道長。經(jīng)常有香客問我业岁，道長鳞仙，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,147評論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任笔时，我火速辦了婚禮棍好，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘允耿。我一直安慰自己借笙，他們只是感情好，可當(dāng)我...
茶點故事閱讀 67,160評論 6贊 388
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布右犹。她就那樣靜靜地躺著提澎，像睡著了一般。火紅的嫁衣襯著肌膚如雪念链。梳的紋絲不亂的頭發(fā)上盼忌，一...
開封第一講書人閱讀 51,115評論 1贊 296
城市分裂傳說
那天，我揣著相機與錄音掂墓，去河邊找鬼谦纱。笑死，一個胖子當(dāng)著我的面吹牛君编，可吹牛的內(nèi)容都是我干的跨嘉。我是一名探鬼主播，決...
沈念sama閱讀 40,025評論 3贊 417
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼吃嘿，長吁一口氣：“原來是場噩夢啊……” “哼祠乃！你這毒婦竟也來了梦重？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 38,867評論 0贊 274
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤亮瓷，失蹤者是張志新（化名）和其女友劉穎琴拧，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體嘱支，經(jīng)...
沈念sama閱讀 45,307評論 1贊 310
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡蚓胸，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,528評論 2贊 332
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了除师。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片沛膳。...
茶點故事閱讀 39,688評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖汛聚，靈堂內(nèi)的尸體忽然破棺而出锹安，到底是詐尸還是另有隱情，我是刑警寧澤倚舀，帶...
沈念sama閱讀 35,409評論 5贊 343
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布八毯，位于F島的核電站，受9級特大地震影響瞄桨，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜讶踪，卻給世界環(huán)境...
茶點故事閱讀 41,001評論 3贊 325
男人毒藥：我在死后第九天來索命
文/蒙蒙一芯侥、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧乳讥，春花似錦柱查、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,657評論 0贊 22
一樁弒父案唉工，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至汹忠，卻和暖如春淋硝，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背宽菜。一陣腳步聲響...
開封第一講書人閱讀 32,811評論 1贊 268
情欲美人皮
我被黑心中介騙來泰國打工谣膳，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人铅乡。一個月前我還...
沈念sama閱讀 47,685評論 2贊 368
代替公主和親
正文我出身青樓继谚，卻偏偏與公主長得像，于是被迫代替她去往敵國和親阵幸。傳聞我的和親對象是個殘疾皇子花履，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 44,573評論 2贊 353