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

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

 效果:

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

:

將input 框裡面的值清空時

將input 框裡面的值清空時給

將豆豆後頁中  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>