vue简单入门指引

最新推荐文章于 2024-08-12 11:27:34 发布

wangweiren_get

最新推荐文章于 2024-08-12 11:27:34 发布

阅读量307

点赞数 1

分类专栏： vue 前端技术文章标签： vue

本文链接：https://blog.csdn.net/wangweiren_get/article/details/88078733

版权

前端同时被 3 个专栏收录

65 篇文章 1 订阅

订阅专栏

技术

13 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

vue简单入门指引

渐进式 JavaScript 框架

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

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

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

还有一张图

在这里插入图片描述

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

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

快速入门

安装

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

创建实例
```
var vm = new Vue({
  // 选项
})
```
实例的数据与方法

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