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事件。