初识简单却不失优雅的Vue.js

2024-05-06 14:51:46

字体：大中小

来源：转载

供稿：网友

作为一名Vue.js的忠实用户，我想有必要写点文章来歌颂这一门美好的语言了，我给它的总体评价是“简单却不失优雅，小巧而不乏大匠”，下面将围绕这句话给大家介绍Vue.js，希望能够激发你对Vue.js的兴趣。

Vue.js简介

Vue.js的作者为Evan You（尤雨溪），任职于Google Creative Lab，虽然是Vue是一个个人项目，但在发展前景上个人认为绝不输于Google的AngularJs，下面我会将Vue与Angular（Angular 1.0+版本）做一些简单的比较。

Vue的主要特点就和它官网（http://cn.vuejs.org/）所介绍的那样：

（1）简洁（2）轻量（3）快速（4）数据驱动（5）模块友好（6）组件化

简单

下面看一段Angular的实现双向绑定的代码

// html<body ng-app="myApp"> <div ng-controller="myCtrl">  <p>{{ note }}</p>  <input type="text" ng-model="note"> </div></body>// jsvar myModule = angular.module('myApp', []);myModule.controller('myCtrl', ['$scopp', function($scope) { $scope.note = '';]);

然后再看一下Vue的代码

// html<body> <div id="app">  <p>{{ note }}</p>  <input type="text" v-model="note"> </div></body>// jsvar vm = new Vue({ el: '#app', data: {  note: '' }})

相比较而言我个人认为Vue的代码编写风格更加简洁，并且通俗易懂。

不失优雅

Vue虽然是一个比较轻量级的框架，简单轻量的同时还非常的人性化，其提供的API也是非常的容易理解，同时也提供了一些很便捷的指令和属性。

例如：

（1）绑定click事件
<a v-on:click="doSomething"></a>
可以简写为：
<a @click="doSomething"></a>

(2) 绑定动态属性

可以简写为：
<a :href="url"></a>

(3) 便捷的修饰符

<a @click.stop="doSomething"></a>

<input @keyup.enter="submit">

(4) 实用的参数特性

<input v-model="note" debounce="500">

<input v-model="msg" lazy>
怎么样，是不是感觉优雅极了。