vue.js入門教程之基礎(chǔ)語法小結(jié)
前言
Vue.js是一個(gè)數(shù)據(jù)驅(qū)動(dòng)的web界面庫。Vue.js只聚焦于視圖層，可以很容易的和其他庫整合。代碼壓縮后只有24kb。
以下代碼是Vue.js最簡單的例子， 當(dāng) input 中的內(nèi)容變化時(shí)，p 節(jié)點(diǎn)的內(nèi)容會(huì)跟著變化。
<!-- html -->
<div id="demo">
<p>{{message}}</p>
<input v-model="message">
</div>
new Vue({
el: '#demo',
data: {
message: 'Hello Vue.js!'
}
})
vue.js的基礎(chǔ)語法
插入文本
<span>Message: {{ text }}</span>
插入html格式的文本，在頁面顯示為html的格式
<span>Message: {{{ html }}}</span>
內(nèi)容不跟隨data的變化
<span>Message: {{ * text }}</span>
屬性上綁定數(shù)據(jù)
<div id="item-{{ id }}"></div>
在{{}}中使用js表達(dá)式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
在{{}}中使用js語句
{{ var a = 1 }}
{{ if (ok) { return message } }}
if指令
<p v-if="greeting">Hello!</p> 這里 v-if指令將根據(jù)表達(dá)式 greeting值的真假刪除/插入 <p>元素。
href指令
<a v-bind:href="url"></a>
或者
<a href="{{url}}"></a>
click指令
<a v-on:click="doSomething">
回車指令
<input v-model="newTodo" v-on:keyup.enter="addTodo">
縮略寫法
v-bind
<!-- 完整語法 --> <a v-bind:href="url"></a> <!-- 縮寫 --> <a :href="url"></a> <!-- 完整語法 --> <button v-bind:disabled="someDynamicCondition">Button</button><!-- 縮寫 --> <button :disabled="someDynamicCondition">Button</button>
v-on
<!-- 完整語法 --> <a v-on:click="doSomething"></a> <!-- 縮寫 --> <a @click="doSomething"></a>
總結(jié)
模板中表達(dá)式非常便利，但是它們實(shí)際上只用于簡單的操作。模板是為了描述視圖的結(jié)構(gòu)。在模板中放入太多的邏輯會(huì)讓模板過重且難以維護(hù)。這就是為什么 Vue.js 將綁定表達(dá)式限制為一個(gè)表達(dá)式。如果需要多于一個(gè)表達(dá)式的邏輯，應(yīng)當(dāng)使用計(jì)算屬性。小編會(huì)在后面給更新如何使用計(jì)算屬性。感興趣的朋友們請繼續(xù)關(guān)注腳本之家。
相關(guān)文章
vue中js判斷長時(shí)間不操作界面自動(dòng)退出登錄(推薦)
這篇文章主要介紹了vue中js判斷長時(shí)間不操作界面自動(dòng)退出登錄,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
vue中封裝axios并實(shí)現(xiàn)api接口的統(tǒng)一管理
這篇文章主要介紹了vue中封裝axios并實(shí)現(xiàn)api接口的統(tǒng)一管理的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
Vue3.0使用ref和reactive來創(chuàng)建響應(yīng)式數(shù)據(jù)
ref?和?reactive?是?Composition?API?中用來創(chuàng)建響應(yīng)式數(shù)據(jù)的兩個(gè)核心函數(shù),在本篇文章中,我們將詳細(xì)講解如何使用?ref?和?reactive?來創(chuàng)建響應(yīng)式數(shù)據(jù),并展示它們之間的區(qū)別和使用場景,需要的朋友可以參考下2024-11-11
vue使用axios時(shí)關(guān)于this的指向問題詳解
最近在學(xué)習(xí)使用vue+axios，在使用中發(fā)現(xiàn)了一個(gè)問題，下面總結(jié)分享給大家，這篇文章主要給大家介紹了關(guān)于vue使用axios時(shí)this的指向問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2017-12-12
解決vue 給window添加和移除resize事件遇到的坑
這篇文章主要介紹了解決vue 給window添加和移除resize事件遇到的坑，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue.js在標(biāo)簽屬性中插入變量參數(shù)的方法
這篇文章主要介紹了vue.js在標(biāo)簽屬性中插入變量參數(shù)的方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-03-03
VUE父組件異步獲取數(shù)據(jù),子組件接收的值為空的問題
這篇文章主要介紹了VUE父組件異步獲取數(shù)據(jù),子組件接收的值為空的問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
基于better-scroll 實(shí)現(xiàn)歌詞聯(lián)動(dòng)功能的代碼
BetterScroll 是一款重點(diǎn)解決移動(dòng)端（已支持 PC）各種滾動(dòng)場景需求的插件，BetterScroll 是使用純 JavaScript 實(shí)現(xiàn)的，這意味著它是無依賴的。本文基于better-scroll 實(shí)現(xiàn)歌詞聯(lián)動(dòng)功能，感興趣的朋友跟隨小編一起看看吧2020-05-05
這篇文章主要介紹了vue elementui異步給dom賦值無效問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要為大家詳細(xì)介紹了Vue.js的Class與樣式綁定,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09