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