vue项目
一 一个简单的页面
vue页面由<template></template>,<script></script>,<style></style>三部分组成
App.vue
<template> <div id="app"> <h3>{{ msg }}</h3> <ul> <li v-for="(item,index) in menu ">{{item }}</li> </ul> </div> </template> <script> export default{ #固定格式 name:'App', data(){ return{ #函数,必须有返回值 'msg':'hello,world', 'menu':[3,11,23,55,66,77] } } } </script> <style> </style>
进阶:绑定函数
<template> <div id="app"> <h3>{{ msg }}</h3> <ul> <li v-for="(item,index) in menu ">{{item }}</li> </ul> <button @click="addHandle">添加菜单</button> </div> </template> <script> export default{ name:'App', data(){ return{ 'msg':'hello,world', 'menu':[3,11,23,55,66,77] } }, methods:{ addHandle(){ this.menu.push('99') } } } </script>
二 组件之间的通信
1 子级在父级中显示。
App.vue 父级 Header.vue 子级
App.vue
<template> <div id="app"> <Header></Header> # 导入的,必须是闭合标签 <h3>{{ msg }}</h3> <ul> <li v-for="(item,index) in menu ">{{item }}</li> </ul> <button @click="addHandle">添加菜单</button> </div> </template> <script> import Header from './Header.vue' // import 放在外面,地址加引号 export default{ name:'App', data(){ return{ 'msg':'hello,world', 'menu':[3,11,23,55,66,77] } }, methods:{ addHandle(){ this.menu.push('99') } }, components:{ Header //相当于 Header:Header !! 挂载子组件 } } </script> <style> </style>
Header.vue
<template> <img :src="imgSrc" alt=""> #绑定属性 </template> <script> import imgSrc from './assets/logo.png' // import 放在export default 外面,地址加引号 export default{ name:'Header', data(){ return{ imgSrc:imgSrc } } } </script> <style> </style>
2 父级往子级传值,使用自定义属性,验证props。
父级中的城市列表,传给子级。子级 v-for 显示。
App.vue 父级
1)父级挂载子组件
2)父级有子级的数据
3)子级自定义属性 <Footer :city=''></Footer>
4)子级验证属性的数据类型是否正确 props
<template> <div id="app"> <Header></Header> <h3>{{ msg }}</h3> <ul> <li v-for="(item,index) in menu ">{{item }}</li> </ul> <button @click="addHandle">添加菜单</button> <Footer :city="citys"></Footer> </div> </template> <script> import Header from './Header.vue' // import 放在外面,地址加引号 import Footer from './Footer.vue' export default{ name:'App', data(){ return{ 'msg':'hello,world', 'menu':[3,11,23,55,66,77], 'citys':['上海','青岛','泰安'], } }, methods:{ addHandle(){ this.menu.push('99') } }, components:{ Header, //相当于 Header:Header !! Footer, } } </script> <style> </style>
Footer.vue 子级
<template> <ul> <li v-for="item in city">{{item}}</li> </ul> </template> <script> export default{ name:'Footer', data(){ return{ } }, props:{ city:Array, } } </script> <style> </style>
3 子级往父级传值,使用自定义事件。
子级有一个button,有一个城市名称,点击button,将此城市名称传给父级,放入父级中的citys中。
步骤
1)在在父级中的子级组件绑定事件,@自定义事件 = '父级函数'
2)子级中,绑定点击事件函数,触发父级中的自定义事件 。
样式:
@click = 子级函数
子级函数(){
this.$emit('父级中的自定义事件名','与自定义事件绑定在一起的父级函数需要的参数') //固定格式,触发父级中的自定义事件。
}
流程就是,子级中点击事件,对应一个子级函数,这个子级函数,this.$emit(‘事件名’,‘参数’),父级中找到时间名对应的父级函数,接收参数,执行函数。收!
App.vue
<template> <div id="app"> <Header></Header> <h3>{{ msg }}</h3> <ul> <li v-for="(item,index) in menu ">{{item }}</li> </ul> <button @click="addHandle">添加菜单</button> <Footer :city="citys" @addOnecity="cityHandle"></Footer> <!-- cityHandle 触发的函数,addOnecity 自定义事件--> </div> </template> <script> import Header from './Header.vue' // import 放在外面,地址加引号 import Footer from './Footer.vue' export default{ name:'App', data(){ return{ 'msg':'hello,world', 'menu':[3,11,23,55,66,77], 'citys':['上海','青岛','泰安'], } }, methods:{ addHandle(){ this.menu.push('99') }, cityHandle(city){ //事件的声明 this.citys.push(city) } }, components:{ Header, //相当于 Header:Header !! Footer, } } </script> <style> </style>
Footer.vue
<template> <div> <ul> <li v-for="item in city">{{item}}</li> </ul> <button @click="addCity">添加一个城市</button> </div> </template> <script> export default{ name:'Footer', data(){ return{ } }, props:{ city:Array, }, methods:{ addCity(){ // 触发父级的自定义事件 this.$emit('addOnecity','西安') } } } </script> <style> </style>
三 scoped的应用
vue页面的显示是自上而下,如果每个页面都有独自的style,在这种情况下,页面以最下层的style样式为准。这是不允许的,解决方法是,每个页面的style后面加scoped,限定了样式只在当前页面显示。主页面一般不加,因为主页面一般只是设定margin:0,padding:0,只在每个组件中写scoped。
<template> <div> <h3>Footer</h3> <ul> <li v-for="item in city">{{item}}</li> </ul> <button @click="addCity">添加一个城市</button> </div> </template> <script> export default{ name:'Footer', data(){ return{ } }, props:{ city:Array, }, methods:{ addCity(){ // 触发父级的自定义事件 this.$emit('addOnecity','西安') } } } </script> <style scoped> h3{ color:red; } </style>