Skip to content

Commit

Permalink
add file about vue 事件 ref 组件 weibo practice
Browse files Browse the repository at this point in the history
  • Loading branch information
SakuraMuxia committed Jun 5, 2024
1 parent f786854 commit 3a7c7a0
Show file tree
Hide file tree
Showing 7 changed files with 1,214 additions and 308 deletions.
12 changes: 12 additions & 0 deletions docs/front-end/04-ES6/17-promise.md
Original file line number Diff line number Diff line change
Expand Up @@ -529,6 +529,18 @@ const user = {
}
```

在script标签中 type属性值为 `model`时也相当于定义了一个async函数,

```html
<script type="model">
// import内置函数是一个异步 require是同步(synchronous)的,会阻塞脚本的执行,import是异步(asynchronous)的,加载过程不会阻塞脚本的执行。
import xxx from "./js/xxx.js"
...
</script>
```



### ② async 函数的返回值

async 函数返回一个 Promise 对象, Promise 对象的状态取决于 async 函数内的 return, 规则如下:
Expand Down
10 changes: 10 additions & 0 deletions docs/front-end/09-vue/01-vue入门.md
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,16 @@ var app = new Vue({

## 数据和方法

## 术语

```javascript
实例或组件中的 data,methods,template,components,computer 这类属性名 称为 property

实例或组件中的 data中的数据,methods中的方法名,template,components中的组件名,computer方法名 这类属性名 称为 attribute
```



### 数据data

```javascript
Expand Down
43 changes: 38 additions & 5 deletions docs/front-end/09-vue/02-指令.md
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,11 @@ v-show为true表示显示元素,false表示隐藏元素(通过display:none
- `.prop` - 强制绑定为 DOM property。3.2+
- `.attr` - 强制绑定为 DOM attribute。3.2+

```javascript
当用于组件 props 绑定时,所绑定的 props 必须在子组件中已被正确声明。
当不带参数使用时,可以用于绑定一个包含了多个 attribute 名称-绑定值对的对象。
```

**示例代码**

```html
Expand Down Expand Up @@ -311,14 +316,40 @@ div v-bind:style="[baseStyles, overridingStyles]"></div>
```javascript
语句:如果操作语句比较简单,建议直接写语句
函数:如果操作比较复杂或要在多个不同的地方调用且不需要传递参数使用函数
内联声明:如果操作比较复杂或要在多个不同的地方调用且需要传递参数使用调用函数
如果要传递事件对象可以通过$event全局对象
内联声明:如果操作比较复杂或要在多个不同的地方调用且需要传递参数使用函数()
如果要传递事件对象可以通过 $event全局对象
v-on可以简写:@

//api中的描述
事件类型由参数来指定。表达式可以是一个方法名,一个内联声明,如果有修饰符则可省略。
当用于普通元素,只监听原生 DOM 事件。当用于自定义元素组件,则监听子组件触发的自定义事件。
当监听原生 DOM 事件时,方法接收原生事件作为唯一参数。如果使用内联声明,声明可以访问一个特殊的 $event 变量:v-on:click="handle('ok', $event)"
v-on 还支持绑定不带参数的事件/监听器对的对象。请注意,当使用对象语法时,不支持任何修饰符。
当用于普通元素,只监听原生 DOM 事件。
当用于自定义元素组件,则监听子组件触发的自定义事件。
当监听原生 DOM 事件时,方法接收原生事件作为唯一参数。
如果使用内联声明,声明可以访问一个特殊的 $event 变量
v-on:click="handle('ok', $event)"
v-on 还支持绑定不带参数的事件/监听器对象。
请注意,当使用对象语法时,不支持任何修饰符。
```

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 `$event` 把它传入方法

```javascript
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
```

```javascript
// ...
methods: {
warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) {
event.preventDefault()
}
alert(message)
}
}
```

```javascript
Expand All @@ -332,6 +363,8 @@ v-on 还支持绑定不带参数的事件/监听器对的对象。请注意,
<button v-on:click="doThat('hello', $event)"></button>
```



### 事件修饰符

- `.stop` - 调用 `event.stopPropagation()`
Expand Down
Loading

0 comments on commit 3a7c7a0

Please sign in to comment.