(Vue)初识Vue

时间 2019-12-11

标签 vue 繁體版

原文原文链接

Vue是什么

　　Vue是什么，咱们能够从Vue的中文网站来了解它。 https://cn.vuejs.org/ 。Vue (读音 /vjuː/，相似于 view) 是一套用于构建用户界面的渐进式框架。也就是说Vue是一个前端的框架，能够用来构建页面，包括web以及app。javascript

Vue的优点

　　对于前端开发人员来讲，你们使用过不少的Javascript框架。好比原生的JavaScript,Jquery,angularjs和rectjs等。那么Vue与这些框架相比，它的优点体如今哪里？html

Vue 只关注视图层，采用自底向上增量开发的设计。Vue关注的是视图层，操做的对象是HTML元素。它是渐进的，没有强主张，你能够在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也能够整个用它全家桶开发，当Angular用；还能够用它的视图，搭配你本身设计的整个下层用。你能够在底层数据逻辑的地方用OO和设计模式的那套理念，也能够函数式，均可以，它只是个轻量视图而已，只作了本身该作的事，没有作不应作的事，仅此而已。
Vue 的目标是经过尽量简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 是一个更加灵活开放的解决方案。它容许你以但愿的方式组织应用程序，而不是在任什么时候候都必须遵循 AngularJS 制定的规则，这让 Vue 能适用于各类项目.在 Vue 中指令和组件分得更清晰。指令只封装 DOM 操做，而组件表明一个自给自足的独立单元——有本身的视图和数据逻辑。
Vue 学习起来很是简单.在 API 与设计两方面上 Vue.js很是简单，所以你能够快速地掌握它的所有特性并投入开发。Vue 的总体思想是拥抱经典的 Web 技术，并在其上进行扩展。基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易。

Hello,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，数据绑定

　　Vue的双向数据绑定的原理相信你们也都十分了解了，主要是经过Object对象的defineProperty属性，重写data的set和get函数来实现的,这里对原理不作过多描述，主要仍是来实现一个实例。vue

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