基础语法与快速上手vue

一.vue引入方式

方式一 CDN

在html文件的sctipt标签中引入如下地址

  <script src="https://unpkg.com/vue@next"></script>

方式二 本地

把上述地址中的代码复制到本地lib文件夹下的vue.js中
本地引入vue.js

<script src="./lib/vue.js"></script>

方式三 通过npm包管理工具安装使用它

方式四 直接通过Vue CLI创建项目

二.vue的使用

1.创建div标签

<div id="app"></div>

2.引入vue

从上面方式一或者方式二都可以，这里使用CND

<script src="https://unpkg.com/vue@next"></script>

3.创建app

通过Vue.createApp()创建app，需要传入一个对象里面的

const app = Vue.createApp({
      template: `<h1>Hello Vue</h1>`
    })

4.挂在app

mount()中传入div的id值，可以自定义

app.mount("#app")

三.基础语法

1 data属性

data属性需要传入一个函数，返回一个对象
data中返回的对象会被Vue的响应式系统劫持，之后对该对象的修改或者访问都会在劫持中被处理
所以我们在template或者app中通过 {{counter}} 访问counter，可以从对象中获取到数据
所以我们修改counter的值时，app中的 {{counter}}也会发生改变

data的完整写法

data: function() {
        return {
          message: "Hello Data"
        }
      },

data的箭头函数写法

data: () => {
	return {
		message: 'Hello Data',
	};
},

2 methods属性

methods属性是一个对象，通常我们会在这个对象中定义很多的方法，这些方法可以被绑定到 模板中，在该方法中，我们可以使用this关键字来直接访问到data中返回的对象的属性

methods的写法，里面定义的方法函数可以简写

methods: {
				//方式一
        increment: function() {
          this.counter++
        },
		//方式二
        // increment(){
        //   console.log(this)
        // }
      }

注意methods中定义的方法，不可以使用箭头函数，下面是官方给出的解释

4.补充

为什么不能使用箭头函数

1. 我们在methods中要使用data返回对象中的数据：
   那么这个this是必须有值的，并且应该可以通过this获取到data返回对象中的数据。
2. 那么我们这个this能不能是window呢？
   不可以是window，因为window中我们无法获取到data返回对象中的数据；
   但是如果我们使用箭头函数，那么这个this就会是window了；
3. 为什么是window呢？
   这里涉及到箭头函数使用this的查找规则，它会在自己的上层作用于中来查找this；
   最终刚好找到的是script作用于中的this，所以就是window；

this到底指向什么

事实上Vue的源码当中就是对methods中的所有函数进行了遍历，并且通过bind绑定了this

命令式编程和声明式编程

命令式编程关注的是 “how to do”自己完成整个how的过程；
声明式编程关注的是 “what to do”，由框架(机器)完成 “how”的过程；