初识 VUE.js

什么是 Vue

Vue.js 是目前比较流行的 MVVM 前端框架。借鉴了 Angular 、React 等现代前端框架/库的诸多特点,Vue.js 框架本身涉及的技术包含:响应式编程、声明式渲染、组件化开发、虚拟 DOM、跨平台支持.........

Vue.js 的定位是一个渐进式框架,作者的说法是:

  • 与其他框架的区别就是渐进式的想法,也就是**Progressive,**渐进,一步一步,不是说你必须一竿子把所有的东西都用上。

版本选择:Vue.js 主要分 1.x 和 2.x 版本,机制差不多,语法有些区别,2.x 比 1.x 更加完善,一般没有特殊情结下,选择 2.x。PS: 学习 Vue.js,欢迎移步官网

vue 的优缺点

优点:

  • 轻量级的框架
  • 双向数据绑定(如图 1)
  • 易上手,便于与第三方库或既有项目整合

缺点:

  • Vue2.0 只支持 IE8 以上的浏览器(其实,这个也不能算缺点,IE8 以下必须抛弃)
  • 真的好像没有啥大缺点了

如何使用 Vue

  1. 引入 vue.js 库
<script src="vue.js"></script>
这将暴露出一个全局类——Vue,你可以用它来创建一个Vue实例。
  1. vue-cli,用 webpack 搭建 vue 项目(重点)
  2. 入门 Demo
<script src="vue.js"></script>   //引入vue.js文件


<div id="app">
  {{ message }} //模板绑定数据的其中一种方法
</div>


var app = new Vue({            // 创建Vue实例
  el: '#app',     // el属性:把当前Vue对象挂载到 id为#app的元素上
  data: {         // data: 是Vue对象中绑定的数据
    message: 'Hello Vue!'   // message 自定义的数据
  }
})

Vue 实例生命周期

请成为永远疯狂永远浪漫永远清澈的存在。

留下你的脚步
推荐阅读