第1章 Vue基礎(chǔ)語法
創(chuàng)建一個Vue實例
把vue.js放在head標簽里用script標簽引入相味，避免放在body里引起抖屏丰涉。
1552395200.jpg
引入vue.js庫一死，用new Vue（）函數(shù)創(chuàng)建一個實例
- el：讓vue實例去接管頁面上哪一個元素
- data：vue實例的數(shù)據(jù)放在這里面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">{{msg}}</div>
<script>
new Vue({
el:"#root",
data:{
msg:'hello world'
}
})
</script>
</body>
</html>
掛載點摘符，模板與實例
- 掛載點
掛載點就是vue里的el屬性對應的dom節(jié)點逛裤。
div標簽稱為vue實例的掛載點带族，因為el正好和div標簽的id對上蟀给，vue只會處理掛載點下面的內(nèi)容。 - 模板
掛載點內(nèi)部的內(nèi)容都叫模板內(nèi)容恬总。
<div id="root">
<h1>hello {{msg}}</h1>//模板內(nèi)容
</div>
模板除了可以放在掛載點后面寫之外肚邢，還可以放在vue實例里面寫：
<script>
new Vue({
el:"#root",
template:'<h1>hello {{msg}}</h1>',//模板內(nèi)容
data:{
msg:'world'
}
})
</script>
Vue實例中的數(shù)據(jù)骡湖，事件與方法
- 插值表達式
<h1>hello {{msg}}</h1>
{{mynumber}}//插值表達式
-
v-text（會進行一次轉(zhuǎn)義輸出純文本）
語法：v-text=""谆焊，雙引號是劃定界限的符號浦夷。
<h1 v-text="mynumber"> </h1>
h1的內(nèi)容由mynumber這個變量決定,v-text是vue的一個指令
劈狐，告訴h1要顯示的就是mynumber這個變量懈息。
<div v-text='msg'></div>
</div>
<script>
new Vue({
el:"#root",
data:{
msg:"<h1>hello</h1>"
v-text顯示內(nèi)容
-
v-html(不會轉(zhuǎn)義)
語法：v-html=""辫继，雙引號是劃定界限的符號姑宽。
<div id="root">
<h1 v-text="msg"></h1>
</div>
<script>
new Vue({
el:"#root",
data:{
msg:"<h1>hello</h1>"
}
})
</script>
顯示內(nèi)容
v-html顯示的內(nèi)容
-
v-on模板指令
語法：v-on:事件名稱="函數(shù)（方法）"，v-on：可以簡寫為@瘦穆，給模板上的標簽綁定事件赊豌。
//點擊hello,hello變成world
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<h1 v-text="content" @:click="handleClick"></h1>
/*給標簽綁定一個handleClick事件*/
</div>
<script>
new Vue({
el:"#root",
data:{
content:"hello"
},
methods:{//把函數(shù)定義在vue實例的methods屬性下
handleClick: function(){
this.content = 'world'
}
}
})
</script>
</body>
</html>
Vue中的屬性綁定和雙向數(shù)據(jù)綁定
-
v-bind:指令簡寫為“:”熙兔，把div標簽的title屬性和title數(shù)據(jù)項綁定
語法：v-bind：屬性="數(shù)據(jù)項"
注意：""里面放的不再是字符串，而是JS表達式(里面可以放字符串也可放變量)住涉。
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div v-bind:title="mydata">hello world</div>
</div>
<script>
new Vue({
el:"#root",
data:{
mydata:"this is hello world",
}
})
</script>
-
v-model雙向數(shù)據(jù)綁定
語法：v-model=""
單向綁定：數(shù)據(jù)決定頁面的顯示花沉，頁面無法決定數(shù)據(jù)里的內(nèi)容纳寂。
雙向綁定：互相決定
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div :title="title">hello world</div>
<input v-model="content"/>
<div>{{content}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
title:"this is hello world",
content:"this is a content"
}
})
</script>
image.png
Vue中的計算屬性和偵聽器
computed計算屬性watch監(jiān)聽數(shù)據(jù)變化
監(jiān)聽數(shù)據(jù)或者屬性的變化
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
姓：<input v-model="firstName">
名：<input v-model="lastName">
<div>{{fullName}}</div>
fullName定義在Vue實例computed屬性中忽媒，是一個計算屬性腋粥，通過別的屬性
計算出來的
好處是若計算該屬性的屬性沒有改變隘冲，每一次使用該屬性的時候展辞，會使用試一
次的緩存結(jié)果
fistName和lastName沒變罗珍，重新使用fullName的時候不會重新計算覆旱，而是
使用上一次的緩存結(jié)果
<div>{{count}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
firstName:'',
lastName:'',
count:0
},
computed:{
fullName:function(){
return this.firstName+' '+this.lastName
}
},
監(jiān)聽某一個數(shù)據(jù)的變化，一旦數(shù)據(jù)發(fā)生變化藕坯，就可以在
偵聽器里執(zhí)行相應的邏輯
watch:{
firstName:function(){
this.count ++
},
lastName:function(){
this.count ++
}
}
})
</script>
v-if炼彪，v-show與v-for指令
-
v-if 控制dom存在與否霹购，一次性操作選v-if
語法：v-if="數(shù)據(jù)" -
v-show控制dom顯示與否齐疙，多次操作選v-show贞奋， -
v-for控制一組數(shù)據(jù)轿塔，循環(huán)顯示在頁面上
語法：v-for=“(item,index) of items” ：key="index"
一般 js for in 是遍歷 key, 而 for of 遍歷 value勾缭。在 vue 里面應該沒區(qū)別
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if,v-show,v-for 指令</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
v-if控制div標簽刪除與否俩由，當show為true時刪除dom結(jié)構(gòu)，不顯示hello
<div v-if="show">hello world</div>
<button @click="handleClick">tonggle</button>
<ul>
v-for循環(huán)顯示出list列表里的值兜畸，：key值能更好的渲染咬摇，每次的key
值不能相同
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
show: false,
list:[1,2,3]
},
methods:{
handleClick:function(){
this.show = !this.show;
}
}
})
</script>
</body>
</html>
第1章總結(jié)
| Vue模板指令 | 語法 | 用處 |
|---|---|---|
| v-text | v-text=" "肛鹏，雙引號是劃定界限的符號 | 把數(shù)據(jù)作為文本輸出 |
| v-html | v-html=" " | 不轉(zhuǎn)義數(shù)據(jù)并輸出 |
| v-on | v-on:事件名稱="函數(shù)（方法）"龄坪，v-on：可以簡寫為@， | 給模板上的標簽綁定事件 |
| v-bind | v-bind：屬性="數(shù)據(jù)項"佛纫，簡寫為“:” | 進行屬性綁定 |
| v-model | v-model="" | 雙向數(shù)據(jù)綁定 |
| v-if | v-if="數(shù)據(jù)" | 控制dom存在與否总放，一次性操作選v-if |
| v-show | v-show="數(shù)據(jù)" | 控制dom顯示與否胆建，多次操作選v-show炬搭， |
| v-for | v-for=“(item,index) of items” ：key="index" js for in 是遍歷 key, 而 for of遍歷value。在 vue 里面應該沒區(qū)別 | 控制一組數(shù)據(jù)享完，循環(huán)顯示在頁面上 |
| Vue屬性 | 格式 | 用處 |
|---|---|---|
| el | el： | 指定掛載點 |
| data | data：{} | 存放vue實例的數(shù)據(jù) |
| methods | methods：{} | 定義函數(shù)般又，它需要手動調(diào)用才能執(zhí)行茴迁，而不像computed那樣萤衰，可以自動執(zhí)行預先定義的函 |
| computed | computed：{} | 計算屬性是以Vue的依賴追蹤機制為基礎(chǔ)的堕义，其試圖處理這樣的一件事情：當某一個數(shù)據(jù)（依賴數(shù)據(jù)）發(fā)生變化的時候，所有依賴這個數(shù)據(jù)的相關(guān)數(shù)據(jù)會自動發(fā)生變化腻菇，也就是自動調(diào)用相關(guān)的函數(shù)去實現(xiàn)數(shù)據(jù)的變動 |
| watch | watch：{} | 監(jiān)聽數(shù)據(jù)或者屬性的變化 |
第2章胳螟、Vue中的組件
TodoList功能開發(fā)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<li v-for="(item,index) of list" :key="index">
{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit: function(){
調(diào)用push方法讓list中增加一個數(shù)據(jù)
this.list.push(this.inputValue)
this.inputValue=""
}
}
})
</script>
</body>
</html>
image.png
TodoList中的組件拆分
- 組件：頁面中的某一部分
-
創(chuàng)建全局組件
把<li>標簽拆分成組件進行管理
- 通過Vue.component創(chuàng)建的組件叫做全局組件。在任何地方的模板里都可以使用
- 調(diào)用全局組件的時候可以通過屬性傳參筹吐，屬性的名字可以隨便取糖耸，不一定非得叫content，此處的屬性等于循環(huán)的每一項內(nèi)容item丘薛，通過此法嘉竟，可以把content傳給todoitem組件希坚，傳了之后不能直接使用个束，子組件必須先接受，用props接受從外部傳進來的屬性阱表。如下：
<todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>
<ul>
<todo-item></todo-item>//在此用組件
</ul>
Vue.component('todo-item',{
props:['content'],
template:'<li>{{content}}</li>'
})
-
創(chuàng)建局部組件
不能直接在父組件的模板里調(diào)用，必須在Vue實例中通過components先聲明
//var TodoItem里有個對象，對象里有個模板胯努。
var TodoItem={
template:'<li>item</li>'
}
new Vue({
el:"#root",
components:{
'todo-item':TodoItem
},
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item
v-for="(item ,ndex) of list"
:key="index"
:content="item"
><!-- //父組件通過屬性的形式給子組件todo-item傳參 -->
</todo-item>
</ul>
</div>
<script>
//創(chuàng)建組件的方法灰署，通過Vue.component定義的組件叫做全局組件，
//在任何地方模板里都可以使用
Vue.component("todo-item", {
props: ['content'],
//組件接受從外部傳進來的一個叫content的屬性
template: '<li>{{content}}</li>'
//定義一個組件叫todo-item肴茄，其內(nèi)容是item
})
//局部組件,如果想在Vue實例模板里調(diào)用棋凳，需要在最外層的Vue
//實例里通過components聲明
// var TodoItem = {
// template: "<li>item</li>"
// }
new Vue({
el:"#root",
// components:{
// 'todo-item':TodoItem
// },
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit: function(){
// 調(diào)用push方法讓list中增加一個數(shù)據(jù)
this.list.push(this.inputValue)
this.inputValue=""
}
}
})
</script>
</body>
</html>
組件與實例的關(guān)系
每一個vue的組件又是一個Vue的實例，組件就是實例，實例就是組件。所以任何一個Vue項目都是由千千萬萬個Vue實例組成的
Vue.component('todo-item',{
props:['content'],
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
alert('clicked')
}
}
})
實現(xiàn)效果：
1552570175(1).jpg
每一個組件里可以寫methods等尾组，證明每一個組件都是vue的實例
實現(xiàn)TodoList的刪除功能
在Vue中父組件向子組件傳值是通過屬性進行的呵萨。要實現(xiàn)子組件的刪除囱皿，必須在父組件里，把子組件對應的數(shù)據(jù)刪除。vue里通過發(fā)布訂閱模式實現(xiàn)子組件和父組件的通信分苇。
父組件循環(huán)顯示子組件的時候掏颊，可以額外在加一個參數(shù)等于循環(huán)的下標
<todo-item v-for="(item,index) of list"
:key="index"
:content="item"
:myindex="index"></todo-item>
子組件在content之后再加一個myindex盆偿，意思是除了從父組件接受到content之外還可以接受到下標求橄。
Vue.component('todo-item',{
props:['content','myindex'],
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
}
}
})
當子組件被點擊的時候，通知父組件，通過調(diào)用this.$emit(' ')方法拆内，觸發(fā)一個自定義的delete事件，事件中攜帶了下標值。
methods:{
handleClick:function(){
this.$emit('delete',this.myindex)
}
}
父組件監(jiān)聽子組件向外觸發(fā)的事件采够，監(jiān)聽到之后，執(zhí)行handleDelete函數(shù)，函數(shù)中可以接收到一個傳遞過來的參數(shù)子組件傳遞過來的下標，在父組件中寫一個handleDelete函數(shù)虏肾，把父組件list對應的下標內(nèi)容刪除吹埠，通過this.list.splice(myindex,1)從對應下標位置刪除掉一項。
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue),
this.inputValue=''
},
handleDelete:function(myindex){
this.list.splice(myindex,1)
}
}
})
全代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Todolist</title>
<script src="./vue.js"></script>
</head>
<body>
<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"
:myindex="index"
@delete="handleDelete"
></todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props:['content','myindex'],
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
this.$emit('delete',this.myindex)
}
}
})
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue),
this.inputValue=''
},
handleDelete:function(myindex){
this.list.splice(myindex,1)
}
}
})
</script>
</body>
</html>
