vue 之node.js 02

<!-- 组件都是.vue的文件 -->
<!-- 固定三标签 -->

<!-- 写页面结构 -->
<template>
  <!-- HTML -->
  <div id = ‘app‘>
    <h3>{{ msg }}</h3>
    <ul>
      <li v-for = ‘(item,index) in favs‘>
        {{ item }}
      </li>
    </ul>

    <!-- 3 插入Vheader的图片 自定义标签 -->
    <Vheader></Vheader>
  </div>

</template>



<!-- 业务逻辑 -->
<script>
  // JS
  // 1：导入子主件模块
import Vheader from ‘./Vheader‘
  // 抛出
  export default {
    name:"App",
    // 数据属性是一个对象单体函数
    data(){
      return {
        // 放当前组件的所有数据属性 key-val
        msg:‘学习使我快乐‘,
        favs:[‘python‘,‘java‘,‘vue‘]
      },
      // 方法声明
      methods:{

      },
      // 计算属性
      computed:{

      },
      // 组件关系 父主件关联子主件
      components:{
          // 2： 将Vheader主件与父主件关联起来
          // Vheader：Vheader  当名字一样时，可以直接写Vheader
          // 只有这里写了，上面才能自定义标签
          Vheader
      }
    }
  }
</script>



<!-- 样式 -->
<style>
  /* CSS */
</style>

<!-- 固定三样式 -->
<template>
    <div class="vheader">
        <img src="./assets/logo.png">
    </div>
</template>


<script>
    // 对应app.vue的import
    export default{
        name:‘vheader‘,
        data(){
            return{

            }
        }
    }
</script>

<style></style>

<!-- 固定三样式 -->
<template>
    <div class="Vheader">
        <h3>啦啦啦</h3>
        <!-- 需要绑定起来，才能链接到下面的属性 -->
        <img src="./assets/logo.png">
        <!-- 3 显示数据 -->
        <ul>
            <li v-for = "(item,index) in hfavs">
                {{item}}
            </li>
        </ul>

        <!-- I子组件往父组件传值 -->
        <button @click = ‘addOneFav‘> 添加 </button>
    </div>

</template>


<script>
    import url from ‘./assets/logo.png‘
    // 对应app.vue的import
    export default{
        name:‘vheader‘,
        data(){
            return{
                url:url
            }
        },
        // 2 验证
        props:{
            // 父组件传数据到子组件 一定要验证数据属性的类型
            hfavs:Array
        },
        methods:{
            // II 声明事件 
            addOneFav(){
                // $emit 使用$emit() 方法来触发自定义事件
                // 第一个参数 是自定义的函数名 触发到主件的函数
                this.$emit(‘addHandler‘,11111);
            }
        }
    }
</script>

<style scoped>
    h3{
        color: blue;
    }
</style>

<!-- 组件都是.vue的文件 -->
<!-- 固定三标签 -->

<!-- 写页面结构 -->
<template>
  <!-- HTML -->
  <div id = ‘app‘>
    <h3>{{ msg }}</h3>
<!--     <ul>
      <li v-for = ‘(item,index) in favs‘>
        {{ item }}
      </li>
    </ul> -->
    <!-- 3 插入子组件   Vheader的图片 自定义标签 -->
    <!--1 如何从父组件传递数据到子组件 使用vue提供的props
        
        I 子组件往父组件传值，使用自定义事件，使用$emit() 触发自定义函数
     -->
    <!-- 1 绑定 -->
    <Vheader :hfavs = ‘getAllDatas‘ @addHandler=‘add‘></Vheader>
    <Vmarked></Vmarked>

  
  </div>

</template>



<!-- 业务逻辑 -->
<script>
  // JS
  // 1：导入子主件模块

  import Vheader from ‘./Vheader‘
  import Vmarked from ‘./Vmarked‘
  // 抛出
  export default {
    name:"App",
    // 数据属性是一个对象单体函数
    data(){
      return {
        // 放当前组件的所有数据属性 key-val
        msg:‘学习使我快乐‘,
        favs:[‘python‘,‘java‘,‘vue‘]

      }
    },
      // 方法声明
      methods:{
        add(a){
            // alert("11")
            this.favs.push(a)
        }
      },
      // 计算属性
      computed:{
        getAllDatas(){
          return this.favs
        }
      },
      // 组件关系 父主件关联子主件挂载子组件 把子组件挂载到父组件中
      components:{
          // 2： 将Vheader主件与父主件关联起来
          // Vheader：Vheader  当名字一样时，可以直接写Vheader
          // 只有这里写了，上面才能自定义标签
          Vheader:Vheader,
          Vmarked
      }
    
  }
</script>



<!-- 样式 scoped单独加样式 -->
<style scoped>
  /* CSS */
  h3{
    color: red;
  }
</style>