v-bind单向绑定与v-model双向绑定
Vue.js 最顯著的特點就是響應式和數據驅動，也就是將Model和View(View在下面的圖示中)進行單向綁定或者雙向綁定。
Vue.js主要有三種數據綁定形式，并且都是基于單向綁定和雙向綁定。
1.插值形式? {{}}
2.單向綁定(v-bind)：把Model綁定到View，當我們用JavaScript代碼更新Model時，View就會自動更新。因此，我們不需要進行額外的DOM操作，只需要進行Model的操作就可以實現視圖的聯動更新。
3.雙向綁定(v-model)：把Model綁定到View的同時也將View綁定到Model上，這樣就既可以通過更新Model來實現View的自動更新，也可以通過更新View來實現Model數據的更新。所以，當我們用JavaScript代碼更新Model時，View就會自動更新，反之，如果用戶更新了View，Model的數據也自動被更新了。
弄清了它的這種數據綁定的機制，我們再來看Vue.js代碼就會很清晰了，
#-------------------------------------------{{}}------------------------------------------------------------------------------------
插值形式?
插值形式就是{{data}}的形式，它使用的是單向綁定。
我們首先定義好一個JavaScript對象作為Model，并且把這個Model的兩個屬性綁定到DOM節點上：
Vue實例就是ViewModel的代理對象：
el: 指定了要把Model綁定到id為vm的DOM節點上。
data: 指定了Model，我們初始化了Model的兩個屬性name和age，
在View內部的<p>節點上，可以直接用{{ name }}引用Model的某個屬性。
扯白了,就是New Vue下面的就是模型,頁面上的<p></p>就是DOM節點,就是View.
?
映射關系:
Model->View
修改Model,View就更新,這種綁定是單向綁定.
瀏覽器按下F12,
例如，打開瀏覽器console，
在控制臺輸入vm.name = 'Bob'，按下回車，可以觀察到頁面立刻發生了變化，原來的Hello, Robot!自動變成了Hello, Bob!。
運行前:(按下F12,選擇右側的Console)
運行后:
#-------------------------------------------------------------------------------------------------------------------------------
單向綁定(v-bind)
如果我們希望html的某些屬性能夠支持單向綁定，我們只需要在該屬性前面加上v-bind:指令，這樣Vue在解析的時候會識別出該指令，就會將該將其屬性的值跟Vue實例的Model進行綁定。這樣我們就可以通過Model來動態的操作該屬性從而實現DOM的聯動更新。
例如：
<p class="classed">
上面<p>節點的class樣式指定的值為classed，它是一個靜態的屬性值，如果我們希望將該屬性值跟Model進行一個綁定，只需要加上一個v-bind:指令，如下所示：
<p v-bind:class="classed">
綁定之后，classed不再是一個靜態的字符串，而是vue實例中的data.classed變量，也就是它跟Model的classed進行了綁定，所以我們可以通過操作Model的classed來實現對View的class屬性的動態更新，從而實現View的動態更新。
這里為啥不再使用{{data}},因為綁定的是樣式,而不是具體的數值
?
如上面代碼所示，vm.classed的初始值為red，此時<p>的樣式屬性對應的是.red，此時背景就為紅色.
我們可以通過在瀏覽器的控制臺輸入vm.classed='blue'，此時背景就自動變成了藍色。
可以看到通過對class屬性進行綁定我們就可以動態的改變class對應的樣式，這個都是通過Model的操作完成的，沒有設置任何的DOM操作。
操作前:
操作后:
原理圖如下:
自己總結:綁定的是"Model中的樣式對應的變量"和"p節點"
#########################################################################
v-model形式
v-model主要是用在表單元素中，實現了雙向綁定。
當用戶填寫表單時，View的狀態就被更新了，
如果此時Model的數據也會隨著輸入的數據動態的更新，
那就相當于我們把Model和View做了雙向綁定。
這個意思是:View接受的數據,傳給model,model的數據再傳給view.
代碼如下 :
<body><form id="vm" action="#"><p><input v-model="email"></p><p><input v-model="name"></p></form></body><script src="https://cdn.jsdelivr.net/npm/vue"></script><script type="text/javascript">var vm = new Vue({el: '#vm',data: {email: '',name: ''}});</script>?
修改console之前(View->Model):
修改console之后(Model->View):
我們可以在表單中輸入內容，然后在瀏覽器console中用vm.$data查看Model的內容，也可以用vm.name查看Model的name屬性，它的值和FORM表單對應的<input>是一致的。
如果在瀏覽器console中用JavaScript更新Model，例如，執行vm.name='Bob'，表單對應的<input>內容就會立刻更新。可以看到通過v-model實現了表單數據和Model數據的雙向綁定。
###################################################################################
下面是一個v-model的計算器的例子.
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>蜀云泉</title><script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script></head> <body><!-- 這個div就是MVVM(Model-View-ViewModel)中的V，View --><!-- 輸入需要View->Model綁定 --><!-- 輸出需要Model->View綁定 --><div id="app"><h3 v-text="msg"></h3><input type="text" style="width:100%" v-model="msg"><!-- v-model模擬簡易計算器 --><input type="text" v-model="num1"><!-- 下面的對應頁面上的+符號 --><select v-model="opt"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><!-- 雙向綁定第二個數據 --><input type="text" v-model="num2"><!-- 綁定=號 --><input type="button" value="=" @click="calc"><!-- 輸出結果 --><input type="text" v-model="result"></div><script>// 這個vm就是MVVM中的VM，ViewModelvar vm=new Vue({el: '#app',// 這個data就是MVVM中的M，Modeldata: {msg:"大家好，我是Vae",num1:0,num2:0,result:0,opt:'+'},//下面是加減乘除四種運算methods: {calc(){switch(this.opt){//這里接收data中的opt的值case '+':this.result=parseInt(this.num1)+parseInt(this.num2);break;case '-':this.result=parseInt(this.num1)-parseInt(this.num2);break;case '*':this.result=parseInt(this.num1)*parseInt(this.num2);break;case '/':if(this.num2==0) {alert('除數不能為0');break;}this.result=parseInt(this.num1)/parseInt(this.num2);break;}}}})</script> </body> </html>參考鏈接:
https://blog.csdn.net/u012207345/article/details/81737509
總結
以上是生活随笔為你收集整理的v-bind单向绑定与v-model双向绑定的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： xfce4自己使用的主题设置备份以及xf
- 下一篇： js中输出变量的类型和输出对象的的属性/