专栏首页水击三千(Vue)初识Vue Vue是什么Vue的优势Hello,VueVue,数据绑定

(Vue)初识Vue Vue是什么Vue的优势Hello,VueVue,数据绑定

Vue是什么

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

Vue的优势

  对于前端开发人员来说,大家使用过很多的Javascript框架。比如原生的JavaScript,Jquery,angularjs和rectjs等。那么Vue与这些框架相比,它的优势体现在哪里?

  1. Vue 只关注视图层, 采用自底向上增量开发的设计。Vue关注的是视图层,操作的对象是HTML元素。它是渐进的,没有强主张,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用;还可以用它的视图,搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念,也可以函数式,都可以,它只是个轻量视图而已,只做了自己该做的事,没有做不该做的事,仅此而已。
  2. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 是一个更加灵活开放的解决方案。它允许你以希望的方式组织应用程序,而不是在任何时候都必须遵循 AngularJS 制定的规则,这让 Vue 能适用于各种项目.在 Vue 中指令和组件分得更清晰。指令只封装 DOM 操作,而组件代表一个自给自足的独立单元——有自己的视图和数据逻辑。
  3. 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函数来实现的,这里对原理不做过多描述,主要还是来实现一个实例。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript操作符(布尔操作符、乘性操作符和加性操作符)

    布尔操作符 布尔操作符用来测试两个值的关系,布尔操作符有三个,逻辑非(!)、逻辑与(&&),逻辑或(||)。 逻辑非由一个叹号(!)组成,可以应用于JavaSc...

    水击三千
  • JavaScript语句-流程控制语句

    JavaScript定义了一组语句,语句通常用于执行一定的任务。语句可以很简单,也可以很复杂。 选择结构,可以在程序中创建交叉结构来指定程序流的可能方向。Jav...

    水击三千
  • JavaScript对象和数组

    在JavaScript中对象是一种数据结构,用于将数据和功能组织在一起,描述一类对象所具有的属性和方法。 对象是某个特定类型的实例。新对象是new操作符后跟一个...

    水击三千
  • chrome 开发者工具的 11 个骚技巧

    对于每个前端从业者来说,除了 F5 键之外,用的最多的另外一个键就是 F12 了。

    小生方勤
  • 为什么现在的开发者总是拿 Vue.js 和 JavaScript 巨头 Angular、React 比较?

    Vue.js 是一个用来构建 web UI 的 JavaScript 库,基于 MIT 开源协议。Vue.js 于 2013 年首次分布,但是在接下来的两年内,...

    疯狂的技术宅
  • Vue实战系列—项目搭建四步曲(0)

    开篇:想通过输出Vue系列文章,让大家全面理解Vue的实现原理,掌握实用技巧,能在实战中使用Vue,解锁一个开发技能。

    前端大彬哥
  • 2019 Vue开发指南:你都需要学点啥?

    如果您是Vue开发的新手,您可能已经听过很多关于它的专业术语了,例如:单页面应用程序、异步组件、服务器端呈现等。

    葡萄城控件
  • 01Vue.js快速入门(一)Vue概念及Helloworld

    Vue是一个前端的双向绑定类的框架,发音[读音 /vjuː/, 类似于 view]。新的Vue版本参考了React的部分设计,当然也有自己独特的地方,比如Vue...

    老马
  • 【Vuejs】397- Vue 3最值得期待的五项重大更新

    我非常重视性能,所以在探索具体的 API 之前我想谈一谈 Vue 3 的性能。可讲的东西是很多的!几乎每个角落都能找到明显的改进!

    pingan8787
  • Vue 3 最值得期待的五项重大更新

    Vue 团队非常擅长改进框架 API。Evan You 总结了 Vue 3 的几大改进目标:

    Java帮帮

扫码关注云+社区

领取腾讯云代金券