01

VUE-基礎 第一天

自我介紹

• 周淑剛
• 1229127923
• 工做經歷：java開發 Android開發 前端開發 傳智播客講師

課程介紹

• vue基礎
• vue項目
• 團隊實戰
• node中間層

vue是什麼

• 是一個JS框架
• jquery 是一個庫 bootstrap ui框架
• 庫：提供一些API 工具函數 須要咱們主動調用
• 框架：提供一套完整的解決方案 不須要主動的調用API 按照框架的約定完成功能
• 學習框架：學習它的約定 規則。

vue作什麼

• 網站開發 適合作SPA（single page application）類型的網站開發
  • 原理使用的技術 history.pushState() hash 地址欄#後的標識
• 傳統網站 多個頁面組成的網站 也可使用

vue的特色

• 數據驅動視圖->修改數據->視圖修改 不須要操做dom
• 雙向數據綁定->表單數據
• 使用M-V-VM開發思想 （MVC開發思想，分層開發思想，提升可維護性）
• 不支持IE8如下包含IE8

vue爲何學習它

• vue react angular
• angular 市場佔有率 版本有斷層 typescript
• react 如今使用最普遍的流行框架
• vue 最熱的流行框架 入門簡單

vue基礎-安裝

• 直接下載
• cdn地址
• npm 安裝 npm i vue

vue基礎-體驗

<div id="app">
<p>
  {{message}}
</p>
</div>
<script>
const message = 'hi vue'
const vm = new({
  el:'#app',
  data:{message}
})
</script>
複製代碼

vue-選項-el

• 做用：指定管理的視圖區域
• 指定方式：經過選擇器 或者 dom對象
• 不能指定 body html 標籤作爲視圖

vue-選項-data

• 做用 指定vm中的響應式數據
• 注意：數據的使用須要提早申明

vue-選項-methods

• 做用：定義函數 提供給vm實例去使用
• 注意：fn(){} 推薦寫法 不推薦使用箭頭函數
• 函數中的this就是vm實例

vue-術語-插值表達式

• 在視圖中渲染簡單數據
• 可使用 運算及函數 可是不建議使用
• 不能使用 分支循環語句 定義變量 ..

vue-術語-指令

• 以v-開頭的特殊屬性 vue支持的個數是有限的
• 加強元素標籤的功能

vue基礎-指令-v-text&v-html

• 做用都是替換使用該指令的元素的內容
• text 是文本輸出 html 是html格式輸出
• 擴展：xss攻擊

vue基礎-指令-v-if&v-show

• 切換元素的顯示和隱藏
• v-if 是移除 添加
• v-show 顯示和隱藏 display:none
• v-if 一次渲染的時候 v-show 頻繁切換的時候使用

vue基礎-指令-v-on

• 在vue中綁定事件
• 語法： v-on:事件名.事件修飾符=「fn()」 v-on能夠簡寫爲@
• 注意：若是須要使用事件對象 固定寫法 $event
• 事件修飾符：prevent once

vue基礎-指令-v-bind

• 給任何屬性綁定數據
• 語法： v-bind:屬性名稱=「數據名稱」 簡寫 v-bind 去掉便可
• class style 特殊 待會再講

vue基礎-指令-v-for

• 變量數組和對象
• 數組 語法： v-for="(item,i) in list"
• 對象 語法： v-for=「(v,k,i) in obj」
• 補充 ： 在每一項數據 追加一個屬性 :key=「惟一標識」 建議若是有ID使用ID沒有考慮索引

vue基礎-指令-v-model

• 只提供給表單元素進行數據雙向綁定
• 這是一個語法糖：原理 經過v-bind綁定input的value屬性，監聽input事件觸發時獲取input的值在去修改data中的數據