1.Vue.js 中父级和子级间通信(练习):
<body>
<div id="app">
<father></father>
</div>
<script>
//创建父组件
Vue.component('father',{
data : function(){ //数据层
return {
uname : '这是父组件',
val : 'jack',
inputValue : ''
}
},
methods : {
getSon : function(){
this.inputValue = this.$refs.myChild.myValue
}
},
template : `<div>
<h3>{{uname}}</h3>
<h2>从子组件接收到的数据为:{{inputValue}}</h2>
<hr>
//核心(固定写法)
<son ref='myChild'></son>
</div>`
})
//创建子组件
Vue.component('son',{
data : function(){
return {
uname : '这是子组件',
myValue : ''
}
},
methods : {
setFather : function(){
this.$parent.getSon(); //获取父组件的方法
}
},
template : `<div>
<h4>{{uname}}</h4>
<h3>{{'我的名字为:' + this.$parent.val}}</h3>
请输入:<input type="text" v-model='myValue'/>
<br><br>
<button @click='setFather'>将输入的数据传输到父组件</button>
</div>`
})
//实例
new Vue({
el : "#app",
})
</script>
</body>
2.Vue.js 中兄弟组件之间的通信:
(1)兄弟组件间的通信是通过事件的绑定和触发完成的;
(2)触发:this.$emit(' 事件名 ' , ' 数据 ');(也就是传输数据)
(3)绑定:this.$on( '与on相对应的事件名' , ' 回调函数 (参数就代表传来的数据) ');(也就是接收数据)
<body>
<div id="app">
<xiong-da></xiong-da>
<hr>
<xiong-er></xiong-er>
</div>
<script>
//创建一个实例,借助该实例完成事件的绑定和触发
var bus = new Vue();
//创建兄弟组件(老大)
Vue.component('xiong-da',{
methods : {
//自定义一个事件,用来传输数据
tellXiongEr : function(){
bus.$emit('toXiongEr','光头强来了')
}
},
template : `<div>
<h2>我是熊大</h2>
<button @click='tellXiongEr'>点击按钮向熊二传话</button>
</div>`
})
//创建兄弟组件(老二)
Vue.component('xiong-er',{
//专门用来接收数据的方法;
created : function(){
bus.$on('toXiongEr',function(msg){
console.log('\'' + msg + '\'') //输出'光头强来了'
})
},
template : `<div>
<h2>我是熊二</h2>
</div>`
})
//实例
new Vue({
el : "#app",
})
</script>
</body>
3.Vue.js 中单页面应用的实现(vue-router):
(1)通过 npm 或者 bower 下载安装 vue-router;
(2)导入时,要将 vue-router 导入在 vue 下面(注意书写时的顺序);
(3)router 中有自带的 html 标签:
router-view(就是一个 div ,视图,用来显示组件);
router-link(就是 a 链接,用于组件或者页面间跳转);
(4)router-link 中通过 to 指令实现页面的跳转(to='要跳转的地址');
但是如果在要跳转的地址后面添加了参数(:参数),就是使用 v-bind:to='地址' 或者 :to='地址';
(5)this.$route:获取组件之间传递的数据(它是一个对象,里面有很多属性);
<body>
<div id="app">
<router-view></router-view> //视图:用来显示组件
</div>
//导入代码
<script src='vue.js'></script>
<script src='vue-router.js'></script>
//写自己的代码
<script>
//创建组件
var mytest01 = Vue.component('test01',{
methods : {
//定义一个方法,用于跳转界面(供button使用)
jump : function(){
myRouter.push('/myTest02') //这一步必须要加
}
},
template : `<div>
<h1>这是组件test01</h1>
<router-link to='/myTest02'>跳转到test02界面</router-link>
<button @click='jump'>点我跳转到test02界面</button>
</div>`
})
var mytest02 = Vue.component('test02',{
template : `<div>
<h2>这是组件test02</h2>
</div>`
})
//定义跳转的对象
var myRoutes = [
{
path : '/myTest01',
component : mytest01,
},
{
path : '/myTest02',
component : mytest02,
},
{
path : '/',
component : mytest01,
},
];
//创建router实例
var myRouter = new VueRouter({
routes : myRoutes //这一步必须要加,用于定义跳转的对象
});
//实例
new Vue({
el : '#app',
router : myRouter, //这一步必须要加(属性值要与router实例相对应)
})
</script>
</body>
4.Vue.js 单页面应用的练习:
<body>
<div id="app">
<router-view></router-view> //视图:用来显示组件
</div>
//导入代码
<script src='vue.js'></script>
<script src='vue-router.js'></script>
//写自己的代码
<script>
//创建组件
var regComponent = Vue.component('reg',{
data : function(){
return {
str : ''
}
},
template : `<div>
<h1>这是注册界面</h1>
请输入:<input type="text" v-model='str'/>
//将数据以参数的形式显示在地址栏中
<router-link v-bind:to="'/login/' + this.str ">点击跳转到登录界面</router-link>
</div>`
})
var loginComponent = Vue.component('login',{
data : function(){
return {
str : ''
}
},
//这是一个专门用来接收传来的数据的方法(兄弟组件)
created : function(){
console.log(this.$route.params) //获取地址栏中的参数
thus.str = this.$route.params.uname
},
template : `<div>
<h2>这是登录界面</h2>
<h4>接收的数据为:{{str}}</h4>
</div>`
})
//定义跳转的对象
var myRoutes = [
{
path : '/reg',
component : regComponent,
},
{
path : '/login/:uname',
component : loginComponent,
},
{
path : '/',
component : regComponent,
}
];
//创建router实例
var myRouter = new VueRouter({
routes : myRoutes //这一步必须要加,用于定义跳转的对象
});
//实例
new Vue({
el : '#app',
router : myRouter, //这一步必须要加(属性值要与router实例相对应)
})
</script>
</body>
5.Vue.js 中的嵌套路由:
(1)children:children 中继续添加需要跳转的地址和组件;
<body>
<div id="app">
<router-view></router-view> //视图:用来显示组件
</div>
//导入代码
<script src='vue.js'></script>
<script src='vue-router.js'></script>
//写自己的代码
<script>
//创建组件
var mainComponent = Vue.component('main',{
template : `<div>
<h1>这是主页</h1>
<router-link to='/pag'>点击跳转</router-link>
</div>`
})
var pagCompnent = Vue.component('pag',{
template : `<div>
<h1>这是第二个页面</h1>
<router-link to='/get'>收件箱</router-link>
<router-link to='/out'>发件箱</router-link>
<router-link to='/main'>返回主页</router-link>
<router-view></router-view> //通过这个标签将嵌套的页面显示
</div>`
})
var getEmail = Vue.component('get',{
template : `<div>
<ul>
<li>收件箱1</li>
<li>收件箱2</li>
<li>收件箱3</li>
</ul>
</div>`
})
var outEmail = Vue.component('out',{
template : `<div>
<ul>
<li>已发件箱1</li>
<li>已发件箱2</li>
<li>已发件箱3</li>
</ul>
</div>`
})
//定义跳转的对象
var myRoutes = [
{
path : '/main',
component : mainComponent
},
{
path : '/pag',
component : pagCompnent,
children : [
{
path : '/get',
component : getEmail,
},
{
path : '/out',
component : outEmail
}
]
},
{
path : '/',
component : mainComponent
}
];
//创建router实例
var myRouter = new VueRouter({
routes : myRoutes //这一步必须要加,用于定义跳转的对象
});
//实例
new Vue({
el : '#app',
router : myRouter, //这一步必须要加(属性值要与router实例相对应)
})
</script>
</body>