一、HelloWorld
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--將數(shù)據(jù)渲染到頁面上-->
<div id="app">
<p>{{title}}</p>
{{fn1()}}
{{age}}
<p>{{age>18?'成年':'未成年'}}</p>
<button v-on:click="fn3()">按鈕</button>
</div>
<!--引入js "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data: {
title:'helloworld',
age:15
},
methods:{
fn1:function(){
console.log("方法調(diào)用成功");
},
fn2:function(){
console.log(this)
},
fn3:function(){
this.age=20
}
}
})
console.log(vm.title)
console.log(vm.$data.title)
console.log(vm)
vm.fn1()
vm.fn2()
</script>
</body>
</html>
二哩牍、阻止表單提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<form action="save" v-on:submit.prevent="fn1()">
<input type="text" id="username" v-model="user.username"></input>
<button type="submit">保存</button>
</form>
{{user}}
</div>
<script src="vue.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<script>
// 創(chuàng)建一個vue對象
new Vue({
el: '#app',
data: {
user: {username:"CJ",age:28}
},
methods:{
fn1(){
if (!this.user.username){
alert("請輸入用戶名")
}else{
console.log(this.user.username)
}
}
}
})
</script>
</body>
</html>
<!-- 事件修飾符包括 .stop .prevent .capture .self .once .passive -->
三棚潦、v-test和v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!--都可以替換標簽的全部內(nèi)容，區(qū)別是v-test不能識別字符串中的標簽膝昆，v-html可以識別字符串中的標簽-->
<p v-text="alert">123</p>
<p v-html="alert">321</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
title: "替換后的數(shù)",
str: "<span style='color:blue'>替換后的數(shù)</span>",
alert: '<span onclick="alert(1)">span標簽</sapn>'
}
})
</script>
</body>
</html>
四丸边、v-if和v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 通過v-if判斷條件是否符合叠必，符合則展示標簽中的內(nèi)容 -->
<p v-if="type ==='A'">{{str1}}</p>
<p v-else-if="type ==='B'">{{str2}}</p>
<p v-else>{{str3}}</p>
<p>{{type}}</p>
<button @click="fn1()">buttonA</button>
<button v-on:click="fn2()">buttonB</button>
<!-- v-show和v-if類似，判斷是否符合條件妹窖，通過切換標簽display屬性來展示或隱藏標簽 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
str1:"type是A",
str2:"type是B",
str3:"type不是AB",
type:"A"
},
methods:{
fn1(){
this.type="B"
},
fn2(){
this.type="C"
}
}
})
</script>
</body>
</html>
五挠唆、v-on和$event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- $event代表當前事件 -->
<button @click="fn1($event)">控制臺打印事件</button>
<br>
<br>
<!-- @事件名.修飾符="methods中的方法" once和prevent最常用-->
<button @click.once="fn2('once,只能調(diào)用一次')">打印文本</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
},
methods:{
fn1(e){
console.log(e)
},
fn2(s){
console.log(s)
}
}
})
</script>
</body>
</html>
六、v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list">{{item}}</li>
<br>
<!-- list類型數(shù)組嘱吗，可以取到每個元素的值和下標 -->
<li v-for="(item,index) in list">{{item}}---{{index}}</li>
<br>
<!-- per類型鍵值對數(shù)據(jù)，其結(jié)構(gòu)為value滔驾、(value,key)和(value,key,index) -->
<li v-for="(v,k,i) in per">{{k}}--{{v}}--{{i}}</li>
</ul>
<!--除了表格遍歷谒麦，也可以用<p>標簽-->
<br>
<p v-for="(v,k,i) in per">{{k}}--{{v}}--{{i}}</p>
<br>
<url>
<!-- key標簽中的值是唯一的，作用是：vue渲染頁面的時哆致，根據(jù)key的標識找到每個元素绕德，效率更高 -->
<li v-for="(v,k,i) in per" :key="i">{{v}}</li>
</url>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data:{
list:['查找','增加','修改','刪除'],
per:{
id:1,
name:'zhangsan',
age:'29',
gender:'male'
}
}
})
</script>
</body>
</html>
七、v-bind
7.1 v-bind.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- v-bind
作用：綁定標簽的任何屬性
場景：當標簽的屬性值是不確定的摊阀，可以修改
語法：v-bind：要綁定的屬性名="data中的數(shù)據(jù)"
簡寫：去掉v-bind耻蛇，直接 :src 即可
-->
<div id="app">
<p v-bind:id="ID">內(nèi)容</p>
<img :src="SRC" alt="蒸蝦">
<!-- 特殊情況是class和style屬性，可以有多個值 -->
<!-- 綁定class方式一：如果為類名為true則生效胞此，類名為false則失效 -->
<p :class="{name1:a,name2:b}">判斷類名是否有效</p>
<!-- 綁定class方式二：通過給類名變量賦值臣咖，傳入類名 -->
<p :class="[n1,n2]">為類名變量賦值</p>
<!-- 綁定class方式三：整合上兩種方式，給類名變量賦值漱牵，參數(shù)類型為tuple夺蛇，為true則生效，為false則失效 -->
<p :class="[nObj1,nObj2]"></p>
<!-- 綁定style方式一 通過變量為syle屬性賦值 -->
<p :style="{fontSize:f,color:c}">style方式一</p>
<!-- 綁定style方式二 -->
<p :style="[d,e]">style方式二</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
ID:'newID',
SRC:"http://116.62.148.11:81/menulist/zhengxia/zhengxia.png",
a:true,
b:false,
n1:"name1",
n2:"name2",
nObj1:{
name1:false
},
nObj2:{
name2:true
},
f:'30px',
c:'red',
d:{
fontSize:'30px'
},
e:{
color:'pink'
}
}
})
</script>
</body>
</html>
7.2 v-bind_exam
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.name{
color:tomato
}
</style>
<body>
<div id="app">
<p :class="{name:a}">內(nèi)容</p>
<button v-on:click="reverseBool()">按鈕</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
a:true
},
methods:{
reverseBool(){
this.a = !this.a
}
}
})
</script>
</body>
</html>
<!--
動態(tài)切換class名:
1.通過v-bind指令給標簽綁定類名酣胀，在data中指定變量類型刁赦。
2.設置按鈕綁定事件，如果點擊按鈕會改變類名
3.如果類名匹配上style中的類名闻镶，字體顏色發(fā)生改變甚脉。
技巧：可以直接用@click="a=!a" 在指令中設置取反，而不用再寫函數(shù)铆农。
-->
八牺氨、v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- v-model用于表單元素的綁定,表單中元素變化會導致v-model綁定的變量變化 -->
<div id="app">
{{name}}:
<input type="text" v-model="name">
<br>
<!-- 其他表單元素，多行墩剖、單選波闹、復選、下拉等等 -->
<!-- 多行表單 -->
{{msg}}
<textarea v-model="msg"></textarea>
<br>
<!-- 單個復選框涛碑，綁定bool值 -->
{{check}}
<input type="checkbox" v-model="check">
<br>
<!-- 多個復選框精堕，綁定數(shù)組，數(shù)組中會放入選中框的value值 -->
{{checklist}}
<input type="checkbox" value="male" v-model="checklist">M
<input type="checkbox" value="female" v-model="checklist">F
<input type="checkbox" value="other" v-model="checklist">O
<br>
<!-- 單選框,綁定字符串蒲障，字符串會被賦值選定的框的value值 -->
{{picked}}
<input type="radio" value="查找" v-model="picked">A
<input type="radio" value="刪除" v-model="picked">B
<br>
<!-- 下拉框,綁定字符串歹篓，字符串會被賦值選定的框的value值 -->
{{select}}
<select v-model="select">
<!-- disabled表示無法選中瘫证，select和value為一樣都為空，則顯示該標簽的內(nèi)容 -->
<option disabled value="">請選擇</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="杭州">杭州</option>
</select>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
name: 'name',
msg: '多行輸入框',
check: true,
checklist: ["female"],
picked:'',
select:''
}
})
</script>
</body>
</html>
九庄撮、v-cloak和v-once
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 解決插值表達式{{}}頁面閃爍的問題
1.給閃爍的標簽設置v-clock
2.在style樣式中指定display為none
備注：可以直接給div標簽添加v-clock屬性背捌，即<div id="app" v-cloak>哆料，標簽的內(nèi)容都不會閃爍
-->
<p v-cloak>{{msg}}</p>
<!-- 標簽只需要渲染一次鹃骂，添加v-once指令侥衬。那么msg值改變也不會重新渲染 -->
<p v-once>{{msg}}</p>
<input type="text" v-model="msg">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:'解決插值表達式{{}}頁面閃爍的問題'
}
})
</script>
</body>
</html>
十焚鲜、example
10.1 example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale">
<!-- border-collapse有兩個屬性separate/collapse,決定表格的邊框是分開的還是合并的 -->
<style>
#app {
width: 600xp;
margin: 10px auto;
}
.tb {
border-collapse: collapse;
width: 100%;
}
.tb th {
background-color: #0094ff;
color: white;
}
.tb td,
.tb th {
padding: 5px;
border: 1px solid black;
text-align: center;
}
.add {
padding: 5px;
border: 1px solid black;
margin-bottom: 20px;
}
</style>
</head>
<body>
<!-- <div id="app"> -->
<div class="add">
品牌名稱：
<input type="text">
<input type="button" value="添加">
</div>
<div class="add">
品牌名稱：
<!-- placeholder是占位符 -->
<input type="text" placeholder="請輸入搜索條件">
</div>
<div>
<table class="tb">
<tr>
<!-- th標簽會將文本加粗顯示 -->
<th>編號</th>
<th>品牌名稱</th>
<th>創(chuàng)立時間</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>LV</td>
<td>2020-1-1</td>
<td>
<!-- href是超鏈接屬性,#是無意義的,但是會將文本以超鏈接的形式展示 -->
<a href="#">刪除</a>
</td>
</tr>
<tr>
<!-- colspan合并四個單元格 -->
<td colspan="4">沒有品牌數(shù)據(jù)</td>
</tr>
</table>
</div>
<!-- </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
</script> -->
</body>
</html>
10.2 example_with_vue.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale">
<!-- border-collapse有兩個屬性separate/collapse,決定表格的邊框是分開的還是合并的 -->
<style>
#app {
width: 600xp;
margin: 10px auto;
}
.tb {
border-collapse: collapse;
width: 100%;
}
.tb th {
background-color: #0094ff;
color: white;
}
.tb td,
.tb th {
padding: 5px;
border: 1px solid black;
text-align: center;
}
.add {
padding: 5px;
border: 1px solid black;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="add">
品牌名稱：
<input type="text" v-model="itemname">
<input type="button" value="添加" v-on:click="addItem()">
</div>
<div class="add">
品牌名稱：
<!-- placeholder是占位符 -->
<input type="text" placeholder="請輸入搜索條件" v-model="keyword">
</div>
<div>
<table class="tb">
<tr>
<!-- th標簽會將文本加粗顯示 -->
<th>編號</th>
<th>品牌名稱</th>
<th>創(chuàng)立時間</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in newlist">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>
<!-- href是超鏈接屬性,#是無意義的,但是會將文本以超鏈接的形式展示 -->
<a href="#" v-on:click.prevent="deleteItem(index)">刪除</a>
</td>
</tr>
<tr v-if="list.length === 0">
<!-- colspan合并四個單元格 -->
<td colspan="4">沒有品牌數(shù)據(jù)</td>
</tr>
</table>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//模擬ajax返回的數(shù)據(jù)
var list = [
{
name:'TCL',date:new Date()
},{
name:'huawei',date:new Date()
},{
name:'xiaomi',date:new Date()
}
]
var vm = new Vue({
el: "#app",
data: {
list,
itemname:'',
keyword:''
},
methods:{
addItem(){
//向數(shù)組中添加數(shù)據(jù)
this.list.unshift({
name:this.itemname,
date:new Date()
})
},
deleteItem(index){
if(confirm("確認刪除嫉鲸？")){
//從數(shù)組中刪除數(shù)據(jù)凶朗，傳參為(索引远荠，長度)
this.list.splice(index,1)
}
}
},
computed:{
newlist(){
return this.list.filter(item => {
return item.name.startsWith(this.keyword)
})
}
}
})
</script>
</body>
</html>
<!--
整合vue步驟：
1.在視圖中添加div#app
2.引入vue.js
3.new Vue({})
4.Vue實例的選項：el data
5.在視圖中 通過{{}}使用data中的數(shù)據(jù)
-->
<!--
渲染步驟：
1.在data中定義數(shù)據(jù)
2.通過v-for指令插入到表格中
3.在視圖中通過插值表達式{{}}使用數(shù)據(jù)
4.通過v-if指令判斷數(shù)據(jù)是否存在砸抛，如果不存在則顯示沒有品牌數(shù)據(jù)
-->
<!--
添加商品功能：
1.找到輸入框標簽亚铁，添加v-model="itemname"指令蝇刀，綁定data中的itemname變量
2.找到添加按鈕 綁定事件 @click="addItem()"，在methods中提供addItem方法徘溢，
向list添加接收到的數(shù)據(jù)
-->
<!--
商品刪除功能：
1.找到商品刪除標簽吞琐，添加綁定事件@click.prevent="deleteItem()",
prevent組織默認行為，此處為跳轉(zhuǎn)連接然爆，僅執(zhí)行click綁定的方法;
在methods中提供deleteItem()方法站粟，從list中刪除指定的數(shù)據(jù)，
可以調(diào)用confirm方法彈出確認框曾雕。
-->
<!--
商品搜索功能(輸入一個搜索詞直接響應結(jié)果)：
1.定義變量通過v-model指令接受輸入的搜索詞
2.設置計算屬性卒蘸，通過filter()方法對原數(shù)組的元素進行篩選，返回篩選后的數(shù)組
3.通過v-for指令遍歷數(shù)據(jù)渲染到頁面
-->
10.3 example_with_axios.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale">
<!-- border-collapse有兩個屬性separate/collapse,決定表格的邊框是分開的還是合并的 -->
<style>
#app {
width: 600xp;
margin: 10px auto;
}
.tb {
border-collapse: collapse;
width: 100%;
}
.tb th {
background-color: #0094ff;
color: white;
}
.tb td,
.tb th {
padding: 5px;
border: 1px solid black;
text-align: center;
}
.add {
padding: 5px;
border: 1px solid black;
margin-bottom: 20px;
}
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div class="add">
品牌名稱：
<input type="text" v-model="itemname">
<input type="button" value="添加" v-on:click="addItem()">
<br>
{{itemname}}
</div>
<div class="add">
品牌名稱：
<!-- placeholder是占位符 -->
<input type="text" placeholder="請輸入搜索條件" v-model="keyword">
</div>
<div>
<table class="tb">
<tr>
<!-- th標簽會將文本加粗顯示 -->
<th>id</th>
<th>view_url</th>
<th>view_link</th>
<th>sequence</th>
<th>publish_status</th>
<th>create_time</th>
<th>update_time</th>
</tr>
<tr v-for="(item,index) in newlist">
<td>{{item.id}}</td>
<td>{{item.viewUrl}}</td>
<td>{{item.viewLink}}</td>
<td>{{item.sequence}}</td>
<td>{{item.publishStatus}}</td>
<td>{{item.createTime}}</td>
<td>{{item.updateTime}}</td>
<td>
<!-- href是超鏈接屬性,#是無意義的,但是會將文本以超鏈接的形式展示 -->
<a href="#" v-on:click.prevent="deleteItem(item.id)">刪除</a>
</td>
</tr>
<tr v-if="newlist.length === 0">
<!-- colspan合并四個單元格 -->
<td colspan="8">沒有品牌數(shù)據(jù)</td>
</tr>
</table>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
list:[],
itemname:'',
keyword:'',
viewpager:[]
},
methods:{
addItem(){
//發(fā)送添加數(shù)據(jù)請求
axios.post("http://192.168.32.223:8002/menu/addViewPager/",this.itemname)
.then((res)=>{
const{status,data} = res
if(status === 200){
alert(this.itemname+"---添加成功")
this.findAllViewPager()
}
})
.catch((err)=>{
})
},
deleteItem(id){
if(confirm("確認刪除翻默？")){
//發(fā)送刪除數(shù)據(jù)請求缸沃，傳參為(索引，長度)修械，并重新獲取數(shù)據(jù)
axios.delete("http://192.168.32.223:8002/menu/deleteViewPager?viewPagerId="+id)
.then((res)=>{
const{status,data} = res
if(status === 200){
alert("刪除成功")
this.findAllViewPager()
}
})
.catch((err)=>{
})
}
},
//通過axios獲取后臺數(shù)據(jù)
findAllViewPager(){
axios.get("http://192.168.32.223:8002/menu/findAllViewPager")
.then((res)=>{
const{status,data} = res
console.log(data)
if(status === 200){
this.viewpager=data.data
}
})
.catch((err)=>{
console.log(err)
})
}
},
computed:{
newlist(){
return this.viewpager.filter(item => {
return item.viewLink.startsWith(this.keyword)
})
}
},
created(){
// mounted(){
this.findAllViewPager()
}
})
</script>
</body>
</html>
<!--
整合vue步驟：
1.在視圖中添加div#app
2.引入vue.js
3.new Vue({})
4.Vue實例的選項：el data
5.在視圖中 通過{{}}使用data中的數(shù)據(jù)
-->
<!--
渲染步驟：
1.在data中定義數(shù)據(jù)
2.通過v-for指令插入到表格中
3.在視圖中通過插值表達式{{}}使用數(shù)據(jù)
4.通過v-if指令判斷數(shù)據(jù)是否存在趾牧，如果不存在則顯示沒有品牌數(shù)據(jù)
-->
<!--
添加商品功能：
1.找到輸入框標簽，添加v-model="itemname"指令肯污，綁定data中的itemname變量
2.找到添加按鈕 綁定事件 @click="addItem()"翘单，在methods中提供addItem方法，
向list添加接收到的數(shù)據(jù)
-->
<!--
商品刪除功能：
1.找到商品刪除標簽蹦渣，添加綁定事件@click.prevent="deleteItem()",
prevent組織默認行為哄芜，此處為跳轉(zhuǎn)連接，僅執(zhí)行click綁定的方法;
在methods中提供deleteItem()方法柬唯，從list中刪除指定的數(shù)據(jù)认臊，
可以調(diào)用confirm方法彈出確認框。
-->
<!--
商品搜索功能(輸入一個搜索詞直接響應結(jié)果)：
1.定義變量通過v-model指令接受輸入的搜索詞
2.設置計算屬性锄奢，通過filter()方法對原數(shù)組的元素進行篩選失晴，返回篩選后的數(shù)組
3.通過v-for指令遍歷數(shù)據(jù)渲染到頁面
-->
<!--
通過axios對viewpager進行增刪改查操作：
①查:創(chuàng)建axios請求方法剧腻，將結(jié)果賦值給變量，通過mounted調(diào)用該方法涂屁，將結(jié)果進行遍歷
②增：
-->
十一书在、mounted自動獲取焦點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 需要給dom元素設置ref屬性，mounted方法可以更加ref屬性拿到對應的dom -->
<input type="text" ref="foc">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data:{
},
methods:{
},
//該方法會在頁面渲染完成后調(diào)用拆又，取到對應名字的dom儒旬，調(diào)用focus方法完成自動聚焦
mounted(){
console.log(this.$refs.foc)
this.$refs.foc.focus()
}
})
</script>
</body>
</html>
十二、插件
12.1 自定義插件
定義插件
(function (window)){
const MyPlugin = {}
MyPlugin.install = function(Vue) {
//1.定義一個全局方法
Vue.myGlobalMethod = function(){
console.log('全局的方法')
}
//2.定義一個指令
Vue.directive('upper',function(el,binding){
console.log('哈哈')
})
//3.定義一個實例方法
Vue.prototype.$myMethod = function(){
console.log('我是一個實例方法')
}
}
//暴露出
window.MyPlugin = MyPlugin
}(window)
使用插件
<body>
<div id="app">
<p v-upper="msg"></p>
</div>
<script src="./vue-myPlugin.js"></script>
<script type="text/javascript">
//Vue.use 內(nèi)部會安裝插件帖族，內(nèi)部調(diào)用install
Vue.use(MyPlugin)
//可以調(diào)用全局的方法
Vue.myGlobalMethod()
//局部方法的調(diào)用
const vm = new Vue({
el: "#app",
data: {
msg: ''
}
})
vm.$myMethod()
</script>
12.2 directives自定義focus指令_全局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-focus>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//全局自定義指令(設置自定義聚焦指令v-focus)
//1.在new Vue之前栈源，Vue.directive('指令名',{inserted(el){}})
//2.inserted(el){自定義指令具體功能}
//使用該指令的dom元素被插入到頁面匯中時，會自動觸發(fā)inserted
//3.在視圖中v-指令名
//獲取焦點
Vue.directive('focus',{
inserted(el){
console.log(el)
el.focus()
}
})
new Vue({
el: "#app"
})
</script>
</body>
</html>
12.3 directives自定義focus指令_局部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-focus>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
},
directives:{
focus:{
inserted(el){
console.log(el)
el.focus()
}
}
}
})
</script>
</body>
</html>
<!-- 局部指令只能在綁定的DOM中使用盟萨，全局指令可以在任何DOM中使用 -->
十三、過濾器
13.1 過濾器_全局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<p>{{msg | toUpper}}</p>
<p>{{date | fmtDate("日期：")}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/moment"></script>
<script>
//全局過濾器,可以使用在插值{{}}和v-bind中
//需要定義在new Vue之前
Vue.filter('toUpper',(v)=>{
return v.toUpperCase()
})
Vue.filter('fmtDate',(v,k)=>{
return k + moment(v).format('YYYY-MM-DD hh:mm:ss')
// return dateFormat("YYYY-MM-DD hh:mm:ss",this.date)
})
new Vue({
el:"#app",
data:{
msg:"abc",
date:new Date()
}
})
</script>
</body>
</html>
13.2 過濾器_局部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<p>{{date | fmtDate("date：")}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/moment"></script>
<script>
new Vue({
el:"#app",
data:{
date:new Date()
},
filters:{
//第一個參數(shù)是傳入的值了讨，后續(xù)是自定義參數(shù)
fmtDate(v,k){
return k + moment(v).format('YYYY-MM-DD hh:mm:ss')
}
}
})
</script>
</body>
</html>
十四捻激、計算屬性和watch監(jiān)視
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 調(diào)用計算屬性 -->
<p>{{reverseMessage}}</p>
<input type="text" placeholder="顯示計算后的結(jié)果" v-model="reverseMessage"></input>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"hello world !",
reverseMessage1,
reverseMessage2
},
//如果沒有依賴data中的數(shù)據(jù)，第一次使用計算屬性時前计，會把第一次的結(jié)果進行緩存胞谭。
computed:{
//定義計算方法
reverseMessage(){
//this是指當前的vue對象，此處表示計算屬性的get方法
return this.msg.split(' ').reverse().join(' ')
},
reverseMessage1(){
//計算屬性包括get和set方法
get(){
return this.msg.split(' ').reverse().join(' ')
},
set(val){
//val就是傳入的reverseMessage1的值,當改變計算屬性的值時男杈，會調(diào)用該方法處理邏輯丈屹。
const m=val.split(' ')
this.msg=m.reverse().join(' ')
}
}
},
//監(jiān)視：監(jiān)視msg,如果msg改變，則調(diào)用該方法處理邏輯
watch: {
msg(val){
this.reverseMessage1=val.split(' ').reverse().join(' ')
}
}
})
//通過vm實例對象來調(diào)用watch方法進行監(jiān)視伶棒。$watch是vue的一個實例屬性旺垒，vue有許多實例屬性和實例方法。如果沒有$符號肤无，說明是全局屬性方法先蒋。
vm.$watch('msg',function(val){
this.reverseMessage2=val.split(' ').reverse().join(' ')
})
</script>
</body>
</html>
<!-- 計算屬性：當某個屬性的值改變，何其相關(guān)聯(lián)的屬性的值也會自動發(fā)生改變 -->
<!-- 使用Object.defineProperty(obj, prop, descriptor)可以為已經(jīng)定義的對象類添加計算屬性宛渐，設置set和get方法竞漾，當屬性發(fā)生變化時， -->
<!-- 搜索MDN網(wǎng)站可以查詢到所有的前端方法的使用 -->
<!-- 計算屬性和監(jiān)視都可以實現(xiàn)某屬性發(fā)生改變窥翩，另一個屬性也發(fā)生變化的情況业岁。 -->
十五、axios
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//get請求
axios.get("http://192.168.32.223:8002/menu/findViewPager")
.then((res)=>{
//console.log(res)
const{status,data} = res
if(status===200){
console.log(data)
}
})
.catch((err)=>{})
// post請求
// axios.post("http://192.168.32.223:8002/menu/addViewPager/",{
// "viewUrl": "https://192.168.32.223/hxr.png",
// "viewLink": "https://www.marssenger.com/welcome.html",
// "sequence": "7",
// "publishStatus": "1"
// })
// .then((res)=>{
// const{status,data} = res
// if(status===200){
// console.log("添加成功")
// }
// })
// .catch((err)=>{
// })
//delete請求
// axios.delete("http://192.168.32.223:8002/menu/deleteViewPager?viewPagerId=74")
// .then((res)=>{
// const{status,data} = res
// if(status === 200){
// console.log("刪除成功")
// }
// })
// .catch((err)=>{
// })
new Vue({
el: "#app",
data:{
}
})
</script>
</body>
</html>
十六寇蚊、異步操作和watch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: ''
},
//watch可以監(jiān)測已經(jīng)存在的屬性笔时，記錄新值和舊值
//使用場景：當需要在數(shù)據(jù)變化時執(zhí)行異步或開銷比較大的操作時使用（如進行關(guān)鍵字搜索時，就需要watch監(jiān)控輸入的關(guān)鍵字變化仗岸，檢測到關(guān)鍵字變化就通過關(guān)鍵字發(fā)送請求）
watch: {
msg(newVal,oldVal){
console.log(newVal,oldVal);
}
}
})
</script>
</body>
</html>
<!--
異步操作包括1.ajax 2.定時器 3.click事件 4.數(shù)據(jù)庫操作
-->
十七糊闽、component組件
17.1 component組件_全局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<span-btn></span-btn>
<span-btn></span-btn>
<span-btn></span-btn>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//全局組件：1.在newVue之前定義 2.命名規(guī)范：xxx-xx 3.全局組件可以用在局部組件中
//將共同的結(jié)構(gòu)提取出來創(chuàng)建組件梳玫，組件可以復用，組件之間相互獨立
//組件可以讓我們復用已有的html右犹、css提澎、js
Vue.component('span-btn',{
template:
//要求有一個根元素
`
<div>
<span>{{count}}</span>
<button v-on:click="changeCount">按鈕</button>
<br>
</div>
`
,
//data數(shù)據(jù)必須是一個函數(shù)且只有一個返回值，這樣每個組件的數(shù)據(jù)都有自己的作用域
data(){
return{
count:0
}
},
methods:{
changeCount(){
this.count++
}
}
});
new Vue({
el:"#app"
})
</script>
</body>
</html>
17.2 component組件_局部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<span-btn></span-btn>
<span-btn></span-btn>
<span-btn></span-btn>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
},
components:{
//局部組件：1.在newVue之內(nèi)定義 2.命名規(guī)范：xxx-xx 3.可以在局部組件中調(diào)用全局組件
//將共同的結(jié)構(gòu)提取出來創(chuàng)建組件念链，組件可以復用盼忌，組件之間相互獨立
//組件可以讓我們復用已有的html、css掂墓、js
'span-btn':{
template:
//要求有一個根元素
`
<div>
<span>{{count}}</span>
<button v-on:click="changeCount">button</button>
<br>
</div>
`
,
//data數(shù)據(jù)必須是一個函數(shù)且只有一個返回值谦纱，這樣每個組件的數(shù)據(jù)都有自己的作用域
data(){
return{
count:0
}
},
methods:{
changeCount(){
this.count++
}
}
}
}
})
</script>
</body>
</html>
十八、父子組件數(shù)據(jù)傳遞
18.1 父子組件數(shù)據(jù)傳遞_全局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<child-a v-bind:a="msg"></child-a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//情況一：父組件傳值給子組件,自組價為全局組件
Vue.component("child-a",{
template:
`
<div>我是childa子組件--{{a}}</div>
`,
//通過data函數(shù)定義的值的作用域在自己對象中
//props選項設置標簽的屬性君编，可以在標簽中傳值
//props中的屬性可以在組件中使用
props:['a']
})
//Vue相當于所有組件的父組件
new Vue({
el:"#app",
data:{
msg:"父組件傳值給全局子組件成功"
}
})
</script>
</body>
</html>
<!--
在子組件中使用父組件的值：
1.在自組件中定義props屬性跨嘉，為組件標簽設置屬性變量。在組件內(nèi)就可以使用這個變量吃嘿。
2.在父組件中定義變量的值祠乃，通過v-bind指令將值賦值給屬性。
-->
18.2 父子組件數(shù)據(jù)傳遞_局部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<child-a v-bind:a="msg"></child-a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//Vue相當于所有組件的父組件
new Vue({
el:"#app",
data:{
msg:"父組件傳值給局部子組件成功"
},
//情況二：父組件傳值給子組件兑燥，子組件為局部組件
components:{
"child-a":{
template:
`
<div>我是child-a子組件--{{a}}</div>
`
,
props:['a']
}
}
})
</script>
</body>
</html>
<!--
在子組件中使用父組件的值：
1.在自組件中定義props屬性亮瓷，為組件標簽設置屬性變量。在組件內(nèi)就可以使用這個變量降瞳。
2.在父組件中定義變量的值嘱支，通過v-bind指令將值賦值給屬性。
-->
十九挣饥、動態(tài)路由
19.1 動態(tài)路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<router-link to="/basketball">籃球</router-link>
<router-link to="/football">足球</router-link>
<router-link to="/tennis">網(wǎng)球</router-link>
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
var Ball = {
template: `<div>球類運動:{{$route.params.content}}</div>`
}
var router = new VueRouter({
routes:[
{
//動態(tài)路由除师，匹配/:前面的路徑并將傳參到/:后面的變量
path:'/:content',
component: Ball
}
]
})
new Vue({
el:"#app",
router:router
})
</script>
</body>
</html>
<!--
動態(tài)路由使用場景：如"/:id"，id處是傳入的參數(shù)扔枫，所有id都會加載同一個組件馍盟，
但是會根據(jù)id不同展示不同的內(nèi)容。如知乎頁面中點擊不同的詳情頁茧吊，組件相同贞岭，
但是展示不同的內(nèi)容。
1.通過<router-link to="/aaa">AAA</router-link>綁定跳轉(zhuǎn)
2.<router-view></router-view>即是組件的位置
3.路由實例化搓侄，將哈希路徑和自定義的組件綁定在一起瞄桨，一旦哈希變化，就會渲染為哈希對應的組件
4.在vue中掛載創(chuàng)建的路由對象
-->
19.2 路由vue-router-to屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 通過不同的to屬性寫法匹配組件 -->
<!-- 寫死路徑進行匹配 -->
<router-link to="/aaa">AAA</router-link>
<!-- 通過v-bind傳入?yún)?shù) -->
<router-link :to="user">BBB</router-link>
<!-- 傳入對象,通過path匹配可以省略#和/ -->
<router-link :to="{path:'ccc'}">CCC</router-link>
<!-- 傳入對象讶踪，通過name進行匹配(#和/不能省略) -->
<router-link :to="{name:'xxx'}">DDD</router-link>
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
var comA = {
template:`<div>AAAAA</div>`
}
var comB = {
template:`<div>BBBBB</div>`
}
var comC = {
template:`<div>CCCCC</div>`
}
var comD = {
template:`<div>DDDDD</div>`
}
var router = new VueRouter({
routes:[
{
path: '/aaa',
component: comA
},
{
path: '/bbb',
component: comB
},
{
path: '/ccc',
component: comC
},
{
name: 'xxx',
path: '/dd',
component: comD
}
]
})
new Vue({
el:"#app",
router:router,
data:{
user:'bbb'
}
})
</script>
</body>
</html>
19.3 路由-view-router
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- <ul>
<li><a href="#/aaa">AAA</a></li>
<li><a href="#/bbb">BBB</a></li>
<li><a href="#/ccc">CCC</a></li>
</ul>
<div id="container"> -->
<!-- 通過router提供的標簽實現(xiàn)路由 -->
<router-link to="/aaa">AAA</router-link>
<router-link to="/bbb">BBB</router-link>
<router-link to="/ccc">CCC</router-link>
<!-- <div id="container">
</div> -->
<!-- 通過router提供的標簽設置組件容器 -->
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
//提供組件(也可以直接寫到router中)
var comA = {
template: `<div>AAAAA</div>`
}
var comB = {
template: `<div>BBBBB</div>`
}
var comC = {
template: `<div>CCCCC</div>`
}
//路由的實例化
var router = new VueRouter({
routes:[
{
//配置路由,根據(jù)路徑配置不同的路由
path:'/aaa',
component:comA
},
{
//配置路由
path:'/bbb',
component:comB
},
{
//配置路由
path:'/ccc',
component:comC
}
]
})
//在vue對象中掛載路由
new Vue({
el:"#app",
router:router
})
</script>
</body>
</html>
<!--
通過vue-router.js模塊提供的標簽實現(xiàn)路由(引入vue-router的CDN路徑)：
1.通過<router-link to="/aaa">AAA</router-link>綁定跳轉(zhuǎn)
2.<router-view></router-view>即是組件的位置
3.路由實例化芯侥，將哈希路徑和自定義的組件綁定在一起，一旦哈希變化，就會渲染為哈希對應的組件
4.在vue中掛載創(chuàng)建的路由對象
-->
19.4 原生命令實現(xiàn)前端路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<!-- #aaa表示location中的哈希路由柱查，會在原路徑下添加#aaa -->
<li><a href="#/aaa">AAA</a></li>
<li><a href="#/bbb">BBB</a></li>
<li><a href="#/ccc">CCC</a></li>
</ul>
<div id="container">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//獲取標簽元素
var div = document.getElementById('container')
//監(jiān)聽窗口的hash值是否改變廓俭，如果發(fā)生改變，會觸發(fā)方法
window.onhashchange = function(){
var hash = location.hash
console.log(hash)
hash = hash.replace("#","")
console.info(hash)
switch(hash){
case '/aaa':
div.innerText = "AAAAA"
break;
case '/bbb':
div.innerText = "BBBBB"
break;
case '/ccc':
div.innerText = "CCCCC"
break;
default:
break;
}
}
</script>
</body>
</html>
<!--
過程：
1.點擊超鏈接后改變url的標識
2.通過window.onhashchange監(jiān)聽標識變化唉工，發(fā)生變化則回調(diào)函數(shù)進行處理
3.函數(shù)中根據(jù)location.hash獲取hash值研乒，渲染對應的組件或內(nèi)容
-->
二十、路由
20.1 路由vue-router-重定向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<router-link to="/aaa">首頁</router-link>
<router-link to="/bbb">熱點</router-link>
<router-link to="/ccc">簡訊</router-link>
<br>
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
var comA = {
template:`<dev>comA</dev>`
}
var comB = {
template:`<dev>comB</dev>`
}
var comC = {
template:`<dev>comC</dev>`
}
var router = new VueRouter({
routes:[
//對請求路徑的哈希為'/'的所有請求都重定向到'/aaa'
//通過path屬性進行綁定
{
path:'/',
redirect:{
path:'/aaa'
}
},
//通過name屬性進行綁定
{
path:'/aaa',
redirect:{
name:'bbb'
}
},
{
path: '/aaa',
component: comA
},
{
name: 'bbb',
path: '/bbb',
component: comB,
//redirect也可以寫在這里
redirect:{
path: '/ccc'
}
},
{
path: '/ccc',
component: comC
},
//如果用戶輸入的路由有誤淋硝，那么直接重定向到主頁
//需要注意放置的順序雹熬，從上到下進行匹配,重定向后重新走一遍匹配規(guī)則
{
path: '*',
redirect: {
path: '/aaa'
}
}
]
})
new Vue({
el: "#app",
router:router
})
</script>
</body>
</html>
<!--
重定向：強制修改url標識，重新發(fā)起請求
1.在路由的實例化中將需要重定向的路徑redirect到目標路徑
-->
20.2 不通過router-link改變標識
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 為選中的標簽添加樣式 -->
<style>
.router-link-exact-active.router-link-active{
color:blue;
}
</style>
</head>
<body>
<div id="app">
<!-- 將最終的默認的標簽<a></a>改為<span></span> -->
<router-link to="/aaa" tag="span">AAA</router-link>
<router-link to="/bbb">BBB</router-link>
<button @click="changeUrl()">音樂</button>
<br>
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
var comA = {
template: `<div>comA組件</div>`
}
var comB = {
template: `<div>comB組件</div>`
}
var comC = {
template: `<div>comC組件</div>`
}
var router = new VueRouter({
routes:[
{
path:"/aaa",
component:comA
},
{
path:"/bbb",
component:comB
},
{
path:"/ccc",
component:comC
}
]
})
new Vue({
el: "#app",
router:router,
methods:{
changeUrl(){
//獲取路由對象谣膳，改變路由的標識竿报，并渲染對應的組件
this.$router.push("/ccc")
}
}
})
</script>
</body>
</html>
<!--
1.可以通過設置事件調(diào)用this.$router.push("")方法，改變路由的標識继谚，并渲染對應的組件烈菌。
2.<router-link to=""><router-link>標簽在前端頁面中最終會變成<a></a>標簽，
可以設置tag屬性<router-link to="/aaa" tag="span">AAA</router-link>改為<span></span>標簽花履，
如果選中了標簽芽世，會自動設置類名，變成<a href="#/aaa" class="router-link-exact-active router-link-active"></a>
可以通過類名來鎖定點擊的標簽臭挽，通過style樣式進行渲染捂襟。
-->
二十一咬腕、路由的嵌套_二級路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.router-link-exact-active.router-link-active{
color: crimson;
}
/*float: left標簽顯示在一行欢峰；list-style: none去掉文字前的圓點*/
li{
float: left;
list-style: none;
}
/*text-decoration: none去掉下劃線*/
a{
text-decoration: none;
}
.container{
height: 100px;
border: 1px solid black;
}
/*clear: both清除前面設置的float:left*/
.container-sub{
clear: both;
height: 50px;
border: 1px solid green
}
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="app">
<ul>
<router-link to="/home" tag="li"><a>首頁</a></router-link>
<router-link to="/hot" tag="li"><a>熱點</a></router-link>
<router-link to="/music" tag="li"><a>音樂</a></router-link>
</ul>
<br>
<!--給組件設置樣式-->
<router-view class="container"></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
//一級組件的渲染
var home = {
template: `<div>首頁首頁</div>`
}
var hot = {
template: `<div>熱點熱點</div>`
}
var music = {
template:
`<div>
<router-link to="/music/classic" tag="li"><a>古典</a></router-link>
<router-link to="/music/pop" tag="li"><a>流行</a></router-link>
<router-link to="/music/jazz" tag="li"><a>爵士</a></router-link>
<br>
<router-view class="container-sub"></router-view>
</div>`
}
//二級組件的渲染
var musicsub = {
template:
`
<div>musicsub:{{this.$route.params.id}}</div>
`
}
var router = new VueRouter({
routes:[
{
name:'home',
path:'/home',
component:home
},
{
name:'hot',
path:'/hot',
component:hot
},
{
name:'music',
path:'/music',
component:music,
//children用法和routes是一樣的
children:[
{
path:'/music/:id',
component:musicsub
}
]
}
]
})
new Vue({
el: "#app",
router:router
})
</script>
</body>
</html>
<!--
將一級路由中的組件中再添加一個組件。
在路由對象中添加children屬性涨共，綁定二級路由的路徑和組件纽帖。
-->
二十二、動畫
22.1 過渡和動畫
transition是Vue的內(nèi)置組件
<head>
<title></titile>
<link rel"stylesheet" href="">
<script type="text/javascript" src="../js/vue.js"></script>
<style type="text/css">
/*淡入淡出效果*/
.fade-enter-active,.fade-leave-active{
transition: opacity .5s;
}
.fade-enter,.fade-leave-to{
opaicty: .5s;
}
</style>
</head>
<div id="app">
<button @click="isOk=!isOk">切換效果</button>
<transition name="fade">
<p v-show="isOk">過渡效果演示</p>
</transition>
</div>
<script type="text/javascript">
const vm = new Vue({
el: "#app",
data: {
isOk: false
}
})
</script>
從無到有：本身是隱藏的举反，點擊按鈕顯示出來
.fade-enter 一開始進入的狀態(tài)
.fade-enter-active 從無到有的時候的效果
.fade-enter-to 從無到有的結(jié)束的效果.fade-leave 最開始有的時候的狀態(tài)
.fade-leave-active 從有到無的過渡的效果
.fade-leave-to 沒有的時候的效果
image.png
/*平移效果*/
p {
background-color: green;
width: 100px;
text-align: center;
}
.myFade-enter-active{
transition: all 2s;
}
.myFade-leave-active{
transition: all 3s;
}
.myFade-enter,.myFade-leave-to{
transform: translateX(20px)
}
/*動畫效果*/
p {
background-color: green;
width: 100px;
text-align: center;
}
/*顯示狀態(tài)效果*/
.bound-enter-active{
animation: bounce-in .5s
}
/*隱藏狀態(tài)效果*/
.bounce-leave-active{
animation: bounce-in .5s reverse;
}
/*動畫,scale表示縮放倍數(shù)*/
@keyframe bounce-in{
0%{
transform: scale(0)
}
50%{
transform: scale(2)
}
100%{
transform: scale(1)
}
}
22.2 過渡動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--<link rel="stylesheet" >
--> <style>
/*設置從右側(cè)模糊進入和從右側(cè)模糊退出的動畫*/
* {
padding: 0;
margin: 0;
}
.test{
width: 100px;
height: 100px;
background-color: coral;
position: absolute;
left: 0;
}
.v-enter,.v-leave-to{
opacity:0;
left:300px;
}
.v-enter-to,.v-leave{
opacity:1;
left:0px;
}
.v-enter-active,.v-leave-active{
transition: all 1s;
}
</style>
</head>
<body>
<div id="app">
<button @click="isShow = !isShow">按鈕</button>
<!-- 給需要過渡效果的元素(插入或移除的元素)外層包裹組件 transition -->
<transition>
<div class="test" v-if="isShow">content</div>
</transition>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--<script src="https://unpkg.com/animate.css@3.5.2/animate.min.css"></script>-->
<script>
new Vue({
el: "#app",
data: {
isShow:false
},
methods:{
}
})
</script>
</body>
</html>
22.3 第三庫的過度動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入第三方庫Animate -->
<link rel="stylesheet" >
<style>
* {
margin: 15px;
padding: 0px;
}
</style>
</head>
<body>
<div id="app">
<button @click="isShow = !isShow">按鈕</button>
<!-- 給需要過渡效果的元素(插入或移除的元素)外層包裹組件 transition -->
<transition
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<div class="test" v-if="isShow">content</div>
</transition>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
isShow:false
},
methods:{
}
})
</script>
</body>
</html>
二十三懊直、鉤子函數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "vue的生命周期",
},
beforeCreate: function(){
console.group('--beforeCreate創(chuàng)建前的狀態(tài)---');
console.log("%c%s","color:red","el :"+this.$el);//el未定義
console.log("%c%s","color:red","data:"+this.$data);//data未定義
console.log("%c%s","color:red","message:"+this.message);
},
created: function(){
console.group('--create創(chuàng)建后的狀態(tài)---');
console.log("%c%s","color:red","el :"+this.$el);//el未定義
console.log("%c%s","color:red","data:"+this.$data);//data未定義
console.log("%c%s","color:red","message:"+this.message);
},
beforeMount: function(){
console.group('--beforeMount掛載前的狀態(tài)---');
console.log("%c%s","color:red","el :"+this.$el);//el未定義
console.log("%c%s","color:red","data:"+this.$data);//data未定義
console.log("%c%s","color:red","message:"+this.message);
},
mounted: function(){
console.group('--mounted掛載后的狀態(tài)---');
console.log("%c%s","color:red","el :"+this.$el);//el未定義
console.log("%c%s","color:red","data:"+this.$data);//data未定義
console.log("%c%s","color:red","message:"+this.message);
},
beforeUpdate: function(){
console.group('--beforeUpdate更新前的狀態(tài)---');
console.log("%c%s","color:red","el :"+this.$el);//el未定義
console.log("%c%s","color:red","data:"+this.$data);//data未定義
console.log("%c%s","color:red","message:"+this.message);
},
updated: function(){
console.group('--updated更新后的狀態(tài)---');
console.log("%c%s","color:red","el :"+this.$el);//el未定義
console.log("%c%s","color:red","data:"+this.$data);//data未定義
console.log("%c%s","color:red","message:"+this.message);
},
beforeDestroy: function(){
console.group('--beforeDestroy銷毀前的狀態(tài)---');
console.log("%c%s","color:red","el :"+this.$el);//el未定義
console.log("%c%s","color:red","data:"+this.$data);//data未定義
console.log("%c%s","color:red","message:"+this.message);
},
destroyed: function(){
console.group('--destroyed銷毀后的狀態(tài)---');
console.log("%c%s","color:red","el :"+this.$el);//el未定義
console.log("%c%s","color:red","data:"+this.$data);//data未定義
console.log("%c%s","color:red","message:"+this.message);
}
})
</script>
</body>
</html>
image.png
分為四個階段：開始、結(jié)束火鼻、界面加載室囊、數(shù)據(jù)更新
created之后vue對象初始化完成，mounted之前在虛擬dom中完成對展示頁面的內(nèi)容解析替換魁索，mounted之后完成虛擬dom放入真實標簽頁中融撞。
二十四、 按鍵修飾符
<div id="app">
<input type="text" value="" v-model="msg" @keyup="handle1">
<input type="text" value="" v-model="msg" @keyup.enter="handle2">
<input type="text" value="" v-model="msg" @keyup.13="handle3">
</div>
const vm = new Vue({
el: '#app',
data: {
msg: '請輸入'
},
methods: {
handle1(e) {
if (e.keyCode === 13) {
console.log('按下回車了')
}
},
handle2(e) {
console.log('按下回車了')
},
handle3(e) {
console.log('按下回車了')
},
}
})
<!-- 按鍵修飾符用于判斷用戶輸入的按鍵 .enter .tab .delete(捕獲刪除和退格鍵) .esc .space .up .down .left .right -->
二十五粗蔚、定時器
const vm = new Vue({
el: '#app',
data: {
isOk: false
}
//界面加載后有定時器,尝偎，操作isOk的狀態(tài)值，定時為1s
mounted(){
setInterval(()=>{
this.isOk = !this.isOk
},1000);
},
//銷毀實例對象之前調(diào)用
beforeDestroy(){
//銷毀定時器
clearInterval(this.timeId)
}
methods: {
clear(){
//銷毀實例對象
this.$destroy()
}
}
})
定時器是window中的方法，與vm實例無關(guān)致扯。
所以需要在銷毀實例之前將定時器清除肤寝，在beforeDestroy()生命周期函數(shù)中調(diào)用clearInterval()方法。
vm.$destroy()
完全銷毀一個實例抖僵。清理它與其它實例的連接鲤看，解綁它的全部指令及事件監(jiān)聽器。
