首頁 >web前端 >js教程 >Vue.js資料的雙向綁定、常用指令

Vue.js資料的雙向綁定、常用指令

高洛峰原創: 2017-01-20 10:01:311472瀏覽

資料的雙向綁定(ES6寫法)

效果:

沒有改變input 框裡面的值時:

Vue.js資料的雙向綁定、常用指令

將input 框裡面的值清空時

Vue.js資料的雙向綁定、常用指令

將input 框裡面的值清空時給

Vue.js資料的雙向綁定、常用指令將豆豆後頁中 span 裡綁定{{testData.name}}的值隨著input 框值的變化而變化.

在Vue.js中可以使用v-model指令在表單元素上建立雙向資料綁定。且v-model指令只能用於:、

這三種標籤。 <p><pre class="brush:js;toolbar:false"><template>
<div>
 <div class="form-inline mg-top">
  <div class="form-group">
   <label class="control-label">姓名:</label>
   <input type="text" v-model=&#39;testData.name&#39; class="form-control">
   <span class="control-span">姓名变为:{{testData.name}}</span>
  </div>
 </div>
</div>
</template>
 
 
<script>
export default {
 components: {
 },
 ready: function(){
 },
 methods: {
 },
 data() {
 return {
  testData:{
  id:&#39;1&#39;,
  name:&#39;张三&#39;,
  age:&#39;18&#39;
  }
 }
 }
}
</script></pre><br>Vue.js的元件可以理解為預先定義好了行為的ViewModel類別。一個元件可以預先定義很多選項，但最核心的是以下幾個：<br><br>模板（template）：模板聲明了資料和最終展現給使用者的DOM之間的映射關係。 <br>註冊元件（components）：註冊之後即可在父元件範本中以自訂元素的形式呼叫子元件。 <br>初始資料（data）：一個組件的初始資料狀態。對於可重複使用的元件來說，這通常是私有的狀態。 <br>接受的外部參數(props)：組件之間透過參數來進行資料的傳遞和共用。參數預設是單向綁定（從上到下），但也可以明確地宣告為雙向綁定。 <br>方法（methods）：對資料的改動操作一般都在組件的方法內進行。可以透過v-on指令將使用者輸入事件和元件方法進行綁定。 </p>生命週期鉤子函數（lifecycle hooks）：一個元件會觸發多個生命週期鉤子函數，例如created，attached，destroyed等等。在這些鉤子函數中，我們可以封裝一 些自訂的邏輯。和傳統的MVC相比，可以理解為 Controller的邏輯被分散到了這些鉤子函數中。 <p>私有資源（assets）：Vue.js當中將使用者自訂的指令、過濾器、元件等統稱為資源。由於全域註冊資源容易導致命名衝突，一個元件可以宣告自己的私有資源。私有資源只有該元件和它的子元件可以呼叫。 </p>
<p></p>常用指令：<p></p>所謂 指令 ，其實本質就是在模板中出現的特殊標記，根據這些標記讓框架知道需要對這裡的 DOM 元素進行什麼操作。 <p></p>常用指令：<p></p>v-if指令<p></p>v-show指令<p></p>v-else指令<p></p>v-for指令<p></p>v-bind指令<p>指令v-if根據表達式的值的真假條件渲染元素。在切換時元素及它的資料綁定 / 元件被銷毀並重建。如果元素是 <template>，將提出它的內容作為條件區塊。 </template></p>
<p>labelShowFlag是一個傳回bool值的表達式，表達式可以是bool屬性，也可以是一個傳回bool的運算式。 </p>
<p></p>
<p><img src="https://img.php.cn//upload/image/375/290/964/1484877307473731.jpg" title="Vue.js資料的雙向綁定、常用指令" alt="Vue.js資料的雙向綁定、常用指令"    style="max-width:90%"  style="max-width:90%">html：</p><pre class="brush:html;toolbar:false"><label class="control-label" v-if=&#39;labelShowFlag&#39;>喵嘞个咪</label>
<label class="control-label" v-if="testData.name==&#39;张三&#39;" >张三</label></pre><p>js：</p><pre class="brush:js;toolbar:false"><script>
export default {
 components: {
 },
 ready: function(){
 },
 methods: {
 },
 data() {
 return {
  labelShowFlag:true,
  testData:{
  id:&#39;1&#39;,
  name:&#39;张三&#39;,
  age:&#39;18&#39;
  }
 }
 }
}
</script></pre><p>v-show指令：</p>
<p>v-show也是條件渲染指令，和v-if指令不同的是，使用v-show</p>v-show也是條件渲染指令，和v-if指令不同的是，使用v-show<p>v-show到HTML，v-show 只是簡單的切換元素的CSS 屬性display。 </p>
<p><img src="https://img.php.cn//upload/image/626/105/517/1484877344529841.jpg" title="Vue.js資料的雙向綁定、常用指令" alt="Vue.js資料的雙向綁定、常用指令"    style="max-width:90%"  style="max-width:90%"></p>
<p><img src="https://img.php.cn//upload/image/506/412/908/1484877356491993.jpg" title="Vue.js資料的雙向綁定、常用指令" alt="Vue.js資料的雙向綁定、常用指令"    style="max-width:90%"  style="max-width:90%"></p>
<p>html：</p><pre class="brush:html;toolbar:false;"><label class="control-label" v-show=&#39;labelShowFlag&#39;>喵嘞个咪</label>
<label class="control-label" v-show="testData.name==&#39;张三&#39;" >张三</label></pre><p> js：</p><pre class="brush:js;toolbar:false"><script>
export default {
 components: {
 },
 ready: function(){
 },
 methods: {
 },
 data() {
 return {
  labelShowFlag:true,
  testData:{
  id:&#39;1&#39;,
  name:&#39;张三&#39;,
  age:&#39;18&#39;
  }
 }
 }
}
</script></pre><p>v-else指令：<br></p>
<p>可以用v-else 指令給「 else 元素必須立即跟在v-if 或v-show 元素的後面——否則它不能被識別。 </p><pre class="brush:js;toolbar:false"><label class="control-label" v-if=&#39;labelShowFlag&#39;>喵嘞个咪</label>
<label class="control-label" v-if="testData.name==&#39;张三&#39;" >张三</label>
<label class="control-label" v-else>不是张三</label></pre><p> v-for指令：</p>
<p>可以使用 v-for 指令基於一個陣列渲染一個清單。這個指令使用特殊的語法，形式為item in items，items 是資料數組，item 是目前陣列元素的別名：</p>
<p><img src="https://img.php.cn//upload/image/220/446/382/1484877375536851.jpg" title="Vue.js資料的雙向綁定、常用指令" alt="Vue.js資料的雙向綁定、常用指令"    style="max-width:90%"  style="max-width:90%"></p>
<p>html:</p><pre class="brush:js;toolbar:false"><ul>
 <li v-for="item in items">
 {{ item.message }}
 </li>
