Vue基本使用
Vue.js是一款流行的開源JavaScript前端框架，旨在更好地組織與簡化Web開發。Vue所關注的核心是MVC模式中的視圖層，同時，它也能方便地獲取數據更新，並通過組件內部特定的方法實現視圖與模型的交互。由尤雨溪在2014年2月發布的。
一 基本語法 1. vue的使用要從創建Vue對象開始
let vm = new Vue();
2.創建vue對象
創建vue對象的時候，需要傳遞參數，是json對象，json對象對象必須至少有兩個屬性成員
vm = new Vue({
el:"#app",
data: {
methods:{},
watch:{},
filters:{},
el:設置vue可以操作的html內容范圍，值就是css的id選擇器。
data: 保存vue.js中要顯示到html頁面的數據。
methods:定義函數。
watch:監聽屬性
filters:定義過濾器。
3.設置控制范圍
vue.js要控制器的內容外圍，必須先通過id來設置。
>
4 簡單示例
|
1
2
3
4
5
6
7
8
9
|
<meta charset=
"UTF-8"
>
<title>Title</title>
<!--導入vue.js-->
<p id=
"app"
>
{{message}}
</p>
|
效果如下：
二 Vue.js的M-V-VM思想
MVVM 是 Model-View-ViewModel<喎�"/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPiC1xMv10LSjrMv8ysfSu9bWu/nT2sewtsu/qreitcS83Lm5xKPKvaGjPGJyIC8mZ3Q7PHN0cm9uZz5Nb2RlbDwvc3Ryb25nPiDWuLT6tcS+zcrHdnVlttTP87XEZGF0Ycr00NTA78PmtcTK/b7doaPV4sDvtcTK/b7d0qrP1Mq+tb3Ss8Pm1tChozxiciAvJmd0OzxzdHJvbmc+Vmlldzwvc3Ryb25nPiDWuLT6tcS+zcrHdnVl1tDK/b7d0qrP1Mq+tcRIVE1M0rPD5qOs1Np2dWXW0KOs0rKzxtauzqombGRxdW87ytPNvMSjsOUmcmRxdW87IKGjPGJyIC8mZ3Q7PHN0cm9uZz5WaWV3TW9kZWw8L3N0cm9uZz4g1ri0+rXEysd2dWUuanPW0M7Sw8ex4NC0tPrC68qxtcR2bbbUz/PBy6Osy/zKx3Z1ZS5qc7XEusvQxKOsuLrU8MGsvdMgVmlldyC6zSBNb2RlbKOssaPWpMrTzby6zcr9vt21xNK71sLQ1KOsy/nS1Meww+a0+sLr1tCjrGRhdGHA78PmtcTK/b7dsbvP1Mq+1tBwserHqdbQvs3Kx3ZtttTP89fUtq/N6rPJtcShozwvcD4KPHA+PGltZyBzcmM9"https://www.2cto.com/uploadfile/Collfiles/20190429/201904291855211003.png" alt="\" />
再來一個示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<meta charset=
"UTF-8"
>
<title>Title</title>
<p id=
"app"
>
<!-- 在雙標簽中顯示數據要通過 {{ }} 來實現-->
{{name}}
</p><p>{{age}}</p>
<!-- 在表單輸入框中顯示數據要使用模板語法 v-model 來完成-->
<input type=
"text"
v-model=
"name"
>
<p></p>
|
效果如圖
要是在輸入框中輸入，則html中的那么對應的值也會跟着改變
在瀏覽器中可以在 console.log通過 vm對象可以直接訪問el和data屬性,甚至可以訪問data里面的數據
console.log(vm.$el) # #box vm對象可以控制的范圍
console.log(vm.name); 顯示name的值
也可以通過console直接修改data中的值，頁面也會跟着改變
總結
1. 如果要輸出data里面的數據作為普通標簽的內容，需要使用{{ }} 用法： vue對象的data屬性： data:{
name:"小明",}
標簽元素： {{ name }}
2. 如果要輸出data里面的數據作為表單元素的值，需要使用vue.js提供的元素屬性v-model 用法： vue對象的data屬性：
data:{ name:"小明", }
表單元素：
三 顯示數據
顯示數據的一般規則：
在雙標簽中顯示數據要通過{{ }}來完成數據顯示
在表單輸入框中顯示數據要使用v-model來完成數據顯示
輸出html代碼,要使用v-html來輸出.v-html必須在html標簽里面作為屬性寫出來.
一下來個示例看看
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<meta charset=
"UTF-8"
>
<title></title>
<p id=
"app"
>
{{title}}
{{ url1 }}
用{{}}顯示出來的html代碼則會按原始字符串輸出 :
{{ img }} <br>
以下是圖片 <br>
<span v-html=
"img"
></span> <br ><!--=
""
在此用data中的img來顯標簽屬性值，即就是把img原樣放入span中=
""
--=
""
>
</p>
|
效果如下：
在輸出內容到普通標簽的使用{{ }}還支持js代碼。
|
1
2
3
4
5
6
7
8
9
10
|
{{str1.split(
""
).reverse().join(
""
)}}
<!--支持js的運算符-->
{{num1+
3
}}
<!-- js還有一種運算符,三元運算符,類似於python里面的三元表達式
三元運算符的語法:
判斷條件 ? 條件為
true
: 條件為
false
的結果
python 三元表達式[三目運算符]的語法:
a
if
條件
else
b
-->
num1和num2之間進行比較,最大值:{{ num2>num1?num2:num1 }}
|
四 常用指令
指令 (Directives) 是帶有“v-”前綴的特殊屬性。每一個指令在vue中都有固定的作用。
在vue中，提供了很多指令，常用的有：v-if、v-model、v-for等等。
指令會在vm對象的data屬性的數據發生變化時，會同時改變元素中的其控制的內容或屬性。
因為vue的歷史版本原因，所以有一部分指令都有兩種寫法：
|
1
2
3
4
|
vue1.x寫法 vue2.x的寫法
v-html ----> {{ }} # vue2.x 也支持v-html
v-bind:屬性名 ----> :屬性
v-on:事件名 ----> @事件名
|
4.1 操作屬性
格式：
|
1
|
<標簽名 :標簽屬性=
"data屬性"
><!--標簽名-->
|
|
1
2
3
4
5
6
7
8
9
10
11
|
<meta charset=
"UTF-8"
>
<title>Title</title>
<p id=
"index"
>
</p><p>
<input :type=
"type"
placeholder=
"請輸入密碼"
>
<button
@click
=
"type='text'"
>顯示密碼</button>
</p>
<p></p>
|
點擊顯示密碼
4.2 事件綁定
有兩種事件操作的寫法，@事件名 和 v-on:事件名
|
1
2
|
<button v-on:click=
"num++"
>按鈕</button> <!-- v-on 是vue1.x版本的寫法 -->
<button
@click
=
"num+=5"
>按鈕
2
</button>
|
下面給button按鈕綁定點擊事件，實現num的加減，點擊“+”實現加1操作，點擊“-” 調用sub函數實現減1操作
|
1
2
3
4
5
6
7
8
9
10
|
<meta charset=
"UTF-8"
>
<title>Title</title>
<p id=
"box"
>
<button
@click
=
"num++"
>+</button>
<input type=
"text"
v-model=
"num"
>
<button
@click
=
"sub"
>-</button>
</p>
|
4.3 操作樣式 4.3.1 控制標簽class類名
格式：
|
1
|
<h1 :
class
=
"值"
>元素 值可以是對象、對象名、數組</h1>
|
方式一：
添加class類名，值是一個對象 { class類1:布爾值變量1, class類2:布爾值變量2, }
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<meta charset=
"UTF-8"
>
<title>Title</title>
<style>
.box1{
color: red;
border: 1px solid #
000000
;
}
.box2{
font-size: 32px;
}
</style>
<p id=
"box"
>
</p><p :
class
=
"{box1:myclass1}"
>一個段落</p>
<p
@click
=
"myclass3=!myclass3"
:
class
=
"{box1:myclass2,box2:myclass3}"
>一個段落</p>
<p></p>
|
方式二：
上面的代碼可以:class的值保存到data里面的一個變量，然后使用該變量作為:class的值
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<meta charset=
"UTF-8"
>
<title>Title</title>
<style>
.box4{
}
.box5{
color: green;
}
</style>
<p id=
"app"
>
<button
@click
=
"mycls.box4=!mycls.box4"
>改變背景</button>
<button
@click
=
"mycls.box5=!mycls.box5"
>改變字體顏色</button>
</p><p :
class
=
"mycls"
>第二個段落</p>
<p></p>
|
效果如圖
方式三
批量給元素增加多個class樣式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<meta charset=
"UTF-8"
>
<title>Title</title>
<style>
.box6{
}
.box7{
color: green;
}
.box8{border: 3px solid blue;}
</style>
<p id=
"app"
>
</p><p :
class
=
"[mycls1,mycls2]"
>第三個段落</p>
<p></p>
|
總結：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
給元素綁定
class
類名，最常用的就是方式二。
vue對象的data數據：
data:{
myObj:{
complete:
true
,
uncomplete:
false
,
}
}
html元素：
<p
class
=
"box"
:
class
=
"myObj"
>
2222
</p>
最終瀏覽器效果：
<p
class
=
"box complete"
>
2222
</p>
|
4.3.2 控制標簽style樣式
格式1：值是json對象，對象寫在元素的:style屬性中
|
1
2
3
4
5
6
7
|
標簽元素：
<p :style=
"{color: activeColor, fontSize: fontSize + 'px' }"
></p>
data數據如下：
data: {
activeColor:
'red'
,
fontSize:
30
}
|
格式2：值是對象變量名，對象在data中進行聲明
|
1
2
3
4
5
6
7
8
9
|
標簽元素：
<p v-bind:style=
"styleObject"
></p>
data數據如下：
data: {
styleObject: {
color:
'red'
,
fontSize:
'13px'
}
}
|
格式3：值是數組
|
1
2
3
4
5
6
7
8
9
10
11
12
|
標簽元素：
<p v-bind:style=
"[style1, style2]"
></p>
data數據如下：
data: {
style1:{
color:
"red"
},
style2:{
background:
"yellow"
,
fontSize:
"21px"
}
}
|
4.4 條件渲染指令
vue中提供了兩個指令可以用於判斷是否要顯示元素，分別是v-if和v-show。
4.4.1 v-if
|
1
2
3
4
5
6
7
|
標簽元素：
<!-- vue對象最終會把條件的結果變成布爾值 -->
<h1 v-
if
=
"ok"
>Yes
data數據：
data:{
ok:
false
// true則是顯示，false是隱藏
}</h1>
|
4.4.2 v-else
v-else指令來表示 v-if 的“else 塊”，v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會被識別。
|
1
2
3
4
5
6
7
|
標簽元素：
<h1 v-
if
=
"ok"
>Yes
</h1><h1 v-
else
=
""
>No
data數據：
data:{
ok:
false
// true則是顯示，false是隱藏
}</h1>
|
4.4.3 v-else-if
可以出現多個v-else-if語句，但是v-else-if之前必須有一個v-if開頭。后面可以跟着v-else，也可以沒有。
|
1
2
3
4
5
6
7
8
|
標簽元素：
<h1 v-
if
=
"num==1"
>num的值為
1
</h1><h1 v-
else
-
if
=
"num==2"
>num的值為
2
</h1><h1 v-
else
=
""
>num的值是{{num}}
data數據：
data:{
num:
2
}</h1>
|
4.4.4 v-show
用法和v-if大致一樣，區別有以下兩點：
（1）v-show后面不能有v-else或者v-else-if
（2）v-show隱藏元素時，使用的是display:none來隱藏的，而v-if是直接從HTML文檔中移除（DOM操作中的remove）
|
1
2
3
4
5
6
|
標簽元素：
<h1 v-show=
"ok"
>Hello!
data數據：
data:{
ok:
false
// true則是顯示，false是隱藏
}</h1>
|
4.5 列表渲染指令
在vue中，可以通過v-for指令可以將一組數據渲染到頁面中，數據可以是數組或者對象。
示例一：數據是數組
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<meta charset=
"UTF-8"
>
<title>Title</title>
<p id=
"app"
>
<!--i是列表的每一個元素-->
</p><li v-
for
=
"book in book_list"
>{{book.title}}
<!--i是列表的每一個元素，j是每個元素的下標-->
</li><li v-
for
=
"(book, index) in book_list"
>第{{ index+
1
}}本圖書：{{book.title}}
<p></p>
</li>
|
示例二：數據是對象
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<meta charset=
"UTF-8"
>
<title>Title</title>
<p id=
"app"
>
<!--i是每一個value值-->
</p><li v-
for
=
"value in book"
>{{value}}
<!--i是每一個value值,j是每一個鍵名-->
</li><li v-
for
=
"value,attr in book"
> {{attr}}:{{value}}
<p></p>
</li>
|