越静，听到的就越多。: 03/27/20

2020年3月27日金曜日

Vue.js記法(三)component機能拡張

テンプレート書出す：Vue.component()、Global登録

<div id="app">
  <my-element></my-element>　　　　　　<!--表現テンプレートを独立に書き出す-->
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>  
</div>
<script>
Vue.component('my-element', {
  template: '<strong>Hello</strong>'　/* コンポーネントのグローバル登録 */
})
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

var app= new Vue({
  el: '#app',
})
</script>
<!--グローバル登録後、app範囲に自由に利用可能。--->

Vue拡張Addon：Vue.extend()。local登録、利用範囲明確、サイズ軽減

<div id="app01">
  <component1></component1>
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>  
</div>
<script>
var component1 = Vue.extend({           　　/*コンポーネントの定義*/      
  template: '<strong>Hello!</strong>'
})
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

var app= new Vue({
  el: '#app01',
  components:{
   'component1':componet1,
   'component-a':ComponentA,
   'component-b':ComponentB,
   'component-c':ComponentC,
  }
})
</script>

ローカル登録されたコンポーネントは、他のサブコンポーネント内では使用できない

Module化、システム内のローカル登録：import from/export default

// ローカル登録をする前に、使いたいコンポーネントごとにインポートする必要があります。
//ComponentB.vueよりComponentA.vueとComponentC.vueを利用したい場合、
// 以下の様に拡張子不要のimport comInstance from './file.vue' 
// export to default(自component)のcomponents属性に
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  },
  // ...
}

DOM更新beforeFinish処理：Vue.nextTick(function(){...})

<div id="app01">
  <div>{{ message }}</div>
</div>
<script>
var app01= new Vue({
  el: '#app01',
  data: {
    message: 'Hello!',
    msg1: '',
    msg2: ''
  }
})
app01.message = 'Bye!'                /*textContentはv-text要素の内容*/  
console.log(app01.$el.textContent);   /* 出力値：hello */

Vue.nextTick(function() {
  console.log(app01.$el.textContent); /* 出力値：bye!*/
})
</script>

Vue.js記法(二)画面の表現

文字列の画面表示：v-text =”msg” 又は {{msg}}、効果は同じ

<div id="app01">
  <div v-text="msg"></div>   
  <div>{{ msg}}></div>      
</div>
<script>
var app = new Vue({
  el: '#app01',
  data: { msg: 'Hello!' }
})
</script>

表示

Hello!

Hello!

HTMLをそのまま表示：v-html＝""

<div id="app02">
  <div v-text="message"></div> 
  <div v-html="message"></div>
</div>
<script>
var app = new Vue({
  el: '#app-102',
  data: { message: '<b>Hello!</b>' }
})
</script>

表示

Hello!<b>Hello!</b>

display属性の条件表示制御: v-show＝"true": display

<div id="app03">
  <input type="checkbox" @click="change" checked>
  <span v-show="seen">Hello!</span>
</div>
<script>
var app = new Vue({
  el: '#app03',
  data: { seen: true },
  methods: {
    change: function(e) {
      this.seen = e.target.checked
    }
  }
})
</script>

要素有無の条件制御する：v-if＝"true": <div>hello</div>出力

<div id="app03">
  <input type="checkbox" @click="change" checked>
  <span v-if="seen">Hello!</span>
</div>
<script>
var app = new Vue({
  el: '#app03',
  data: { seen: true },
  methods: {
    change: function(e) {
      this.seen = e.target.checked
    }
  }
})
</script>

条件表示制御: v-else-if, v-else前にv-ifが必須

<div id="app01">
  <input type="radio" name="app106-type" onclick="app106.type='A'" checked>
  <input type="radio" name="app106-type" onclick="app106.type='B'">
  <input type="radio" name="app106-type" onclick="app106.type='C'">
  <span v-if="type=='A'">Good morning.</span>
  <span v-else-if="type=='B'">Hello!</span>
  <span v-else>Bye!</span>
</div>
<script>
var app01 = new Vue({
  el: '#app01',
  data: { type: 'A' }
})
</script>

for loop : v-for="item in items", v-for="(item, i) in items"

