目次
2. v-bind 動的バインディング クラス (オブジェクト構文)
4 v-bind 動的バインディング クラス (配列の使用)
5.v-bind 動的バインディング スタイル (オブジェクト構文)
6.v-bind 動的バインディング スタイル (配列構文)
1. 補間演算
1.Mustache構文
Mustache はひげを意味し、{
{}}ひげに似ているため、中括弧構文とも呼ばれます。
vueオブジェクトがマウントするdom要素には、{
{}}変数を直接記述するだけでなく、簡単な式も記述することができます。
<body>
<div id="app">
<h2>{
{message}}</h2>
<h2>{
{message}},world</h2>
<!-- Mustache的语法不仅可以直接写变量，还可以写简单表达式 -->
<h2>{
{firstName+'-'+lastName}}</h2>
<h2>{
{firstName}}-{
{lastName}}</h2>
<h2>{
{firstName+lastName}}</h2>
<h2>{
{count*2}}</h2>
</div>
<script>
Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el: '#app',
data(){
return{
message: 'hello',
firstName:'zhang',
lastName:'san',
count:2
}
}
})
</script>
</body>
2.vueリスト(v-for)の表示
開発で一般的に使用される配列には大量のデータがあり、全体または一部を表示する必要があります。ネイティブ JS では、for ループ トラバーサルを使用して div 要素を順番に置き換える必要があります。Vue では、単純なトラバーサルを使用して次のことを行うことができます。要素ノードを生成しますv-for。
<div id='app'>
<!-- <h2>{
{todolists}}</h2> -->
v-for="数组或对象中的每一个值 in/of 数组或对象本身"
<!-- <h2 v-for="item in todolists">{
{item}}</h2> -->
<!-- <h2 v-for="item of todolists">{
{item}}</h2> -->
<!-- <h2 v-for="item of obj">{
{item}}</h2> -->
<!-- <h2 v-for="item in obj">{
{item}}</h2> -->
<h2 v-for="item of obj2">{
{item.a}}{
{item.b}}{
{item.c}}</h2>
<!-- <h2 v-for="item in obj2">{
{item.a}}{
{item.b}}{
{item.c}}</h2> -->
<ul>
<li v-for="item of obj2">{
{item.a}}{
{item.b}}{
{item.c}}</li>
</ul>
<!-- 添加索引值 动态绑定key值，涉及diff算法 可以为index、id,
在将来的项目中写v-for是需要加上:key 它的值可以写索引,最好写数据中的id值-->
<h2 v-for="(item,index) in todolists" :key="index">{
{item}}--{
{index}}</h2>
<h2 v-for="item in obj2" :key="item.id">{
{item.a}}{
{item.b}}{
{item.c}}</h2>
<!-- diff算法 -->
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#app',
data() {
return {
todolists: ['篮球', '排球', '羽毛球', '足球'],
obj: {
a: '张三',
b: '李四',
c: '王五'
},
obj2: [{
id:1,
a: '张三'
}, {
id:2,
b: '李四'
}, {
id:3,
c: '王五'
}]
}
}
})
</script>
item は現在トラバースされている要素を表し、index は要素のインデックスを表します。Vue に各ノードの ID を追跡して既存の要素を再利用したり並べ替えたりできるようにヒントを与えるには、それぞれに一意のプロパティを提供する必要があります。項目 key 。 出力 DOM コンテンツの走査が非常に単純である場合や、パフォーマンス向上のために意図的にデフォルトの動作に依存する場合を除き、 を使用する場合は可能な限り 属性v-for を提供することを お勧めします。key
これは Vue がノードを識別するための一般的なメカニズムであるため、 特に に関連付けられているkey わけではありません 。v-for
v-forオブジェクトや配列など の非プリミティブ値を として使用しないでくださいkey。文字列または数値を使用してください。
3. Vue ケースカウンター
vue を使用して小さなカウンターを実装し、
+ボタンをクリックするとカウンター +1 が表示され、-ボタンをクリックするとカウンター -1 が表示されます。
vue オブジェクトを定義し、変数 count=0 を初期化します。
count++ または count-- の2 つのメソッドを定義します
add。sub2 つのボタン オブジェクトを定義し、ボタンにクリック イベントを追加します。
Vue オブジェクトでは、メソッドのコレクションを表すためにメソッドが使用され、クリック イベントをリッスンするための要素のバインド、クリック イベントのボタンへのバインド、およびコールバック関数と
v-on:clickトリガー イベントのバインドに使用されるキーワードが使用されます。式はコールバック メソッドで直接使用することもできます。例:と。addsubcount++count--
<body>
<div id="app">
<!-- <button type="button" v-on:click="add">+</button>
<h3>{
{count}}</h3>
<button type="button" v-on:click="sub">-</button> -->
<!-- 简写 v-on:click 简写 @click-->
<button type="button" @click="add">+</button>
<h3>{
{count}}</h3>
<button type="button" @click="sum">-</button>
</div>
<script>
/* 点击事件
v-on 监听事件
*/
Vue.config.productionTip = false;
new Vue({
el: '#app',
data() {
return {
count: 0
}
},
methods: { //以后所有的vue中的方法都可以写在methods里面
/* add:function(){
// console.log('add');
this.count++;
},
sub:function(){
// console.log('sub');
this.count--;
} */
add() {
/* console.log(this); */
this.count++;
},
sub() {
this.count--;
}
}
})
</script>
</body> 
4. 共通コマンド v-once
v-once は、DOM 要素が 1 回だけレンダリングされ、データが変更された後は再度レンダリングされないことを意味します。
<body>
<div id="app">
<h2>{
{msg}}</h2>
<!-- 只会渲染一次，数据改变不会再次渲染 -->
<h2 v-once>{
{msg}}</h2>
</div>
<script>
Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#app',
data(){
return {
msg:'我就是这么倔强'
}
}
})
</script>
</body>
上記の{
{msg}}メッセージを変更すると、最初の h2 タグ データは自動的に変更されますが、2 番目の h2 は変更されません。
5. 共通コマンド v-html
<a href='http://www.baidu.com'>百度一下</a>ある時点で、そのような文字列を直接出力するのではなく、HTML 自体によって変換されたハイパーリンクを出力したいと考えます。この時点で、v-html を使用できます。
<div id="app">
<h2 v-html="url"></h2>
</div>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
url:"<a href='http://www.baidu.com'>百度一下</a>"
}
}
})
</script>
6. 共通コマンド v-text
v-text は dom 要素内のデータを上書きします。これは、js の innerHTML メソッドに相当します。
<div id="app">
<h2>不使用v-text</h2>
<h2>{
{message}}，啧啧啧</h2>
<h2>使用v-text，以文本形式显示,会覆盖</h2>
<h2 v-text="message">，啧啧啧</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊"
}
})
</script>図に示すように、使用方法{
{message}}は変数と文字列を結合することですが、v-text を使用して文字列の内容を直接カバーします。
7. 共通コマンド v-pre
{
{msg}}場合によっては、構文によって変換された msg の変数値の代わりに、そのような文字列を直接出力することが期待されます{
{}}が、このときはv-preラベルを使用できます。
<div id="app">
<h2>不使用v-pre</h2>
<h2>{
{msg}}</h2>
<h2>使用v-pre,不会解析</h2>
<h2 v-pre>{
{msg}}</h2>
</div>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
msg:'我比v-once还要厉害'
}
}
})
</script>図のように、v-preで装飾したdomは文字列を直接出力します。
8. 共通コマンド v-cloak
場合によっては、カードが落ちたり、データが時間内に更新されなかったりするなど、読み込み遅延の問題が原因で、ページの表示が{
{message}}メッセージ変数「Hello」から変更されてしまいます。このようなちらつきの変化は、ユーザー エクスペリエンスを低下させる原因となります。 。現時点では、このラベルを使用する必要がありますv-cloak。v-cloakvue の解析前にはdiv 属性にこのタグがあり、vue の解析が完了すると v-cloak タグが削除されます。シンプルで、 css 属性で始まる div と同様にdisplay:none;、読み込みが完了すると css 属性になりdisplay:block、要素が表示されます。
<head>
<meta charset="utf-8" />
<title>v-cloak指令的使用</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
[v-cloak] {
display: none !important;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h2>{
{msg}}</h2>
</div>
<script>
//在vue解析前，div中有一个属性cloak
//在vue解析之后，div中没有一个属性v-cloak
setTimeout(() => {
const vm = new Vue({
el: '#app',
data() {
return {
msg: '你好啊'
}
}
})
}, 1000)
</script>
</body>ここでは1秒遅延させて読み込みが滞っている状態をシミュレートしています。その結果、最初はmessageの値が表示されず、div要素にv-cloak属性があり、1秒後に値が表示されます。メッセージ変数の が表示され、div の v-cloak 要素が delete に置き換えられます。
2 つの動的バインディング プロパティ
1.v-bindコマンド
js の innerHTML のように変数 h2 タグを囲むなど、タグの内容に変数を入れたくない場合があります<h2>{
{msg}}</h2>。srcただし、以下の位置に変数を記述することになります<img src="src" alt="">このように画像をインポートする場合、画像のリンクを動的に取得したいのですが、このときsrcは変数ではなく文字列srcになります。変数として有効にしたい場合は、v-bind:このようにタグを使用する必要があり、<img v-bind:src="src" alt="">ここでは Mustache 構文は使用できません。同様に<img v-bind:src="{
{src}}" alt="">、これも間違っています。
<div id="app">
<!-- 错误的做法这里不能使用Mustache语法 -->
<!-- <img v-bind:src="{
{src}}" alt=""> -->
<!-- 正确的做法使用v-bind指令 -->
<img v-bind:src="src" alt="">
<a v-bind:href="url"></a>
<img :src="src" />
<img :src="url" />
</div>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
src:'https://cn.bing.com/thid=OIP.NaSKiHPRcquisK2EehUI3gHaE8&pid=Api&rs=1',
url:'img/6.png'
}
}
})
</script>2. v-bind 動的バインディング クラス (オブジェクト構文)
場合によっては、Dom 要素のノードのクラスを動的にバインドし、Dom が指定されたクラス属性を持つかどうかを選択することが期待されます。たとえば、 h2 タグに追加するとclass="active"、Dom 要素がこのクラスを持つ場合、赤色になり<style>.active{color:red;}</style>、ボタン バインディング イベントを書き込み、クリックすると黒色になり、もう一度クリックすると赤色になります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-bind动态绑定class(对象语法)</title>
<style>
.active{
color:red;
}
</style>
</head>
<body>
<div id="app">
<!-- <h2 class="active">{
{message}}</h2>
<h2 :class="active">{
{message}}</h2> -->
<!-- 动态绑定class对象用法 -->
<!-- <h2 :class="{key1:value1,key2:value2}">{
{message}}</h2>
<h2 :class="{类名1:true,类名2:boolean}">{
{message}}</h2> -->
<h2 class="title" :class="{active:isActive}">{
{message}}</h2>
<h2 class="title" :class="getClasses()">{
{message}}</h2>
<button @click="change">点击变色</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
active:"active",
isActive:true
},
methods: {
change(){
this.isActive = !this.isActive
},
getClasses(){
return {active:this.isActive}
}
},
})
</script>
</body>
</html>Dom 要素で使用される2 つの変数activeとを定義し、この時点でバインドされ、isActive が true、アクティブな表示になり、ボタンにバインドされたメソッドchange()を定義し、ボタンをクリックし、Dom要素が属性を持つ 。isActive:class={active:isActive}class='active'this.isActive = !this.isActiveclass='active'
3. v-bind と v-for の組み合わせ
v-for と v-bind を使用して小さなデモを実装し、ムービー リストを表示します。特定のムービー リストをクリックすると、ムービー リストが赤くなります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.active {
color: #f00;
}
</style>
</head>
<body>
<div id="app">
<ul>
<!-- <li v-for="(item,index) in movies" :key="index" :class="{active:currentIndex==index}" @click="change(index)">{
{item}}</li> -->
<li v-for="(item,index) in movies" :key="index" :class="currentIndex==index?'active':''" @click="change(index)">{
{item}}</li><!-- 动态绑定三元表达式 -->
</ul>
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
currentIndex: 0,
movies: ["海王", "海贼王", "火影忍者", "复仇者联盟"]
}
},
methods: {
change(i) {
/* this.currentIndex = i */
if (this.currentIndex == i) return
this.currentIndex = i
}
}
})
</script>
</body>
</html>
v-for のインデックスインデックス、各行クリックイベントにバインドイベント、行をクリックしてこの行のインデックスインデックスを取得して割り当て、バインディングクラスをcurrentIndex使用、 Dom 要素にアクティブクラスがある場合、色赤くなります。 v-bind:index===currentIndex
4 v-bind 動的バインディング クラス (配列の使用)
配列は class 属性に配置でき、それが対応するクラスに順番に解析されます。
<div id="app">
<h2 :class="['active','aaa']">我们正在学习vue</h2>
<h2 :class="[active,aaa]">我们正在学习vue</h2>
<h2 :class="getStyle()">我们正在学习vue</h2>
</div>
<script>
/* 数组中加引号和不加引号有区别
加引号:表示字符串 是固定的,
不加引号:表示变量是不固定的 */
const vm = new Vue({
el: '#app',
data() {
return {
active: 'isactive',
aaa: 'bbb'
}
},
methods: {
getStyle() {
return [this.active, this.aaa]
}
}
})
</script>
5.v-bind 動的バインディング スタイル (オブジェクト構文)
<div id="app">
<!-- <h2 :style="{key(属性名):value(属性值)}">{
{message}}</h2> -->
<!-- 加单引号，当成字符串解析 -->
<h2 :style="{fontSize:'50px'}">我们爱学习</h2>
<!-- 不加单引号，变量解析 -->
<h2 :style="{fontSize:fontsize}">我们爱学习</h2>
<h2 :style="getStyle()">我们爱学习</h2>
</div>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
fontsize:40+'px'
}
},
methods:{
getStyle(){
return {fontSize:this.fontsize}
}
}
})
</script>
6.v-bind 動的バインディング スタイル (配列構文)
<div id="app">
<h2 :style="[baseStyle]">我们爱学习</h2>
<h2 :style="['baseStyle']">我们爱学习</h2><!-- 无意义 -->
<h2 :style="getStyle()">我们爱学习</h2>
</div>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
baseStyle:{background:'#f00'}
}
},
methods:{
getStyle(){
return [this.baseStyle]
}
}
})
</script>
バインディング クラスと同様に、バインディング スタイルも同じです。