vue 学习之 vue 文件基本构成

<!-- // vue 单文件组件的基本组成 -->
<!-- 1.组件 html template 部分 -->
<!-- 2.组件 js 逻辑 script 部分-->
<!-- 3. 组件CSS  style 部分-->
<!-- 1 组件Html 模板-->
<template lang="">
    <div>
        <h1 v-on:click="onclick"  class="h1">{{mes}}</h1>
    </div>
</template>
<!-- 2 组件JS逻辑 所有的 js 代码都需要写在下面 比如导入组件相关操作-->
<script>
export default {
    //name表示外部使用的组件名字一般和文件名相同
    name:'word',
    //props表示接受外部的参数
        // props的类型: String Number Boolean Array Object
        //注意 除了 String类型的不需要v-bind: 其他类型都需要v-bind:修饰 来告诉 vue参数的类型
    props:{
        mes:String,
        num:Number
    },
    // 这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值：
    data:function(){
        return{
           dataMes:this.mes
        }
    },
    //这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：
    computed:{
        dataNum:function(){
            return this.num+1
        }
    },
    //这里是该组件所有的方法事件逻辑
    // 不应该使用箭头函数来定义 method 函数 (例如 onclick: () =>  console.log(this.dataNum))。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。。
    methods:{
        onclick:function(){
            console.log(this.dataNum)            
        }
    }
}
</script>
<!-- 3 组件CSS  需要添加 scoped关键字 来限制该CSS只作用于组件-->
<style scoped>
    .h1{
        color: red
    }
</style>