new vue() 方法用於建立乙個vue例項
乙個vue應用由至少乙個vue例項作為根元件 以及可選的多個巢狀元件組成
vue 使用基於html的模板語法 ，當然也可以不用模板直接寫渲染(render)函式使用jsx語法，此處不做討論
文字插值
在html文字中標記可能發生變化的位置的}語法 —— mustache語法
只要元素的文字內容中某個位置可能隨變數自動變化時就要用被繫結語法標記
如何:1.}在newvue載入時會掃瞄到}的位置 並在資料模型data中查詢同名變數 用變數值自動代替}的位置
2. }可以理解為 模板字串中的${}可以寫任何乙個有返回值的js表示式
3. }會將資料解釋為普通文字 而非html**，如果要輸出html需要使用 v-html指令
屬性插值
在html 標籤內 標記可能發生變化的屬性值時 應當使用v-bind指令
對於值為布林值的狀態屬性 如果值為null undefined false 該屬性不會出現在渲染出來的元素中
指令是 v- 開頭的 為html提供增強功能的特殊屬性 如變數分支迴圈等
v-bind 用於繫結元素的屬性值
}只能用於繫結元素的內容的變化 不能繫結元素屬性值的變化
當乙個元素的屬性值可能隨變數變化時
v-bind:屬性名=「變數/表示式」 簡寫為 :屬性名=「變數/表示式」
v-show 控制乙個元素根據條件顯示隱藏:
《元素 v-show=「條件表示式」>
條件表示式結果返回bool true顯示 false隱藏
v-if v-else 兩個元素根據條件二選一顯示隱藏:
《元素1 v-if=「條件表示式」> 《元素2 v-else>
每當newvue掃瞄頁面時 或者data中變數發生更改時 都會自動計算v-if=後的條件表示式 如果v-if="true"則顯示元素1 刪除元素2 否則顯示元素2刪除 元素 1
v-if v-else-if … v-else 多個元素根據條件多選一
《元素1 v-if=「條件1」>
《元素2 v-else-if=「條件2」>
《元素3 v-else-if=「條件3」>
…《元素n v-else>
當乙個條件成立時保留此元素 刪除其餘元素
多個元素之間禁止插入其他元素
根據陣列反覆生成多個相同結構的元素
《元素 v-for="(元素值，下標)of 陣列":key=「下標」>
當new vue掃瞄到v-for時 會找到data中指定的陣列 遍歷陣列中每個元素
每遍歷乙個元素 就會重複建立乙個當前html元素
每次遍歷都會獲得正在遍歷的陣列元素的值和下標 元素值和下標可在當前html元素及其子元素中用於繫結語法
之後如果陣列中的值發生變化會自動更新所有v-for生成的html的元素內容
每次陣列發生變化時都會把所有元素重新生成一次
解決方法是：使用v-for時必須同時為元素繫結:key="i"屬性為了給元素乙個唯一的標識 當陣列中元素發生變化時根據此標識只找到需要更新的哪乙個對應元素即可提高效率
v-for遍歷指令中 不能用下標修改陣列中元素 因為下標不會被vue監控
所有對陣列的操作必須通過函式
修改某個陣列元素的值 arr.splice(start,count,value1,…)v-html 用於在html的文字內容中繫結一段html**片段
v-once用於一次性繫結變數 首次繫結成功後 變數值改變 文字不會變化
v-on用於繫結事件
《元素 v-on:事件名=「處理函式(實參值)」>
簡寫為 《元素 @事件名=「處理函式(實參值)」>
事件委託v-pre 阻止}中的內容被vue編譯
v-model 資料雙向繫結
v-model實質上是語法糖 凡是繫結可修改的表單元素的內容都要使用雙向繫結
普通的指令或}繫結都是單向的 頁面上即使修改表單內容也並不會返回
1.繫結文字框或者文字域的內容
標準寫法:
簡寫: 不需要加:屬性
所有帶v-model的表單元素都會被自動繫結事件處理函式 自動變為
2.繫結selec元素
3.繫結radio元素
當m->v繫結顯示時會用變數值和所在radio元素的value作比較
動態引數
一些指令能夠接收乙個引數
vue2.6 開始 可以用[變數/表示式]作為乙個指令的引數
該變數/表示式值為最終的引數名稱 string型別 異常值為null此時移除此次繫結，其餘情況則會觸發警告
修飾符
在指令引數後用 . 指明的特殊字尾 用於指出乙個指令應該以特殊方式繫結
.prevent使 v-on繫結的事件呼叫 event.preventdefault()
縮寫
v-bind 可以省略
v-on 可以用 @代替
避免使用者短暫看到 } 語法
如果 newvue出現延遲載入 網頁中的 }就會被使用者短暫看到
解決方法:
1.隱身斗篷 為要隱藏的元素新增 v-cloak屬性
因為v-cloak自己不帶認可隱藏的樣式值 所以需要手動在頁面中新增
[v-cloak]
原理:當newvue()載入完後 會自動找到帶v-cloak屬性的元素 並自動移除此屬性
2.用v-text=${}代替}繫結變數
《元素 v-text="要拼接的字串內容"> v-text是屬性 使用者看不到
如果大範圍的元素避免被看到} 首選 v-cloak
如果是單個元素避免被看到} 使用v-text
自定義指令
vue.directive(「指令名稱」,
})new vue掃瞄介面時 發現標有自定義指令的元素 就會自動觸發inserted函式
vue學習筆記（一）vue基本語法1
1 該指令後面不需要跟任何表示式，可以直接使用 2 該指令表示元素和元件只渲染一次，即使元件資料改變了展示出來的頁面中也不會改變 1 有時候，從伺服器中請求的資料是乙個html 此時如果直接用mustache語法直接包裹的話輸出的是 本身。如果希望解析html 的話就需要v html指令 2 使用方...
vue 基本語法
一 vue資料繫結 繫結屬性 迴圈渲染資料 1.資料繫結 1 變數的繫結 表示式 2 物件的繫結 3 其他的繫結指令 v html指令 繫結當前元素的html標籤，可自動解析值裡面的html標籤 v text指令 將值放進去，不會解析裡面的html標籤，也可進行變數的綁值 一 1.資料繫結 2.繫結...
vue基本語法
開始vue的征程啦，首先呢，你需要安裝一下vue的環境 等我閒下來打算寫一下教程，當然csdn也有很多優秀的教程，大家可以參照配置一下 vue需要利用es6的一些特性，之後就可以愉快的開始vue專案的開發了。今天先介紹vue的一些基本語法 還是以 方式展示吧，需要注意的是，在終端下，利用npm ru...