view 模板
model 資料
vue的工作就是把提供給它的資料和模板渲染出來
1.m model
2.v view
3.vm viewmodel
簡化專案
方便維護
考慮資料
**量少了
維護方便了
業務邏輯更清晰了
指令 編寫模板規則
(渲染模板)例項
(模板復用)元件
(管理頁面跳轉的)vue-router路由
(全域性資料管理)vuex
如何編寫模板
如何管理資料
v-model 雙向繫結指令（用它繫結的變數 既可以展示那個變數 也可以改變那個變數）
} 插值表示式（它只是用來輸出展示的 單向繫結）
v-bind: 單向繫結 （可以繫結到html的任意乙個屬性上）
v-html 繫結html 元素
v-text 繫結文字
v-for=「迴圈表示式」
v-for
="迴圈的專案 in 要迴圈的陣列或物件"
>
div>
如果要獲取到 陣列的下標 或者物件key
v-for
="(對應的內容, 下標或者物件的key) in 要迴圈的陣列或物件"
>
div>
如果迴圈的是乙個物件 第三個引數是下標 物件的下標 vue生成的第三個引數
v-for
="(對應的內容, key, 下標) in 物件"
>
div>
style display: block; display:none;
v-if (存在或不存在)
html元素要不要存在dom裡
v-show
="true"
>
boxdiv
>
顯示v-show
="false"
>
boxdiv
>
隱藏v-if
="true"
>
boxdiv
>
在dom 存在這個元素 (新增元素)
v-if
="false"
>
boxdiv
>
在dom 不存在這個元素(刪除元素)
v-show
="可以繫結變數"
>
boxdiv
>
v-if
="可以繫結變數"
>
boxdiv
>
在什麼情況下使用v-if （如果不用頻繁切換 使用v-if）
在什麼情況下使用v-show （如果你的元素需要頻繁的顯示或隱藏使用v-show）
v-if 如果為true 在dom 中元素既存在 為false 就不存在
v-if 和 v-show 如果用的好可以解決效能問題 用的不好效能就會有問題
v-on 指令來繫結事件
// 只要是html原生的事件都可以繫結
// 修改變數
v-on:click
="a = 200"
>
按鈕button
>
// 呼叫方法
v-on:click
="test"
>
按鈕button
>
v-on:事件名稱
="呼叫的方法"
>
按鈕button
>
在呼叫方法時 如果使用了括號，那麼處理函式中收到的引數是括號中傳遞過去的引數
如果不使用括號 處理函式中將收到乙個引數 （事件物件）
如果呼叫方法時 使用了括號 那麼獲取元素的event 物件就需要在方法的括號裡新增乙個$event 這樣就可以獲取到
事件# vm 框架 viewmodel
view 模板
model 資料
vue的工作就是把提供給它的資料和模板渲染出來
1.m model
2.v view
3.vm viewmodel
簡化專案
方便維護
考慮資料
**量少了
維護方便了
業務邏輯更清晰了
指令 編寫模板規則
(渲染模板)例項
(模板復用)元件
(管理頁面跳轉的)vue-router路由
(全域性資料管理)vuex
如何編寫模板
如何管理資料
v-model 雙向繫結指令（用它繫結的變數 既可以展示那個變數 也可以改變那個變數）
} 插值表示式（它只是用來輸出展示的 單向繫結）
v-bind: 單向繫結 （可以繫結到html的任意乙個屬性上）
v-html 繫結html 元素
v-text 繫結文字
v-for=「迴圈表示式」
v-for
="迴圈的專案 in 要迴圈的陣列或物件"
>
div>
如果要獲取到 陣列的下標 或者物件key
v-for
="(對應的內容, 下標或者物件的key) in 要迴圈的陣列或物件"
>
div>
如果迴圈的是乙個物件 第三個引數是下標 物件的下標 vue生成的第三個引數
v-for
="(對應的內容, key, 下標) in 物件"
>
div>
style display: block; display:none;
v-if (存在或不存在)
html元素要不要存在dom裡
v-show
="true"
>
boxdiv
>
顯示v-show
="false"
>
boxdiv
>
隱藏v-if
="true"
>
boxdiv
>
在dom 存在這個元素 (新增元素)
v-if
="false"
>
boxdiv
>
在dom 不存在這個元素(刪除元素)
v-show
="可以繫結變數"
>
boxdiv
>
v-if
="可以繫結變數"
>
boxdiv
>
在什麼情況下使用v-if （如果不用頻繁切換 使用v-if）
在什麼情況下使用v-show （如果你的元素需要頻繁的顯示或隱藏使用v-show）
v-if 如果為true 在dom 中元素既存在 為false 就不存在
v-if 和 v-show 如果用的好可以解決效能問題 用的不好效能就會有問題
v-on 指令來繫結事件
// 只要是html原生的事件都可以繫結
// 修改變數
v-on:click
="a = 200"
>
按鈕button
>
// 呼叫方法
v-on:click
="test"
>
按鈕button
>
v-on:事件名稱
="呼叫的方法"
>
按鈕button
>
Vue學習筆記 01
漸進式框架vue 1 漸進式 根據開發的需求，可以靈活地選用所需的 功能 工具 進行開發，只關注圖層 view 2 vue框架兩個核心 1 響應的資料繫結 object.definedproperty 中的 setter getter 資料 該屬性不相容ie8 2 可組合的檢視元件 ui介面對映元件...
Vue學習筆記之01 Vue的特點
0.準備工作 vue的基本使用 new vue box 輸出50 輸出xiaolam div 以前的js做法 程式設計正規化 命令式程式設計 建立乙個div元素,設定id屬性 定義乙個變數message 將這個變數插入div元素中 如果修改了message的資料 就要重新將修改後的資料重新插入div...
vue學習01 安裝
一 專案搭建 一共2步 1.安裝前 你需要安裝node，並且切換成 的映象。2.搭建vue專案如下 vue.js 提供乙個官方命令列工具 可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需幾分鐘即可建立並啟動乙個帶熱過載 儲存時靜態檢查以及可用於生產環境的構...