vue简单入门指引

渐进式 JavaScript 框架

打开vue的官网, 你上来就能看到这几个字，那么究竟什么叫渐进式呢？

查了一下知乎，有这样的回答

原文地址
每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：- 必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。比如React，它也有一定程度的主张，它的主张主要是函数式编程的理念，比如说，你需要知道什么是副作用，什么是纯函数，如何隔离副作用。它的侵入性看似没有Angular那么强，主要因为它是软性侵入。你当然可以只用React的视图层，但几乎没有人这么用，为什么呢，因为你用了它，就会觉得其他东西都很别扭，于是你要引入Flux，Redux，Mobx之中的一个，于是你除了Redux，还要看saga，于是你要纠结业务开发过程中每个东西有没有副作用，纯不纯，甚至你连这个都可能不能忍

还有一张图

一个链接,据说是原作者尤雨溪的回答

https://www.youtube.com/watch?v=EiTORdpGqns

快速入门

1. 安装
   

   cdn 的方式

   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
   

   npm 两种方式
   

   $ npm install vue
   

   vue-cli 的方式

   https://cli.vuejs.org/zh/

   npm install -g @vue/cli
   # OR
   yarn global add @vue/cli
   

   then 创建一个项目

   vue create my-project
   # OR
   vue ui
   

2. 创建实例

   var vm = new Vue({
     // 选项
   })
   

3. 实例的数据与方法

var data = { a: 1 }

// 直接创建一个实例
var vm = new Vue({
  data: data,
  computed: { //计算属性： 将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
  	aDouble: function () {
      return this.a * 2
    },
  },
  methods: { //methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
  /*
  	注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。
  */
  	 plus: function () {
      this.a++
    }
  },
  watch: {
  	// 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
  	 a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
  }
})
vm.a // => 1
vm.$data === data // => true

4. 生命周期
   生命周期图

5. Class 与 Style 绑定

6. 内置指令

一个组件的样子

参考链接

1. 官网链接