一、创建一个vue文件（Test.vue），基础内容如下
<template>
<div ></div>
</template>
<script>
export default {
name: 'Test'
}
</script>
<style>
</style>
二、组件引用（在其他组件使用Test.vue）
<template>
<div>
<!-- 第二步：使用组件 -->
<Test/>
</div>
</template>
<script>
export default {
name: 'home',
// 第一步：先引入组件
components:{
// import('./Test.vue') 组件路径需要根据自己的情况来
Test: () => import('./Test.vue')
}
}
</script>
<style>
</style>
三、组件中属性和方法详解
注（常用属性）
<template>
<div></div>
</template>
<script>
export default {
props: { }, // 组件接收父组件的参数
data() { // 页面渲染需要的属性
return { }
},
created() { }, // 生命周期函数 | 页面已经创建
mounted() { }, // 生命周期函数 | 页面有更新
computed: { }, // 计算属性 | 页面渲染中需要用到复杂的数据
methods: { }, // 方法 | 在页面中需要的方法可以在这里定义
watch: { }, // 监听 | 可以监听 props|| data || computed || vue自身的相应式数据
}
</script>
<style></style>
1、data属性的定义和使用
data属性是vue里实现响应式数据的属性：vue特色就是实现数据的双向绑定，但是只有在data中定义的属性才能实现数据的双向绑定。
（1）组件中定义data
<template>
<div >
</div>
</template>
<script>
export default {
name: 'Test',
// data 应定义为一个函数式对象： data定义为一个函数，返回一个对象 return {}
// return {} 中的属性都是响应式的，可以实现数据的双向绑定
data() {
return {
username: 'lzz',
password: '123456'
}
}
}
</script>
<style>
</style>
（2）组件中使用data里的值
<template>
<div >
<!-- 第一种：使用{{ }} -->
{{ username }} {{ password }}
<!-- 下面两种了解即可 -->
<!-- 第二种：使用指令 v-html -->
<span v-html="username"></span>
<span v-html="password"></span>
<!-- 第三种： 使用指令 v-text -->
<span v-text="username"></span>
<span v-text="password"></span>
</div>
</template>
<script>
export default {
name: 'Test',
// data 应定义为一个函数式对象： data定义为一个函数，返回一个对象 return {}
// return {} 中的属性都是响应式的，可以实现数据的双向绑定
data() {
return {
username: 'lzz',
password: '123456'
}
},
mounted(){
// 在script 方法里使用时，前面只需加上 this. 即可
this.username = 'gxxxxx'
const name = this.username
}
}
</script>
<style>
</style>
2、props属性详解和使用
props属性是组件接收其他组件给他传递参数的一种途径
（1）、在组件中定义props：
<template>
<div ></div>
</template>
<script>
export default {
name: 'Test',
// 参数 可以接收多个
props: {
// name 是参数名称 {type: String,default: 'gxx'}是对参数name的配置；
// type:String 表示 参数name需要接收String（js中的String数据类型）类型的数值；
// default: 'gxx'表示如果父组件没有给参数name传值，那么name默认值就是gxx
name: {
type: String, // 接收String数据类型的值
default: 'gxx' // 默认值
},
// 和name的描述一致，不过这里的数据类型变成了Number
age:{
type: Number,
default: 18
}
}
}
</script>
<style>
</style>
（2）、在组件中使用propos
<template>
<div >
<!-- 使用{{ }}来使用 -->
{{ name }} {{ age }}
<!-- 使用指令方式使用 v-html -->
<span v-html="name"></span>
<span v-html="age"></span>
<!-- 使用指令方式使用 v-text -->
<span v-text="name"></span>
<span v-text="age"></span>
</div>
</template>
<script>
export default {
name: 'Test',
// 参数 可以接收多个
props: {
// name 是参数名称 {type: String,default: 'gxx'}是对参数name的配置；
// type:String 表示 参数name需要接收String（js中的String数据类型）类型的数值；
// default: 'gxx'表示如果父组件没有给参数name传值，那么name默认值就是gxx
name: {
type: String, // 接收String数据类型的值
default: 'gxx' // 默认值
},
// 和name的描述一致，不过这里的数据类型变成了Number
age:{
type: Number,
default: 18
}
}
}
</script>
<style>
</style>
3、methods属性使用
methods是vue里定义方法的一个属性对象
<template>
<div >
<!-- 第一种：使用{{ }} -->
{{ username }} {{ password }}
<!-- 下面两种了解即可 -->
<!-- 第二种：使用指令 v-html -->
<span v-html="username"></span>
<span v-html="password"></span>
<!-- 第三种： 使用指令 v-text -->
<span v-text="username"></span>
<span v-text="password"></span>
<!-- 调用方法：v-on指令 -->
<span v-on:click="init">v-on点击方法</span>
<!-- 调用方法：v-on指令缩写 @（推荐） -->
<span @:click="init"> @点击方法</span>
</div>
</template>
<script>
export default {
name: 'Test',
// data 应定义为一个函数式对象： data定义为一个函数，返回一个对象 return {}
// return {} 中的属性都是响应式的，可以实现数据的双向绑定
data() {
return {
username: 'lzz',
password: '123456'
}
},
mounted(){ // 生命周期函数就是一个方法 是vue对象自己触发
// 在script 方法里使用时，前面只需加上 this. 即可
this.username = 'gxxxxx'
const name = this.username
// 调用方法
this.testClick()
},
methods:{
/**
* 定义一个方法
* init | 方法名，可以自己定，但是在这个页里不能重名
*/
init() {
console.log('这是一个简单方法');
// 输出 data 里的属性
console.log(this.username);
// 设置data 里的属性值
this.password = 'gxxx'
},
/**
* 测试方法 | 测试在方法里调用其他方法
*/
testClick(){
// 调用init方法
this.init();
}
}
}
</script>
<style>
</style>
