1.Vue官網
https://cn.vuejs.org
2.引入
通過script標籤引入vue時最好放在head裡，避免抖屏的情況。
Tips：抖屏是指頁面稍微大些，刷新頁面會出現{{ }}的樣式十分醜陋
3.實例
元素通過id 和new Vue對象的 el 進行綁定，該id對應一個掛載點，Vue實例只會處理掛載點的內容；模板是指可以將掛載點的內容寫入template標籤中，同樣會生效。
{{msg}} 這樣的語法叫做差值表達式，表示將某元素插入到頁面中
<code><
div
id
="root"
><
h1
>luhao {{msg}}<
h1
>div
><
script
>
new
Vue({el
:"#root"
,data
:{msg
:"hello world"
，number
:123
} })script
> /<code>
1.v-text：直接在頁面上顯示
<code><
h1
v-text
="number"
>h1
>/<code>
text效果：
2.v-html：以html在頁面上顯示
<code><
h1
v-html
="number"
>h1
>/<code>
html效果：
3.點擊觸發事件 v-on:click
v-on:click=“點擊觸發的方法名”，再在methods中寫上對應的方法名稱，即可完成點擊觸發事件
v-on 可以簡寫成 @
4. v-bind: 屬性綁定
<code><
div
id
="root"
><
div
v-bind:title
="title"
>hello worlddiv
>div
><
script
>
new
Vue({el
:"#root"
,data
:{title
:"我是可變title"
} })script
>/<code>
當需要進行數據對象綁定時，比如將title與data中的title綁定，需要用到v-bind指令。
效果如下：
v-bind: 可以簡寫成 :
5.雙向數據綁定 v-model
屬性綁定只是單向屬性綁定，並不能通過頁面改變Vue對象裡的值，如果要實現雙向的數據綁定，可以通過給v-model
<code><
div
id
="root"
><
div
v-bind:title
="title"
>hello worlddiv
>div
><
input
v-model
="content"
/><
div
>{{content}}div
><
script
>
new
Vue({el
:"#root"
,data
:{title
:"我是可變title"
，content
:"我是綁定content"
} })script
>/<code>
效果如下：
6.計算屬性 computed
當需要對多個值進行計算時，可以使用computed獲取最終結果。例如：要獲得全名，將姓和名拼接起來。
<code><
div
id
="root"
> 姓:<
input
v-model
="firstName"
/> 名:<
input
v-model
="lastName"
/><
div
>{{fullName}}div
><
div
>{{count}}div
><
script
>
new
Vue({el
:"#root"
,data
:{firstName
:''
,lastName
:''
，count
:0
} ，computed
:{fullName
:function
() {return
this
.firstName +' '
+this
.lastName }， ,watch
:{firstName
:function
() {this
.count++ },lastName
:function
() {this
.count++ } } } })script
>/<code>
效果如下：
7.偵聽器 watch
當需要對某個對象的改變進行偵聽時，可以通過watch來完成。例如：要計算姓和名改變的次數。（代碼見6：計算屬性）
效果如下：
8.條件判斷 v-if
當需要通過點擊按鈕對div內的對象進行判斷時，如果對象為顯示狀態就隱藏起來，如果對象是隱藏狀態就顯示它，可以通過v-if來處理。
<code><
div
id
="root"
><
div
v-if
="show"
>hello worlddiv
><
button
@click
="handleClick"
>togglebutton
>div
><
script
>
new
Vue({el
:"#root"
,data
:{show
:true
} ，methods
:{handleClick
:function
() {this
.show = !this
.show; } } })script
>/<code>
效果如下：
點擊前：
點擊後：
9.顯示和隱藏 v-show
當需要對元素進行顯示和隱藏時，可以通過v-show來實現，基本功能和v-if類似，但是不會銷燬dom上的對象，只是將其隱藏起來，相當於加了一個display:none的屬性，和v-if相比性能較高，如果是需要頻繁切換隱藏顯示狀態的元素，使用v-show比較好。
hello world
10.遍歷 v-for
當需要遍歷一個列表裡的值時，可以用v-for。index為每個元素的編號，可以作為key值，::key可以提升數據加載的效率。
<code><
div
id
="root"
><
ul
><
li
v-for
="(item,index) of list"
:key
="item"
>{{item}}li
>ul
>div
><
script
>
new
Vue({el
:"#root"
,data
:{list
:[1
,2
,3
] } })script
>/<code>
4.實現簡易TodoList
TodoList：相當於一個任務列表，要實現的功能是通過頁面添加刪除任務列表。具體實現可以查看代碼以及註釋，主要原理是通過發佈訂閱模式實現父組件和子組件的屬性傳值來對數組進行操作。
<code><
div
id
="root"
><
div
><
input
v-model
="inputValue"
/><
button
@click
="handleSubmit"
>提交button
>div
><
ul
><
todo-item
v-for
="(item,index) of list"
:key
="index"
:content
="item"
:index
="index"
@delete
="handleDelete"
>todo-item
>ul
>div
><
script
>Vue.component(
'todo-item'
, {props
: ['content'
,'index'
],template
:'
methods
: {handleClick
:function
() {this
.$emit('delete'
,this
.index) } } })new
Vue({el
:"#root"
,data
: {inputValue
:''
,list
: [] },methods
: {handleSubmit
:function
() {this
.list.push(this
.inputValue)this
.inputValue =''
},handleDelete
:function
(index
) {this
.list.splice(index,1
) } } })script
> /<code>實際效果：
增加list:
點擊後刪除：
