ディレクトリ
まず、知人のコンポーネント
（A）の概念
- コンポーネントは、HTML、CSSで、コレクションは、あなたが集計コンポーネントにより、再び再利用することができますJS
- ルートコンポーネント、ローカルコンポーネント、グローバル部品への組立
（B）の特徴
- 各成分は、例えばあるヴュー
- 最上位の親ルートコンポーネントアセンブリ、ローカルおよびグローバルなコンポーネントサブコンポーネントなどとして、構成要素は、他のローカルおよびグローバルコンポーネントの親であってもよいです
- 各コンポーネントは、独自のテンプレートテンプレートテンプレートを有し、ルート成分がマウントポイントで、テンプレートは、唯一のルートタグを有します
- すべての変数は、コンポーネントに表示され、コンポーネント自体が提供してきました
- 部分的なアセンブリが登録を必要としないグローバルアセンブリを使用するために登録する必要があります後、私たちは地元のコンポーネントを使用することをお勧めします
- （各コンポーネントは、独自の独立したスコープ、コンポーネントベースのデータを有するように機能して）データサブコンポーネントは、隔離を必要
第二に、部品の分類
（A）ルートアセンブリ
- ルートコンポーネント：
new Vue()コンポーネント生成 - ルートコンポーネントは、テンプレートのデフォルト値は、ポイントページ構造をクリアしないテンプレートマウントすることができます
- テンプレートを設定する場合は、マウントポイントの内側の内容が置き換えられます
- このため、HTML本体は、ラベルがポイントをマウントしないよう
<div id="app">
{{ msg }}
</div>
<script>
new Vue({
el: '#app', // 被组件 template 模块进行替换的占位符
data: {
msg: '组件信息'
},
template: '<p>{{ msg }}</p>'
})
</script>（B）サブアセンブリ
- ローカルコンポーネント：
let 组件名={}{}内部で使用するための構文はヴューあります - 親アセンブリ内のローカルコンポーネントを使用して登録するには
<div id="app">
<div class="wrap">
<!--3. 渲染组件-->
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
</div>
</div>
<script src="js/vue.js"></script>
<script>
// 1. 声明组件
let localTag = {
template: `
<div class="box" @click="fn">
<img src="img/001.jpg" alt="">
<h2>美女</h2>
</div>`,
methods: {
fn() {
console.log(this)
}
}
};
// 2. 注册组件
new Vue({
el: '#app',
data: {},
components: { // 注册组件
localTag,
}
})
</script>（C）グローバルコンポーネント
- グローバルコンポーネント：
Vue.component('组件名'，{}){}内部で使用するための構文はヴューあります - グローバル・コンポーネントは、登録を必要としません
<div id="app">
<div class="wrap">
<global-tag></global-tag>
<global-tag></global-tag>
<global-tag></global-tag>
<global-tag></global-tag>
</div>
</div>
<script src="js/vue.js"></script>
<script>
// 全局组件
Vue.component('global-tag', {
template: `
<div class="box" @click="fn">
<img src="img/002.jpg" alt="">
<h2>大长腿</h2>
</div>`,
methods: {
fn() {
console.log(this)
}
}
});
// Vue实例
new Vue({
el: '#app',
data: {},
})
</script>第二に、のデータコンポーネント
- ローカルまたはグローバルピックアップは、コンポーネントが何度も再利用することができる、各コンポーネントは独自の独立変数の名前空間を持つべきです
- 戻り値としてのデータ構成要素を実現するために、（ローカルスコープは、メソッドを実行した後に生成されます）
<div id="app">
<div class="wrap">
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
</div>
</div>
<script>
let localTag = {
template: `
<div class="box" @click="fn">
<img src="img/001.jpg" alt="">
<h2>捶了美女{{ count }}下</h2>
</div>
`,
data() { //局部或全局取件，一个组件可能会被复用多次，每个组件都应该有自己独立的变量名称空间
return {
count: 0,
}
}, // 数据需要组件化，作为方法的返回值（方法执行后会产生一个局部作用域）
methods: {
fn() {
console.log(this);
this.count++;
}
}
};
new Vue({
el: '#app',
data: {},
components: {
localTag,
}
});
</script>第三に、アセンブリ渡すパラメータ
父から息子への（A）
- サブアセンブリ小道具カスタムコンポーネント属性（文字列を埋めるために、リフレクションを使用するが、直接変数として使用することができる）によって
- 親コンポーネント内にサブアセンブリレンダリングし、レンダリングされたときに、変数の値は、サブアセンブリに渡されるサブアセンブリバインド変数のカスタムプロパティの親要素、
<div id="app">
<localTag :sup_data1='sup_data1' :supData2='sup_data2'></localTag>
</div>
<script type="text/javascript">
let localTag = {
props: ['dog', 'def', 'xyz'],
props:['sup_data1', 'supdata2'],
template: '<div>{{ sup_data1 }} {{ supdata2 }}</div>'
};
new Vue({
el: '#app',
data: {
sup_data1: '数据1',
sup_data2: '数据2'
},
components: {
localTag,
}
})
</script>（B）親の子伝送
- 要求イベントを送信することにより、データ転送
- カスタムイベントは、アセンブリ、イベントメソッドが親コンポーネントによって実装する親でのサブアセンブリ、サブアセンブリとバインドイベントレンダリング法の一部であります
- サブアセンブリによって
this.@emit('自定义事件名'，触发事件回调的参数)トリガイベントのカスタム・イベント・メソッド、親コンポーネントへのコールバックパラメータ - 渡されるべきパラメータ親コンポーネントトリガーイベントの道
<div id="app">
<global-tag @send_action='receiveAction'></global-tag>
</div>
<script type="text/javascript">
let localTag={
data () {
return {
sub_data1: "数据1",
sub_data2: '数据2'
}
},
template: '<div @click="clickAction">发生</div>',
methods: {
clickAction () {
this.$emit('send_action', this.sub_data1, this.sub_data2)
}
}
}
new Vue({
el: '#app',
methods: {
receiveAction (v1, v2) {
console.log(v1, v2)
}
}
})
</script>四、JSサプリメント
（A）名称及びHTML変換
- このようなタグに背景色のスタイル属性のパラメータを追加する必要性として、命令構文VUEオブジェクトでは、そのコマンドの構文はのbackgroundColorを書き込まれます
- カスタムコンポーネント、コンポーネント名がこぶ体である場合には、その後、ラベルのHTMLページがある - 小文字
# 1. 在vue对象的指令语法中，如需要给标签添加style属性中的background-color 参数，那么在指令语法中要写成backgroundColor
<p :style="{backgroundColor:bgc,width:w}"></p>
# 2. 在自定义组件时，组件名是驼峰体，则，在html页面的标签则是 -小写
# 在html页面的组件标签
<my-tag></my-tag>
# script中的组件名
let myTag{}JSをループにおける（A）
（1） for in
for inトラバーサルは、キーの値であり、意識横断さは、オブジェクトの配列のインデックスですかkey
// 例子
let scores = [
{ name: 'Bob', math: 97, chinese: 89, english: 67 },
{ name: 'Tom', math: 67, chinese: 52, english: 98 },
{ name: 'Jerry', math: 72, chinese: 87, english: 89 },
{ name: 'Ben', math: 92, chinese: 87, english: 59 },
{ name: 'Chan', math: 47, chinese: 85, english: 92 },
];
for (score in scores) {
console.log(score)
}
// 打印结果：0 1 2 3 4（2）for of
for of値は、値の配列、又はオブジェクトを横断し、横断されますvalue
// 例子
let scores = { name: 'Bob', math: 97, chinese: 89, english: 67 }
;
for (score in scores) {
console.log(score)
}
// 打印结果：name math chinese english
for (score of scores) {
console.log(score)
}
// 打印结果：Bob 97 89 67（3） each
- 以下は、jQueryの、それぞれの用法であります
- 配列をループでは、あなたが注意を払う必要がある場合
// 遍历数组
let scores = ['a','b',['c','d'],'e'];
each(scores,function(ind,val){
consol.log(ind,val)
})
// 打印结果：0,['a'] 1,['b'] 2,[['c','d']] 3,['e']
// 遍历对象
let scores = { name: 'Bob', math: 97, chinese: 89, english: 67 }
each(scores,function(key,val){
consol.log(key,val)
})
// 打印结果：name,Bob math,97 chinese,89 english,67（ii）の加算と減算とデータ型変換
js是一种弱语言，
1. 相加：
对于两数（一个字符串一个数字）相加，会先把两个数当成字符串相加，不行的话再都转成数字类型相加，都不行就是NaN
2. 相减：
对于两数（一个字符串一个数字）相减，因为字符串没有减法，所以会直接转成数字类型相减，不行的话就是NaN
3. 字符串转成数字：
如 '2' ——》 +'2' 或 Number('2')（C）および可変長パラメータ
- JSなしキーワード引数、同様のでこれだけのpython
*番号。JSでのみ使用して...表現するために*
四、CSSのサプリメント
1. 取消选中
user-select: none
2. 鼠标变成小手
cursor：pointer