李恒道 发表于 2022-4-4 23:44:27

[油猴脚本开发指南]Vue组件基础

# FBI WARNING
依然照抄vue文档...以后有机会会重写vue部分
# 基本示例
我们在使用createApp函数返回了一个应用示例
返回的应用示例相当于我们该项目的整体应用对象
在创建出应用示例之后,可以创建相应的组件
然后在运行的时候,在模板中使用组件
```javascript
const app = Vue.createApp({})
app.component('button-counter', {
data() {
    return {
      count: 0
    }
},
template: `
   
      You clicked me {{ count }} times.
    `
})
```
然后我们使用
```javascript




```
```js
app.mount('#components-demo')
```
组件相当于一个可复用的实例,可以使用data,computed,watch,methods,以及声明周期钩子等。
# 组件的复用
我们可以将组件任意多次的复用
```html
<div id="components-demo">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
</div>
```
每一个创建的组件都是相互隔离的
# 通过prop传递数据
我们在组件中可以设置props属性,当在模板中声明该组件的时候,可以传递特定的数据
```javascript
const app = Vue.createApp({})

app.component('blog-post', {
props: ['title'],
template: `{{ title }}`
})

app.mount('#blog-post-demo')
```
使用如下
```javascript





```
也可以在v-for循环里,并且通过bind绑定来提供props数据
```javascript
const App = {
data() {
    return {
      posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
      ]
    }
}
}

const app = Vue.createApp(App)

app.component('blog-post', {
props: ['title'],
template: `{{ title }}`
})

app.mount('#blog-posts-demo')

```
然后调用组件
```javascript



```
# 结语
依然照抄vue文档....撒花...

王一之 发表于 2022-4-6 14:19:32

代码缺失了,哥哥补一补档
页: [1]
查看完整版本: [油猴脚本开发指南]Vue组件基础