寫在前面：
利用腳手架搭建乙個vue專案，然後開始學習。過程省略
正式內容：
現代開發模式
傳統開發模式
代表vue/react
jquery
特點20%表現層
80%表現層
現代開發模式的代表就是vue/react,與傳統開發模式的大部分精力在class和樣式中，vue只有20%的表現層、核心在資料層
檢視層 <——> 資料層
vue可以檢視層和資料層交換資料
前端渲染 vs 後端渲染
前端渲染
後端渲染
降低伺服器負擔
seo頻寬壓力小
相容性好
使用者體驗好
安全性高
vue的核心一定是資料
建立乙個vue物件
let vm =
newvue(}
)
"id"
>
顏色：}
年齡：}
div>
}是指令、v-bind在標籤的屬性使用值，不需要雙括號
}歲">}strong
>
// 錯誤寫法}strong
>
// 正確寫法}strong
>
// 簡寫
可以用於任何屬性，有兩個屬性有另外的寫法
class、style
v-model
用來做資料** 雙向**繫結
主要用於輸入元件
type
='text'
v-model
='name'
>
>
}p>
實際就是資料（data）和input之間的雙向繫結
注意：v-model進來的都是字串
v-text
覆蓋裡面的所有內容 不常用
v-html
可以直接輸出innerhtml
vue事件
v-on
簡稱是@
v-show/v-if
v-show=「true」 顯示、false隱藏
v-if 也可以
v-show
v-if
display
刪除元素
v-for
作用就是迴圈
在想要的元素上使用v-for
使用者名稱：}
}.使用者名稱：}
陣列json
字串數字
v-for="item\index in array
v-for=「val,key in json」
v-for=「char,index in str」
v-for=「i in num」
虛擬dom——json
]}
不能變不能重複
指令v 使用
1.v text 用來設定當前元素的文字內容，相當於dom物件的 innertext或textcontent 2.v html 更新dom物件的 innerhtml 3.v bind 通過v bind為html元素繫結屬性，使用data中提供的資料 因為 v bind title 這種使用方式很繁瑣...
Vue內建v 指令
什麼是指令 是一種特殊的自定義行間屬性 也就是在html標籤內寫 指令的職責就是當其表示式的值改變時相應地將某些行為應用到dom上，在vue中，指令以 v 開頭 v bindv bind 動態繫結資料。簡寫為 以後的 class v onv on 繫結時間 簡寫為 例 click v textv t...
V 指令，細節補充
v for遍歷物件的時候 v for item in person 這裡item是person物件裡面的value值 而v for item，key in person 這裡的 key 第二個引數是value的key。屬性 當v for item，key，index in person 這裡的ind...