一魄幕、生命周期
參考網(wǎng)址：https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA
二、定義Vue組件
- 組件基礎(chǔ)
參考網(wǎng)址：https://cn.vuejs.org/v2/guide/components.html
* 案例：列表評論
<!DOCTYPE html>
<html lang="zh">
<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>列表評論</title>
<link rel="stylesheet">
<style>
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
//調(diào)用組件模板
<discuss @func="flash"></discuss>
<ul class="list-group">
<li class="list-group-item" v-for="item in list" :key="item.id">
<span class="badge">{{item.name}}</span>
{{item.content}}
</li>
</ul>
</div>
//調(diào)用組件
<template id="el">
<form action="">
<div class="form-group">
<label for="author">作者：</label>
<input type="text" id="author" class="form-control" v-model:value="author">
</div>
<div class="form-group">
<label for="content">內(nèi)容：</label>
<textarea name="" id="content" class="form-control" v-model:value="content"></textarea>
</div>
<div class="form-group">
<input type="button" class="form-control btn-primary" @click="add" value="發(fā)表">
</div>
</form>
</template>
<script src="./js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
list:[],
},
//localstorage實(shí)現(xiàn)本地存儲的方法
methods:{
flash(){
this.list=JSON.parse(localStorage.getItem('discuss-list') || '[]');
}
},
// components創(chuàng)建一個局部組件
components:{
//創(chuàng)建一個組件的模板
discuss:{
//template設(shè)置一個組建
template:'#el',
//data必須是一個函數(shù)return返回的必須是一個對象
data(){
return{
author:'',
content:'',
};
},
methods:{
add(){
let list =JSON.parse(localStorage.getItem('discuss-list') || '[]');
list.push({id:Math.random(100),name:this.author,content:this.content});
localStorage.setItem('discuss-list',JSON.stringify(list));
this.author=this.content='';
this.$emit('func');
}
}
}
},
created:function(){
this.flash();
},
});
</script>
</body>
</html>
* 父組件與子組件相互調(diào)用復(fù)習(xí)案例：
<!DOCTYPE html>
<html lang="zh">
<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></title>
</head>
<body>
<div id="app" v-cloak>
{{msg}}
<ccom v-bind:qian="msg" v-on:func="call"></ccom>
</div>
<template id="el">
<div>
<h1>這里是內(nèi)部組件</h1>
<button v-on:click="say">點(diǎn)擊觸發(fā)VUE實(shí)例中的方法</button>
<p>{{qian}}</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script type="text/javascript">
//創(chuàng)建一個全局組件
Vue.component('viw',{
template:"<h1>這是全局組件</h1>",
//data 必須是一個函數(shù),返回值必須是一個對象
data(){
return {};
}
});
new Vue({
el:"#app",
data:{
msg:"我有200塊錢响委，兒子 你想要嗎？",
money:''
},
components:{
ccom:{
template:"#el",
data(){
return {
msg:"爸爸 給你10塊錢去揮霍吧"
};
},
props:['qian'],//父組件調(diào)用子組件----->先在全局標(biāo)簽內(nèi)綁定一個函數(shù),再在js局部組件中使用props調(diào)用,
/*
//這里使用pros接受的數(shù)據(jù)的名稱與組件傳遞的時候綁定的名稱是一模一樣的
*/
methods:{//子組件傳向父組件----->先在組件標(biāo)簽里綁定一個函數(shù),再在js局部組件中使用$emit調(diào)用,
say(){
//對于父組件傳遞的方法而言,其實(shí)并不是將這個方法傳遞給子組件,而是要求子組件將這個方法進(jìn)行觸發(fā).
//$emit 函數(shù)觸發(fā)的函數(shù)如果是需要傳遞參數(shù),那么按照參數(shù)的順序從第二個參數(shù)開始進(jìn)行傳遞
this.$emit('func',this.msg);
}
}
}
},
methods:{
call(i){
// console.log(i)
this.money = i;
}
}
});
</script>
</body>
</html>
三、插槽
參考網(wǎng)址：https://cn.vuejs.org/v2/guide/components-slots.html
1树酪、Vue中插槽的作用和使用方法
參考網(wǎng)址：https://blog.csdn.net/willard_cui/article/details/82469114
定義一個名child子組件，為該子組件添加內(nèi)容應(yīng)該在子組件的template中定義大州，直接在父組件的<child>標(biāo)簽中定義的內(nèi)容不會被渲染续语，
<div id="root">
<child>
需要插槽才能渲染的內(nèi)容
<p>Dell</p>
<p>Lee</p>
</child>
</div>
<script>
Vue.component('child',{
template: `<div>
<p>這是子組件中正常渲染的內(nèi)容</p>
<slot></slot>
</div>`
}
)
var vm=new Vue({
el:'#root'
})
</script>
image.png
2、插槽默認(rèn)內(nèi)容
插槽可以提供一個默認(rèn)內(nèi)容厦画，如果如果父組件沒有為這個插槽提供了內(nèi)容疮茄，會顯示默認(rèn)的內(nèi)容。如果父組件為這個插槽提供了內(nèi)容根暑，則默認(rèn)的內(nèi)容會被替換掉
父組件提供插槽內(nèi)容
<div id="root">
<child>
<p>Hello</p>
</child>
</div>
<script>
Vue.component('child',{
template:'<div><slot>defalut value</slot></div>
}
)
var vm=new Vue({
el:'#root'
})
</script>
image.png
3力试、具名插槽
當(dāng)需要多個插槽時，可以使用<slot>的特性：name排嫌。這個特性可以用來定義額外的插槽畸裳。
<div id="root">
<child>
<header slot="header">header</header>
<footer slot="footer">footer</footer>
</child>
</div>
<script>
Vue.component('child',{
template:`<div>
<slot name="header">default header</slot>
<div>content</div>
<slot name="footer">default footer</slot>
</div>`
}
)
var vm=new Vue({
el:'#root'
})
</script>
image.png
4、作用域插槽
可以先看一個例子躏率，以便更好的理解作用域插槽的作用
在子組件中使用v-for創(chuàng)建一個列表循環(huán)躯畴，然后在父組件中通過子組件標(biāo)簽child調(diào)用，
<div id="root">
<child></child>
<child></child>
</div>
<script>
Vue.component('child',{
data: function(){
return {
list:[1,2,3,4]
}
},
template: '<div><ul><li v-for="value in list">{{value}}</li></ul></div>',
})
var vm=new Vue({
el: '#root'
})
</script>
image.png
調(diào)用了兩次child組件薇芝，因?yàn)檎{(diào)用的是同一個子組件蓬抄，所以顯示的內(nèi)容完全一樣。如何在每次調(diào)用時能有各自的渲染效果夯到？這就是作用域插槽的用武之地嚷缭。
作用域插槽就是父組件在調(diào)用子組件的時候給子組件傳了一個插槽，這個插槽為作用域插槽，該插槽必須放在template標(biāo)簽里面阅爽，同時聲明從子組件接收的數(shù)據(jù)放在一個自定義屬性內(nèi)路幸，并定義該數(shù)據(jù)的渲染方式。通過下列展示作用域插槽的使用方式：
<div id="root">
<child>
<template slot-scope="props"><!--定義一個插槽付翁，該插槽必須放在template標(biāo)簽內(nèi)-->
<li>{{props.value}}</li><--!定義使用渲染方式-->
</template>
</child>
<child>
<template slot-scope="props">
<h1>{{props.value}}</h1><!--定義不同的渲染方式-->
</template>
</child>
</div>
<script>
Vue.component('child',{
data: function(){
return {
list:[1,2,3,4]
}
},
template: `<div>
<ul>
<slot v-for="value in list" :value=value>//使用slot占位
</slot>
</ul>
</div>`
})
var vm=new Vue({
el: '#root'
})
</script>
image.png
* 插槽案例：
<!DOCTYPE html>
<html lang="zh">
<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></title>
</head>
<body>
<div id="app" v-cloak>
<com>
<!-- 插槽機(jī)制也能夠幫助我們實(shí)現(xiàn)數(shù)據(jù)的傳遞简肴，只是這種傳遞是停留在視圖層的，并沒有進(jìn)入到代碼層 -->
here is the best place百侧！---{{pm}}
</com>
</div>
<template id="el">
<div>
<h1>這里是組件</h1>
{{msg}}
<slot></slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
pm:'my name is pm'
},
components:{
com:{
template:"#el",
data(){
return {
msg:"這是組件數(shù)據(jù)"
};
}
}
}
});
</script>
</body>
</html>
四砰识、路由
參考網(wǎng)址https://cn.vuejs.org/v2/guide/routing.html
什么是路由？
- 我們認(rèn)識的路由:
進(jìn)入到網(wǎng)站的根目錄佣渴，然后根據(jù)文件夾的名稱或者文件名去找到對應(yīng)的文件辫狼，然后運(yùn)行
后端的路由
指網(wǎng)絡(luò)上的某一個資源URL
后端框架的出現(xiàn)，以及安全性的考慮辛润，后端一般做單一的入口
例如：http://localhost/vue_api/index.php?m=api&a=getlist
單一的入口是指在這個入口文件中褂始，通過路由參數(shù)的方式（m=api&a=getlist）將請求分發(fā)給不同的資源或者文件處理
前端路由
錨點(diǎn)實(shí)現(xiàn)的路由
前端的路由是不會發(fā)生頁面的刷新或者頁面的重啟請求的
hash值的變化是不會造成頁面重新請求的
* 路由案例：登錄注冊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* mint-active */
.router-link-active{
background: #00FFFF;
color:lightseagreen;
font-size: 20px;
}
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(200px);
}
.v-enter-active,
.v-leave-active{
transition: all 1s ease;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<!-- 使用router-link的標(biāo)簽實(shí)現(xiàn)路由的連接 -->
<router-link to="/login" tag="span">登錄</router-link>
<router-link to="/register" tag="span">注冊</router-link>
<!-- <router-link to="/guanggai" tag="span">逛街</router-link> -->
<!-- <a href="#/login">登錄</a>
<a href="#/register">注冊</a> -->
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
<script src="../lib/vue.js"></script>
<script src="../lib/vue-router.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const login = {
template:`
<div>
這是登錄組件
</div>
`,
};
const register = {
template:`
<div>
這是注冊組件
</div>
`,
}
new Vue({
el:"#app",
data:{
},
components:{
guanggai:{
template:'<div>這是逛街</div>'
}
},
//路由規(guī)則
router: new VueRouter({
routes:[
//redirect重定向霍比，將符合規(guī)則的路由發(fā)送到指定的路由
{path:'/',redirect:'/login'},
{path:'/login',component:login},
{path:'/register',component:register},
// {path:'/guanggai',component:guanggai}
],
linkActiveClass:'is_selected'
})
});
</script>
</body>
</html>
