Vue的常用参数
名称描述data()该函数返回组件实例的 data 对象。computed计算属性将被混入到组件实例中。methodsmethods 将被混入到组件实例中。watch一个对象,键是要侦听的响应式 property。template一个字符串模板,用作 component 实例的标记。1. data()该函数返回组件实例的 data 对象。实例创建之后,可以通过 vm.$data 访问原始数据对象。
·
名称 | 描述 |
---|---|
data() | 该函数返回组件实例的 data 对象。 |
computed | 计算属性将被混入到组件实例中。 |
methods | methods 将被混入到组件实例中。 |
watch | 一个对象,键是要侦听的响应式 property。 |
template | 一个字符串模板,用作 component 实例的标记。 |
component | 声明一组可用于组件实例中的组件。 |
props | 一个用于从父组件接收数据的数组或对象。 |
provide / inject | 这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。 |
1. data()
- 该函数返回组件实例的 data 对象。
- 实例创建之后,可以通过 vm.$data 访问原始数据对象。
- 组件实例也代理了 data 对象上所有的 property,因此访问 vm.a 等价于访问 vm.%data.a 。
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>data()的使用</title> </head> <body> <div id="root"></div> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({ data(){ return { a: 'hello world' } }, template: `{{a}}` }); const vm = app.mount('#root'); console.log(vm.a); console.log(vm.$data.a); </script> </body> </html>
2. computed
- 计算属性将被混入到组件实例中,this上下文自动地绑定为组件实例。
- 注意,如果你为一个计算属性使用了箭头函数,则
this
不会指向这个组件的实例。
- 计算属性的结果会被缓存,只有当依赖的响应式 property 变化时才会重新计算。注意,如果某个依赖 (比如非响应式 property) 在该实例范畴之外,则计算属性是不会被更新的。
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>data()的使用</title> </head> <body> <div id="root"></div> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({ data() { return { count: 6, message: 'hello world' }; }, computed: { // 当计算属性依赖的内容发生变更时,才会重新执行计算 getTotal() { return Date.now() + this.count; } }, template: ` <div> {{message}}--{{getTotal}} </div> ` }); const vm = app.mount('#root'); </script> </body> </html>
- 初始状态。
- 改变count:
- 改变message:
3. methods
- methods 将被混入到组件实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的
this
自动绑定为组件实例。- 注意,不应该使用箭头函数来定义 method 函数。理由是箭头函数绑定了父级作用域的上下文,所以
this
将不会按照期望指向组件实例,this.a
将是 undefined。
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>data()的使用</title> </head> <body> <div id="root"></div> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({ data() { return { count: 6, message: 'hello world' }; }, methods: { // 只要页面重新渲染,就会重新执行 getTotal() { return Date.now() + this.count; }, }, template: ` <div> {{message}}--{{getTotal()}} </div> ` }); const vm = app.mount('#root'); </script> </body> </html>
- 初始状态:
- 改变count:
- 改变message:
4. watch
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>data()的使用</title> </head> <body> <div id="root"></div> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({ data() { return { count: 2, price: 5, total: 10 }; }, watch: { // price 发生变化时,函数会执行 price(current, prev) { this.total = current * this.count; } }, template: ` <div> {{price}}--{{total}} </div> ` }); const vm = app.mount('#root'); </script> </body> </html>
- 初始状态:
- 改变price:
- 改变count:
5. template
- 一个字符串模板,用作 component 实例的标记。模板将会替换所挂载元素的
innerHTML
。挂载元素的任何现有标记都将被忽略,除非模板中存在通过插槽分发的内容。
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>data()的使用</title> </head> <body> <div id="root"></div> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({ data() { return { message: "hello world" }; }, template: ` <div> {{message}} </div> ` }); const vm = app.mount('#root'); </script> </body> </html>
6. component
- 声明一组可用于组件实例中的组件。
示例:
- 全局组件,只要定义了,处处可以使用,性能不高,但是使用起来简单,名字建议 小写字母单词,中间用横线间隔。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>常用参数</title> </head> <body> <div id="root"> </div> <script src="https://unpkg.com/vue@next"></script> <script> // 创建一个Vue 应用 const app = Vue.createApp({ template: ` <button-counter></button-counter> ` }); // 定义一个名为 button-counter 的新全局组件 app.component('button-counter', { data() { return { count: 0 } }, template: ` <button @click="count++"> You clicked me {{ count }} times. </button>` }); app.mount('#root'); </script> </body> </html>
- 局部组件,定义了,要注册之后才能使用,性能比较高,使用起来有些麻烦,建议大些字母开头,驼峰命名。
- 局部组件使用时,要做一个名字和组件间的映射对象,你不写映射,Vue 底层也会自动尝试帮你做映射。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>常用参数</title> </head> <body> <div id="root"> </div> <script src="https://unpkg.com/vue@next"></script> <script> const ButtonCounter = { data() { return { count: 0 } }, template: ` <button @click="count++"> You clicked me {{ count }} times. </button>` }; const app = Vue.createApp({ components: { 'button-counter': ButtonCounter }, template: ` <button-counter></button-counter> ` }); app.mount('#root'); </script> </body> </html>
7. props
- 一个用于从父组件接收数据的数组或对象。它可以是基于数组的简单语法,也可以是基于对象的支持诸如类型检测、自定义验证和设置默认值等高阶配置的语法。
单项数据流的概念: 子组件可以使用父组件传递过来的数据,但是绝对不能修改传递过来的数据。
示例:
- 传递静态的Prop
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>传递静态Prop</title> </head> <body> <div id="root"> </div> <script src="https://unpkg.com/vue@next"></script> <script> // 创建一个Vue 应用 const app = Vue.createApp({ template: ` <props-demo-simple name='ZS' age=666></props-demo-simple> ` }); app.component('props-demo-simple', { props: ['name', 'age'], template: ` <div>{{name}}--{{age}}</div> ` }); app.mount('#root'); </script> </body> </html>
- 传递动态的Prop
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>传递动态Prop</title> </head> <body> <div id="root"> </div> <script src="https://unpkg.com/vue@next"></script> <script> // 创建一个Vue 应用 const app = Vue.createApp({ data(){ return { name: 'ZS', age: 666 } }, template: ` <props-demo-simple v-bind:name="name" :age="age"></props-demo-simple> ` }); app.component('props-demo-simple', { props: ['name', 'age'], template: ` <div>{{name}}--{{age}}</div> ` }); app.mount('#root'); </script> </body> </html>
- 属性传的时候,使用 content-abc 这种命名,接的时候,使用 contentAbc 命名。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>props</title> </head> <body> <div id="root"> </div> <script src="https://unpkg.com/vue@next"></script> <script> const app=Vue.createApp({ data(){ return { num: 666 }; }, template: ` <myContent :content-abc='num' /> ` }); app.component('myContent',{ props:['contentAbc'], template:` <div>{{contentAbc}}</div> ` }); app.mount('#root'); </script> </body> </html>
- 单项数据流的概念: 子组件可以使用父组件传递过来的数据,但是绝对不能修改传递过来的数据。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>props</title> </head> <body> <div id="root"> </div> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({ data() { return { num: 1 }; }, template: ` <counter :count='num' /> ` }); app.component('counter', { props: ['count'], data() { return { myCount: this.count } }, methods:{ handleClick(){ this.count++; this.myCount++; } }, template: ` <div @click='handleClick'>{{count}}--{{myCount}}</div> ` }); app.mount('#root'); </script> </body> </html>
- 同时传递多个prop时,可以直接传一个对象。
- v-bind="params" 等同于 :content="params.content" :a="params.a" :b="params.b" :c="params.c"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>props</title> </head> <body> <div id="root"> </div> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({ data() { return { params: { content: 'hello', a: 'a', b: 'b', c: 'c' } }; }, template: ` <counter v-bind='params' /> ` }); app.component('counter', { props: ['content', 'a', 'b', 'c'], template: ` <div>{{content}}--{{a}}--{{b}}--{{c}}</div> ` }); app.mount('#root'); </script> </body> </html>
8. provide / inject
- 这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>v-slot</title> </head> <body> <div id="root"> </div> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({ data() { return { count: 666 }; }, provide() { return { count: this.count }; }, template: ` <child /> ` }); app.component('child', { template: ` <child-child /> ` }); app.component('child-child', { inject: ['count'], template: ` <div>{{count}}</div> ` }); const vm = app.mount('#root'); </script> </body> </html>
更多推荐
已为社区贡献2条内容
所有评论(0)