Vueベース(二)
8966 ワード
一.Vueベース
1.テンプレート構文補間a.テキスト{{}}(mutache文法糖、後でmutacheについて詳しく説明する)b.純HTML c.式 命令:v接頭辞付き特殊属性 v-bind v-if v-show v-on:click v-for 3.イベントバインディング v-bind:src=>:src v-on:click=>@click
mutache
mustache構文糖データ型のサポート(js構文のサポート)データ型:第1区分:基礎データ型:number string boolean複雑データ型:Object(array function)特殊データ型:null undefined第2区分:初期データ型:number string boolean null undefined参照データ型:object(array function)結論:mustacheは私たちのjsのデータ型のconosleをサポートします.logとalertは私たちのmustache文法ではサポートされていません.
mustacheバインドdomのプロパティケース:v-html分析:dom要素に直接1つの内容があることを発見しました.このプロパティバインドはdomを操作するためです.結論:このプロパティバインドの形式はdomを操作するためです.この属性に良い名前Vue 1.0を付けて属性命令(Angularを参照)Vue 2.0を総称して「命令」命令と呼ぶのは、dom Vueでdom mustache構文を直接操作できないことを示すv-xxx命令である.属性書き方の属性値は直接データを書くものである.{{}}コマンドを使用する必要はありません:(domプロパティにバインドされています)v-html:ラベル型データを解析できます(domのコンテンツにデータを表示できます(innerHTMLを使用しているのと同じです))v-text:domのコンテンツにデータを表示できます(innerHTMLを使用しているのと同じです)条件レンダリングのコマンド
2.classとstyleバインドhtml class オブジェクト構文 配列構文 バインドインラインスタイル オブジェクト構文 配列構文 vueでdomにクラス名を追加する方法直接domにクラス名 をバインド vueのクラス名バインド-オブジェクト形式目的:domのプロパティclassとデータバインド解決:v-bindデータのkey、私たちが起きたのはバインドされたオブジェクトのkeyと同じですが、この2つのものが異なることを知っておく必要があります
sizeはカスタム属性で、その属性値はundefinedで、falseに相当します.
3.条件レンダリング v-if v-ifはdomの存在を制御することができる(作成および破棄) v-else、 v-else-if template v-if、パッケージ要素templateは に作成されません. v-show
次の栗を参考にします.
v-ifとv-showの違い v-if操作はdom要素(コンポーネント)の作成または破棄 である. v-show操作はdom要素のdisplay属性 である. v-ifは、単一分岐、多重分岐、二重分岐 の様々な使用形態を有することができる. v-showは単一の形式しか書けません.一般的に、v-ifはより高いスイッチングオーバーヘッドを持ち、v-showはより高い初期レンダリングオーバーヘッドを有します.したがって、非常に頻繁に切り替える必要がある場合は、v-showを用いるのが好ましい.実行時に条件が変更されない場合は、v-ifを使用するとよい.
4.リストレンダリング v-for(特殊v-for=‘n in 10’)a.in b.of key: は、各ノードのアイデンティティを追跡し、既存の要素 を再利用および再ソートする.の理想的なkey値は、各項目に固有のid. である.データ更新検出a.変動push()pop()shift()unshift()splice()sort()reverse()b.filter()concat()とslice()を検出できるように配列を操作する、map()新しい配列は古い配列c.を置き換える、以下の変動の配列vmを検出できない.items[indexOfltem]=newValue解決方法:(1)Vue.set( example1.items,indexOfltem,newValue) (2) splice アプリケーション:フィルタ効果を表示 v-for 配列v-for="(item,index)in arr"itemはarrの各要素 であるオブジェクトv-for="(item,key,index)in obj"itemはobjの属性値 である jsonタイプデータ ネストタイプデータ栗:
5.イベント処理リスニングイベント-ダイレクトトリガコード メソッドイベントプロセッサ-書き込み関数名 インターコネクトプロセッサメソッド-関数式 を実行イベント修飾 キー修飾子 イベントといえば、javascriptにイベントを追加するにはいくつかの形式がありますか?イベントバインドdom.onclick=function(){}dom:イベントソースon:イベントをバインドする形式click:イベントタイプfunction(){}イベント処理関数 イベントリスニング:addeventListener 直接ラベルにイベント をバインドする
vueは3つ目を採用し、属性の形でdomにバインドされています.
ではlength=0で配列を空にするとvueはこの変動解決法を検出できない:1.spliceを使って栗を挙げます.
解決方法:2 Vueを使用する.set/this.$set arrChangeのコードを次の行に変更します
v-model双方向データバインドデフォルトバインドvalue値v-modelフォーム要素に適用される栗:
1.テンプレート構文
mutache
mustache構文糖データ型のサポート(js構文のサポート)データ型:第1区分:基礎データ型:number string boolean複雑データ型:Object(array function)特殊データ型:null undefined第2区分:初期データ型:number string boolean null undefined参照データ型:object(array function)結論:mustacheは私たちのjsのデータ型のconosleをサポートします.logとalertは私たちのmustache文法ではサポートされていません.
mustacheバインドdomのプロパティケース:v-html分析:dom要素に直接1つの内容があることを発見しました.このプロパティバインドはdomを操作するためです.結論:このプロパティバインドの形式はdomを操作するためです.この属性に良い名前Vue 1.0を付けて属性命令(Angularを参照)Vue 2.0を総称して「命令」命令と呼ぶのは、dom Vueでdom mustache構文を直接操作できないことを示すv-xxx命令である.属性書き方の属性値は直接データを書くものである.{{}}コマンドを使用する必要はありません:(domプロパティにバインドされています)v-html:ラベル型データを解析できます(domのコンテンツにデータを表示できます(innerHTMLを使用しているのと同じです))v-text:domのコンテンツにデータを表示できます(innerHTMLを使用しているのと同じです)条件レンダリングのコマンド
2.classとstyle
sizeはカスタム属性で、その属性値はundefinedで、falseに相当します.
size也是自定义属性，他的属性是true,那么就会加上去
格式： v-bind:class = “{ 属性： boolean }”
格式： v-bind:class = “{ [data]： boolean }”
3. vue中类名绑定的形式 - 数组的形式 【 推荐 】
格式： v-bind:class = “[ 数据 ]”
4. 类名绑定不会覆盖原先的类名
5. 为什么要绑定类名
指令是用来操作dom
目的： 为了将来通过数据来操作类名，类名操作dom
参考下面这个栗子：
html ：
v-class
vue
vue -
vue - （ ）
-----------------------------------------------------------------------------------
script ：
new Vue({
el: '#app',
data: {
msg: 'hello Vue.js',
s: 'size',
bg_color: 'bg_color',
flag: true
}
})
var a = {
name: 'gfly'
}
var b = {
name: 'lww'
}
3.条件レンダリング
次の栗を参考にします.
html ：
v-show
v-show
v-if -
v-if -
v-if -
v-if -
A
B
C
script ：
var vm = new Vue({
el: '#app',// （ ）
data: {
showFlag: true,
ifFlag: false,
type: 'A'
}
})
v-ifとv-showの違い
4.リストレンダリング
html ：
-
item :{{ item }} -- index: {{ index }}
-
value: {{ item }} -- key: {{ key }} -- {{ index }}
json
-
id: {{ item.id }}
task: {{ item.task }}
{{ index }}
-
id: {{ item.id }}
-
todos -- {{ todo }}
script ：
new Vue({
el: '#app',
data: {
arr: [1,2,3,4],
obj: {
id: 1,
name: ' ',
sex: 'man',
age: 18
},
json: [
{
id: 1,
task: ' '
},
{
id: 2,
task: ' '
}
],
lists: [
{
id: 1,
todos: {
id: 1,
name: ' '
}
},
{
id: 2,
todos: {
id: 2,
name: ' '
}
}
]
}
})
5.イベント処理
vueは3つ目を採用し、属性の形でdomにバインドされています.
v-on使用
事件源
事件绑定形式
事件类型
事件处理程序
v-on:eventType = " handlerName "
简写 v-on: — > @
html ：
script ：
var vm = new Vue({
el: '#app',
methods: {
//
helloHandler () {
alert( 'hello' )
}
}
})
console.log( 'vm', vm )
ではlength=0で配列を空にするとvueはこの変動解決法を検出できない:1.spliceを使って栗を挙げます.
html ：
-
{{ item.task }}
-
{{ item }}
script ：
new Vue({
el: '#app',
data: {
arr: [1, 2, 3],
lists: [{
id: 1,
task: ' 1'
}, {
id: 2,
task: ' '
}]
},
methods: {
add() {
this.lists.push({
id: this.lists.length + 1,
task: ' '
})
},
remove() {
this.lists.pop()
},
indexHandler() {
this.lists[1] = {
id: 2,
task: 'gfly'
}
//
this.lists.length = 0
// this.lists.splice( 0 )
},
arrChange() {
this.arr[1] = 'gfly' //
}
}
})
解決方法:2 Vueを使用する.set/this.$set arrChangeのコードを次の行に変更します
this.$set(this.arr, '1', 'gfly')
v-model双方向データバインドデフォルトバインドvalue値v-modelフォーム要素に適用される栗:
html ：
{{ msg }}
script ：
new Vue({
el: '#app',
data: {
msg: 'hello Vue.js'
}
})