Vue对象的属性
- el ：用来为vue实例指定一个id，通过这个id可以和dom进行绑定
<div id="app">
绑定此dom和el=app的vue实例
</div>
<script>
new Vue({
el: "#app"
})
</script>
-
data：
Vue的实例数据对象，类型：（ json / function ），component的data必须是一个function；
<script>
// 创建一个vue的组件
Vue.component({
data: function () {
return {
count: 0
}
}
})
new Vue({
el: "#app",
data: {
name: "jack"
}
})
</script>
可以通过vm.$data获取Vue的data属性，也可以直接vue.name获取到jack的值，vue.name == vue.$data.name
在component中，data不是一个对象，必须是一个函数，维护一份独立的被返回对象的拷贝；
当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。
-
props：
类型：数组/对象；
作用：用来接收父组件的数据；
<div id="root">
<child content="Hello props"></child>
</div>
<script>
var child = {
props: ['content'],
template: '<div>{{content}}</div>'
}
var vm = new Vue({
el: '#root',
components: {
child: child
}
})
</script>
创建了一个child的component，将child设置到vm的components属性中，在html中使用child组件，给child的prop属性传值，prop最后传到了模板的div标签中；
prop类型：
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
定义了五个默认类型(String)的prop在props中
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
定义了五个指定类型的prop；
可指定的Type类型：
String，Number，Boolean，Array，Object，Date，Function，Symbol
prop的属性：
-
type：即上文的类型（String，Number） -
default：any为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。 -
required:Boolean定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。 -
validator: Function自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。
Vue.component("child", {
props: {
height: Number,
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})
- template：
用来设置模板，会替换页面元素；
<!--引用模板 -->
<div id="root">
<child content="Hello props"></child>
</div>
<script>
var child = {
props: ['content'],
template: '<div>{{content}}</div>'
}
var vm = new Vue({
el: '#root',
components: {
child: child
}
})
</script>
- methods：
放置页面中的业务逻辑，js方法一般都放置在methods中
var vm = new Vue({
data: {
a: 1
},
methods: {
plus: function () {
this.a++
}
}
})
vm.plus()
vm.a // 2
- render：
作用：
渲染函数，创建真正的Virtual Dom，字符串模板的代替方案，可以发挥JavaScript 的完全编程的能力，该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // 标签名称
this.$slots.default // 子节点数组
)
},
props: {
level: {
type: Number,
required: true
}
}
})
返回值：VNode
参数：createElement
createElement也是一个函数，该函数有三个参数；
- 一个 HTML 标签字符串，组件选项对象，或者解析上述任何一种的一个 async 异步函数。类型：{String | Object | Function}。必需。
- 一个包含模板相关属性的数据对象你可以在 template 中使用这些特性。类型：{Object}。可选。
- 子虚拟节点 (VNodes)，由 createElement() 构建而成，也可以使用字符串来生成“文本虚拟节点”。类型：{String | Array}。可选。
- computed：
用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化；
new Vue({
el: "#app",
data: {
result: [{
marks: 90
},
{
marks: 96
},
{
marks: 98
}
]
},
computed: {
total() {
let total = 0
let me = this
for (let i = 0; i < me.result.length; i++) {
total += parseInt(me.result[i].marks)
}
return total
}
}
})
computed属性中需要一个返回值，而且代码是同步执行
let关键字声明的变量只在let存在的代码块中生效，val声明是全局变量
- watch
watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象；watch则不需要返回值，代码也可以是异步的。
网友评论