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>