數(shù)據(jù)的雙向綁定(ES6寫法)

效果:

沒有改變 input 框里面的值時(shí):

將input 框里面的值清空時(shí):

重新給  input 框輸入  豆豆 后頁面中  span  里綁定{{testData.name}}的值隨著 input 框值的變化而變化.

在Vue.js中可以使用v-model指令在表單元素上創(chuàng)建雙向數(shù)據(jù)綁定。并且v-model指令只能用于:<input>、<select>、<textarea>這三種標(biāo)簽。

<template>
<div>
 <div class="form-inline mg-top">
  <div class="form-group">
   <label class="control-label">姓名:</label>
   <input type="text" v-model='testData.name' class="form-control">
   <span class="control-span">姓名變?yōu)?{{testData.name}}</span>
  </div>
 </div>
</div>
</template>


<script>
export default {
 components: {
 },
 ready: function(){
 },
 methods: {
 },
 data() {
 return {
  testData:{
  id:'1',
  name:'張三',
  age:'18'
  }
 }
 }
}
</script>

Vue.js的組件可以理解為預(yù)先定義好了行為的ViewModel類。一個(gè)組件可以預(yù)定義很多選項(xiàng)，但最核心的是以下幾個(gè)：

模板（template）：模板聲明了數(shù)據(jù)和最終展現(xiàn)給用戶的DOM之間的映射關(guān)系。
注冊(cè)組件（components）：注冊(cè)之后即可在父組件模板中以自定義元素的形式調(diào)用一個(gè)子組件。
初始數(shù)據(jù)（data）：一個(gè)組件的初始數(shù)據(jù)狀態(tài)。對(duì)于可復(fù)用的組件來說，這通常是私有的狀態(tài)。
接受的外部參數(shù)(props)：組件之間通過參數(shù)來進(jìn)行數(shù)據(jù)的傳遞和共享。參數(shù)默認(rèn)是單向綁定（由上至下），但也可以顯式地聲明為雙向綁定。
方法（methods）：對(duì)數(shù)據(jù)的改動(dòng)操作一般都在組件的方法內(nèi)進(jìn)行?？梢酝ㄟ^v-on指令將用戶輸入事件和組件方法進(jìn)行綁定。
生命周期鉤子函數(shù)（lifecycle hooks）：一個(gè)組件會(huì)觸發(fā)多個(gè)生命周期鉤子函數(shù)，比如created，attached，destroyed等等。在這些鉤子函數(shù)中，我們可以封裝一 些自定義的邏輯。和傳統(tǒng)的MVC相比，可以理解為 Controller的邏輯被分散到了這些鉤子函數(shù)中。
私有資源（assets）：Vue.js當(dāng)中將用戶自定義的指令、過濾器、組件等統(tǒng)稱為資源。由于全局注冊(cè)資源容易導(dǎo)致命名沖突，一個(gè)組件可以聲明自己的私有資源。私有資源只有該組件和它的子組件可以調(diào)用。

常用指令：

所謂 指令 ，其實(shí)本質(zhì)就是在模板中出現(xiàn)的特殊標(biāo)記，根據(jù)這些標(biāo)記讓框架知道需要對(duì)這里的 DOM 元素進(jìn)行什么操作。

常用指令：

• v-if指令
• v-show指令
• v-else指令
• v-for指令
• v-bind指令
• v-on指令

v-if指令：

v-if根據(jù)表達(dá)式的值的真假條件渲染元素。在切換時(shí)元素及它的數(shù)據(jù)綁定 / 組件被銷毀并重建。如果元素是 <template>，將提出它的內(nèi)容作為條件塊。

labelShowFlag是一個(gè)返回bool值的表達(dá)式，表達(dá)式可以是一個(gè)bool屬性，也可以是一個(gè)返回bool的運(yùn)算式。

html：

<label class="control-label" v-if='labelShowFlag'>喵嘞個(gè)咪</label>
<label class="control-label" v-if="testData.name=='張三'" >張三</label>

js：

<script>
export default {
 components: {
 },
 ready: function(){
 },
 methods: {
 },
 data() {
 return {
  labelShowFlag:true,
  testData:{
  id:'1',
  name:'張三',
  age:'18'
  }
 }
 }
}
</script>

v-show指令：

v-show也是條件渲染指令，和v-if指令不同的是，使用v-show指令的元素始終會(huì)被渲染到HTML，v-show 只是簡(jiǎn)單的切換元素的 CSS 屬性 display。

html：

<label class="control-label" v-show='labelShowFlag'>喵嘞個(gè)咪</label>
<label class="control-label" v-show="testData.name=='張三'" >張三</label>

js：

<script>
export default {
 components: {
 },
 ready: function(){
 },
 methods: {
 },
 data() {
 return {
  labelShowFlag:true,
  testData:{
  id:'1',
  name:'張三',
  age:'18'
  }
 }
 }
}
</script>

v-else指令：

可以用 v-else 指令給 v-if 或 v-show 添加一個(gè) “else 塊”，并且v-else 元素必須立即跟在 v-if 或 v-show 元素的后面——否則它不能被識(shí)別。

<label class="control-label" v-if='labelShowFlag'>喵嘞個(gè)咪</label>
<label class="control-label" v-if="testData.name=='張三'" >張三</label>
<label class="control-label" v-else>不是張三</label>

 v-for指令：

可以使用 v-for 指令基于一個(gè)數(shù)組渲染一個(gè)列表。這個(gè)指令使用特殊的語法，形式為 item in items，items 是數(shù)據(jù)數(shù)組，item 是當(dāng)前數(shù)組元素的別名：

html:

<ul>
 <li v-for="item in items">
 {{ item.message }}
 </li>
</ul>

js:

<script>
export default {
 components: {
 },
 ready: function(){
 },
 methods: {
 },
 data() {
 return {
  labelShowFlag:true,
  testData:{
  id:'1',
  name:'張三',
  age:'18'
  },
  items: [{
  message: '豆豆'
  }, {
  message: '毛毛'
  }],
 }
 }
}
</script>

v-bind指令：

v-bind 指令用于響應(yīng)地更新 HTML 特性 形式如：v-bind:class

html：

<label class="control-label" v-bind:class="{'pink-label': labelShowFlag}" >我是粉色的</label>
<label class="control-label">默認(rèn)</label>

v-on指令:

v-on 指令用于監(jiān)聽DOM事件 形式如：v-on:click  縮寫為 @click;

html：

<input type="button" class="form-control btn btn-primary" value="提交" @click='saveFun'>

js:

<script>
export default {
 components: {
 },
 ready: function(){
 },
 methods: {
 saveFun:function(){
  alert('提交');
 }
 },
 data() {
 return {
  labelShowFlag:true,
  testData:{
  id:'1',
  name:'張三',
  age:'18'
  },
  items: [{
  message: '豆豆'
  }, {
  message: '毛毛'
  }],
 }
 }
}
</script>

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論