Vue学习

组件嵌套
全局
1.全局注册组件

//main.js
//全局注册组件
import Users from "@/components/Users";
Vue.component("user",Users);

2.在要调用的地方用标签调用

//App.vue
<div id="app">
    <h1>{{title}}</h1>
    <users></users>
</div>

局部
1.在要调用的地方局部注册

import Users from "@/components/Users"; //局部注册组件
  export default {
    name: 'App',
    data(){
      return{
        title:"这是我的第一个Vue脚手架项目！"
      }
    },
    components:{
      "users":Users,
    }
  }

2.在要调用的地方用标签调用

<div id="app">
    <h1>{{title}}</h1>
    <users></users>
</div>

css作用域

<style scoped>
//加上scoped只在当前组件生效
</style>

组件嵌套小实例
效果图

//App.vue
<!--1.模板：HTML结构-->
<template>
  <div id="app">
    <app-header></app-header>
    <users></users>
    <app-footer></app-footer>
  </div>
</template>
<!--2.行为：处理逻辑-->
<script>
  //局部注册组件
  import Users from "@/components/Users";
  import Header from "@/components/Header";
  import Footer from "@/components/Footer";
  export default {
    name: 'App',
    data(){
      return{
        title:"这是我的第一个Vue脚手架项目！"
      }
    },
    components:{
      "users":Users,
      "app-header":Header,
      "app-footer":Footer,
    }
  }
</script>
<!--3.解决样式-->
<style scoped>

</style>

//Header.Vue
<template>
    <header>
      <h1>{{title}}</h1>
    </header>
</template>

<script>
    export default {
      name: "app-header",
      data(){
          return{
            title:"Vue.js Demo"
          }
      }

    }
</script>

<style scoped>
header{
  background: lightgreen;
  padding: 10px;
}
  h1{
    color: #222;
    text-align: center;
  }
</style>

//Users.vue
<template>
    <div class="users">
      <ul>
        <li v-for="user in users" v-on:click="user.show= !user.show">
          <h2>{{user.name}}</h2>
          <h3 v-show="user.show">{{user.position}}</h3>
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: "users",
      data(){
          return{
            users:[
              {name:"Henry",position:"web开发",show:false},
              {name:"Henry",position:"web开发",show:false},
              {name:"Henry",position:"web开发",show:false},
              {name:"Henry",position:"web开发",show:false},
              {name:"Henry",position:"web开发",show:false},
              {name:"Henry",position:"web开发",show:false},
              {name:"Henry",position:"web开发",show:false},
            ],
          }
      }
    }
</script>

<style scoped>
.users{
  width: 100%;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
  box-sizing: border-box;
}
  ul{
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
  }
  li{
    flex-grow: 1;
    flex-basis: 200px;
    text-align: center;
    padding: 30px;
    border:1px solid #222;
    margin: 10px;
  }
</style>

//Footer.vue
<template>
    <footer>
      <p>{{copyright}}</p>
    </footer>
</template>

<script>
    export default {
      name: "app-footer",
      data(){
        return{
          copyright:"copyright 2017 Vue Demo"
        }
      }
    }
</script>

<style scoped>
  footer{
    background: #222;
    padding: 6px;
  }
  p{
    color: lightgreen ;
    text-align: center;
  }
</style>

属性传值（父组件向子组件传值）

//父组件通过节点传值
<users v-bind:users="users"></users>
.........
.........
//数据
 data(){
      return{
        //title:"这是我的第一个Vue脚手架项目！"
        users:[
          {name:"Henry",position:"web开发",show:false},
          {name:"Henry",position:"web开发",show:false},
          {name:"Henry",position:"web开发",show:false},
          {name:"Henry",position:"web开发",show:false},
          {name:"Henry",position:"web开发",show:false},
          {name:"Henry",position:"web开发",show:false},
          {name:"Henry",position:"web开发",show:false},
        ],

//子组件通过props取值 
props:{
        users:{
          type:Array,
          required:true,
        }
      },

传值和传引用小案例
效果图

//App.vue
<!--1.模板：HTML结构-->
<template>
  <div id="app">
    <!--<h1>{{title}}</h1>-->
    <app-header v-bind:title="title"></app-header>
    <users v-bind:users="users"></users>
    <users v-bind:users="users"></users>
    <app-footer v-bind:title="title"></app-footer>
  </div>
</template>
<!--2.行为：处理逻辑-->
<script>
  //局部注册组件
  import Users from "@/components/Users";
  import Header from "@/components/Header";
  import Footer from "@/components/Footer";
  export default {
    name: 'App',
    data(){
      return{
        //title:"这是我的第一个Vue脚手架项目！"
        users:[
          {name:"Henry",position:"web开发",show:false},
          {name:"Henry",position:"web开发",show:false},
          {name:"Henry",position:"web开发",show:false},
          {name:"Henry",position:"web开发",show:false},
          {name:"Henry",position:"web开发",show:false},
          {name:"Henry",position:"web开发",show:false},
          {name:"Henry",position:"web开发",show:false},
        ],
        title:"传递的是一个值(number,string,boolean)",
      }
    },
    components:{
      "users":Users,
      "app-header":Header,
      "app-footer":Footer,
    }
  }
</script>
<!--3.解决样式-->
<style scoped>

</style>

//Header.vue
<template>
    <header v-on:click="changeTitle">
      <h1>{{title1}}{{title}}</h1>
    </header>
</template>

<script>
    export default {
      name: "app-header",
      props:{
        title:{
          type:String,
          required:true,
        }
      },
      data(){
          return{
            title1:"Vue.js Demo"
          }
      },
      methods:{
        changeTitle:function(){
          this.title="changed";
        }
      }

    }
</script>

<style scoped>
header{
  background: lightgreen;
  padding: 10px;
}
  h1{
    color: #222;
    text-align: center;
  }
</style>

//Users.vue
<template>
    <div class="users">
      <ul>
        <li v-for="user in users" v-on:click="user.show= !user.show">
          <h2>{{user.name}}</h2>
          <h3 v-show="user.show">{{user.position}}</h3>
        </li>
      </ul>
      <button v-on:click="deleteUser">删除</button>
    </div>
</template>
<!--
  传值：string number Boolean
  引用：array object
-->
<script>
    export default {
      name: "users",
      //props:["users"],
      props:{
        users:{
          type:Array,
          required:true,
        }
      },
      data(){
          return{

          }
      },
      methods:{
        deleteUser:function(){
          this.users.pop();
        }
      }
    }
</script>

<style scoped>
.users{
  width: 100%;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
  box-sizing: border-box;
}
  ul{
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
  }
  li{
    flex-grow: 1;
    flex-basis: 200px;
    text-align: center;
    padding: 30px;
    border:1px solid #222;
    margin: 10px;
  }
</style>

//Footer.vue
<template>
    <footer>
      <p>{{copyright}}{{title}}</p>
    </footer>
</template>

<script>
    export default {
      name: "app-footer",
      props:{
        title:{
          type:String,
          required:true,
        }
      },
      data(){
        return{
          copyright:"copyright 2017 Vue Demo"
        }
      }
    }
</script>

<style scoped>
  footer{
    background: #222;
    padding: 6px;
  }
  p{
    color: lightgreen ;
    text-align: center;
  }
</style>

事件传值（子传父）

//子组件注册事件
 changeTitle:function(){
        this.$emit("titleChanged","子向父组件传值");
 }

//父组件绑定事件
<app-header v-on:titleChanged="updateTitle($event)" v-bind:title="title"></app-header>
..................
..................
//执行方法
 updateTitle(title){
        this.title = title;
 }