Skip to content

Commit

Permalink
update vue-tips
Browse files Browse the repository at this point in the history
  • Loading branch information
ccforward committed Jun 18, 2017
1 parent 5d2009f commit c7c4dc3
Showing 1 changed file with 42 additions and 0 deletions.
42 changes: 42 additions & 0 deletions Blog/62.vue.js-tips.md
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,49 @@ export default {
```


## 绑定 console.log

在 html 标签中无法使用 `console.log` 调试,但是只需要在 Vue 的原型链上增加 $log 函数即可

```js
Vue.prototype.$log = console.log.bind(console);
new Vue({el: '#app'})
```

html 中就可以直接 console

```html
<input @keydown="$log" @keyup="$log" placeholder="input something">
```

在demo中打开控制台查看 [demo](https://codepen.io/ccforward/pen/zzmWWy)

## 简写v-bind

```js
data: {
placeholder: 'this is text',
required: true,
value: '123',
input: {
placeholder: 'this is text',
required: true,
value: '123'
}
}
```

```html
<input :placeholder="placeholder" :required="required" :value="value">
```

如果 input 标签属性的属性很多,则可以直接绑定整个对象,如下:

```html
<input v-bind="input">
```

[demo](https://codepen.io/ccforward/pen/QgZmoQ)



Expand Down

0 comments on commit c7c4dc3

Please sign in to comment.