Vue簡單入門
- 2021 年 2 月 5 日
- 筆記
第一章 簡單介紹及入門
0 導入vue包
<!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="//cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
【更推薦開發環境版本，有幫助資訊，更為完整】
<!-- 生產環境版本，優化了尺寸和速度 --> <script src="//cdn.jsdelivr.net/npm/vue"></script>
1 聲明式渲染：Vue.js的核心試試允許採用簡潔的模板語法來聲明式地將第一個例子：數據渲染進DOM的系統：
<div id="app"> {{ message }} </div> <script> var app=new Vue({ el:"#app", data:{ message:"youdianxiangnile,zhangmin!" } }) </script>
第二個例子：
<span v-bind:title="message">滑鼠懸停查看message資訊<span>
其中 v-bind 特性被稱為指令，指令帶有前綴 v- 是Vue提供的特殊特性。
<div id="app-2">
<span v-bind:title="message">
滑鼠懸停幾秒查看此處動態綁定能夠的提示資訊！
</span>
</div>
<script>
var app2=new Vue({
el:"#app-2",
data:{
message:'頁面載入於'+new Date().toLocaleString()
}
})
</script>
第三個例子：
<div id="app3"> {{ message }} <h2>學校名稱：{{ school.name }} 。學校電話：{{school.mobile}}</h2> <ul> <li>{{ campus[0] }}</li> <li>{{ campus[1] }}</li> </ul> </div> <script> var app3=new Vue({ el:"#app3", data:{ message:"nihao,xiaozhang!", //定義一個類 school:{ name:"xiaoming", mobile:"400-456-1022" }, //定義一個數組 campus:["武漢校區","重慶校區","成都校區","大同校區"] } }) </script>
注意：
（1）el 掛載點
- Vue 實例的作用範圍：vue會管理el命中的元素及其內部的後代元素；
- Vue 可以使用class 等多種選擇器，但是一般建議選擇id選擇器
- Vue 可以設置其他dom元素，如h1 p div，但是不能使用html和body
（2）data 數據對象
- Vue中用到的數據定義在data中
- data中可以寫複雜類型的數據
- 渲染複雜類型數據時，遵守js語法即可
第二章 本地應用
1 內容綁定與事件綁定
（1） v-text
作用是設置標籤的內容textContent
默認寫法將一個dom標籤裡面的所有文本進行替換，如果是部分文本替換，建議還使用 兩個大括弧 哈
<div id="app">
{{ message }}
<h2 v-text="message+'enen1'"></h2>
</div>
（2）v-html
作用是設置元素的innerHTML，內容中有html結構會被解析為標籤
<div id="app">
<p v-html="content1"></p>
<p v-html="content2"></p>
<p v-text="content2"></p>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
content1:"戰勝Frank",
content2:"<a href='//www.baidu.com/'>百度</a>"
}
})
</script>
（3）v-on
- 為元素綁定事件，其中 v-on可以使用@進行替換，綁定方法可以寫在methods屬性中，方法內部中數據的獲取可以使用this關鍵字
<div id="app">
<input type="button" value="v-on指令1" v-on:click="doIt" />
<input type="button" value="雙擊簡寫2" @dblclick="doIt" />
<h2 @click="changefood">{{ food }}</h2>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
food:"番茄炒雞蛋"
},
methods:{
//doIt 是在制定#app中的制定methods
doIt:function(){
alert("做IT！");
},
//數據更改，this關鍵字
changefood:function(){
this.food+="炒糊了！"
}
}
})
</script>
- 事件綁定的方法寫成函數調用的形式，可以傳入自定義參數
定義方法的時候需要定義形參來接收傳入的實參
事件後面跟上 .修飾符 可以對事件進行限制，其中.enter為限制觸發的按鍵為回車
<div id="app">
<button @click="doIt(666,'老鐵')">doIt</button>
<input type="text" @keyup.enter="sayHi" />
</div>
<script>
var app=new Vue({
el:"#app",
methods:{
doIt:function(p1,p2){
console.log("做IT");
console.log(p1);
console.log(p2);
},
sayHi:function(){
alert("早上好！");
}
}
})
</script>
（4）一個計數器的簡單例子
<div id="compute">
<button @click="sub">-</button>
<span>{{ num }}</span>
<button @click="add">+</button>
</div>
<script>
var com=new Vue({
el:"#compute",
data:{
num:1
},
methods:{
add:function(){
if(this.num<10)
{
this.num++;
}
else{
alert("已經達到最大值！");
}
},
sub:function(){
if(this.num>0)
{
this.num--;
}
else{
alert("已經達到最小值！");
}
}
}
})
</script>
（5）v-show
切換元素的顯示與不顯示，其中還原理是改變style中的display
<div id="app">
<button @click="changeIsShow">切換</button>
<p v-show="isShow">你好呀！</p>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
isShow:true
},
methods:{
changeIsShow:function(){
this.isShow=!this.isShow;
}
}
})
</script>
（6）v-if
根據表達式的值（真假）設置元素的顯示狀態，本質上是通過操縱dom元素來切換顯示狀態，表達式為true元素存在dom樹中，反之則反。
<div id="app">
<button @click="changeIsShow">切換</button>
<p v-if="isShow">你好呀！</p>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
isShow:true
},
methods:{
changeIsShow:function(){
this.isShow=!this.isShow;
}
}
})
</script>
（7）v-band 可以直接使用 : 簡寫
設置元素的屬性（src class title），如果是class推薦使用對象的方式來寫
<style> .active{ border:1px solid red; } </style> <div id="app"> <img v-bind:src="imgSrc"/> <br /> <img :src="imgSrc" :title="imgTitle+'哈哈哈哈'" /> <br /> <!-- 以判斷表達式的方式來寫--> <img :src="imgSrc" :class="isActive?'active':''" @click="toggleActive"/> <br /> <!-- 以對象的方式來寫，active類名是否生效由isActive決定--> <img :src="imgSrc" :class="{active:isActive}" @click="toggleActive"/> </div> <script> var app=new Vue({ el:"#app", data:{ imgSrc:"//ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3698288116,4248139335&fm=26&gp=0.jpg", imgTitle:"這是一個title", isActive:false }, methods:{ toggleActive:function(){ this.isActive=!this.isActive; } } }) </script>
（8） v-for
根據數據生成列表結構，數據經常和v-for結合使用，
語法 (item,index) in 數據【其中item名字可以改】
數組長度的更新會同步到頁面上面，是響應式的
<div id="app">
<ul>
<li v-for="(item,index) in arr">
{{index+1}} 城市：{{item}}
</li>
</ul>
<button @click="add">加菜</button>
<button @click="remove">減菜</button>
<h2 v-for="it in cai" v-bind:title="it.name">{{it.name}}</h2>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
arr:["北京","大同","成都","重慶"],
cai:[
{name:"番茄炒雞蛋"},
{name:"青椒土豆絲"}
]
},
methods:{
add:function(){
this.cai.push({name:"干鍋花椰菜"});
},
remove:function(){
this.cai.shift();
}
}
})
</script>
（9）v-model
獲取和設置表單元素的值（雙向數據綁定，更改表單中數據 vue裡面值也會改變）
<div id="app">
<button @click="setM">修改值</button>
<input type="text" v-model="message" @keyup.enter="getM">
<h2>{{message}}</h2>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
message:"戰神FRANK"
},methods:{
getM:function(){
alert(this.message);
},
setM:function(){
this.message="你是不是傻";
}
}
})
</script>
第三章 網路應用
（1）axios 強大的網路請求庫
- axios必須先導入才可以使用，
- 使用get或post方法即可發送對應的請求，
- then方法中的回調函數會在請求成功或失敗時觸發，
- 通過回調函數的形參可以獲取響應的內容，或錯誤資訊
- 官網：//github.com/axios/axios
需要在頭文件導入的包
<script src="//unpkg.com/axios/dist/axios.min.js"></script>
get和post請求模板
- axios.get(地址?key=value&key2=values)aa.them(function(response){},function(err){})
- axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})
（2）axios+vue
- axios回調函數中的this已經改變，無法訪問到vue中data的數據，
- 可以將this用一個變數保存起來，直接在回調函數中調用就行了
<div id="app">
<button @click="getJoke">獲取笑話</button>
<p>{{joke}}</p>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
joke:"這是一個很好看的笑話"
},methods:{
getJoke:function(){
var that=this;
axios.get("//autumnfish.cn/api/joke").then
(function(response){
console.log(response);
console.log(response.data);
that.joke=response.data;
}),function(err){
console.log(err)
}
}
}
})
</script>
