1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
| <script>
import QueryConditions from './query-coditions';
export default {
// 组件名字：只有作为组件选项时起作用。允许组件模板递归地调用自身。注意，组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。
// 指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外，当在有 vue-devtools，未命名组件将显示成 <AnonymousComponent>，这很没有语义。通过提供 name 选项，可以获得更有语义信息的组件树。
name: 'Home',
// 引入组件：值必须是对象，
components: {
QueryConditions
},
// 自定义组件的 v-model, 覆盖默认value属性和input事件
model: {
prop: 'fatherData', // 指定v-model属性接受数值，需要在props里面声明
event: 'changeData'// 指定事件回送数据给父组件
},
// props 属性
props: {
fatherData: '',
fileName: {
type: String,
required: true
},
},
// 组件自己的属性定义处
data() {
return { a: 10 };
},
// 组件生命周期
created() { },
mounted() { },
// 计算属性：
// 当 a 属性 发生变化时，需要 aDouble 也发生变化时，使用 computed,
// 1，computed中声明的属性，不需要在 data方法中声明了。
// 2. 不能使用箭头函数，应为箭头函数没有this，获取不到data()中数据
computed: {
// 仅读取
aDouble: function () {
return this.a * 2
},
// 仅读取，另一种写法
isTen() {
let flag = false;
if (this.a === 10) {
flag = true;
}
return flag;
}
// 读取和设置
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
},
// 侦听器: 在数据变化时执行异步或开销较大的操作
// 在 a 变量发生改变时，会执行watch中对应 a 方法
// 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。
// Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。
watch: {
// 如果 `a` 发生改变，这个函数就会运行
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
},
// methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
methods: {
plus: function () { this.a++ },
getData() {}
},
};
</script>
|