<div id="app01">
  <ul>
     <li v-for="color in colorList"> {{ color }} </li>
  </ul>
  <ul>
     <li v-for="(color,i) in colorList"> {{i}}.{{ color }} </li>
  </ul>
</div>
<script>
var app = new Vue({
  el: '#app01',
  data: { colorList: [ 'Red', 'Green', 'Blue' ] }
})
</script>

event binding: v-on 又は @

<div id="app01">
  <button v-on:click="hello">Hello</button>
  <button @click="hello">Hello</button>
</div>
<script>
var app = new Vue({
  el: '#app01',
  methods: {
    hello: function() {
      alert("Hello!");
    }
  }
})
</script>

v-on:click.once / @click.once の様に、修飾可

修飾子	説明
.stop	call event.stopPropagation()、イベントが親要素に伝播抑止
.prevent	call event.preventDefault() 、デフォルト動作抑止
.capture	イベントリスナをキャプチャモードで追加します。
.self	イベントがディスパッチ場合のみハンドラを呼びます。
.{keyCode \| keyAlias}	指定キーが押下時、ハンドラを呼びます。
.native	コンポーネントのルート要素にネイティブイベントを監視。
.once	一度だけ呼びます。
.left	(2.2.0+) マウスの左ボタン押下処理
.right	(2.2.0+) マウスの右ボタン押下処理
.middle	(2.2.0+) マウスの中ボタン押下処理
.passive	(2.3.0+) { passive: true ] で DOM イベントをアタッチ

属性bind： v-bind　又は :

<div id="app01">
  <input type="button" v-bind:value="message">
  <input type="button" :value="message">
</div>
<script>
var app = new Vue({
  el: '#app01',
  data: { message: 'Hello!' }
})
</script>

v-bind:value.camel や :value.camel の様に、修飾可能

修飾子	説明
.prop	属性の代わりに DOM プロパティをバインドします。
.camel	(2.1.0+) ケバブケース(例:color-name)の属性名を、キャメルケース(例:ColorName)の属性名に変換します。
.sync	バインドされた値を更新する v-on ハンドラに展開されるのと同じ構文となります。

値変更可能要素にI・Oバインド：v-model="message"

<div id="app01">
  <input v-model="message">         <!--inputの値が変わったら--------->
  <div>Message: {{ message }}</div> <!--このDIVの表現内容が変わる------>
</div>
<script>
var app = new Vue({
  el: '#app01',
  data: { message: 'Hello!' }
})
</script>

修飾子	説明
.lazy	input の代わりに change イベントを監視します。
.number	データを数値に変換します
.trim	データ前後の空白を取り去る

data変数をそのまま出力: v-pre

<div id="app01">
  <div v-pre>Message: {{ message }}</div>
  <div>Message: {{ message }}</div>
</div>
<script>
var app01= new Vue({
  el: '#app01',
  data: { message: 'Hello' }
})
</script>

表示

Message: {{ message }}

Message: Hello

一回だけ動作：v-once

<div id="app">
  <input type="text" name="text1" v-model:value="message">
  <div>Message: <span v-once>{{ message }}</span></div>
  <div>Message: <span>{{ message }}</span></div>
</div>
<script>
var app= new Vue({
  el: '#app',
  data: { message: 'Hello' }
})
</script>

Vue.js記法(一)Hello World

Hello world!

<!--vue.jsの参照が必須----->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--このdivは画面表現の舞台、全てはこの中に表現する-->
<div id="app01">{{ message }}</div> 
<script>
var app1 = new Vue({
  el: '#app01',            /* el: 舞台を定める. １つappに唯一無二のnew Vue*/
  data: { message: 'Hello world!' } /* このappの表現に必要なデータ */
})
</script>

readme.md作成のMark Down記法はこれ

一定の簡潔な法則に従って、txt⇨HTML変換して出力してくれるものである。

MarkDown記法

段落

空行をあける

1段落目
（空行をはさむ）
2段落目

改行

行末に2つのスペースを入れる。

1行目 ←行末に半角スペース2つ
2行目

強調

・強調。アスタリスク（*）またはアンダーバー(_)で囲う

*強調* または _強調_

