Vue (一) --- vue.js的快速入門使用
=-----------------------------------把如今的工做作好，才能幻想未來的事情，專一於眼前的事情，對於還沒有發生的事情而陷入無休止的憂慮之中，對事情毫無幫助，反而爲本身憑添了煩惱。css
1. vue.js的快速入門使用html
1.1 vue.js庫的下載
vue.js是目前前端web開發最流行的工具庫之一，由尤雨溪在2014年2月發佈的。前端
另外幾個常見的工具庫：react.js /angular.jsvue
官方網站：python
中文：https://cn.vuejs.org/react
英文：https://vuejs.org/git
官方文檔：https://cn.vuejs.org/v2/guide/github
vue.js目前有1.x、2.x和3.x 版本，咱們學習2.x版本的。web
1.2 vue.js庫的基本使用
在github下載：https://github.com/vuejs/vue/releasesajax
在官網下載地址： https://cn.vuejs.org/v2/guide/installation.html
vue的引入相似於jQuery，開發中可使用開發版本vue.js，產品上線要換成vue.min.js。
下圖是github網站下載的vue.js目錄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/vue.min.js"></script>
<script>
window.onload = function(){
// vue.js的代碼開始於一個Vue對象。因此每次操做數據都要聲明Vue對象開始。
var vm = new Vue({
el:'#app', // 設置當前vue對象要控制的標籤範圍。
data:{ // data是將要展現到HTML標籤元素中的數據。
message: 'hello world!',
}
});
}
</script>
</head>
<body>
<div id="app">
<!-- {{ message }} 表示把vue對象裏面data屬性中的對應數據輸出到頁面中 -->
<!-- 在雙標籤中顯示數據要經過{{ }}來完成 -->
<p>{{ message }}</p>
</div>
</body>
</html>
代碼執行效果：
總結：
1. vue的使用要從建立Vue對象開始
var vm = new Vue();
2. 建立vue對象的時候，須要傳遞參數，是json對象，json對象對象必須至少有兩個屬性成員
var vm = new Vue({
el:"#app",
data: {
數據變量:"變量值",
數據變量:"變量值",
數據變量:"變量值",
},
});
el:設置vue能夠操做的html內容範圍，值就是css的id選擇器。
data: 保存vue.js中要顯示到html頁面的數據。
3. vue.js要控制器的內容外圍，必須先經過id來設置。
<div id="app">
<h1>{{message}}</h1>
<p>{{message}}</p>
</div>
1.3 vue.js的M-V-VM思想
MVVM 是Model-View-ViewModel 的縮寫，它是一種基於前端開發的架構模式。
Model 指代的就是vue對象的data屬性裏面的數據。這裏的數據要顯示到頁面中。
View 指代的就是vue中數據要顯示的HTML頁面，在vue中，也稱之爲「視圖模板」 。
ViewModel 指代的是vue.js中咱們編寫代碼時的vm對象了，它是vue.js的核心，負責鏈接 View 和 Model，保證視圖和數據的一致性，因此前面代碼中，data裏面的數據被顯示中p標籤中就是vm對象自動完成的。
編寫代碼，讓咱們更加清晰的瞭解MVVM：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.min.js"></script>
<script>
window.onload = function(){
// 建立vm對象
var vm = new Vue({
el: "#app",
data: {
name:"大標題",
age:16,
},
})
}
</script>
</head>
<body>
<div id="app">
<!-- 在雙標籤中顯示數據要經過{{ }}來完成 -->
<h1>{{name}}</h1>
<p>{{age}}</p>
<!-- 在表單輸入框中顯示數據要使用v-model來完成，模板語法的時候，咱們會詳細學習 -->
<input type="text" v-model="name">
</div>
</body>
</html>
代碼執行效果：
在瀏覽器中能夠在 console.log經過 vm對象能夠直接訪問el和data屬性,甚至能夠訪問data裏面的數據
console.log(vm.$el) # #box vm對象能夠控制的範圍
console.log(vm.$data); # vm對象要顯示到頁面中的數據
console.log(vm.message);# 這個 message就是data裏面聲明的數據,也可使用 vm.變量名顯示其餘數據,message只是舉例.
總結：
1. 若是要輸出data裏面的數據做爲普通標籤的內容，須要使用{{ }}
用法：
vue對象的data屬性：
data:{
name:"小明",
}
標籤元素：
<h1>{{ name }}</h1>
2. 若是要輸出data裏面的數據做爲表單元素的值，須要使用vue.js提供的元素屬性v-model
用法：
vue對象的data屬性：
data:{
name:"小明",
}
表單元素：
<input v-model="name">
使用v-model把data裏面的數據顯示到表單元素之後，一旦用戶修改表單元素的值，則data裏面對應數據的值也會隨之發生改變，甚至，頁面中凡是使用了這個數據都會發生變化。
1.4 顯示數據
-
在雙標籤中顯示數據要經過{{ }}來完成數據顯示
-
在表單輸入框中顯示數據要使用v-model來完成數據顯示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.min.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{
str1: "hello",
num: 20,
url1: "http://www.baidu.com",
url2: "http://www.taobao.com"
}
})
}
</script>
</head>
<body>
<p>{{ str1 }}</p>
<p>{{ str1.split("").reverse().join("") }}</p>
<p>num和num2中比較大的數是：{{ num>num2? num:num2 }}</p>
<input type="text" v-model="name">
</body>
</html>
雙花括號僅用輸出文本內容,若是要輸出html代碼,則不能使用這個.要使用v-html來輸出.
v-html必須在html標籤裏面做爲屬性寫出來.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div class="app">
<h1>{{title}}</h1>
<h3>{{url1}}</h3>
{{img}}<br>
<span v-html="img"></span>
</div>
<script>
let vm = new Vue({
el:".app",
data:{
title:"個人vue",
url1:"個人收穫地址",
img:'<img src="images/shendan.png">',
}
})
</script>
</body>
</html>
總結：
1. 能夠在普通標籤中使用{{ }} 或者 v-html 來輸出data裏面的數據
<h1>{{message}}</h1>
2. 能夠在表單標籤中使用v-model屬性來輸出data裏面的數據，同時還能夠修改data裏面的數據
<input type="text" v-model="username">
在輸出內容到普通標籤的使用{{ }}還支持js代碼。
<h1>{{str1.split("").reverse().join("")}}</h1>
<!-- 3.2 支持js的運算符-->
<h1>{{num1+3}}</h1>
<!-- 3.3 js還有一種運算符,三元運算符,相似於python裏面的三元表達式
三元運算符的語法:
判斷條件 ? 條件爲true : 條件爲false的結果
python 三元表達式[三目運算符]的語法:
a if 條件 else b
-->
<h1>num1和num2之間進行比較,最大值:{{ num2>num1?num2:num1 }}</h1>
2. 經常使用指令
指令 (Directives) 是帶有「v-」前綴的特殊屬性。每個指令在vue中都有固定的做用。
在vue中，提供了不少指令，經常使用的有：v-if、v-model、v-for等等。
指令會在vm對象的data屬性的數據發生變化時，會同時改變元素中的其控制的內容或屬性。
由於vue的歷史版本緣由，因此有一部分指令都有兩種寫法：
vue1.x寫法 vue2.x的寫法
v-html ----> {{ }}
v-bind:屬性名 ----> :屬性
v-on:事件名 ----> @事件名
2.1 操做屬性
格式：
<標籤名 :標籤屬性="data屬性"></標籤名>
<p :title="str1">{{ str1 }}</p> <!-- 也可使用v-html顯示雙標籤的內容，{{ }} 是簡寫 -->
<a :href="url2">淘寶</a>
<a v-bind:href="url1">百度</a> <!-- v-bind是vue1.x版本的寫法 -->
2.2 事件綁定
有兩種寫法，@事件名 和 v-on:事件名
<button v-on:click="num++">按鈕</button> <!-- v-on 是vue1.x版本的寫法 -->
<button @click="num+=5">按鈕2</button>
總結：
1. 使用@事件名來進行事件的綁定
語法：
<h1 @click="num++">{{num}}</h1>
2. 綁定的事件的事件名，所有都是js的事件名：
@submit ---> onsubmit
@focus ---> onfocus
....
例如:完成商城的商品增長減小數量
步驟：
-
給vue對象添加操做數據的方法
-
在標籤中使用指令調用操做數據的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<button @click="num+=1">+</button>
<input type="text" v-model="num">
<button @click="(num<=1)?(num=1):(num-=1)">-</button>
</div>
<script>
let vm=new Vue({
el:"#box",
data:{
num:0,
}
})
</script>
</body>
</html>
2.3 操做樣式
2.3.1 控制標籤class類名
格式：
<h1 :class="值">元素</h1> 值能夠是對象、對象名、數組
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.box1{
color: red;
border: 1px solid #000;
}
.box2{
background-color: orange;
font-size: 32px;
}
</style>
</head>
<body>
<div id="box">
<!--- 添加class類名，值是一個對象
{
class類1:布爾值變量1,
class類2:布爾值變量2,
}
-->
<p :class="{box1:myclass1}">一個段落</p>
<p @click="myclass3=!myclass3" :class="{box1:myclass2,box2:myclass3}">一個段落</p>
</div>
<script>
let vm1=new Vue({
el:"#box",
data:{
myclass1:false, // 布爾值變量若是是false，則不會添加對象的屬性名做爲樣式
myclass2:true, // 布爾值變量若是是true，則不會添加對象的屬性名做爲樣式
myclass3:false,
},
})
</script>
<!-- 上面的代碼能夠:class的值保存到data裏面的一個變量，而後使用該變量做爲:class的值 -->
<style>
.box4{
background-color: red;
}
.box5{
color: green;
}
</style>
<div id="app">
<button @click="mycls.box4=!mycls.box4">改變背景</button>
<button @click="mycls.box5=!mycls.box5">改變字體顏色</button>
<p :class="mycls">第二個段落</p>
</div>
<script>
let vm2 = new Vue({
el:"#app",
data:{
mycls:{
box4:false,
box5:true
},
}
})
</script>
<!-- 批量給元素增長多個class樣式類 -->
<style>
.box6{
background-color: red;
}