清哥的小屋

1
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

1
data: {
2
  activeColor: 'red',
3
  fontSize: 30
4
}

1
<div v-bind:style="styleObject"></div>

1
data: {
2
  styleObject: {
3
    color: 'red',
4
    fontSize: '13px'
5
  }
6
}

1
<div v-bind:style="[baseStyles, overridingStyles]"></div>

1
<template v-if="ok">
2
  <h1>Title</h1>
3
  <p>Paragraph 1</p>
4
  <p>Paragraph 2</p>
5
</template>

1
// 当这两个元素是完全独立的，不要复用它们时 只需添加一个具有唯一值的 key 属性即可
2
<template v-if="loginType === 'username'">
3
  <label>Username</label>
4
  <input placeholder="Enter your username" key="username-input">
5
</template>
6
<template v-else>
7
  <label>Email</label>
8
  <input placeholder="Enter your email address" key="email-input">
9
</template>

1
new Vue({
2
  el: '#v-for-object',
3
  data: {
4
    object: {
5
      title: 'How to do lists in Vue',
6
      author: 'Jane Doe',
7
      publishedAt: '2016-04-10'
8
    }
9
  }
10
})

1
<div v-for="(value, name) in object">
2
  {{ name }}: {{ value }}
3
</div>

1
 title: How to do lists in Vue
2
 author: Jane Doe
3
 publishedAt: 2016-04-10

1
<div v-for="(value, name, index) in object">
2
  {{ index }}. {{ name }}: {{ value }}
3
</div>

1
push()
2
pop()
3
shift()
4
unshift()
5
splice()
6
sort()
7
reverse()

1
filter()、concat() 和 slice()

1
<li v-for="n in evenNumbers">{{ n }}</li>

1
data: {
2
  numbers: [ 1, 2, 3, 4, 5 ]
3
},
4
computed: {
5
  evenNumbers: function () {
6
    return this.numbers.filter(function (number) {
7
      return number % 2 === 0
8
    })
9
  }
10
}

1
<ul v-for="set in sets">
2
  <li v-for="n in even(set)">{{ n }}</li>
3
</ul>

1
data: {
2
  sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
3
},
4
methods: {
5
  even: function (numbers) {
6
    return numbers.filter(function (number) {
7
      return number % 2 === 0
8
    })
9
  }
10
}

1
<li v-for="todo in todos" v-if="!todo.isComplete">
2
  {{ todo }}
3
</li>

1
<my-component v-for="item in items" :key="item.id"></my-component>
2
// 据传递到组件里，我们要使用prop
3
<my-component
4
  v-for="(item, index) in items"
5
  v-bind:item="item"
6
  v-bind:index="index"
7
  v-bind:key="item.id"
8
></my-component>

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

1
methods: {
2
  warn: function (message, event) {
3
    // 现在我们可以访问原生事件对象
4
    if (event) {
5
      event.preventDefault()
6
    }
7
    alert(message)
8
  }
9
}

1
<!-- 在“change”时而非“input”时更新 -->
2
<input v-model.lazy="msg">

1
<input v-model.number="age" type="number">

1
<div class="container">
2
  <header>
3
    <slot name="header"></slot>
4
  </header>
5
  <main>
6
    <slot></slot>
7
  </main>
8
  <footer>
9
    <slot name="footer"></slot>
10
  </footer>
11
</div>

1
父子件中
2
<base-layout>
3
  <template v-slot:header>
4
    <h1>Here might be a page title</h1>
5
  </template>
6

7
  <!--任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。-->
8
  <p>A paragraph for the main content.</p>
9
  <p>And another one.</p>
10
  <!--希望更明确点仍然可以在一个 <template> 中包裹默认插槽的内容-->
11
   <template v-slot:default>
12
    <p>A paragraph for the main content.</p>
13
    <p>And another one.</p>
14
  </template>
15

16
  <template v-slot:footer>
17
    <p>Here's some contact info</p>
18
  </template>
19
</base-layout>

1
<div class="container">
2
  <header>
3
    <h1>Here might be a page title</h1>
4
  </header>
5
  <main>
6
    <p>A paragraph for the main content.</p>
7
    <p>And another one.</p>
8
  </main>
9
  <footer>
10
    <p>Here's some contact info</p>
11
  </footer>
12
</div>

1
<span>
2
  <slot v-bind:user="user">
3
    {{ user.lastName }}
4
  </slot>
5
</span>

1
<!-- slotProps 可以使任意的名字 -->
2
<current-user>
3
  <template v-slot:default="slotProps">
4
    {{ slotProps.user.firstName }}
5
  </template>
6
</current-user>
7
简化版
8
<!--当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用-->
9
<current-user v-slot="slotProps">
10
  {{ slotProps.user.firstName }}
11
</current-user>

1
<current-user>
2
  <template v-slot:default="slotProps">
3
    {{ slotProps.user.firstName }}
4
  </template>
5

6
  <template v-slot:other="otherSlotProps">
7
    ...
8
  </template>
9
</current-user>

1
<current-user v-slot="{ user }">
2
  {{ user.firstName }}
3
</current-user>

1
<current-user v-slot="{ user: person }">
2
  {{ person.firstName }}
3
</current-user>

1
<current-user v-slot="{ user = { firstName: 'Guest' } }">
2
  {{ user.firstName }}
3
</current-user>

1
<!-- 这样会触发一个警告 -->
2
<current-user #="{ user }">
3
  {{ user.firstName }}
4
</current-user>

1
<current-user #default="{ user }">
2
  {{ user.firstName }}
3
</current-user>