谈谈我对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 。