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