Vue的基本使用
一. Vue.js之細節分析
1.例項引數分析
-
el:元素的掛載位置（值可以是CSS選擇器或者DOM元素）
-
data 模型資料（值是一個物件）
-
methods:{} 方法區： 裡面放的函式
-
computed:{}計算屬性區：,計算屬性定義在computed裡面
-
watch:{} 監聽器： 資料變化時執行非同步或者開銷較大的操作，資料一旦發生變化就通知監聽器所繫結的方法
-
mounted: function(){}鉤子函式: 該生命週期鉤子函式被觸發的時候，模版已經可以使用，
一般此事用於獲取後臺資料，然後把資料填充到模版
-
components:{} 區域性元件 ，放到components:{}中的組建只有本類中可以使用
2.插值表示式用法
-
將資料填充到HTML標籤中
-
插值表示式指出基本的計算操作
-
語法： {{}}
<body>
<div id="app">
<!-- 插值表示式 ，頁面顯示data裡面msg裡的值Hello Vue-->
<!-- 插值表示式還支援下面的一些基本計算和資料拼接-->
<div>{{msg}}</div>
<div>{{1+2}}</div>
<div>{{msg+'----'+123}}</div>
</div>
<script src="js/vue.js"></script>
<script>
var vm= new Vue({
el:'#app',
data:{
msg:'Hello Vue'
}
})
</script>
</body>
3.陣列相關API
3.1 變異方法（修改原有資料）
-
Push() 在陣列尾部新增新元素。（尾部新增）
-
Pop() 取出陣列尾部元素。(尾部取出)
-
Shift() 取出陣列頭部元素。(頭部取出)
-
Unshift() 在陣列頭部新增新元素。(頭部新增)
-
Splice() 向陣列中新增，刪除 元素，然後返回被刪除的元素
-
Sort() 對陣列的元素進行排序. 升序
-
Reverse() 對陣列的元素進行排序. 降序
3.2 替換陣列（生成新的陣列）
-
Filter(). 通過檢查指定陣列中符合條件的所有元素
-
Concat() 連線兩個或更多的陣列，並返回結果
-
Slice() 從已有的陣列中返回選定的元素
-
Some(). 用於檢測陣列中的元素是否滿足指定條件，如果滿足，返回true，剩下的不會執行
3.3 修改響應式資料
-
Vue.set(vm.items,indexOfltem,newValue)
-
vm.$set(vm.items,indexOfltem,newValue) 和前面的小效果一樣，只是寫法不同
1⃣️ 引數一表示要處理的陣列名稱
2⃣️ 引數二表示要處理的陣列索引
3⃣️ 引數三表示要處理的陣列的值
<body>
<div id="app">
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script src="../../js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
list:["apple","orange","banana"]
},
})
//把陣列中第二個資料改成茄子
vm.$set(vm.list,1,"茄子")
</script>
</body>
二. Vue模版語法
前段渲染方式
-
插值表示式
-
指令
-
事件繫結
-
屬性繫結
-
樣式繫結
-
分支迴圈結構
2.指令
2.1 資料繫結指令
-
v-text 填充純文字
1⃣️ 相比插值表示式更加簡潔
-
V-html 填充HTML片段
1⃣️ 存在安全問題
2⃣️ 本網站內部資料可以使用，來自第三方的資料不可以用
-
v-pre 填充原始資訊
1⃣️ 顯示原始資訊，跳過編譯過程
<div>v-html="msg"</div> <!--和插值表示式一樣頁面顯示的是data裡msg的值-->
<div>v-text='msg'</div><!--和插值表示式一樣頁面顯示的是data裡msg的值，不安全！-->
<div>v-pre="msg"</div><!--頁面顯示的是msg,而不是msg的值-->
2.2 資料響應式
-
如何理解響應式
1⃣️ html5中的響應式（螢幕尺寸的變化導致樣式的變化）
2⃣️ 資料的響應式（資料的變化導致頁面內容的變化）
-
什麼是資料繫結
1⃣️ 資料繫結： 將資料填充到標籤中
2⃣️ vue是雙向繫結，用v-model繫結可以實現
-
v-once只編譯一次
1⃣️ 實現內容之後不再具有響應式功能
2.3自定義指令
-
自定義指令用法
<input type="text" v-focus>
3.事件繫結
3.1vue如何處理事件？
-
v-on指令用法
<input type=''button" v-on:click=''''/>
-
V-on. 縮寫： @
<input type=''button" @click=''''/>
3.2事件函式的呼叫方式
-
直接繫結函式名稱，無引數，預設有一個事件物件
<button @click="say">Hello</button>
-
呼叫函式(有引數)
<button @click="say(123,333,$event)">Hello</button>
<body>
<div id="app">
<div>{{num}}</div>
<!-- 直接呼叫，預設會有事件函式-->
<button @click="handle">點選1</button>
<!-- 可以傳引數，$event事件函式要手動新增，必須在最後一個-->
<button @click="handle(123,456,$event)">點選2</button>
</div>
<script src="js/vue.js"></script>
<script>
var vm= new Vue({
el:'#app',
data:{
num:0,
},
methods:{
/*
事件繫結-引數傳遞
1。如果事件直接繫結函式名稱，那麼預設會傳遞事件物件作為事件函式的第一個引數
*2。如果時間繫結函式呼叫，（傳遞引數），那麼事件物件必須在最後一個
3。$event事件函式是固定寫法
*/
handle:function (p,k,event) {
//這裡的引數就是獲取到的引數123，和456
console.log(p,k)
//$event是事件物件，
//$event.target則指的是事件觸發的目標，即哪一個元素觸發了事件，這將直接獲取該dom元素
console.log(event.target)
// 這裡的this是Vue的例項物件
this.num++;
}
}
})
</script>
</body>
3.3事件修飾符
-
.stop阻止冒泡
-
.prevent阻止預設行為
3.4 按鍵修飾符
-
.enter 回車鍵
<input v-on :keyup.enter="submit">
-
.delete 刪除鍵
<input v-on :keyup.delete="handle">
3.5 簡易得計算機案例
-
實現邏輯
-
1.先繫結input a，input b. ,input 結果
-
2.data裡面定義a、b、結果三個熟悉
-
然後點選按鈕觸發事件，在方法裡寫相加的邏輯
<body>
<div id="app">
<h1>簡易計算機</h1>
<div>
<span>數值A：</span>
<span><!--繫結a-->
<input type="text" v-model="a">
</span>
</div>
<div>
<span>數值B：</span>
<span><!--繫結b-->
<input type="text" v-model="b">
</span>
</div>
<div>
<button @click="handel">計算</button>
</div>
<div>
<span>計算結果</span>
<!--繫結result-->
<span v-text="result"></span>
</div>
</div>
<script src="js/vue.js"></script>
<script >
var vm= new Vue({
el:'#app',
data:{
a:'',
b:'',
result:''
},
methods:{
handel:function () {
//實現計算邏輯
// parseInt(this.a)轉換成int ,不轉換的話是就會拼接
this.result= parseInt(this.a)+ parseInt(this.b);
}
}
})
</script>
</body>
4.屬性繫結
4.1 vue如何動態處理屬性？
-
v-bind指令用法
<a v-bind:href="url"></a>
-
縮寫形式
<a :href="url"></a>
<body>
<div id="app">
<!-- v-bind是屬性繫結 ，簡寫成 ：-->
<!-- 現在就是綁定了data裡面的url的地址-->
<a :href="url">跳轉</a>
<button @click="handle">切換</button>
</div>
<script src="js/vue.js"></script>
<script >
var vm= new Vue({
el:'#app',
data:{
url:'http://www.baidu.com'
},
methods:{
handle:function () {
//修改URL的地址
this.url='http://itcast.cn';
}
}
})
</script>
</body>
4.2 v-model的底層實現原理分析
-
v-model其實就是v-bind和v-on組合起來的
<input v-bind:value="msg" v-on:input="msg=$event.target.value">
5.樣式繫結
5.1 class樣式處理
-
物件語法
<div v-bind:class="{active: isActive}"></div> -
陣列語法
<div v-bind:class="{a,b}"></div>
5.2 Style樣式處理
-
物件語法
<body>
<div id="app">
<!-- //內聯樣式Style-->
<div v-bind:style="{border:borderStyle1,width:widthStyle,height:heightStyle}"></div>
<!-- //內聯繫結物件-->
<div v-bind:style="objStyles"></div>
<button v-on:click="handle">切換</button>
</div>
<script src="js/vue.js"></script>
<script >
var vm= new Vue({
el:'#app',
data:{
borderStyle1:"1px solid blue",
widthStyle:"100px",
heightStyle:"200px",
objStyles:{ /*物件*/
border:"1px solid green",
width:"200px",
height:"100px"
}
},
methods:{
handle:function () {
//點選事件之後可以把高度切換成100px
this.heightStyle='100px';
//點選事件之後可以把物件裡面的寬度切換成30px
this.objStyles.width="30px";
}
}
})
</script>
</body>
6.分支迴圈結構
6.1 分支結構
-
v-if
-
v-else
-
V-else-if
-
V-show
6.2 迴圈結構
-
v-for遍歷陣列
<li v-for="item in list">{{item}}</li>
三. Vue常用特性
常用特性概覽
-
表單操作
-
計算屬性
-
過濾器
-
監聽器
-
生命週期
1.表單操作
1.1基於Vue的表單操作
-
Input 單行文字
-
textarea 多行文字
-
select 下拉多選
-
Radio 單選框
-
Checkbox 多選框
<body>
<div id="app">
<form>
<!-- input單行表單-->
<div>
<span>姓名：</span>
<span>
<!-- v-model預設是雙向繫結-->
<input type="text" v-model="name1">
</span>
</div>
<!-- 單選按鈕-->
<div>
<span>性別</span>
<span>
<!-- v-model繫結-->
<input type="radio" id="male" value="1" v-model="gender">
<label for="male">男</label>
<input type="radio" id="female" value="2" v-model="gender">
<label for="female"></label>
</span>
</div>
<!-- 多選按鈕 -->
<div>
<span>愛好</span>
<input type="checkbox" id="ball" value="1" v-model="aihao">
<label for="ball">籃球</label>
<input type="checkbox" id="pai" value="2" v-model="aihao">
<label for="pai">排球</label>
<input type="checkbox" id="pingpang" value="3" v-model="aihao">
<label for="pingpang">乒乓球</label>
</div>
<!-- 下拉框 -->
<div>
<span>職業</span>
<select v-model="zhiye">
<option value="0">請選擇職業</option>
<option value="1">教師</option>
<option value="2">程式設計師</option>
<