</ul></pre><p>  js:</p><pre class="brush:js;toolbar:false"><script>
export default {
 components: {
 },
 ready: function(){
 },
 methods: {
 },
 data() {
 return {
  labelShowFlag:true,
  testData:{
  id:&#39;1&#39;,
  name:&#39;张三&#39;,
  age:&#39;18&#39;
  },
  items: [{
  message: &#39;豆豆&#39;
  }, {
  message: &#39;毛毛&#39;
  }],
 }
 }
}
</script></pre><p>v-bind指令： bind 指令用於回應地更新HTML 特性形式如：v-bind:class</p>
<p>html：</p><pre class="brush:html;toolbar:false;"><label class="control-label" v-bind:class="{&#39;pink-label&#39;: labelShowFlag}" >我是粉色的</label>
<label class="control-label">默认</label></pre><p>v-on指令:</p>
<p>v-on 指令用于监听DOM事件 形式如：v-on:click  缩写为 @click;</p>
<p>html：</p><pre class="brush:html;toolbar:false;"><input type="button" class="form-control btn btn-primary" value="提交" @click=&#39;saveFun&#39;></pre><p>js:</p><pre class="brush:js;toolbar:false"><script>
export default {
 components: {
 },
 ready: function(){
 },
 methods: {
 saveFun:function(){
  alert(&#39;提交&#39;);
 }
 },
 data() {
 return {
  labelShowFlag:true,
  testData:{
  id:&#39;1&#39;,
  name:&#39;张三&#39;,
  age:&#39;18&#39;
  },
  items: [{
  message: &#39;豆豆&#39;
  }, {
  message: &#39;毛毛&#39;
  }],
 }
 }
}
</script></pre><p>    </p>
<p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHPz中文网。</p>
<p>更多Vue.js資料的雙向綁定、常用指令相关文章请关注PHP中文网！</p>

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：簡單談談Vue 模板各類別資料綁定下一篇：簡單談談Vue 模板各類別資料綁定

看更多

Vue.js資料的雙向綁定、常用指令

相關文章