Vue學習之路（基礎篇）
🍅程式員小王的博客：程式員小王的博客
🍅 歡迎點贊 👍 收藏 ?留言 📝
🍅 如有編輯錯誤聯系作者，如果有比較好的文章歡迎分享給我，我會取其精華去其糟粕
🍅java自學的學習路線：java自學的學習路線
一. Vue 引言
漸進式JavaScript 框架 --摘自官網
# 漸進式
1. 易用 html css javascript上手比較容易
2. 高效 開發前端頁面 非常高效
3. 靈活 開發靈活 多樣性
4. 漸進式：
a.易用 vue.js 上手非常快
b.靈活 vue生態系統非常強大 vue基礎核心 vue組件
c.高效 vue體積小 20kb 超快虛擬dom(網頁形成dom樹)
vue底層深度優化
# 總結
Vue 是一個漸進式javascript 框架 js 簡化頁面js操作
JQuery也是一個js框架，簡化js開發
bootstrap 是一個css框架 封裝css
# 后端服務端開發人員:
Vue 漸進式javascript框架: 讓我們通過操作很少的DOM,
甚至不需要操作頁面中任何DOM元素,就很容易的完成資料和視圖系結 ====> 雙向系結 MVVM
# Vue 作者
尤雨溪 國內的
獨立開源開發者（自由職業者）
現全職開發和維護vue.js
2014年開發vue2.0目前最火
1.1 vue的優勢
通俗定義：
1.vue的出現可以讓我們在頁面中完成復雜操作，可以簡化
dom編程甚至不寫任何的dom編程代碼
2.vue內置雙向系結機制 MVVM機制---前后端分離
html+js-->html+css+JQuery-->vue(前后端分離)-->前端系統+json（ajax）+后端系統
二. Vue入門
2.1 下載Vuejs
//開發版本:
<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
//生產版本:
<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2.2 Vue第一個入門應用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first vue page</title>
</head>
<!--1、在script中引入vue代碼-->
<script src="js/vue-min.js"></script>
<body>
<div id="app">
<h1>first page</h1>
<h1>獲取vue中的資料：{{message}}}</h1>
<h1>count的運算值：{{count+3+2+5}}</h1>
<h1>name的值的長度：{{name.length}}</h1>
<h2>username的值大寫：{{name.toUpperCase()}}</h2>
<h2>username的值是否為wanghj:{{username== 'wanghj'}}</h2>
</div>
</body>
</html>
<!--2. 準備script標簽中書寫vue代碼-->
<script type="text/javascript">
//vue代碼 {id:"liuh"}
//創建vue實體（物件）
new Vue({
el: "#app", //element 簡寫 指定vue實體作用范圍
data: { //用于給vue實體系結資料
message: "hello vue!",
count:0,
name:"王恒杰",
username:"wanghj"
}
})
</script>
- 注意：
1、一張html頁面只能定義一個vue實體<br /><br />2、el屬性指定vue實體的作用范圍，vue只能在實體范圍內才會生效
3、data屬性是在為vue實體系結一些資料，可以通過{{data中的屬性的名字}}，獲取對應屬性值
4、vue實體中el屬性可以書寫任何css選擇器，但是推薦id選擇器<br /> 因為一個vue實體只能作用于一個具體的作用范圍
2.3 Vue中的復雜資料
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中data屬性定義陣列，物件型別資料以及獲取</title>
</head>
<body>
<div id="app">
<!-- 零散資料-->
<h1>基本資料：{{message}}</h1>
<hr/>
<!-- 物件-->
<h1>物件資料型別：{{user}}}</h1>
<h1>物件型別的資料的值：{{user.id}}---{{user.name}}---{{user.age}}</h1>
<hr/>
<!-- 陣列-->
<h1>陣列型別資料：{{names}}</h1>
<h1>陣列第一個值：{{names[0]}}</h1>
<h1>陣列中第二個物件的姓名：{{users[0].name}}</h1>
</div>
</body>
</html>
<script src="js/vue-min.js"></script>
<script>
new Vue({
el: "#app", //指定vue實體
data: { //為實體創建資料
message: "hello whj",
//物件型別的資料
user:{id:1,name:"王恒杰",age:18},
//定義陣列型別資料
names:["wanghj","yangfj","dengzw","wangcy"],
// 定義物件型別的陣列
users:[
{id:1,name:"王恒杰",age:18},
{id:2,name:"楊福君",age:19},
{id:3,name:"鄧正武",age:21}
]
}
})
</script>
三. v-text和v-html
3.1 v-text
v-text:用來獲取data中資料將資料以文本的形式渲染到指定標簽內部 類似于javascript 中** innerText**
<div id="app" class="aa">
<span >{{ message }}</span>
<span v-text="message"></span>
<!-- 結果：hello vue 王恒杰-->
<h1>{{msg}}王恒杰</h1>
<!-- 結果：hello vue-->
<h1 v-text="msg">王恒杰</h1>
<!-- 結果：hello vue-->
<h1 v-html="msg">王恒杰</h1>
<!-- 如果想在王恒杰后面寫hello vue-->
<h1>王恒杰<span v-text="msg"></span></h1>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"hello vue",
msg:"whj"
}
})
</script>
<!--
v-text 和 v-html:作用：用來獲取vue實體中data屬性宣告資料
使用語法：那個標簽需要使用：直接在那個標簽上面定義 v-text/v-html
** {{}}取值和v-text 取值區別：**
1.{{}}取值不會將標簽的原始資料清空 使用v-text/v-html會清空標簽的原始資料
2.v-text、v-html也叫插值運算式
3.{{}}取值出現插值閃爍（網路不好可能出現{{msg}}，網路加載完后才出現hello vue）
， v-text/v-html取值不會出現插值閃爍
-->
# 總結
1.{{}}(插值運算式)和v-text獲取資料的區別在于
a.使用v-text取值會將標簽中原有的資料覆寫 使用插值運算式的形式不會覆寫標簽原有的資料
b.使用v-text可以避免在網路環境較差的情況下出現插值閃爍
- {{}}出現插值閃爍
3.2 v-html
v-html:用來獲取data中資料將資料中含有的html標簽先決議在渲染到指定標簽的內部 類似于javascript中 innerHTML
<div id="app" class="aa">
<span>{{message}}</span>
<br>
<span v-text="message"></span>
<br>
<span v-html="message">xxxxxx</span>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"<a href=''>點擊獲取資料</a>"
}
})
</script>
3.3 v-html與v-text的區別
(1)例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-text/v-html指令使用</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<!--
**v-text（innerText）與v-html(innerHtml)的區別**
1.使用v-text取值：直接將獲取的資料渲染到指定標簽
2.使用v-html取值：先將獲取的資料決議為html,在渲染到指定標簽中
-->
<!-- v-html與v-text的區別-->
<span v-text="content"></span><br/>
<span v-html="content"></span>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
content:"<a href='http://www.baidu.com'> 點我查看詳情</a>"
}
});
</script>
(2）例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<h1>兩個{}{}(插值運算式)展示:{{message}}</h1>
<hr/>
<h1 v-text="message"></h1>
<hr/>
<h1 v-html="message"></h1>
<!--
v-text和v-html和{{}}(插值運算式)的區別
1、{{}}取值不會覆寫標簽中的內容
v-text和v-html會覆寫原有的值
2、使用v-text避免網路較差的情況下，插值運算式取值容易出現插值閃爍，而v-text不會出現插值閃爍
-->
<h1 v-text="context"></h1>
<h1 v-html="context"></h1>
<!-- v-text v-html的取值區別
v-text 等價于 js innerText 獲取內容時標簽會按照文本處理
v-html 等價于 js innerHtml 獲取內容會按html處理
-->
</div>
</body>
</html>
<script src="js/vue-min.js"></script>
<script>
new Vue({
el:"#app",
data:{
message:"vue歡迎你",
context:"王恒杰<font color='red'>優秀</font>"
}
})
</script>
四.vue中事件系結(v-on)
4.1 系結事件基本語法
????#### （1）基礎
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue的事件系結v-on</title>
</head>
<body>
<div id="app">
<button v-on:click="test1">點我</button>
</div>
</body>
</html>
<script src="js/vue-min.js"></script>
<script>
new Vue({
el:"#app",
data:{
message:"王恒杰"
},
methods:{
test1:function () {
alert("王恒杰長的最好看？");
}
}
})
</script>
<!--
事件： js 中的事件編程 3大要素
1、事件源： 發生這個事件的源頭標簽 html標簽
2、事件屬性 用戶的一些操作 on... onclick ondblclick onm ouseover onm ouseout
3、事件監聽 發生事件后的處理方案[執行的功能] 函式
vue中的事件系結 三大要素
事件系結的語法: v-on:事件屬性=“監聽函式的名字”
函式定義：要定義在vue實體中的method屬性中
定義語法： 函式名：function(){//函式功能}
-->
????- 注意事項：v-on報紅問題
（2）this的用法
methods:{ //在實體中定義函式
test1:function (){
//將data中的score分數+1 this 當前的實體物件
console.log(this);
}
}
（3）通過this.屬性名獲取屬性值進行操作
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue的事件系結v-on</title>
</head>
<body>
<div id="app">
<!--MVVM Model模型 V:view視圖 雙向系結 ViewModel(監聽器)-->
<h2>{{message}}</h2>
<h2><font color="red">{{score}}</font></h2>
<button v-on:click="test1" >點我</button>
</div>
</body>
</html>
<script src="js/vue-min.js"></script>
<script>
new Vue({
el:"#app",
data:{
message:"王恒杰",
score:"99"
},
methods:{ //在實體中定義函式
test1:function (){
//將data中的score分數+1 this 當前的實體物件
this.score++;
}
}
})
</script>
<!--
-->
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue的事件系結v-on</title>
</head>
<body>
<div id="app">
<!--MVVM Model模型 V:view視圖 雙向系結 ViewModel(監聽器)-->
<h2>{{message}}</h2>
<h2><font color="red">{{score}}</font></h2>
<button v-on:click="test1" >點我</button>
</div>
</body>
</html>
<script src="js/vue-min.js"></script>
<script>
new Vue({
el:"#app",
data:{
message:"王恒杰",
score:"99"
},
methods:{ //在實體中定義函式
test1:function (){
//將data中的score分數+1 this 當前的實體物件
this.score++;
this.test2();
},
test2:function () {
console.log("少考一點分，要報表了！！！")
}
}
})
</script>
<!--
-->
#總結:
事件 事件源:發生事件dom元素 事件: 發生特定的動作 click.... 監聽器
發生特定動作之后的事件處理程式 通常是js中函式
1.在vue中系結事件是通過v-on指令來完成的 v-on:事件名 如 v-on:click
2.在v-on:事件名的賦值陳述句中是當前事件觸發呼叫的函式名
3.在vue中事件的函式統一定義在Vue實體的methods屬性中
4.在vue定義的事件中this指的就是當前的Vue實體,
日后可以在事件中通過使用this獲取Vue實體中相關資料呼叫methods中相關方法
（4）事件案例
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue的事件系結v-on</title>
</head>
<body>
<div id="app">
<!--MVVM Model模型 V:view視圖 雙向系結 ViewModel(監聽器)-->
<h2>{{message}}</h2>
<h2><font color="red">{{score}}</font></h2>
<button v-on:click="incr" >點擊分數+1</button>
<button v-on:click="addMore(10)" >點擊分數+任意</button>
<button v-on:click="addMoreAndString(20,'成績優秀',false,true)" >點擊分數+任意，message拼接一個字串</button>
<!-- <button v-on:click="obj({num:100,message:'王恒杰',sex:false,score:100})" >點擊分數+任意</button>-->
</div>
</body>
</html>
<script src="js/vue-min.js"></script>
<script>
new Vue({
el:"#app",
data:{
message:"王恒杰",
score:"59"
},
methods:{ //在實體中定義函式
incr:function(){
this.score++;
},
addMore:function (number) {
this.score+=number;
},
addMoreAndString:function (num,grade,a,b) {
this.score+=num;
this.message+=grade;
console.log(a);
console.log(b)
}
},
obj:function (obj) {
console.log(obj)
}
})
</script>
注意：
1、雙向系結機制 MVM，Model<==> ViewModel(視圖模型，監聽器，監聽model的改變，一旦改變影響View)==>View(視圖) data資料：model {{message}}這個就是view
4.2 Vue中事件的簡化語法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的簡化寫法</title>
</head>
<body>
<div id="app">
{{name}}
<h1><font color="red">{{score}}</font></h1>
<button @click="incr()">點擊+1</button>
<button @Click="desc()">點擊-1</button>
</div>
</body>
</html>
<script src="js/vue-min.js"></script>
<script>
new Vue({
el: "#app", //指定vue實體
data: { //為實體創建資料
name:"王恒杰",
score:59
},
methods:{
incr(){
this.score++;
},
desc(){
this.score--;
}
}
})
</script>
<!--
當前事件系結的方式：v-on：事件屬性=“監聽函式名”
系結事件簡化方式：@事件屬性=“監聽函式名”
-->
# 總結:
1.日后在vue中系結事件時可以通過@符號形式 簡化 v-on 的事件系結
4.3 Vue事件函式兩種寫法
<div id="app">
<span>{{count}}</span>
<input type="button" value="改變count的值" @click="changecount">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
count:1,
},
methods:{
/*changecount:function(){
this.count++;
}*/
changecount(){
this.count++;
}
}
});
</script>
# 總結:
1.在Vue中事件定義存在兩種寫法
一種是 函式名:function(){}
一種是 函式名(){} 推薦
- 簡化語法及簡化函式寫法
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>v-on簡化寫法</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<h1>{{count}}</h1>
<!--
v-on：用來給標簽系結特定事件
-->
<button v-on:click="incrementAge">點擊年齡+1</button>
<!-- v-on==>簡化寫法：@ 語法“@事件名-事件處理函式名-->
<button @click="incrementAge">點擊年齡+1</button>
<!-- 簡化函式后-->
<button @click="test(5)">點擊年齡+N</button>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"王恒杰",
count:0,
},
methods:{
incrementAge:function(){
this.count++;
},
// 簡化函式 原定義函式：函式名：function(){}==>函式名（）{}
test(n){
this.count+=n;
}
},
});
</script>
4.4 Vue事件引數傳遞
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引數的傳遞</title>
</head>
<body>
<div id="app">
<h1><font color="red">姓名：{{users[1].name}}</font></h1>
<h2>分數：{{score}}</h2>
<input type="button" @click="incr('優秀')" value="點擊修改分數">
</div>
</body>
</html>
<script src="js/vue-min.js"></script>
<script>
new Vue({
el: "#app",
data: {
users: [
{"id": 1, "name": "王恒杰", "score": 81},
{"id": 2, "name": "楊福君", "score": 60},
{"id": 3, "name": "王晨陽", "score": 82}
],
score:81
},
methods: {
incr(msg) {
this.score++;
console.log(msg);
}
}
})
</script>
# 總結:
1.在使用事件時,可以直接在事件呼叫處給事件進行引數傳遞,在事件定義處通過定義對應變數接收傳遞的引數
- v-on傳遞引數案例
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>v-on在函式中傳遞引數</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<h1>年齡：{{count}}</h1>
<button v-on:click="incrementAge">點我每次給年齡+1</button>
<!-- 執行事件，并給事件傳遞引數-->
<button v-on:click="changeAge(20)">點我每次給年齡+不確定</button>
<!-- 傳零散資料-->
<button v-on:click="changeAgeAndMsg(2,'小黑')">點我每次給年齡+不確定,同時msg+"你好"</button>
<!-- 傳物件-->
<button v-on:click="changeAgeAndMsg2({n:2,msg:'王恒杰'})">點我每次給年齡+不確定,同時msg+"你好"</button>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"王恒杰",
count:20
},
methods:{
incrementAge:function (){
this.count++;
},
//函式上面添加變數
changeAge:function(n){
console.log(n);
this.count+=n;
},
//傳零散資料
changeAgeAndMsg:function(n,msg){
console.log(n);
console.log(msg);
this.count+=n;
this.msg="你好！"+msg;
},
//傳物件
changeAgeAndMsg2:function(param){
console.log(param);
this.count+=param.n;
this.msg="你好！"+param.msg;
}
}
});
</script>
五.v-show v-if v-bind
5.1 v-show
v-show:用來控制頁面中某個標簽元素是否展示
<div id="app">
<!--
v-show: 用來控制標簽展示還是隱藏的
-->
<h2 v-show="false">天津商業大學歡迎你的加入!</h2>
<h2 v-show="show">天津商業大學歡迎你的加入這是vue中定義變數true!</h2>
<input type="button" value="展示隱藏標簽" @click="showmsg">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
show:false,
},
methods:{
//定義時間
showmsg(){
this.show = !this.show;
}
}
})
</script>
# 總結
1.在使用v-show時可以直接書寫boolean值控制元素展示,也可以通過變數控制標簽展示和隱藏
2.在v-show中可以通過boolean運算式控制標簽的展示和隱藏
5.2 v-if
v-if: 用來控制頁面元素是否展示
<div id="app">
<h2 v-if="false">百知教育</h2>
<h2 v-if="show">百知教育歡迎你的加入</h2>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
show:false
},
methods:{
}
});
</script>
- v-if與v-show的區別
<div id="app">
<!--
v-if與v-show的區別：
1.v-if 底層通知控制dom樹上的元素節點 頁面標簽展示和隱藏 dom樹
2.v-show 底層通過控制標簽css中display屬性實作標簽展示和隱藏 css
-->
<h1 name="if" v-if="isshow">{{msg}}</h1>
<h1 name="show" v-if="isshow">{{msg}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"王恒杰",
isshow:false
},
methods:{
}
});
</script>
v-show在谷歌里面的控制臺 由css實作
5.2.1:v-if&&v-show案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if與v-show案例</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<h2 v-show="isShow">{{msg}}</h2>
<button @click="hidenH2">用來隱藏h2標簽</button>
<button @click=" showH2">用來顯示h1標簽</button>
<button @click="showHiddenH2">用來顯示、隱藏h2</button>
<!-- 直接呼叫data-->
<button @click="isShow=!isShow">用來顯示、隱藏h2(直接操作data的屬性)</button>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: "王恒杰",
isShow: true
},
methods: {
hidenH2() {
this.isShow = false;
},
showH2() {
this.isShow = true;
},
showHiddenH2() {
// 替換
this.isShow=!this.isShow;
// if (this.isShow) {
// this.isShow = false;
// } else {
// this.isShow = true;
// }
}
}
});
</script>
- v-if&v-show案例
<!DOCTYPE html>
<html lang="en" xmlns:v-html="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>v-if&v-show案例二</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<div style="height: 200px;width: 200px;background-color: red; " v-show="isShow" v-on:mouseover="hidden"></div>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"天津商業大學",
isShow:true,
},
methods:{
hidden:function (){
this.isShow=false;
}
}
});
</script>
5.3 v-bind
v-bind: 用來系結標簽的屬性從而通過vue動態修改標簽的屬性
<div id="app">
<img width="300" v-bind:title="msg" v-bind:class="{aa:showCss}" src="baizhilogo.jpg" alt="">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
msg:"天津商業大學官方logo!!!!",
showCss:true,
},
methods:{
}
})
</script>
5.4 v-bind 簡化寫法
? vue為了方便我們日后系結標簽的屬性提供了對屬性系結的簡化寫法如
v-bind:屬性名簡化之后:屬性名
<div id="app">
<img width="300" :title="msg" :class="{aa:showCss}" :src="src" alt="">
<input type="button" value="動態控制加入樣式" @click="addCss">
<input type="button" value="改變圖片" @click="changeSrc">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
msg:"TJCU官方logo!!!!",
showCss:true,
src:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583490365568&di=52a82bd614cd4030f97ada9441bb2d0e&imgtype=0&src=http%3A%2F%2Fimg.kanzhun.com%2Fimages%2Flogo%2F20160714%2F820a68f65b4e4a3634085055779c000c.jpg"
},
methods:{
addCss(){
this.showCss= !this.showCss;
},
changeSrc(){
this.src = "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1925088662,1336364220&fm=26&gp=0.jpg";
}
}
})
</script>
六.v-for的使用
v-for: 作用就是用來對物件進行遍歷的(陣列也是物件的一種)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for</title>
</head>
<body>
<div id="app">
<!--
v-for遍歷資料 用于遍歷vue中的物件 陣列 物件陣列
1. 遍歷單個物件語法：<標簽 v-for="當前元素(value,key,index) in data中變數名">
2. 遍歷陣列： <標簽 v-for="value,index in data中屬性名">
2. 遍歷物件陣列： <標簽 v-for="value,index in data中屬性名">
-->
<h2>1: 基礎獲取物件</h2>
<span>{{user.id}}</span><br/>
<span>{{user.name}}</span><br/>
<span>{{user.age}}</span><br/>
<span>{{user.address}}</span><br/>
<span>{{user.content}}</span><br/>
<hr/>
<h2>2:展示物件內容</h2>
<span v-for="(u,key,index) in user">{{key}}-{{u}}-{{index}}</span>
<hr/>
<h2>遍歷普通陣列</h2>
<ul>
<li v-for="name,index in names">{{index}}_{{name}}</li>
</ul>
<h2>遍歷物件陣列</h2>
<table border="1px" >
<tr>
<td>ID</td>
<td>name</td>
<td>address</td>
<td>age</td>
<td>content</td>
</tr>
<tr v-for="user,index in users" :key="user.id">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.address}}</td>
<td>{{user.age}}</td>
<td>{{user.content}}</td>
</tr>
</table>
</div>
</body>
</html>
<script src="js/vue-min.js"></script>
<script>
//vue代碼
new Vue({
el: "#app", //vue的實體作用范圍
data: { //vue中定義的一系列資料
user:{id: 1, name: "王恒杰", age: 21, address: "天津商業大學", content: "好好學習，天天向上"},
names:["王恒杰","楊福君","鄧正武","王晨陽"],
users:[
{id: 1, name: "王恒杰", age: 21, address: "天津商業大學", content: "好好學習，天天向上"},
{id: 2, name: "楊福君", age: 21, address: "天津商業大學", content: "好好學習，天天向上"},
{id: 3, name: "王晨陽", age: 21, address: "天津商業大學", content: "好好學習，天天向上"},
]
},
methods: { //vue中定義的一系列函式 方法
}
})
</script>
# 總結
1.在使用v-for的時候一定要注意加入:key 用來給vue內部提供重用和排序的唯一key
七 .v-model 雙向系結
v-model: 作用用來系結標簽元素的值與vue實體物件中data資料保持一致,從而實作雙向的資料系結機制
- 零散資料建的雙向系結
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>v-model指令</title>
</head>
<body>
<div id="app">
<!--
v-model雙向系結
作用：系結標簽物件的value屬性值 交由vue實體管理 只能系結value屬性值
語法<input type="text" v-mode="data屬性名">
-->
<form>
姓名：<input type="text" v-model="name"><br/>
密碼：<input type="text" v-model="pwd"><br/>
年齡：<input type="text" v-model="age"><br/>
地址：<input type="text" v-model="addr"><br/>
<input type="button" value="注冊" @click="register()">
</form>
</div>
</body>
</html>
<script src="js/vue-min.js"></script>
<script>
//vue代碼
new Vue({
el: "#app", //vue的實體作用范圍
data: { //vue中定義的一系列資料
name:"",
pwd:"",
age:18,
addr:""
},
methods:{
register(){
//獲取用戶輸入的資料
console.log(this.name);
console.log(this.pwd);
console.log(this.age);
console.log(this.addr);
//
}
}
})
</script>
- 物件的雙向系結
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>v-model指令</title>
</head>
<body>
<div id="app">
<!--
v-model雙向系結
作用：系結標簽物件的value屬性值 交由vue實體管理 只能系結value屬性值
語法<input type="text" v-mode="data屬性名">
-->
<form>
姓名：<input type="text" v-model="user.name"><br/>
密碼：<input type="text" v-model="user.pwd"><br/>
年齡：<input type="text" v-model="user.age"><br/>
地址：<input type="text" v-model="user.addr"><br/>
<input type="button" value="注冊" @click="register()">
</form>
</div>
</body>
</html>
<script src="js/vue-min.js"></script>
<script>
//vue代碼
new Vue({
el: "#app", //vue的實體作用范圍
data: { //vue中定義的一系列資料
user:{}
},
methods:{
register(){
//獲取用戶輸入的資料
console.log(this.user.name);
console.log(this.user.pwd);
console.log(this.user.age);
console.log(this.user.addr);
console.log(this.user);
//發送ajax請求
$.get("url",user,function () {
},"json")
}
}
})
</script>
# 總結
1.使用v-model指令可以實作資料的雙向系結
2.所謂雙向系結 表單中資料變化導致vue實體data資料變化
vue實體中data資料的變化導致表單中資料變化 稱之為雙向系結
# MVVM架構 雙向系結機制
Model: 資料 Vue實體中系結資料
VM: ViewModel 監聽器
View: 頁面 頁面展示的資料
八. 事件修飾符
修飾符: 作用用來和事件連用,用來決定事件觸發條件或者是阻止事件的觸發機制
# 1.常用的事件修飾符
.stop 停止
.prevent 阻止
.self 獨自
.once 一次
8.1 stop事件修飾符
用來阻止事件冒泡
- ** 事件冒泡：** 父子標簽監聽相同的事件屬性，觸發子標簽事件時，同時擴散到父標簽，導致父標簽事件也運行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model指令</title>
</head>
<body>
<div id="app">
<!--
事件修飾符：
事件冒泡：父子標簽監聽相同的事件屬性，觸發子標簽事件時，同時擴散到父標簽，導致父標簽事件也運行
-->
<div @click="outer()" style="border: solid 1px red;background-color: red;width: 200px;height: 200px">
<div @click="inner()" style="border: solid 1px greenyellow;background-color: greenyellow;width: 100px;height: 100px"></div>
</div>
</div>
</body>
</html>
<script src="js/vue-min.js"></script>
<script>
//vue代碼
new Vue({
el: "#app", //vue的實體作用范圍
data: { //vue中定義的一系列資料
},
methods:{
outer(){
console.log("外層被觸發了")
},
inner(){
console.log("內層被觸發了")
}
}
})
</script>
- .stop 阻止事件冒泡
8.2 prevent 事件修飾符
用來阻止標簽的默認行為
<!--用來阻止事件的默認行為-->
<a href="http://www.baizhibest.com/" @click.prevent="aClick">tjsydx</a>
8.3 self 事件修飾符
用來針對于當前標簽的事件觸發 ===========> 只觸發自己標簽的上特定動作的事件 只關心自己標簽上觸發的事件 不監聽事件冒泡
<!--只觸發標簽自身的事件-->
<div class="aa" @click.self="divClick">
<!--用來阻止事件冒泡-->
<input type="button" value="按鈕" @click.stop="btnClick">
<input type="button" value="按鈕1" @click="btnClick1">
</div>
8.4 once 事件修飾符
once 一次作用: 就是讓指定事件只觸發一次
<!--
.prevent : 用來阻止事件的默認行為
.once : 用來只執行一次特定的事件
-->
<a href="http://www.baizhibest.com/" @click.prevent.once="aClick">百知教育</a>
九. 按鍵修飾符
作用: 用來與鍵盤中按鍵事件系結在一起,用來修飾特定的按鍵事件的修飾符
# 按鍵修飾符
.enter
.tab
.delete (捕獲“洗掉”和“退格”鍵)
.esc
.space
.up
.down
.left
.right
9.1 enter 回車鍵
用來在觸發回車按鍵之后觸發的事件
<input type="text" v-model="msg" @keyup.enter="keyups">
9.2 tab 鍵
用來捕獲到tab鍵執行到當前標簽是才會觸發
<input type="text" @keyup.tab="keytabs">
9.3 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model指令</title>
</head>
<body>
<div id="app">
<!--
按鍵修飾符：與鍵盤的事件屬性連用
.enter 回車
.tab tab鍵
.delete 洗掉
.esc 退出
.space 空格
.up 上
.down 下
.left 左
.right 右
-->
<input type="text" v-model="value" @keyup.enter="keyUp()">
</div>
</body>
</html>
<script src="js/vue-min.js"></script>
<script>
//vue代碼
new Vue({
el: "#app", //vue的實體作用范圍
data: { //vue中定義的一系列資料
value:""
},
methods:{
keyUp(){
console.log("觸發按鍵彈起監聽功能")
}
}
})
</script>
十.后續發布vue博客相關內容
🍅 Vue學習之路（基礎篇）
🍅 vue的學習之路（Axios 基本使用）
🍅 vue的學習之路（Vue 生命周期）
🍅 vue的學習之路（Vue中組件(component)）
🍅 vue的學習之路（Vue中路由 (Vue Router)）
🍅 vue的學習之路（Vue CLI 腳手架）
🍅 vue的學習之路（VueX 狀態管理）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/382006.html
標籤：其他
上一篇：vue實作購物車功能