1.Vue是什么啄育？
2. Vue安裝步驟：
a. 先下載node.js
b. (cd進(jìn)入到指定的文件目錄) npm install --yes
c. npm install vue -S (下載Vue)
aop面向切面編程是面向?qū)ο笏枷氲难a(bǔ)充量九。
模型氛圍兩種： 數(shù)據(jù)承載模型 徒河， 業(yè)務(wù)處理模型囱淋，
java 和 js 異處：
1. 前段 三要素
2 . JavaScript幾種主流框架：
3. 當(dāng)前主流的前段框架 （ VUE） --（***）
4. 混合開(kāi)發(fā)Flutter --（***）
======================================================================================================================================
-
后端為主的mvc時(shí)代
-
基于ajax帶來(lái)的spa 時(shí)代
-
前端為主的mv*時(shí)代
-
NodeJs 帶來(lái)的全棧時(shí)代
總結(jié)
======================================================================================================================================
2. Vue語(yǔ)法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的基本使用</title>
</head>
<body>
<div id="app">
<!-- Vue模版語(yǔ)法{{}}創(chuàng)括號(hào)插值-->
<h1>{{msg}}</h1>
<h2>{{1+1}}</h2>
<h3>{{1>2 ? 'false':'true'}}</h3>
<h4>{{isTrue}}</h4>
<h2>{{ {name:'張三'} }}</h2> <!-- {name:'張三'} 前后要分別空格一下-->
</div>
<!--第1步：先引包-->
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<!--第2步：創(chuàng)建實(shí)例化對(duì)象-->
<script type="text/javascript">
// 數(shù)據(jù)發(fā)生改變時(shí)方椎，視圖也會(huì)發(fā)生改變规求，這就是數(shù)據(jù)驅(qū)動(dòng)視圖
var data= {
//數(shù)據(jù)屬性
//既可以是一個(gè)對(duì)象 也可以是一個(gè)函數(shù)
msg:'黃瓜',
msg2:'西紅柿',
isTrue: 'false'
}
var vm= new Vue({
el:'#app',//目的地
data: data,
// data: {
// //數(shù)據(jù)屬性
// //既可以是一個(gè)對(duì)象 也可以是一個(gè)函數(shù)
// msg:'黃瓜',
// msg2:'西紅柿',
// isTrue: 'false'
// },
//模版
template:''//template優(yōu)先級(jí)更高
});
console.log(vm.$el);
console.log(vm.$data);
console.log(vm.$data==data);
console.log(vm.$el==document.getElementById("app"));
</script>
</body>
</html>
4. Vue指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: red;
}
.box2{
background-color: yellow;
}
</style>
</head>
<body>
<!--1.引入包-->
<script type="text/javascript" src="./node_modules/vue/dist/vue.js">
</script>
<div id="app">
!--
v-if 控制生命周期稿壁，為true就創(chuàng)建实束， 為false就移除奥秆；
v-show 控制css樣式display，為true就block咸灿， 為false就none构订；
v-on: 原生事件名='函數(shù)名'
控制類名對(duì)元素顯示隱藏；
v-bink 控制標(biāo)簽的屬性（系統(tǒng)屬性/自定屬性）避矢；
v-for="(item,index) in menuLists"悼瘾；
-->
</div>
<!--創(chuàng)建實(shí)例話對(duì)象-->
<script type="text/javascript" >
new Vue({
el:"#app",
data:function () {
return {
//數(shù)據(jù)屬性
msg:'指令系統(tǒng)',
msg2:'<h2>指令系統(tǒng)</h2>',
isShow:Math.random()>0.5,
result:Math.random(),
menuLists:[
{id:1,name:'大腰子1',price:71},
{id:2,name:'大腰子2',price:72},
{id:3,name:'大腰子2',price:73}
],
person:{
name:'呂小凱',
age:27,
fav:'編程'
}
}
},
//值為：math.random()囊榜，所以
template:
'<div class="#app">' +
'<h2>{{msg}}</h2>' +
'<p v-text="msg"></p>' +
'<div v-html="msg2"></div>' +
'<p v-text="1+2"></p>' +
'<div v-if="isShow" >開(kāi)始你的表演</div>' +
'<div v-if="!isShow">結(jié)束你的表現(xiàn)</div>' +
'<div v-show="isShow">顯示</div>' +
'<div v-show="!isShow">隱藏</div>' +
'<div v-if="result>0.5"> 因?yàn)閧{result}}>0.5，所以顯示數(shù)據(jù)</div>' +
'<div v-else>因?yàn)閧{result}}<=0.5亥宿，所以隱藏?cái)?shù)據(jù)</div>' +
'<div class="box" v-on:click="clickHander"></div>' +
'<ul>' +
'<li v-for="(item,index) in menuLists">' +
'<h3 v-text="index"></h3>' +
'<h3 v-text="item.id" ></h3>' +
'<h3>{{ item.name }}</h3>' +
'<h3>{{ item.price }}</h3>' +
'</li>' +
'</ul>' +
'<ul>' +
'<li v-for="(value,key ) in person">' +
'{{key}}==={{value}}' +
'</li>' +
'</ul>'+
'</div>',
methods:{
clickHander(e){
this.isRed=!this.isRed;
}
}
});
</script>
</body>
</html>
4-1. v-model 雙向數(shù)據(jù)綁定的體現(xiàn)
<!--第1步：引包-->
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<!--第2步：-->
<div id="app">
!--
v-model 雙向數(shù)據(jù)綁定的提現(xiàn)卸勺，只會(huì)體現(xiàn)在UI控件中，只能應(yīng)用在有value屬性的標(biāo)簽中
-->
<input type="text" v-model="msg">
<h3>{{msg}}</h3>
</div>
<!--第3步：創(chuàng)建實(shí)例化對(duì)象-->
<script type="text/javascript" >
new Vue({
el: "#app",
data(){
return{
msg:'Tina'
}
}
});
</script>
5. 組件
5-1 全局組件 ,局部組件的創(chuàng)建/ 及插槽的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1. 引包-->
<script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
<!--2. -->
<div id="app"></div>
<!--3.vue的實(shí)例話-->
<script type="text/javascript" >
/**
* 如下是演示全局組件中插槽的使用烫扼；
* <slot></slot>插槽
*/
//聲明一個(gè)全局組件 Btn2
Vue.component("MyLi",{
template:
"<li> <slot name='one'></slot> <slot name='two'></slot><slot name='three'></slot> </li>"
});
//聲明一個(gè)內(nèi)容欄組件
var Vcontext2={
template:
"<div>" +
"我是內(nèi)容欄組件2" +
"<ul>" +
"<MyLi>" +
"<h2 slot='three'>我是第三個(gè)坑</h2>" +
"<h2 slot='two'>我是第二個(gè)坑</h2>" +
"<h2 slot='one'>我是第一個(gè)坑</h2>" +
"</MyLi>" +
"</ul>"+
"</div>"
};
/**
* 如下是演示全局組件曙求，局部組件的創(chuàng)建使用；
*/
//聲明一個(gè)全局組件 Btn
Vue.component("Btn",{
template:
"<button><slot>按鈕</slot></button>"
});
// 聲明一個(gè)頭部的組件
var Vaside={
template:"<div>我是側(cè)邊欄</div>"
};
//聲明一個(gè)側(cè)邊欄組件
var Vheader={
template:"<div>我是頭部欄</div>"
};
//聲明一個(gè)內(nèi)容欄組件
var Vcontext={
template:
"<div>" +
"我是內(nèi)容欄組件" +
"<Btn>成功按鈕</Btn>" +
"<Btn>提示按鈕</Btn>" +
"<Btn/><br/>" +
"</div>"
};
//聲明一個(gè)局部組件的入口
var App={
template:
"<div>" +
"首頁(yè)" +
"<Vheader/>" +
"<div>" +
"<Vaside/>" +
"<div><Vcontext/></div>" +
"<div><Vcontext2/></div>" +
"</div>" +
"</div>",
components: {
Vaside,
Vheader,
Vcontext,
Vcontext2
}
};
//根
new Vue({
el: "#app",
data(){
return{
}
},
template: "<App/>",
components:{
App
}
});
</script>
</body>
</html>
5-2 組件之間的傳值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1.引入vue模塊的包-->
<script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
<!--2創(chuàng)建一個(gè)div-->
<div id="app"></div>
<!--3.創(chuàng)建vue的實(shí)例化對(duì)象-->
<script type="text/javascript" >
*
如下演示父子組件之間采用的是props/ $emit 的方式映企，適合層數(shù)比較少的情況組件間通信悟狱；
1. 父類向子類組件傳遞信息，先在父類中綁定自定義的屬性堰氓， 再在子組件中使用props 接受父組件傳遞的數(shù)據(jù)挤渐；
2. 子類向父類組件傳遞信息，先在父組件綁定自定義的事情双絮， 再在子組件中觸發(fā)原生的事件浴麻，在函數(shù)中使用$emit觸發(fā)自定義的childHandler
*/
//聲明一個(gè)子類的全局組件
Vue.component("Child",{
template:
"<div>" +
"<p>我是{{childData}}子類組件</p>" +
"<input type='text' v-model='childData' @input='changeValue(childdata)'/>" +
"</div>",
props:["childData"],
methods: {
changeValue(val){
this.$emit("childHandler",val)
}
}
});
//聲明一個(gè)父類的全局組件
Vue.component("Parent",{
data(){
return{
msg:"我是父類組件中的數(shù)據(jù)信息"
}
},
template:
"<div>" +
"我是父類組件" +
"<Child :childData='msg' @childHandler='childHandler' />" +
"</div>",
methods:{
childHandler(val){
console.log(val);
}
}
});
//組件的入口
var App={
template:"<div><Parent/></div>"
};
//根
new Vue({
el:"#app",
data(){
return{
}
},
template: "<App/>",
components:{
App
}
});
</script>
</body>
</html>
5-4: 監(jiān)聽(tīng)器
filter過(guò)濾器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1.引入vue模塊的包-->
<script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
<!--2創(chuàng)建一個(gè)div-->
<div id="app"></div>
<!--3.創(chuàng)建vue的實(shí)例化對(duì)象-->
<script type="text/javascript" >
**
*本節(jié)演示過(guò)濾器filter（局部過(guò)濾器和全局過(guò)濾器），作用在于為頁(yè)面中的數(shù)據(jù)進(jìn)行添油加醋囤攀；
*/
//聲明一個(gè)全局過(guò)濾器組件
Vue.filter("GlobalFliter",function (value,arg) {
return "全局過(guò)濾器"+value;
});
//聲明一個(gè)組件的入口
var App={
data(){
return{
price:0,
msg:"hello filter"
}
},
template:
"<div>" +
"<p>組件的入口</p>" +
"<input type='number' v-model='price'/>" +
"<h3>{{price|myCurrentcy}}</h3>" +
"<h5>{{msg|GlobalFliter}}</h5>" +
"</div>",
//局部過(guò)濾器【filters】：1.聲明過(guò)濾器; 2.{{price|myCurrentcy}}
filters:{
myCurrentcy:function (value) {
return "$"+value;
}
}
};
//根部
new Vue({
el:"#app",
data(){
return{
}
},
template: "<App/>",
components:{
App
}
});
</script>
</body>
</html>
watch監(jiān)聽(tīng)單個(gè)屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1.引入包-->
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<!--2.-->
<div id="app">
<input type="text" v-model="msg"/>
<h3>{{msg}}</h3>
<button @click="stus[0].name='rose'">改變</button>
<h6>{{stus[0].name}}</h6>
</div>
<!--3.根-->
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return{
msg:"",
stus:[{name:"JACK"}]
}
},
//
watch:{
//監(jiān)聽(tīng)單個(gè)屬性软免。監(jiān)督字符串
msg:function (newV,oldV) {
console.log(newV,oldV);
},
//監(jiān)督復(fù)雜數(shù)據(jù)類型（array list）深度監(jiān)視
stus:{
deep:true,//深度監(jiān)視
handler:function (newV,oldV) {
console.log(newV[0].name);
}
}
}
});
</script>
</body>
</html>
5-5: 組件的生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<div id="app">
<App></App>
</div>
<script type="text/javascript" >
Vue.component("Test",{
data(){
return{
msg:"hello world !"
}
},
template:
"<div>" +
"<div>{{msg}}</div>" +
"<button @click='changeHandler'>改變</button>" +
"</div>",
methods:{
changeHandler(){
this.msg=this.msg+"哈哈哈哈哈哈";
}
},
beforeCreate(){
console.log("組件創(chuàng)建之前,this.msg的值為："+this.msg);
},
created(){
console.log("組件創(chuàng)建之后,this.msg的值為："+this.msg);
},
beforeMount(){
console.log("組件掛載之前,this.msg的值為："+this.msg);
},
mounted() {
console.log("組件創(chuàng)建之后,this.msg的值為："+this.msg);
},
beforeUpdate: function() {
//再更新DOM之前，調(diào)用該鉤子抚岗，可以獲取原始的DOM
console.log("DOM更新之前是：")
console.log(document.getElementById("app").innerHTML);
},
updated:function () {
//再更新DOM之后或杠，調(diào)用該鉤子，可以獲取最新的DOM
console.log("DOM更新之后是：")
console.log(document.getElementById("app").innerHTML);
},
beforeDestroy:function () {
console.log("銷毀之前");
},
destroyed(){
console.log("銷毀之后");
},
activated:function () {
console.log("組件被激活了宣蔚！")
},
deactivated:function () {
console.log("組件被停用了向抢！")
}
});
// 聲明一個(gè)組件的入口
var App={
data(){
return{
isShow: true
}
},
//vue內(nèi)置組件<keep-alive></keep-alive> 能夠在組件的切換過(guò)程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM
template:
"<div>" +
"<keep-alive>" +
"<Test v-if='isShow'/>" +
"</keep-alive>" +
"<button @click='isShow=!isShow'>改變生死</button>" +
"</div>",
}
//根部
new Vue({
el:"#app",
components: {
App
}
});
</script>
</body>
</html>
6-1 : 獲取DOM元素
<!--1.引包-->
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<!--2.-->
<div id="app"></div>
<!--3.實(shí)例-->
<script type="text/javascript" >
// 創(chuàng)建一個(gè)全局組件
Vue.component("subCom",{
template:"<div id='subCom'></div>"
});
// 掛子
var App={
template:
"<div class='app'>" +
"<button ref='btn'>我是按鈕</button>" +
"<button ref='btn2'>我是按鈕</button>" +
"<subCom ref='abc' />" +
"</div>",
created(){
console.log(this.$refs.btn);
},
beforeMount(){
console.log(this.$refs.btn);
},
mounted(){
//如果給標(biāo)簽綁定ref="xxx"屬性胚委，使用this.$refs.xxx可以獲取原始的DOM對(duì)象
//ref="xxx"屬性 不能重名
console.log(this.$refs.btn);
console.log(this.$refs.btn2);
//如果給組件綁定ref="xxx"屬性挟鸠，使用this.$refs.xxx可以獲取當(dāng)前的組件對(duì)象
console.log(this.$refs.abc);
}
};
// 根部
new Vue({
el:"#app",
data(){
return{
}
},
template:"<App/>",
components:{
App
}
});
</script>
6-2 : 給DOM元素添加特殊的情況
<!--1.引包-->
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<!--2.-->
<div id="app"></div>
<!--3.實(shí)例-->
<script type="text/javascript" >
// 掛子
var App={
data(){
return{
isShow:false
}
},
template:
"<div class='app'>" +
"<input type='text' v-show='isShow' ref='input'/>" +
"</div>",
mounted(){
this.isShow=true;
// $nextTick
// 是在DOM更新循環(huán)結(jié)束之后執(zhí)行回調(diào)函數(shù)，
// 在修改數(shù)據(jù)之后使用此方法亩冬，在回調(diào)中獲取更新后的DOM
this.$nextTick(()=> {
console.log(this);
this.$refs.input.focus();
})
}
};
// 根部
new Vue({
el:"#app",
data(){
return{
}
},
template:"<App/>",
components:{
App
}
});
</script>
7 : vue 路由
linux命令 下載vue-rooter
cd code
npm init --yes
npm install vue-router -S
7-1 : 03-04-vue-rooter的基本原理使用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1. 引入vue模塊-->
<script type="text/javascript" src="./node_modules/vue/dist/vue.js" ></script>
<!--2. 引入vue-rooter模塊-->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<div id="app"></div>
<!--3.實(shí)例-->
<script type="text/javascript" >
//5聲明一個(gè)組件
var Login={
template:"<div>我是login頁(yè)面</div>"
};
var Register={
template:"<div>我是register頁(yè)面</div>"
};
//2創(chuàng)建router對(duì)象
var router=new VueRouter({
//3配置路由對(duì)象
routes:[
//4路由匹配的規(guī)則
{
path:"/login",
name:"login",// 給路由綁定一個(gè)名字
component: Login
},
{
path:"/register",
name:"register",// 給路由綁定一個(gè)名字
component: Register
}
]
});
//引入vue-router模塊艘希，給咱們拋出來(lái)兩個(gè)全局的組件，
//router-link ---> a標(biāo)簽硅急； to ---> ref屬性
//router-view -- >路由匹配組件的出口
//掛子
var App={
template:
"<div>" +
"<router-link :to = '{ name: \"login\" }' >登陸頁(yè)面</router-link>" +
"<router-link :to = '{ name: \"register\" }'>注冊(cè)頁(yè)面</router-link>" +
"<router-view></router-view>" +
"</div>"
// "<div>" +
// "<router-link to='/login'>登陸頁(yè)面</router-link>" +
// "<router-link to='/register'>注冊(cè)頁(yè)面</router-link>" +
// "<router-view></router-view>" +
// "</div>"
};
//根部
new Vue({
el:"#app",
data(){
return{
}
},
components:{
App
},
//6.將router交給VUE實(shí)例對(duì)象管理
router,
template:"<App/>"
});
</script>
</body>
</html>
7-2 : 03-05-路由參數(shù).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1. 引入vue模塊-->
<script type="text/javascript" src="./node_modules/vue/dist/vue.js" ></script>
<!--2. 引入vue-rooter模塊-->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<div id="app"></div>
<!--3.實(shí)例-->
<script type="text/javascript" >
//聲明局部組件
var UserParams={
template:"<div>我是用戶1</div>"
};
var UserQuery={
template:"<div>我是用戶2</div>"
};
//2創(chuàng)建router對(duì)象
var router=new VueRouter({
//3配置路由對(duì)象
routes:[
//4路由匹配的規(guī)則
{
path:"/user/:id",
name:"userP",// 給路由綁定一個(gè)名字
component: UserParams
},
{
path:"/user",
name:"userQ",// 給路由綁定一個(gè)名字
component: UserQuery
}
]
});
//引入vue-router模塊覆享，給咱們拋出來(lái)兩個(gè)全局的組件，
//router-link ---> a標(biāo)簽营袜； to ---> ref屬性
//router-view -- >路由匹配組件的出口
//掛子
var App={
template:
"<div>" +
"<router-link :to = '{ name: \"userP\", params:{id:1}}' >用戶1頁(yè)面</router-link>" +
"<router-link :to = '{ name: \"userQ\", query:{userId:2}}'>用戶2頁(yè)面</router-link>" +
"<router-view></router-view>" +
"</div>"
};
//根部
new Vue({
el:"#app",
data(){
return{
}
},
components:{
App
},
//6.將router交給VUE實(shí)例對(duì)象管理
router,
template:"<App/>"
});
</script>
</body>
</html>
7-3 : 03-07-嵌套路由.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1. 引入vue模塊-->
<script type="text/javascript" src="./node_modules/vue/dist/vue.js" ></script>
<!--2. 引入vue-rooter模塊-->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<div id="app"></div>
<!--3.實(shí)例-->
<script type="text/javascript" >
//聲明局部組件
var Movie={
template:"<div>我是電影</div>"
};
var Song={
template:"<div>我是音樂(lè)</div>"
};
var Home={
template:
"<div>" +
"首頁(yè)內(nèi)容<br/>" +
"<router-link to='/home/song'>歌曲</router-link>" +
"<router-link to='/home/movie'>電影</router-link>" +
"<router-view></router-view>" +
"</div>"
};
//2創(chuàng)建router對(duì)象
var router=new VueRouter({
//3配置路由對(duì)象
routes:[
//4路由匹配的規(guī)則
{
path:"/home",
name:"home",// 給路由綁定一個(gè)名字
component: Home,
children:[
{
path:"song",
component:Song
},
{
path:"movie",
component:Movie
},
]
}
]
});
//引入vue-router模塊撒顿，給咱們拋出來(lái)兩個(gè)全局的組件，
//router-link ---> a標(biāo)簽荚板； to ---> ref屬性
//router-view -- >路由匹配組件的出口
//掛子
var App={
template:
"<div>" +
"<router-link :to ='{ name: \"home\" }' >首頁(yè)</router-link>" +
"<router-view></router-view>" +
"</div>"
};
//根部
new Vue({
el:"#app",
data(){
return{
}
},
components:{
App
},
//6.將router交給VUE實(shí)例對(duì)象管理
router,
template:"<App/>"
});
</script>
</body>
</html>
7-4 : 04-01-動(dòng)態(tài)路由匹配.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1. 引入vue模塊-->
<script type="text/javascript" src="./node_modules/vue/dist/vue.js" ></script>
<!--2. 引入vue-rooter模塊-->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<div id="app"></div>
<!--3.實(shí)例-->
<script type="text/javascript">
/**
* 如下是聲明組件
*/
var Timeline={
template:
"<div id='timeline'>" +
"<router-link :to='{name:\"comDesc\",params:{id:\"frontend\"}}' >前段</router-link>" +
"<router-link :to='{name:\"comDesc\",params:{id:\"backend\"}}' >后段</router-link>" +
"<router-view></router-view>" +
"</div>"
};
var Pins={
template:"<div>這是沸點(diǎn)</div>"
};
var ComDesc={
data(){
return{
msg:""
}
},
template:"<div>我是{{msg}}</div>",
created(){
console.log(1);
this.msg="frontend"; //發(fā)送ajax
},
watch:{//在當(dāng)前的組件內(nèi)部凤壁，監(jiān)聽(tīng)路由信息的變化
"$route"(to,from){
console.log(to);
console.log(from);
this.msg=to.params.id;
}
}
}
//創(chuàng)建一個(gè)路由
var router=new VueRouter({
routes:[
{
path:"/timeline",
component:Timeline,
children:[
{
path:"/timeline/:id",
name:"comDesc",
component: ComDesc
}
]
},
{
path:"/pins",
component:Pins
}
]
});
//組件的入口
var App={
template:
"<div>" +
"<router-link to='timeline'>首頁(yè)</router-link>" +
"<router-link to='pins'>沸點(diǎn)</router-link>" +
"<router-view></router-view>" +
"</div>"
};
// 根部
new Vue({
el:"#app",
data(){
return{
}
},
template:"<App/>",
components:{
App
},
//6.將router交給VUE實(shí)例對(duì)象管理
router,
template:"<App/>"
});
</script>
</body>
</html>
7-5 : 04-02-keep alive在路由中使用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1. 引入vue模塊-->
<script type="text/javascript" src="./node_modules/vue/dist/vue.js" ></script>
<!--2. 引入vue-rooter模塊-->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<div id="app"></div>
<!--3.實(shí)例-->
<script type="text/javascript">
/**
* 如下是聲明組件
*/
var Timeline={
template:
"<div>" +
"<h3>這是首頁(yè)</h3>" +
"</div>",
created(){
console.log("首頁(yè)組件創(chuàng)建了吩屹！")
},
mounted() {
console.log("首頁(yè)組件DOM加載了！")
},
destroyed(){
console.log("首頁(yè)組件銷毀了拧抖！")
}
};
var Pins={
template:
"<div>" +
"<h3 @click='clickHander' >這是沸點(diǎn)</h3>" +
"</div>",
methods:{
clickHander(e){
e.target.style.color="red";
}
},
created(){
console.log("沸點(diǎn)組件創(chuàng)建了煤搜！")
},
mounted() {
console.log("沸點(diǎn)組件DOM加載了！")
},
destroyed(){
console.log("沸點(diǎn)組件銷毀了唧席！")
}
};
//創(chuàng)建一個(gè)路由
var router=new VueRouter({
routes:[
{
path:"/timeline",
component:Timeline,
},
{
path:"/pins",
component:Pins
}
]
});
//組件的入口
var App={
template:
"<div>" +
"<router-link to='timeline'>首頁(yè)</router-link>" +
"<router-link to='pins'>沸點(diǎn)</router-link>" +
"<keep-alive>" +
"<router-view></router-view>" +
"</keep-alive>" + //keep-alive可以把內(nèi)容緩存起來(lái)擦盾， 下次進(jìn)來(lái)頁(yè)面還是之前的狀態(tài)。
"</div>"
};
// 根部
new Vue({
el:"#app",
data(){
return{
}
},
template:"<App/>",
components:{
App
},
//6.將router交給VUE實(shí)例對(duì)象管理
router,
template:"<App/>"
});
</script>
</body>
</html>
8 : Axios
linux操作:
（ cd到指定的目錄下） npm install axios -S
