Vue.jsのVue計算プロパティ、リスナー、スタイルバインド
36381 ワード
前言
前編ではVueの基本的な概念を紹介し、この1編ではVueの基本的な使用を紹介します.
一、一つのVueプログラムを構築する
1.1 Vue環境の構築
Vueの開発環境を構築するには、3つの方法があります. CDN に導入直接ダウンロードソースコードは公式サイトからvueをダウンロードする.jsのソースコードをコピーして、ページにアドレスを導入します.https://cn.vuejs.org/v2/guide/installation.html開発バージョンをクリックして、作成したvueに直接コピーします.jsのファイルでいいです. NPM取付 1.2 Vueインスタンスの構築
1)el(マウントポイント)は、ページ内のElement(要素)を管理するVueというインスタンスを作成します.つまりelはページ上のどのノードとバインドするかを示します!2)data vueインスタンスにはいくつかのデータがあり、私たちはデータをdataに保存します.
vueのインスタンスを作成し、このvueのインスタンスにページ内のidがrootの内容を引き継ぐようにするので、このvueのインスタンスはidがrootのdomとバインドされます.
二、マウントポイント、テンプレートとインスタンスの関係
2.1マウントポイント
マウントポイントは、Vueインスタンスにおけるel属性に対応するidに対応するdomノードである.
これがマウントポイントです
2.2テンプレート####
マウントポイント内部の内容をテンプレートコンテンツと呼ぶ.
次のようになります.
テンプレートの内容です!もちろん、テンプレートの内容をvueインスタンスに書くことができます.
したがって、テンプレートはマウントポイントの内部に書くことができます.もちろん、vueインスタンスのtemplateプロパティに書くこともできます.
2.3例
ここでnew Vue({})は、実際にはVueインスタンスを作成します.インスタンスでは、テンプレートを書くマウントポイントを指定する必要があります.vueは、テンプレートとデータに基づいて、表示するコンテンツを自動的に生成します.展示する内容をマウントポイントに入れます.
三、Vueの計算属性、リスナー、計算属性のsetとget
3.1 Vueの計算プロパティ
1)はじめに
効果:質問:
2)共通シーンfullNameはfirstNameとlastNameで計算された新しい変数です.Vueの計算プロパティでニーズを解決し、Vueインスタンスにcomputedプロパティを追加できます.
fullNameは計算属性であり、computedで計算属性であることを定義します.これはfirstNameとlastNameによって計算されます.計算プロパティは、計算に参加するプロパティのいずれかが変更された場合にのみ計算されます.そうしないと、今回の計算のキャッシュが使用されます.
3.2リスナー
1)需要
効果:2)実装はまずvueインスタンスにリスナー:watchを定義する.
効果:実際にリスナーの役割は、あるデータの変化を傍受することであり、このデータが変化すると、リスナーで対応するビジネス処理を行うことができます.もちろん上記の例ではfullNameを直接傍受すればいいです.
3.3計算属性のsetとget
1)インスタンス
効果:分析:私达の修正はすべて一方向に基づいて、つまり私达はただ姓、名のこの2つのテキストの枠を修正して、しかし私达は次の2つのテキストの枠を修正して同期を実现することができなくて、それではどのように実现しますか?
注意:計算プロパティにはキャッシュが存在し、複数回の読み取りではgetter計算は1回のみ実行されます.
四、Vue強制バインドclassとstyle
アプリケーションインタフェースでは、ボタンや他の操作をクリックすると、要素のスタイルが変わります.class/styleバインドは、ダイナミックスタイル効果を実現するための技術です.
4.1 classバインド
構文::class='xxx' xxxは文字列 です xxxはオブジェクト です. xxxは配列 です
4.2 styleバインド
:style="{color:activeColor,fontsize:fontsize+‘px’}"ここでacticeColor/fontsizeはdata属性
4.3完全な例
前編ではVueの基本的な概念を紹介し、この1編ではVueの基本的な使用を紹介します.
一、一つのVueプログラムを構築する
1.1 Vue環境の構築
Vueの開発環境を構築するには、3つの方法があります.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>1)el(マウントポイント)は、ページ内のElement(要素)を管理するVueというインスタンスを作成します.つまりelはページ上のどのノードとバインドするかを示します!2)data vueインスタンスにはいくつかのデータがあり、私たちはデータをdataに保存します.
<html>
<head>
<meta charset="utf-8" />
<title>vue title>
<script src="js/vue.js">script>
head>
<body>
<div id="root">{{msg}}div>
<script>
new Vue({
el: '#root',
data: {
msg:'hello world'
}
})
script>
body>
html>vueのインスタンスを作成し、このvueのインスタンスにページ内のidがrootの内容を引き継ぐようにするので、このvueのインスタンスはidがrootのdomとバインドされます.
二、マウントポイント、テンプレートとインスタンスの関係
2.1マウントポイント
マウントポイントは、Vueインスタンスにおけるel属性に対応するidに対応するdomノードである.
これがマウントポイントです
2.2テンプレート####
マウントポイント内部の内容をテンプレートコンテンツと呼ぶ.
<div id="root">
<h1>lance {{msg}}h1>
div>次のようになります.
<h1>lance {{msg}}h1>テンプレートの内容です!もちろん、テンプレートの内容をvueインスタンスに書くことができます.
<body>
<div id="root">div>
<script>
new Vue({
el: '#root',
template: 'lance {{msg}}'
,
data: {
msg:'hello world'
}
})
script>
body>したがって、テンプレートはマウントポイントの内部に書くことができます.もちろん、vueインスタンスのtemplateプロパティに書くこともできます.
2.3例
ここでnew Vue({})は、実際にはVueインスタンスを作成します.インスタンスでは、テンプレートを書くマウントポイントを指定する必要があります.vueは、テンプレートとデータに基づいて、表示するコンテンツを自動的に生成します.展示する内容をマウントポイントに入れます.
三、Vueの計算属性、リスナー、計算属性のsetとget
3.1 Vueの計算プロパティ
1)はじめに
<div id="root">
:<input v-model="firstName" />
:<input v-model="lastName" />
<div>{{firstName}}{{lastName}}div>
div>
<script>
new Vue({
el: '#root',
data:{
firstName: '',
lastName: ''
}
})
script>効果:質問:
<div>{{firstName}}{{lastName}}div> 。2)共通シーンfullNameはfirstNameとlastNameで計算された新しい変数です.Vueの計算プロパティでニーズを解決し、Vueインスタンスにcomputedプロパティを追加できます.
<div id="root">
:<input v-model="firstName" />
:<input v-model="lastName" />
<div>{{fullName}}div>
div>
<script>
new Vue({
el: '#root',
data: {
firstName: '',
lastName: ''
},
computed: {
// ： / data
fullName: function(){
// ，
return this.firstName+' '+this.lastName;
}
}
})
script>fullNameは計算属性であり、computedで計算属性であることを定義します.これはfirstNameとlastNameによって計算されます.計算プロパティは、計算に参加するプロパティのいずれかが変更された場合にのみ計算されます.そうしないと、今回の計算のキャッシュが使用されます.
3.2リスナー
1)需要
<div id="root">
:<input v-model="firstName" />
:<input v-model="lastName" />
<div>{{fullName}}div>
<hr />
<div>{{count}}div>
div>
<script>
new Vue({
el: '#root',
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {
fullName: function(){
return this.firstName+' '+this.lastName;
}
}
})
script>効果:2)実装はまずvueインスタンスにリスナー:watchを定義する.
<div id="root">
:<input v-model="firstName" />
:<input v-model="lastName" />
<div>{{fullName}}div>
<hr />
<div>{{count}}div>
div>
<script>
new Vue({
el: '#root',
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {
fullName: function(){
return this.firstName+' '+this.lastName;
}
},
watch: {
firstName: function(){
this.count++
},
lastName: function(){
this.count++
}
}
})
script>効果:実際にリスナーの役割は、あるデータの変化を傍受することであり、このデータが変化すると、リスナーで対応するビジネス処理を行うことができます.もちろん上記の例ではfullNameを直接傍受すればいいです.
<script>
new Vue({
el: '#root',
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {
fullName: function(){
return this.firstName+' '+this.lastName;
}
},
watch: {
/* firstName: function(){
this.count++
},
lastName: function(){
this.count++
}*/
fullName: function(){
this.count++
}
}
})
script>3.3計算属性のsetとget
1)インスタンス
<body>
<div id="demo">
: <input type="text" placeholder="First Name" v-model="firstName"><br />
: <input type="text" placeholder="Last Name" v-model="lastName"><br />
1( ): <input type="text" placeholder="Full Name1" v-model="fullName1" /><br />
2( ): <input type="text" placeholder="Full Name2" v-model="fullName2" /><br />
3( ): <input type="text" placeholder="Full Name3" /><br />
div>
<script type="text/javascript" src="js/vue.js" >script>
<script type="text/javascript">
const vm = new Vue({
el: '#demo',
data: {
firstName: 'A',
lastName: 'B',
fullName2: 'A B', // ， vm.$watch ()
},
computed: {
// ： / data
fullName1 (){// ，
console.log("111111111111111")
return this.firstName +' '+this.lastName;
}
},
watch: { //
firstName: function (value) { // firstName
console.log(this) // vue ：vm
this.fullName2 = value +' '+this.lastName;
}
}
});
// vm $ 。 ： function ， 。
vm.$watch('lastName',function (value) {
// fullName2
this.fullName2 = this.firtName +' '+ value;
})
script>
body>効果:分析:私达の修正はすべて一方向に基づいて、つまり私达はただ姓、名のこの2つのテキストの枠を修正して、しかし私达は次の2つのテキストの枠を修正して同期を実现することができなくて、それではどのように実现しますか?
<html lang="en">
<head>
<meta charset="UTF-8">
<title> title>
head>
<body>
<div id="demo">
: <input type="text" placeholder="First Name" v-model="firstName"><br />
: <input type="text" placeholder="Last Name" v-model="lastName"><br />
1( ): <input type="text" placeholder="Full Name1" v-model="fullName1" /><br />
2( ): <input type="text" placeholder="Full Name2" v-model="fullName2" /><br />
3( ): <input type="text" placeholder="Full Name3" v-model="fullName3" /><br />
div>
<script type="text/javascript" src="js/vue.js" >script>
<script type="text/javascript">
const vm = new Vue({
el: '#demo',
data: {
firstName: 'A',
lastName: 'B',
fullName2: 'A B', // ， vm.$watch ()
},
computed: {
// ： / data
fullName1 (){// ，
console.log("111111111111111")
return this.firstName +' '+this.lastName;
},
fullName3 :{
// ？ 1. 2. 3.
// ： ？ ？
// ，
get(){
return this.firstName +' '+this.lastName;
},
// ， ， ， 。
set(value){//value fullName3
const names = value.split(' ');
this.firstName = names[0];
this.lastName = names[1];
}
}
},
watch: { //
firstName: function (value) { // firstName
console.log(this) // vue ：vm
this.fullName2 = value +' '+this.lastName;
}
}
})
// vm $ 。 ： function ， 。
vm.$watch('lastName',function (value) {
// fullName2
this.fullName2 = this.firstName +' '+ value;
})
script>
body>
html>注意:計算プロパティにはキャッシュが存在し、複数回の読み取りではgetter計算は1回のみ実行されます.
四、Vue強制バインドclassとstyle
アプリケーションインタフェースでは、ボタンや他の操作をクリックすると、要素のスタイルが変わります.class/styleバインドは、ダイナミックスタイル効果を実現するための技術です.
4.1 classバインド
構文::class='xxx'
4.2 styleバインド
:style="{color:activeColor,fontsize:fontsize+‘px’}"ここでacticeColor/fontsizeはdata属性
4.3完全な例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue class styletitle>
<script src="js/vue.js">script>
<style>
.aClass {
color: red;
}
.bClass {
color: blue;
}
.cClass {
font-size: 40px;
}
style>
head>
<body>
<div id="app">
<h3>1.class ： :class= 'xxxx'h3>
<p class="cClass" :class="a">xxx p> //
<button @click='update'> button>
<hr/> // css ， ,true 。
<p :class="{aClass : isA,bClass : isB}">xxx p> // true
<button @click='updateObj'> button>
<hr />
<p :class="['bClass','cClass']">xxx p>
<h3>2. style h3>
<p :style="{color: activeColor,fontsize: fontsize + 'px'}">style p> //style
<button @click='updateStyle'>style button>
div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
a: 'aClass',
isA: true,
isB: false,
activeColor: 'green',
fontsize: '20'
},
methods: {
update() {
this.a = 'bClass';
},
updateObj() {
this.isA = false;
this.isB = true;
},
updateStyle() {
this.activeColor = 'red';
this.fontsize = 30;
}
}
})
script>
body>
html>