vueコンポーネントベースノート1
23494 ワード
vueコンポーネントベースノート1
1、Vueの中のコンポーネントの拡張機能はVueである.extend()は拡張をします.2、コンポーネントの拡張中のoptionsとnew Vue(options)は一致Vueを使用する.extend()はインスタンス化する、すなわちnew Vueを用いない.extend()3、グローバル登録:
大域略記:
4、ローカル登録:
ローカル登録の略記:
5、コンポーネントの命名単語は、頭文字が大文字であれば です. 2 2以上の単語であれば、各単語の頭文字は大文字ですが、使用するときは、小文字の横棒HeadTitle head-title と書くことを覚えておいてください.コンポーネント名は、小文字横棒 として直接定義することができる.ケース
6、コンポーネントのルール
7、ダイナミックコンポーネント
8、templateラベル
9、dataオプション
10、コンポーネントのネスト
1、Vueの中のコンポーネントの拡張機能はVueである.extend()は拡張をします.2、コンポーネントの拡張中のoptionsとnew Vue(options)は一致Vueを使用する.extend()はインスタンス化する、すなわちnew Vueを用いない.extend()3、グローバル登録:
const Hello = Vue.extend({
// template ， jsx
template: ' Hello Component'
})
Vue.component('Hello',Hello)// Vue.component( ， )
大域略記:
// Vue.component('Hello',options)
Vue.component('Hello',{
template: ' Hello Component '
})
4、ローカル登録:
const Hello = Vue.extend({
// template ， jsx
template: ' Hello Component'
})
new Vue({
el: '#app',
components: {
// ：
'Hello': Hello
}
})
ローカル登録の略記:
new Vue({
el: '#app',
components: {
'Hello': {
template: ' '
}
}
})
5、コンポーネントの命名
<div id="app">
<Hello>Hello>
<head-title>head-title>
<banner-list>banner-list>
div>
Vue.component('Hello',{
template: ' Hello '
})
Vue.component('HeadTitle',{
template: ' '
})
Vue.component('banner-list',{
template: ' banner '
})
new Vue({
el: '#app'
})
6、コンポーネントのルール
<body>
<div id="app">
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<!-- <Hello></Hello> -->
<tr is = "Hello"></tr>
</table>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
/*
html ， ，
ul li
ol li
dl dt dd
select option
table tr td
， ， ，
： is
is
*/
Vue.component('Hello',{
template: `
4
5
6
`
})
new Vue({
el: '#app'
})
7、ダイナミックコンポーネント
<keep-alive> //keep-alive, app ， ， ， ，
<component v-bind:is="currentTabComponent"></component> // ， is ， ：
</keep-alive>
8、templateラベル
<div id="app">
<template> // template ， template
{{ info }}
</template>
<Hello></Hello>
</div>
<template id="hello"> //template
<div>
<p> Hello </p>
</div>
</template>
</body>
<script src="../../lib/vue.js"></script>
<script>
/*
， template
*/
Vue.component('Hello',{
template: '#hello'
})
new Vue({
el: '#app',
data: {
info: ' ？'
}
})
9、dataオプション
<div id="app">
<Hello></Hello>
</div>
<template id="hello">
<div>
<!-- -->
<p> {{ money }} </p>
</div>
</template>
</body>
<script src="../../lib/vue.js"></script>
<script>
/*
1. ，
2. ，
3. ， data
4. data ？
- Vue getter setter
5.
*/
Vue.component('Hello',{
template: '#hello',
data () {
return {
money: 2000
}
}
})
new Vue({
el: '#app'
})
10、コンポーネントのネスト
<div id="app">
<Father></Father>
</div>
<template id="father">
<div>
father
<Son></Son>/* */
</div>
</template>
<template id="son">
<div>
son
</div>
</template>
</body>
<script src="../../lib/vue.js"></script>
<script>
Vue.component('Father',{
template: '#father'
})
Vue.component('Son',{
template: '#son'
})
new Vue({
el: '#app'
})