資訊專欄INFORMATION COLUMN
摘要：在生成的項(xiàng)目中，我們打開文件夾下組件，為便于演示，刪減了一部分內(nèi)容本文中的例子都將改造組件來(lái)演示語(yǔ)法一創(chuàng)建組件在中，有好幾種方式用來(lái)創(chuàng)建組件，后面會(huì)多帶帶寫一篇文章來(lái)介紹。表達(dá)式插值中也支持表達(dá)式插值用雙大括號(hào)將表達(dá)式括起來(lái)。
Vue 的官方文檔寫的非常棒(另一個(gè)我覺得中文文檔寫的很好地是 Ant-Design)。
這篇文章以使用 vue-cli 生成的項(xiàng)目為基礎(chǔ)，以完整 demo 的形式講解 Vue 的基礎(chǔ)語(yǔ)法。關(guān)于 vue-cli 生成項(xiàng)目的講解，可以參考：vue-cli 構(gòu)建 vue 項(xiàng)目詳解 。
在 vue-cli 生成的項(xiàng)目中，我們打開 src/components 文件夾下 HelloWorld.vue 組件，為便于演示，刪減了一部分內(nèi)容（本文中的例子都將改造 HelloWorld.vue 組件來(lái)演示 Vue 語(yǔ)法）：
一、創(chuàng)建組件{{ msg }}
Essential Links
在 vue 中，有好幾種方式用來(lái)創(chuàng)建組件，后面會(huì)多帶帶寫一篇文章來(lái)介紹。
HelloWord.vue 文件中的內(nèi)容分為三個(gè)部分：
...
分別在這三類標(biāo)簽里面寫入結(jié)構(gòu)、腳本、樣式。 這個(gè)文件以 .vue 結(jié)尾（注意：其他創(chuàng)建組件方式是以 .js 結(jié)尾），這是 vue 中創(chuàng)建組件的一種方式：單文件組件。換句話說(shuō)就是每個(gè) .vue 文件就是一個(gè)組件。
有一點(diǎn)需要注意：template 只能允許一個(gè)子元素。
二、導(dǎo)入組件現(xiàn)在的文件中，是在路由 router/index.js 中引入的 HelloWorld 組件：
import Vue from "vue";
import Router from "vue-router";
import HelloWorld from "@/components/HelloWorld";
Vue.use(Router);
export default new Router({
routes: [
{
path: "/",
name: "HelloWorld",
component: HelloWorld,
},
],
});
引入的方式一目了然，不再贅述。那如何在組件中引入組件呢？下面我們?cè)?App 組件中直接引入 Helloworld 看看：
在 script 標(biāo)簽中，HelloWorld 組件被引入并添加到 components 屬性中。這樣，就在 App 組件中引入了 HelloWorld 組件。啟動(dòng)項(xiàng)目在瀏覽器中打開，會(huì)看到 App 組件中的內(nèi)容：Vue 的 Logo 、 HelloWorld 組件里的內(nèi)容。
那如果要引入多個(gè)組件該怎么寫呢？假設(shè)我們?cè)儆袀€(gè) Demo 組件：
在 components 對(duì)象中定義多個(gè)屬性，指向引入的組件即可。
三、插值和指令 1、插值(Interpolation)Vue 插值最常見的形式就是使用雙大括號(hào) {% raw %}{{ }} {% endraw %} 的文本插值。在文章開頭中的 HelloWorld 組件中就使用了插值的方式實(shí)現(xiàn)數(shù)據(jù)綁定。這里我們?cè)敿?xì)介紹一下：
在 Vue 組件中，都有一個(gè) data 屬性，data 必須是一個(gè)函數(shù)，該函數(shù)的返回值是一個(gè)對(duì)象。我們可以在 template 中通過(guò)雙大括號(hào)來(lái)讀取 data 中的屬性值：
{{ msg }}
這個(gè)將不會(huì)改變: {{ msg }}
這里也通過(guò)使用 v-once 指令（下面我們要說(shuō)），執(zhí)行一次性地插值：當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會(huì)更新。但是要注意一次性插值會(huì)影響到該節(jié)點(diǎn)上的其它數(shù)據(jù)綁定。
如何在 template 中包裹的標(biāo)簽的屬性上插值呢？假設(shè)我們有一個(gè) ，想通過(guò)插值的方式設(shè)置它的 disable 屬性，需要這樣做：
// ...
在屬性中插值，需要通過(guò)字符串的形式讀取 data 中的值，不可以使用雙大括號(hào)。現(xiàn)在，這個(gè) button 就被 disable 掉了。
vue 中也支持表達(dá)式插值：
{{ btnState ? "The button is disabled" : "The button is active"}}
用雙大括號(hào)將表達(dá)式括起來(lái)。此時(shí)頁(yè)面上會(huì)顯示：The button is disabled。當(dāng)然，你可以表達(dá)式中添加更加復(fù)雜的邏輯。
2、指令(Directives)指令 (Directives) 是帶有 v- 前綴的特殊特性。它的作用是什么呢？就是當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM。我們看看幾個(gè)例子：
v-for :
- {{ todo.text }}
v-for 指令可以綁定數(shù)組的數(shù)據(jù)來(lái)渲染一個(gè)項(xiàng)目列表：
· 學(xué)習(xí) JavaScript · 學(xué)習(xí) Vue · 學(xué)習(xí) 前端
v-if 和 v-else :
// add this
- {{ todo.text }}
You have more than 1 todo
You have no todos
這里，v-if 指令將根據(jù)表達(dá)式的值的真假來(lái)插入/移除
元素。
關(guān)于更多 vue 指令，可以查看 vue 指令 api，這里不再一一講述。
四、事件處理vue 中可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時(shí)運(yùn)行相關(guān) JavaScript 代碼。我們通過(guò)幾個(gè)例子來(lái)看看 vue 中的事件處理。
1、計(jì)數(shù)器{{ counter }}
點(diǎn)擊 button , 計(jì)數(shù)器遞增 +1。+1 的邏輯寫在了 v-on 指令里面，顯然這是不可取的，許多事件處理邏輯會(huì)更為復(fù)雜。
在 Vue 組件中，都有一個(gè) data 屬性，也有一個(gè) methods 屬性。該屬性是一個(gè)對(duì)象，我們可以在對(duì)象中定義方法。對(duì)于上面的例子，我們可以把點(diǎn)擊 button 之后的處理邏輯放在 methods 中，click 事件調(diào)用 methods 中的方法：
2、事件修飾符{{ counter }}
在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。雖然我們可以在事件的響應(yīng)函數(shù)里面來(lái)做這些事情，但是 vue 提供了一個(gè)更優(yōu)雅的方式來(lái)實(shí)現(xiàn)它 —— 事件修飾符，保證了事件處理函數(shù)的干凈純粹：只關(guān)注數(shù)據(jù)處理邏輯。
修飾符是由點(diǎn)開頭的指令后綴來(lái)表示的，我們把相應(yīng)的修飾符添加在事件名稱后面就好了，如：
.stop
.prevent
.capture
.self
.once
.passive
注意：使用修飾符時(shí)，順序很重要；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。因此，用 v-on:click.prevent.self 會(huì)阻止所有的點(diǎn)擊，而 v-on:click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊。注意這一點(diǎn)對(duì)我們定位 bug 時(shí)很關(guān)鍵。五、處理用戶輸入
我們可以用 v-model 指令來(lái)處理用戶輸入。 v-model 指令可以在表單 、 // 不生效 -->
4、復(fù)選按鈕
Picked: {{ picked }}
綁定到布爾值：
綁定到同一個(gè)數(shù)組：
5、選擇框
Checked names: {{ checkedNames }}
Selected: {{ selected }}
6、動(dòng)態(tài)選項(xiàng)
Selected: {{ selected }}
非常常見的一個(gè)場(chǎng)景是，用 v-for 渲染的動(dòng)態(tài)選項(xiàng)：
六、樣式Selected: {{ selected }}
在 HelloWorld 組件中，有一組 style 標(biāo)簽：
這就意味著我們可以在這個(gè)組件中定義任何樣式。默認(rèn) style 標(biāo)簽上加了一個(gè) scoped 屬性，表示樣式只在本組件內(nèi)部生效，不用擔(dān)心會(huì)影響其他組件。
1、鏈接到外部樣式表 2、class 綁定在 vue 中 class 綁定和 style 綁定都是用 v-bind 指令。 v-bind 指令允許我們動(dòng)態(tài)控制何時(shí)以及是否應(yīng)用 CSS 類和樣式，以及 CSS 屬性和值。看看怎么使用：
打開瀏覽器，我們會(huì)看到一個(gè)紫色的長(zhǎng)方形。如果想在 showBanner 為 false 的時(shí)候顯示長(zhǎng)方形，只需要對(duì) showBanner 取反即可：
那如果需要綁定多個(gè) class ，要怎么辦呢？
用逗號(hào)分隔，然后在組件的 data 中定義另一個(gè)布爾屬性，并在樣式中定義 .another-class 即可。
但是如果 calss 繼續(xù)增多，這種方式會(huì)讓 template 變得很不干凈，我們可以這樣修改：
class 綁定的數(shù)據(jù)對(duì)象不必內(nèi)聯(lián)定義在模板里，抽離出來(lái)放在 data 函數(shù)的返回值里面。
3、style 綁定和 class 綁定一樣，vue 也使用 v-bind 指令來(lái)綁定 style :
為了讓模板更加干凈，我們也可以像下面這樣調(diào)整：
注意：css 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case) 來(lái)命名。使用短橫線分割時(shí)，需要用單引號(hào)把屬性名括起來(lái)。七、 Todolist
學(xué)習(xí)完 Vue 的基礎(chǔ)語(yǔ)法，我們可以寫一個(gè) Todolist 來(lái)檢驗(yàn)一下自己：
代碼可參考：https://github.com/IDeepspace...
歡迎關(guān)注我的博客：https://togoblog.cn/
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/101451.html
摘要：菜鳥教程這是一個(gè)屬性其值是字符串菜鳥教程同上這是一個(gè)屬性其值是字符串用于定義的函數(shù)，可以通過(guò)來(lái)返回函數(shù)值。它們都有前綴，以便與用戶定義的屬性區(qū)分開來(lái)。 開篇語(yǔ) 我最近學(xué)習(xí)了js,取得進(jìn)步,現(xiàn)在學(xué)習(xí)vue.js.建議新手學(xué)習(xí),請(qǐng)不要用npm的方式(vue-cli,vue腳手架),太復(fù)雜了. 請(qǐng)直接下載vue.js文件本地引入,就上手學(xué)習(xí)吧參照菜鳥教程網(wǎng)站的vue.js教程http://...
摘要：在模板中放入太多的邏輯會(huì)讓模板過(guò)重且難以維護(hù)。它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素。指令需要使用的語(yǔ)法，指的是原數(shù)據(jù)數(shù)組，指的是迭代的數(shù)組元素。 注：本教程所使用的vue版本為 2.5.16 MVC與MVVM MVC（Model-View-Controller）： M指的是從后臺(tái)獲取到的數(shù)據(jù)， V指的是顯示動(dòng)態(tài)數(shù)據(jù)的html頁(yè)面， C是指響應(yīng)用戶操作、經(jīng)過(guò)業(yè)務(wù)邏輯處理后去更新...
摘要：與綁定數(shù)據(jù)綁定一個(gè)常見需求是操作元素的列表和它的內(nèi)聯(lián)樣式。兩者只能選其一對(duì)象語(yǔ)法我們可以傳給一個(gè)對(duì)象，以動(dòng)態(tài)地切換。注意不支持語(yǔ)法。相比之下，簡(jiǎn)單得多元素始終被編譯并保留，只是簡(jiǎn)單地基于切換。這意味著將分別重復(fù)運(yùn)行于每個(gè)循環(huán)中。 vue Class 與 Style 綁定 數(shù)據(jù)綁定一個(gè)常見需求是操作元素的 class 列表和它的內(nèi)聯(lián)樣式。因?yàn)樗鼈兌际菍傩裕覀兛梢杂?v-bind 處理...
摘要：與綁定據(jù)綁定一個(gè)常見需求是操作元素的列表和它的內(nèi)聯(lián)樣式用綁定綁定語(yǔ)法有對(duì)象語(yǔ)法數(shù)組語(yǔ)法計(jì)算屬性語(yǔ)法用數(shù)組的方法用計(jì)算屬性傳值綁定語(yǔ)法用在組件時(shí)這些類將被添加到根元素上面，這個(gè)元素上已經(jīng)存在的類不會(huì)被覆蓋。這些方法如下過(guò)濾和排序 vue.js Class 與 Style 綁定 據(jù)綁定一個(gè)常見需求是操作元素的 class 列表和它的內(nèi)聯(lián)樣式用v-bind綁定 *綁定語(yǔ)法 有 對(duì)象語(yǔ)法 ...
摘要：學(xué)完的基礎(chǔ)語(yǔ)法之后，練手一下，從最基本的留言板開刀吧。功能不多，主要為了熟悉的基礎(chǔ)語(yǔ)法使用。 學(xué)完vue的基礎(chǔ)語(yǔ)法之后，練手一下，從最基本的留言板開刀吧。功能不多，主要為了熟悉vue的基礎(chǔ)語(yǔ)法使用。詳細(xì)vue教程請(qǐng)移步vue.js 2.0 技術(shù)框架 1.vue.js 2.0 2.bootstrap 語(yǔ)法概述 這里只寫一點(diǎn)此例子用到的一些語(yǔ)法知識(shí)，詳細(xì)API請(qǐng)移步：vue 2.0 a...
閱讀 2415·2021-09-01 10:41
閱讀 1440·2019-08-30 14:12
閱讀 507·2019-08-29 12:32
閱讀 2856·2019-08-29 12:25
閱讀 2934·2019-08-28 18:30
閱讀 1704·2019-08-26 11:47
閱讀 973·2019-08-26 10:35
閱讀 2588·2019-08-23 18:06
