vue简单入门指引

Myth丶恋晨 2022-03-15 12:28 317阅读 0赞

### vue简单入门指引 ###

*   *  渐进式 JavaScript 框架
     *  快速入门
     *  一个组件的样子
     *  参考链接

## 渐进式 JavaScript 框架 ##

> 打开vue的官网, 你上来就能看到这几个字，那么究竟什么叫渐进式呢？  
>   
> 查了一下知乎，有这样的回答

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

> 还有一张图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70]

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

[https://www.youtube.com/watch?v=EiTORdpGqns][https_www.youtube.com_watch_v_EiTORdpGqns]

## 快速入门 ##

1.  [安装][Link 2]  
    
    
    > cdn 的方式
    
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    
    > npm 两种方式  
    > 
    
        $ npm install vue
    
    > vue-cli 的方式
    
    [https://cli.vuejs.org/zh/][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.  [创建实例][Link 3]
    
        var vm = new Vue({
          // 选项
        })
3.  [实例的数据与方法][Link 4]

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

1.  [生命周期][Link 5]  
    [生命周期图][Link 6]
2.  [Class 与 Style 绑定][Class _ Style]
3.  [ 内置指令 ][Link 7]

## 一个组件的样子 ##

![vue-component.png][]

## 参考链接 ##

1.  [官网链接][Link 8]

[Link 1]: https://www.zhihu.com/question/51907207
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70]: /images/20220315/db99493476364b3ea755bf7e84717956.png
[https_www.youtube.com_watch_v_EiTORdpGqns]: https://www.youtube.com/watch?v=EiTORdpGqns
[Link 2]: https://cn.vuejs.org/v2/guide/installation.html
[https_cli.vuejs.org_zh]: https://cli.vuejs.org/zh/
[Link 3]: https://cn.vuejs.org/v2/guide/instance.html
[Link 4]: https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE
[Link 5]: https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
[Link 6]: https://cn.vuejs.org/images/lifecycle.png
[Class _ Style]: https://cn.vuejs.org/v2/guide/class-and-style.html
[Link 7]: https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4
[vue-component.png]: https://cn.vuejs.org/images/vue-component.png
[Link 8]: https://cn.vuejs.org/index.html