<%--
Created by IntelliJ IDEA.
User: hp
Date: 2021/6/16
Time: 14:42
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>父传子</title>
<%-- 声明注册使用--%>
</head>
<body>
<%-- 留坑--%>
<div id="div1">
<div id="div2">
</div>
</div>
<%--导包--%>
<script type="text/javascript" src="js/vue.js"></script>
<%-- 实例化--%>
<script type="text/javascript">
/*自组件定义好了props就可以直接用*/
var child ={
template:`<div>我是子组件{{sendchild}}</div>`,
props:['sendchild'],
}
/*父组件通过属性sendchild传数据给子组件*/
var parent ={
template:`<div>我是父组件<child sendchild='父亲给你的'></child></div>
`
,
// 在父组件中对子组件注册
components: {
child,
},
}
new Vue({
el:'#div2'
,
// 对父标签注册
components:{
parent,
},
template:
`
<div>
<parent></parent>
</div>
`
})
</script>
</body>
</html>
<%--
Created by IntelliJ IDEA.
User: hp
Date: 2021/6/16
Time: 14:42
To change this template use File | Settings | File Templates.
--%>
<%--1、创建一个空实例(bus中央事件总线也可以叫中间组件)--%>
<%--2、利用$emit $on的触发和监听事件实现非父子组件的通信--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>非父子组件间的通信</title>
<%-- 声明注册使用--%>
</head>
<body>
<%-- 留坑--%>
<div id="div1">
<div id="div2">
</div>
</div>
<%--导包--%>
<script type="text/javascript" src="js/vue.js"></script>
<%-- 实例化--%>
<script type="text/javascript">
// 创建一个总线$(名字)
Vue.prototype.$bus=new Vue()
// 声明组件
myHeader={
template: `<div>我是头部:{{headermsg}}</div>`,
data(){ return{
headermsg:'你来改变呀'
}
},
// 监听
created(){
// 法一
// var se=this
// se.$bus.$on("sendHeader",function (val) {
// se.headermsg=val;
// })
this.$bus.$on('sendHeader',val=>{
this.headermsg=val;
})
}
}
mybody={
template: `<div>我是身体</div>`
}
myFooter={
template:`<div>我是尾部:
<button @click='send'>改变你咋地</button>
</div>`,
methods:{
send(){
this.$bus.$emit('sendHeader',"改变了,你给我钱吧")
}
}
}
new Vue({
el:'#div2'
,
// 注册
components:{
myHeader,
mybody,
myFooter,
},
template:
`<div>
<myHeader></myHeader><hr>
<mybody></mybody><hr>
<myFooter></myFooter><hr>
</div>`
})
</script>
</body>
</html>
<%--
Created by IntelliJ IDEA.
User: hp
Date: 2021/6/16
Time: 14:42
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>VUE生命周期</title>
<%-- 声明注册使用--%>
</head>
<body>
<%-- 留坑--%>
<div id="div1">
<div id="div2">
</div>
</div>
<%--导包--%>
<script type="text/javascript" src="js/vue.js"></script>
<%-- 实例化--%>
<script type="text/javascript">
var Test={
template: `<div>我是Test组件{{ msg }}
<button @click="msg+='1'">msg+1</button>
</div>`,
data(){
return{
msg:'生命周期'
}
}
,
// 组件创建前
beforeCreate(){
console.log('组件创建前:')
console.log(this.msg)
},
// 组件创建后
created(){
console.log('组件创建后:')
console.log(this.msg)
},
//Dom挂载前,也就是渲染前
beforeMount(){
console.log('Dom挂载前')
console.log(document.body.innerHTML)
},
//Dom挂载后,渲染后
mounted(){
console.log('Dom挂载后')
console.log(document.body.innerHTML)
},
//基于数据更新前
beforeUpdate(){
console.log("数据更新前")
console.log(document.body.innerHTML)
},
//基于数据更新后
updated(){
console.log("数据更新后")
console.log(document.body.innerHTML)
},
//销毁前
beforeDestroyed(){
console.log("组件销毁前")
},
//销毁后
destroy(){
console.log("组件销毁后")
},
//组件停用
deactivated(){
console.log("组件停用")
},
//组件激活
activated(){
console.log("组件激活")
}
}
new Vue({
el:'#div2'
,
// 注册
components:{
Test,
},
template:
`<div>
<keep-alive>
<Test v-if='testshow'></Test>
</keep-alive>
<button @click="clickbut">销毁Test组件</button>
</div>`
,
data(){
return {
testshow:true
}
},
methods:{
clickbut(){
this.testshow=!this.testshow;
}
}
})
</script>
</body>
</html>
<%--
Created by IntelliJ IDEA.
User: hp
Date: 2021/6/16
Time: 14:42
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>VUE生命周期</title>
<%-- 声明注册使用--%>
</head>
<body>
<%-- 留坑--%>
<div id="div1">
<div id="div2">
</div>
</div>
<%--导包--%>
<script type="text/javascript" src="js/vue.js"></script>
<%-- 实例化--%>
<script type="text/javascript">
new Vue({
el:'#div2'
,
// 注册
components:{
Test,
},
template:
`<div>
</div>`
,
data(){
return {
testshow:true
}
},
methods:{
}
})
</script>
</body>
</html>
<%--
Created by IntelliJ IDEA.
User: hp
Date: 2021/6/16
Time: 14:42
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>哈希模式原理</title>
<%-- 声明注册使用--%>
</head>
<body>
<%-- 留坑--%>
<div id="div1">
<a href="#/login">登录</a>
<a href="#/register">注册</a>
<div id="div2">
</div>
<script type="text/javascript" >
var div2=document.getElementById('div2')
window.addEventListener('hashchange',function () {
if(location.hash=='#/login'){
console.log("login")
div2.innerHTML='login'
}else if(location.hash=='#/register'){
div2.innerHTML='register'
}
})
</script>
</div>
</body>
</html>
<%--
Created by IntelliJ IDEA.
User: hp
Date: 2021/6/16
Time: 14:42
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>安装路由</title>
<%-- 声明注册使用--%>
</head>
<body>
<%-- 留坑--%>
<div id="div1">
<div id="div2">
</div>
</div>
<%--导包--%>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
<%-- 实例化--%>
<script type="text/javascript">
var Test={
template:`<div>login</div>`,
}
// 安装路由插件
Vue.use(VueRouter);
//创建路由对象
var router=new VueRouter({
// 配置路由
routes:[
{path:'/login',name:'login',component:Test}
]
})
new Vue({
el:'#div2'
,
//交路由给vue
router,
template:
`<div>
<router-view></router-view>
</div>`
,
data(){
return {}
},
})
</script>
</body>
</html>
<%--
Created by IntelliJ IDEA.
User: hp
Date: 2021/6/16
Time: 14:42
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>路由跳转</title>
<%-- 声明注册使用--%>
</head>
<body>
<%-- 留坑--%>
<div id="div1">
<div id="div2">
</div>
</div>
<%--导包--%>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
<%-- 实例化--%>
<script type="text/javascript">
var register={
template:`<div>register</div>`,
}
var Test={
template:`<div>login</div>`,
}
var Buy={
template:`<div>buy</div>`,
}
// 安装路由插件
Vue.use(VueRouter);
//创建路由对象
var router=new VueRouter({
// 配置路由
routes:[
{path:'/login',name:'login',component:Test},
{path: '/register',name: 'register',component: register},
{path: '/buy',name: 'buy',component: Buy}
]
})
new Vue({
el:'#div2'
,
//交路由给vue
router,
// 标签跳转:<router-link to='/login'>去登录</router-link>
// |
// <router-link to='/register'>去注册</router-link>
// <button @click='toregister'>买东西</button>事件跳转
template:
`<div>
<router-link to='/login'>去登录</router-link>
|
<router-link to='/register'>去注册</router-link>
<div>
<button @click='toregister'>买东西</button>
<button @click='back'>返回上一页</button>
</div>
<router-view></router-view>
</div>`
,
data(){
return {}
},
methods:{
toregister(){
console.log("买东西")
//push和replace是达到同样的效果,但是replace是不会在history中插入记录的
// this.$router.push({path:'/register'})
// this.$router.replace({path:'/register'})
this.$router.replace({path:'/buy'})
},
back(){
//上一页
this.$router.go(-1)
}
}
})
</script>
</body>
</html>
<%--
Created by IntelliJ IDEA.
User: hp
Date: 2021/6/16
Time: 14:42
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>路由取参传参</title>
<%-- 声明注册使用--%>
</head>
<body>
<%-- 留坑--%>
<div id="div1">
<div id="div2">
</div>
</div>
<%--导包--%>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
<%-- 实例化--%>
<script type="text/javascript">
//取参
/*register:路由配置:1、{path: '/register/:foo',name: 'register',props:true,component: register}
对应取值方式:props: ['foo'],<span>获取到的参数:{{foo}}</span>
2、 {path: '/register/:foo',name: 'register',component: register}
对应的取值方式:data(){
return {
registerfoo:''
}
},
created(){
this.registerfoo=this.$route.params.foo
},
3、存参:<router-link :to="{name:'register',params:{foo:'bar'}}">去注册</router-link>
login: 取参: template:`<div>login
<span>获取到的参数:{{msg}}</span>
</div>`,
路由设置: {path:'/login',name:'login',component:Login},
created(){
this.msg=this.$route.query.id
},
传参:<router-link
:to="{name:'login',query:{id:'123'}}">去登录
</router-link>
*/
var register={
template:`<div>register
<span>获取到的参数:{{registerfoo}}</span>
</div>
`,
data(){
return {
registerfoo:''
}
},
created(){
this.registerfoo=this.$route.params.foo
},
}
var Login={
template:`<div>login
<span>获取到的参数:{{msg}}</span>
</div>`,
created(){
this.msg=this.$route.query.id
},
data(){
return {
msg:''
}
},
}
// 安装路由插件
Vue.use(VueRouter);
//创建路由对象
var router=new VueRouter({
// 配置路由
routes:[
{path:'/login',name:'login',component:Login},
{path: '/register/:foo',name: 'register',component: register}
]
})
new Vue({
el:'#div2'
,
//交路由给vue
router,
//参数router-link to="{}"
/*在解决参数改变路由不变的情况下:
在 <router-view :key="$route.fullPath"></router-view>加上key后面的*/
template:
`<div>
<router-link
:to="{name:'login',query:{id:'123'}}">去登录
</router-link>
|
<router-link :to="{name:'register',params:{foo:'bar'}}">去注册</router-link>
<div>
<button @click='tologin'>js:login</button>
<button @click='toregister'>js:register</button>
</div>
<router-view :key="$route.fullPath"></router-view>
</div>`
,
data(){
return {}
},
methods:{
tologin(){
this.$router.push({name:'login',query:{id:'456'}})
},
toregister(){
this.$router.push({name:'register',params:{foo:'bar'}})
},
}
})
</script>
</body>
</html>
<%--
Created by IntelliJ IDEA.
User: hp
Date: 2021/6/16
Time: 14:42
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>嵌套路由</title>
<%-- 声明注册使用--%>
</head>
<body>
<%-- 留坑--%>
<div id="div1">
<div id="div2">
</div>
</div>
<%--导包--%>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
<%-- 实例化--%>
<script type="text/javascript">
var nav={
template:`<div>
导航条
<router-view></router-view>
<router-link :to="{name:'nav.index'}">首页</router-link>
|
<router-link :to="{name:'nav.personal'}">个人中心</router-link>
|
<router-link :to="{name:'nav.message'}">资讯</router-link>
|
<router-link :to="{name:'nav.mine'}">我的</router-link>
</div>
`
}
var index={
template:`<div>我的首页</div>`
}
var personal={
template:`<div>个人中心</div>`
}
var message={
template:`<div>资讯</div>`
}
var mine={
template:`<div>我的</div>`
}
Vue.use(VueRouter);
var router=new VueRouter({
routes:[
{path:'/nav',
name:'nav',
component:nav,
//嵌套路由
children:[
{path:'',redirect:'/nav/index'},
{path:'index',name:'nav.index',component: index},
{path:'message',name:'nav.message',component: message},
{path:'mine',name:'nav.mine',component: mine},
{path:'personal',name:'nav.personal',component: personal},
]
}
]
})
new Vue({
el:'#div2'
,
router,
template:`<router-view></router-view>`,
data(){
return {
loginsate:true
}
},
methods:{
},
mounted(){
//利用路由守卫做当跳转首页时可直接跳转,跳转其他页面要等待两秒才可以跳转
router.beforeEach((to,from,next)=>{
console.log(to)
if(to.path=='/nav/index'){
next()
}else{
setTimeout(function(){
next()
},2000)
}
})
}
})
</script>
</body>
</html>