ディレクトリ
コンポーネント（Vueのコア）
、収集のために名付けられ、HTML、CSS、JSと集計されるHTML、CSSと名前で構成JSの集計を取って、再利用性
コンポーネントのカテゴリ：
新しいヴュー（）コンポーネント生成：成分と1
2.ローカルコンポーネント：{}、内部構文VUEを使用して
3.グローバル成分：Vue.component（「部品名」、{}）、{}、内部使用のための構文はヴューあります
ルートコンポーネントを定義します
ルート・ページは新しい一旦発生する、複数のコンポーネントで構成することができ、ルート及びルートコンポーネントアセンブリとの間には関係がありません
new Vue({
el:'#d1',
data:{},
template:'<p>我可以更改自己内部的内容</p>'
});グローバルなコンポーネントを定義します
<div id="d2">
<co-img></co-img>
</div>
Vue.component('co-img',{
template:'<div class="c1"><h2>我想显示出来</h2><img src="img/111.jpg" alt=""></div>'
});
new Vue({
el:'#d2'
})ローカルコンポーネントを定義します。
<div id="d3">
<local></local>
</div>
let local = {
template:'<div class="c1"><img src="img/222.jpeg" alt=""></div>'
};
new Vue({
el:'#d3',
components:{
local
}
});ローカルおよびグローバルのコンポーネント成分の差：
1.グローバル・コンポーネントがすべてロードされている最初に登録する必要はありませんし、地方議会はかつて一度ロードされ、登録する必要があります
コンポーネントの特徴：
1.コンポーネントは、アセンブリのメンバーの結果の管理、HTMLページテンプレートの例を持っています
2.成分が副成分としてルートとして最上位の親要素、ローカルおよびグローバルな成分である、他の構成要素は、ローカルおよびグローバル親アセンブリと呼ぶことができます
3.サブコンポーネントのデータは、（各成分のデータ成分は、それ自身の別個の名前空間データを有する）の単離を必要
4.地方議会は、ローカル部品の利用を促進する、登録を必要としないグローバルアセンブリを使用するために登録する必要があります後
すべての変数（テンプレート、ロジック）5.アセンブリ発生し、アセンブリは独自の管理を提供します
6.ローカルおよびグローバル成分はそうコンポーネントインスタンスこと、VUE例をHTML、CSS、JSアーキテクチャの対応する組の1つのインスタンスであります
概要：ルートコンポーネント、提供された場合には、テンプレート内の情報に置き換えられますので、マウントポイントのコンテンツの内側に、無効である、テンプレート、テンプレートのデフォルトはポイントページ構造をマウントし、明確なテンプレートではないかもしれません
説明：HTML、bodyタグを交換することができない、それがマウントポイントとして使用することはできません
大文字のHTML使用するコンポーネントの変更 - 経験に大文字大文字に認識していない置き換えるために、HTMLは、変更 - 小文字を
localTag ==> local-tagコンポーネント化
各コンポーネントによって生成は、互いに干渉することなく、独自の独立した名前空間を有し、
関数が戻り値を持っているように、関数データを定義する1
2.戻り値の操作
// 定义一个局部组
let local = {
template:'<div class="c1" @click="fn"><img src="img/222.jpeg" alt=""><h4>我被点击了{{count}}次</h4></div>',
data(){ // 局部或全局组件，一个组件可能会被复用多次，每个组件都应该有自己的独立的变量名称空间
return{
count:0
}
}, // 数据需要组件化，作为方法的返回值（方法执行之后会产生一个局部作用域）
methods:{
fn(){
console.log(11111);
this.count ++
}
}
};父から息子へ渡す---コンポーネントのパラメータ
1.サブアセンブリ小道具カスタム属性によって成分（文字列を埋めるために、リフレクションを使用するが、時間変数として直接使用することができます）
2.サブアセンブリは、あなたが本のサブコンポーネントでのカスタムプロパティの親コンポーネントに変数名をバインドレンダリングする際に、変数の値は、サブアセンブリに渡すことができ、組立親にレンダリングされます
要約：
まずアレイはスクリプトで定義され、ループの必要な値は、アレイ状に配置されています
対応するループのタグ2.使用、kは、カスタム属性によって返されます
属性データを定義します。3.
kの値に対応する反射方式に従って受信及び処理4.小道具値kを回収します
5.コンポーネントの値が、値は直接することができたとき、あなたはこれを使用する必要はありません
6.カスタムプロパティは、変数を受け取ることができます
<div id="d3">
<local v-for="img in image" :img="img"></local>
</div>
let image = [
{
name:'我是222',
img:'img/222.jpeg'
} ,
{
name:'我是111',
img:'img/111.jpg'
}
];
let local = {
props:['img'],
template:'<div class="c1" @click="fn"><img :src="img.img" alt=""><h4>我{{img.name}}被点击了{{count}}次</h4></div>',
data(){
return{
count:0
}
},
methods:{
fn(){
this.count ++
}
}
};
new Vue({
el:'#d3',
data:{
image
},
components:{
local
},
});コンポーネントのパラメータの受け渡し---親子伝送
イベント定義コンポーネントのラベルを導入されたバージョン：
カスタムイベントは、サブアセンブリの一部で、サブアセンブリおよびアセンブリの親でレンダリング方法バインドイベント、親コンポーネントによって実装されるイベントメソッドです
どのようにサブアセンブリのトリガーのカスタムイベント:.この$のEMIT（「カスタムイベント名」、イベントのトリガパラメータは、コールバックされています）
サブアセンブリのトリガカスタムイベント、サブアセンブリを行うコンテンツ、親コンポーネント内のカスタム・イベント・メソッドの実装では、サブアセンブリのメッセージを取得する親コンポーネントに配信
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>子传父</title>
</head>
<body>
<div id="app">
<h1>{{ h1 }}</h1>
<h3>{{ h3 }}</h3>
<tag @action="actionFn"></tag>
<hr>
<tag2 @h1a="aFn1" @h3a="aFn3"></tag2>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let tag = {
template: `
<div>
<input type="text" v-model="t1">
<input type="text" v-model="t2">
<button @click="changeTitle">修改标题</button>
</div>
`,
data() {
return {
t1: '',
t2: '',
}
},
methods: {
changeTitle() {
if (this.t1 && this.t2) {
// console.log(this.t1, this.t2);
this.$emit('action', this.t1, this.t2);
this.t1 = '';
this.t2 = '';
}
}
}
};
let tag2 = {
template: `
<div>
主标题内容：<input type="text" v-model="t1" @input="t1Fn">
子标题内容：<input type="text" v-model="t2">
</div>
`,
data() {
return {
t1: '',
t2: '',
}
},
methods: {
t1Fn() {
this.$emit('h1a', this.t1);
}
},
watch: {
t2 () {
this.$emit('h3a', this.t2);
}
}
};
new Vue({
el: '#app',
data: {
h1: '主标题',
h3: '子标题'
},
components: {
tag,
tag2,
},
methods: {
actionFn(a, b, c) {
// console.log('触发了', a, b, c);
this.h1 = a;
this.h3 = b;
},
aFn1(a) {
if (!a) {
this.h1 = '主标题';
return;
}
this.h1 = a;
},
aFn3(a) {
if (!a) {
this.h3 = '子标题';
return;
}
this.h3 = a;
},
}
})
</script>
</html>