Vue学習ノート2—Vue基礎
40715 ワード
Vueベース
復習するoptionsのルート属性 el:宛先(string||DOM要素) template:テンプレート data:オブジェクトを直接返すことも、関数を返してreturnオブジェクトを返すこともできます.オブジェクトのプロパティは、直接ページでkeyで使用できますが、jsではthisを使用します.key components:コンポーネントのオブジェクト属性を宣言するために使用され、keyはコンポーネント名、valueはコンポーネントオブジェクト methods:メソッドのオブジェクト属性を格納し、 props:(vueにおけるサブアセンブリ受信親アセンブリからの値が属性によって伝達されるため)サブアセンブリ受信パラメータの属性[‘属性名1’,‘属性名2’] コマンド v-text/v-html:textは要素のinnerText属性に値を付与する(v-textは二重ラベルでなければならない);htmlは要素のinnerHtml属性に値を付与する v-if/v-show:ifは挿入または削除するかどうかです.showは表示または非表示の有無 v-else-if/v-else:この2つはv-if命令と組み合わせてのみ使用できます v-bind/v-on:bindはバインド属性用である.onはイベントをバインドするために使用されます v-bindの略記: v-onの略記: v-bind/v-model:bindは一方向にデータを転送し、vueはページに転送する.modelは双方向にデータを転送し、vueはページに、そしてページはvueに、v-modelはvalue属性を持つ要素 しか使用できません.
グローバルコンポーネントの登録アプリケーションシーン:複数の共通機能コンポーネントを使用すると、グローバルコンポーネントとして登録でき、冗長コード を減らすことができます.グローバルコンポーネント登録API:
追加機能ついかきのう:フィルタふぃるたfilter(グローバル)||filters(コンポーネント内) データを油や酢を加える操作 フィルタは2種類ございます アセンブリ内のフィルタ(アセンブリ内有効) グローバルフィルタ(全コンポーネント共有) 先登録、後使用 登録 コンポーネント内登録には属性の追加が必要 グローバルフィルタを登録するAPI: 使用方法は
追加機能:変更の監視watch単一データ監視 オブジェクトのアドレスが監視されているため、監視は浅さ監視(データ型はオブジェクトとリストではない)と深さ監視(データ型はオブジェクトとリスト) に分けられる.浅さ監視使用方法:オブジェクトにwatchの属性を追加し、属性の値はオブジェクトタイプであり、このオブジェクトタイプのキーはdata属性のデータの名前であり、値は関数 深度监视使用方法:オブジェクトにwatchの属性を追加し、属性の値はオブジェクトタイプであり、このオブジェクトタイプのキーはdata属性のデータの名前であり、値はオブジェクトタイプであり、このうち2つの属性(deepとhandler)があり、deepは深度監視の有無を制御するために使用され、handlerは書き込み方法である. cumputed複数のデータを監視 computed:{監視する業務名:function(){コード行;}}最終メソッド内にreturnでいくつかの内容を表示 使用方法:
組み込みコンポーネント:slotDOM要素を渡すために使用され、slotコンポーネントによって残された位置は、このDOMを使用するときに配置したいデータを入れることができます ピット方法: 正常留坑: 具名留坑: 使用方法: 通常使用: 具名使用: slotは動的DOM、propsは動的データ
ライフサイクルフックbeforeCreateコンポーネントの作成前 createdコンポーネントの作成後 このコンポーネントを使用すると、以上のcreatedおよびbeforeCreateイベント関数(フック関数)がトリガーされます.createdではデータを操作でき、vue->ページの影響を実現できます.アプリケーション:ajaxリクエストの開始 beforeMount vueが機能し、DOMの前にデータをロード mounted vueが機能し、DOMにデータをロードした後 beforeMount vue起動前のDOM mount vue起動後のDOM beforeUpdateデータに基づく変更、影響ページ、変更前 updatedデータに基づいて変更し、ページに影響し、変更後 以上の2つは、変更データがある場合にトリガーされる アプリケーション:beforeUpdateは元のDOMを取得することができる;updatedは新しいDOM を取得できます.
beforeDestroy対応親コンポーネントv-if falseは、現在のコンポーネントを破棄し、破棄する前に destroyed対応親コンポーネントv-if falseは、現在のコンポーネントを破棄し、破棄した後 アプリケーション:最終的には、localStorage を保存するなど、他の機能の解放を行います.
activatedコンポーネントがアクティブ化 deactivatedコンポーネントが無効になりました 頻繁にコンポーネントを作成および破棄することはできません. ajax非同期伝送、axiosはpromiseベース、vue-resource
復習する
methodName : function() {code lines }: = " || "@ = " || "グローバルコンポーネントの登録
Vue.component(' '， )<div id="app">div>
<script src="js/vue.min.js">script>
<script>
//
Vue.component('my_button', {
template : `
`
})
// header
var myHeader = {
template : `
header
`
}
// footer
var myFooter = {
template : `
footer
`
}
// footer
var App = {
template : `
`,
components : {
my_header : myHeader,
my_footer : myFooter,
}
}
new Vue({
el : '#app',
template : `
`,
components : {
app : App,
}
})
script>
追加機能ついかきのう:フィルタふぃるた
filters : { : function(){ ；}}最終メソッド内でreturnによって最終的なデータを生成Vue.filter( ， function(){ ；})最終的にはメソッド内でreturnによって最終的なデータを生成する{{ | }}注意下v-text中用$options.filters. ( )<div id="app">div>
<script src="js/vue.min.js">script>
<script>
Vue.filter('fil_2' , function(value) {
return ' v-text value （ ）：' + value.split('').reverse().join(',');
})
new Vue({
el : '#app',
template : `
{{myValue | fil_1(' value ：')}}
`,
data() {
return {
myValue : ' Value ',
}
},
filters : {
fil_1 : function(value, str) {
return str + value.split('').reverse().join('');
},
}
})
script>
追加機能:変更の監視
watch : { : function(newValue, oldValue){ ;}}(この関数の2つのパラメータの1つ目は新しい値であり、2つ目のパラメータは古い値である)watch : { : {deep : true, handler : function(newValue, oldValue){ ;}}}(監視または監視の対象のアドレスであるため、またこの関数の2つのパラメータのデータ型がオブジェクトまたはリストであるため、アドレスは変更されないので、パラメータのアクセスアドレスさえ同じであり、新しい値である){{ }}<div id="app">div>
<script src="js/vue.min.js">script>
<script>
new Vue({
el : '#app',
template : `
{{myValue1}}
{{myValue2[0].name}}
+
-
={{result}}
`,
data : {
myValue1 : ' xxxx',
myValue2 : [{name : ' '}],
n_1 : 0,
n_2 : 0,
n_3 : 0,
},
watch: {
myValue1 : function(newValue, oldValue) {
console.log(oldValue);
if (newValue == 'xxxx') {
alert(' ， ')
}
},
myValue2 : {
deep : true,
handler : function(newValue, oldValue) {
alert(' ！！ ：' + e[0].name)
}
}
},
computed: {
result : function(e) {
return this.n_1-0 + (this.n_2-0) - this.n_3;
}
},
})
script>
組み込みコンポーネント:slot
DOM >DOM ><style>
li {
list-style: none;
width: 33%;
height: 200px;
background-color: brown;
float: left;
border: 1px black solid;
}
style>
<div id="app">div>
<script src="js/vue.min.js">script>
<script>
var myLi1 = {
template : `
DOM
`,
}
var myLi2 = {
template : `
`,
}
var mySlot = {
template : `
：
：
`,
}
new Vue({
el : '#app',
template : `
1
3
33
333
3333
1
3
33
333
3333
`,
components : {
my_li1 : myLi1,
my_li2 : myLi2,
my_slot : mySlot,
},
})
script>
ライフサイクルフック
<div id="app">div>
<script src="js/vue.min.js">script>
<script>
var App = {
template : `
{{myValue}}
`,
data() {
return {
myValue : 'xxx',
}
},
beforeUpdate() {
console.log(' ，beforeUpdate');
},
updated() {
console.log(' ，updated');
},
beforeDestroy() {
console.log(' ，beforeDestroy');
},
destroyed() {
console.log(' ，destroyed');
},
activated() {
console.log(' ，activated');
},
deactivated() {
console.log(' ，deactivated');
},
}
new Vue({
el : '#app',
template : `
`,
components : {
app : App,
},
data : {
isExist : true,
},
beforeCreate : function() {
console.log(' ，beforeCreate');
// console.log(document.body.innerHTML);
},
created : function() {
console.log(' ，created');
// console.log(document.body.innerHTML);
},
beforeMount : function() {
console.log(' ，beforeMount');
// console.log(document.body.innerHTML);
},
mounted : function() {
console.log(' ，mounted');
// console.log(document.body.innerHTML);
},
beforeUpdate() {
console.log(' ，beforeUpdate');
},
updated() {
console.log(' ，updated');
},
activated() {
console.log(' ，activated');
},
deactivated() {
console.log(' ，deactivated');
},
beforeDestroy() {
console.log(' ，beforeDestroy');
},
destroyed() {
console.log(' ，destroyed');
},
})
script>