标签：项目 rip .com com image div color 规则 函数
Vue是什么，我们可以从Vue的中文网站来了解它。 https://cn.vuejs.org/ 。Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。也就是说Vue是一个前端的框架，可以用来构建页面，包括web以及app。
对于前端开发人员来说，大家使用过很多的Javascript框架。比如原生的JavaScript,Jquery,angularjs和rectjs等。那么Vue与这些框架相比，它的优势体现在哪里？
对于开发人员来说，学习一门语言的第一行代码，多数是从Hello，World开发。使用Vue，首先是要在html页面引入Vue.js文件，引入Vue之后，然后实例化vue对象。Vue的参数是对象，el是Vue需要操作的对象，是一个容器。data可以赋值给Vue绑定的元素。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <div id="box"> 10 {{message}} 11 </div> 12 <script> 13 //vue实例化 14 //el 绑定html对象，选择器 15 //data:绑定html对象数据，双向绑定。可以用v-model 16 var vm = new Vue({ 17 el:"#box", 18 data:{ 19 message:"hello,vue" 20 } 21 }); 22 23 </script> 24 </body> 25 </html>
Vue的双向数据绑定的原理相信大家也都十分了解了，主要是通过Object对象的defineProperty属性，重写data的set和get函数来实现的,这里对原理不做过多描述，主要还是来实现一个实例。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="js/vue.js" ></script> 7 </head> 8 <body> 9 <div id="box"> 10 <input type="text" v-model="message" /> 11 <br /> 12 {{message}} 13 </div> 14 <script> 15 new Vue({ 16 el:"#box", 17 data:{ 18 message:"test" 19 } 20 }) 21 </script> 22 </body> 23 </html>
上面的代码通过Vue实现了数据的双向绑定，input的值发生改变，div的text值也会发生改变，通过Vue的v-model指令来实现，v-model指令可以将data中的值绑定给指定的dom对象。如果不使用vue，采用JavaScript事件来事件，我们就需要为input绑定input事件。
标签：项目 rip .com com image div color 规则 函数
原文地址：https://www.cnblogs.com/ggz19/p/9538984.html