・強い強調。アスタリスク2つ（**）またはアンダーバー2つ(__)で囲う

**強い強調** または __強い強調__

コード表示（等幅フォントで表示）

・インラインのコード。バッククォーテーションで囲う

`$hoge = 1`

・複数行のコード。半角スペースを4つ行頭に

    ←半角スペース4つ　$hoge1 = 1 //1行目
    ←半角スペース4つ　$hoge2 = 2 //2行目
    ←半角スペース4つ　$hoge3 = 3 //3行目

見出し

行頭の#の個数でH1～H6を表す。

# H1見出し
## H2見出し
#### H4見出し

または、

H1見出し（イコール行を挿入。）
==================
H2見出し（ハイフン行を挿入。）
---------------------------------

引用（blockquote）

メールの引用の感じ。途中で改行しても、""内は改行されない。入れ子もOK

> "引用本文引用本文引用本文引用本文
引用本文引用本文引用本文引用本文引用本文引用本文。"

> 引用本文引用本文引用本文引用本文 > * リスト
> 引用本文引用本文引用本文引用本文
> 1. 番号リスト
> 引用本文引用本文引用本文引用本文
> $hgoe = 1 コードを書いてみたり

リンク

記法は3種。リンクのタイトルは省略可能。

■自動リンク
アングルブラケット< >でURLを囲う、email と同じ。

<http://example.com>
<example@example.com>

■通常のインライン記法

[リンクのテキスト](リンクのアドレス "リンクのタイトル")
[google] (http://google.com "google")

■外部参照リンク（段落の外でリンクをまとめれる）

[リンクのテキスト][linkref]
[google] : http://google.com "google"

画像

先頭に!

![Alt text](/path/to/img.jpg)
![Alt text](/path/to/img.jpg "Optional title")

・リンク[id]参照
![Alt text][id]
[id]: url/to/image "Optional title attribute"

水平線

3つ以上のハイフン、アスタリスク、アンダースコアをならべる。間にスペース可

* * *
***
*****
- - -
---------------------------------------

その他の注意

&マークなどは「&」に変換しておく。

エスケープ一覧

\   backslash
`   backtick
*   asterisk
_   underscore
{} curly braces
[] square brackets
() parentheses
#   hash mark
+   plus sign
-   minus sign (hyphen)
.   dot
!   exclamation mark

以上。

YAML：不是XML的标记语言

发源

比XML更容易读写的标记语言。人机都容易读写。

语法

空格缩进。注意不能是tab. #类似python.
#单行注释。
--- 多个YAML内容块的分割区分，不是注释。
例如
--- #第一块YAML
mysql1:
hostname : localhost
port : 3306
--- #第二块YAML
drink: [milk, cola, water] #数组类似json
-(空格)数组元素。- 后面的空格不能省略。
- d1
- d2
- d3
#=>["d1", "d2", "d3"]
键值对. 类似json 。：后面的空格也不能省略。
{name: tom, age: 6}
---|保持换行
---| aaaaa
bbbbb
--->最终行换行
普通换行：解释成空格，元素间的区分。
name : momo
age : 33
#=>{"name"=>"momo", "age"=>33}
数据类型自动推定
string ：tomato
int ：22
float：1.1
bool：true, false
blank:null
date：2020-01-01
强制用字符串：“123”

Docker 启动服务器

Docker下启动服务器容器，对外端口不能忘

建立一个有别于默认docker0的网络lq01.net

root@linux-dxjo:~> docker network create -d bridge lq01.net

root@linux-dxjo:~> docker network inspect lq01.net

[

{

"Name": "lq01.net",

"Id": "0317a8cd7bd67758d981470ed4d8d06dccf0e52df05ffd345a5c186a160a99a9",

"Created": "2020-03-26T03:18:35.758811904-04:00",

"Scope": "local",

"Driver": "bridge",

"EnableIPv6": false,

"IPAM": {

"Driver": "default",

"Options": {},

"Config": [

{

"Subnet": "172.18.0.0/16",

"Gateway": "172.18.0.1"

}

]

"Internal": false,

"Attachable": false,

"Ingress": false,

"ConfigFrom": {

"Network": ""

"ConfigOnly": false,

"Containers": {},