什么是vue？

vue就是一个js库，而且无依赖别的js库，直接引入一个js文件就可使用，跟jquery差很少。vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有很是容易上手的API。

 

版本选择？

如今vue分为vue1和vue2这两个大版本，然而如今有一些基于vue的框架还不兼容vue2，不过本身折腾能够随意选择一个的，反正文档还算挺详细。

 

为何咱们要使用vue？

其实跟jquery差很少，都是简化咱们的开发。例如咱们能够用vue实现像后端模板渲染的功能，能够更加便捷的绑定dom事件，能够把一些页面的组件打包重复使用。下面咱们看看如何简单粗暴的使用vue。

 

安装 

使用npm安装：

npm install vue

如何优雅的使用vue当成模板引擎

后端的同窗想必挺清楚模板引擎是什么玩意了，而对于刚入门前端的同窗来讲，每每渲染页面会使用字符串拼接（很是不推荐）或者dom的clone来动态生成html，可是这两种方法写法都很麻烦，而vue却能十分优雅的实现模板渲染这种功能。

咱们拿官方的例子来看看，以下图：

＃hello world

<div id="app">

{{ message }}

</div>

new Vue({

el: '#app',

data: {

message: 'Hello Vue.js!'

}

})

显示效果：

＃双向绑定

<div id="app">

<p>{{ message }}</p>

<input v-model="message">

</div>

new Vue({

el: '#app',

data: {

message: 'Hello Vue.js!'

}

})

显示效果：

咱们能够看到，el里面跟jquery的元素选择标识符是同样的，这个就是选择要渲染的区域。data是一个字典，这个字典就是要填充的数据。而上面的html两个花括号里面一个变量名这种方式就是输出变量值。

也许你会说，循环输出咋办，别担忧，vue都提供了。看：

<div id="app">

<ul>

<li v-for="todo in todos">

{{ todo.text }}

</li>

</ul>

</div>

new Vue({

el: '#app',

data: {

todos: [

{ text: 'Learn JavaScript' },

{ text: 'Learn Vue.js' },

{ text: 'Build Something Awesome' }

]

}

})

显示效果：

 

方法与事件处理器

其实就是用特定语法代替了直接在html标签写onclick='xxx'这些，也不用jquery写$("#xxx").on("click", function(){});，反正用法很简单，老规矩，上官方例子：

  <div id="example">
     <button v-on:click="greet">Greet</button>

  </div>

var vm = new Vue({

el: '#example',

data: {

name: 'Vue.js'

},

// 在 `methods` 对象中定义方法

methods: {

greet: function (event) {

// 方法内 `this` 指向 vm

alert('Hello ' + this.name + '!')

// `event` 是原生 DOM 事件

alert(event.target.tagName)

}

}

})

// 也能够在 JavaScript 代码中调用方法

vm.greet() // -> 'Hello Vue.js!'

效果图：

 

 

组件

首先，咱们看看官方例子：

 

  <div id="example">
     <my-component></my-component>

  </div>

// 定义

var MyComponent = Vue.extend({

template: '<div>A custom component!</div>'

})

// 注册

Vue.component('my-component', MyComponent)

// 建立根实例

new Vue({

el: '#example'

})

渲染为：

 

<div id="example">

<div>A custom component!</div>

</div>

显示效果：

一眼看过去，至关于宏定义嘛，咱们声明一种标签是表明一串特定的html字符串。（咱们先这样子将就的用着，其实这组件背后还涉及值的传递，函数绑定这些，可是咱们入门，先无论）

 

单文件的方式使用路由

让咱们思考一下，为何要有路由这东西呢？咱们一贯的作法是一个页面一个URL，页面切换的时候跳到新的地址。后来，因为请求新页面太耗费流量，工程师们想到使用ajax拉取数据，局部刷新页面，这种方法大大节省了流量（固然这种作法对seo不友好，这里就不展开说了，想了解更多能够持续关注我）。vue的路由其实也是为了页面切换不用从新整个页面从新加载，咱们来看看例子：

<div id="app">

<component :is="currentView"></component>

</div>

Vue.component('home', { /* ... */ })

Vue.component('page1', { /* ... */ })

var app = new Vue({

el: '#app',

data: {

currentView: 'home'

}

})

// 在路由处理器中切换页面

app.currentView = 'page1'

能够看到使用vue以后，咱们写的代码是十分好维护的。

 

入门到此为止了

上面这些简单粗暴的使用vue其实可让咱们充分体会到vue的美，特别是小应用小团队，用这些基本上足够应付了。什么是醉完美的？简单的又能提升咱们的开发效率就是完美的。

 

接下来，咱们应该如何进一步学习vue呢？

• 学会用webpack打包组件，而且可使用打包后的组件

• 了解一些基于vue的框架，例如Element UI，iView这些UI框架

• 组件通讯，异步组件的用法

• 服务器渲染

• 学会开发vue插件

---

 

更多angular1/2/四、ionic1/2/三、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。