談談我對Vue的理解
vue就是前端上的Java，前端上的C#。有個前端的虛擬DOM引擎，設計理念和Java，C#類似。我們只需要告訴DOM應該顯示什么，而不用去操作DOM元素。
如何引用？
下面是一個helloWord,大家運行感受一下。
<!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <meta charset="utf-8"> </head> <body> <div id="app"> <!--使用 v-cloak能夠解決插值閃爍問題--> <p>{{msg}}</p> </div> <script type="text/javascript"> //VM層 var vm = new Vue({ el:'#app',//表示，當前我們new這個vue的實例，要控制頁面上的哪個區域 //M層 data:{//data屬性中存放的是el中要用的數據 msg:'HelloWorld'//通過Vue提供的指令，很方便的就能把數據渲染到頁面上，程序員不用再操作dom元素了。 } }) </script> </body> </html>
運行效果如下：
這里當導入了vue.js庫后，里面會有個Vue的構造器，對應着div。vue構造器中里面的el綁定div，data綁定數據。
解決閃爍問題：
相信新手都遇到過這個問題：
能看到{{msg}}是不是很沒有B格？
這時候加個v-cloak屬性即可解決
代碼如下：有注釋肯定能看懂。
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> [v-cloak]{ display:none; } </style> </head> <body> <div id="app"> <!--使用 v-cloak能夠解決插值閃爍問題--> <p v-cloak>{{msg}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script type="text/javascript"> //VM層 var vm = new Vue({ el:'#app',//表示，當前我們new這個vue的實例，要控制頁面上的哪個區域 //M層 data:{//data屬性中存放的是el中要用的數據 msg:'歡迎學習Vue'//通過Vue提供的指令，很方便的就能把數據渲染到頁面上，程序員不用再操作dom元素了。 } }) </script> </body> </html>
這時候就看不見{{msg}}了
v-bind指令:
v-bind是vue中提供的用於綁定屬性的指令實例代碼如下：
<!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <meta charset="utf-8"> <style type="text/css"> [v-cloak]{ display:none; } </style> </head> <body> <div id="app"> <!--使用 v-cloak能夠解決插值閃爍問題--> <p v-cloak>{{msg}}</p> <input type="button" v-bind:value="value"> </div> <script type="text/javascript"> //VM層 var vm = new Vue({ el:'#app',//表示，當前我們new這個vue的實例，要控制頁面上的哪個區域 //M層 data:{//data屬性中存放的是el中要用的數據 msg:'歡迎學習Vue'//通過Vue提供的指令，很方便的就能把數據渲染到頁面上，程序員不用再操作dom元素了。 ,value:'按鈕' } }) </script> </body> </html>
運行結果：
可以看到bind能夠綁定屬性值。
原理：v-bind會把原屬性值變成js變量解析。
注意：v-bind指令可以被簡寫位：要綁定的屬性
v-bind中可以寫合法的js表達式。
v-on指令：
Vue中提供了v-on事件綁定機制。
示例代碼如下：
<!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <meta charset="utf-8"> <style type="text/css"> [v-cloak]{ display:none; } </style> </head> <body> <div id="app"> <!--使用 v-cloak能夠解決插值閃爍問題--> <p v-cloak>{{msg}}</p> <input type="button" v-bind:value="value" v-on:click="show"> </div> <script type="text/javascript"> //VM層 var vm = new Vue({ el:'#app',//表示，當前我們new這個vue的實例，要控制頁面上的哪個區域 //M層 data:{//data屬性中存放的是el中要用的數據 msg:'歡迎學習Vue'//通過Vue提供的指令，很方便的就能把數據渲染到頁面上，程序員不用再操作dom元素了。 ,value:'按鈕' }, methods:{//這個methods屬性中定義了當前Vue實例所有可用的方法 show: function(){ alert("Hello"); } } }) </script> </body> </html>
截止如下： 我們掌握了如何定義一個基本的Vue代碼結構，插值表達式，v-cloak，v-html，v-bind v-on 。