Vue零基础教程|从前端框架到GIS开发系列课程（二）

前文

0帧起手《Vue零基础教程》，从前端框架到GIS开发系列课程

https://mp.csdn.net/mp_blog/creation/editor/144398425

应用实例

参考官方文档：https://cn.vuejs.org/api/application#create-app

示例

const {createApp} = Vue
// 通过createApp创建一个应用实例const app = createApp({  /* 选项 */})console.log(app)

分析打印结果, 可知

1应用实例是一个对象

2没有_开头的是公开属性/方法

3以_开头的是私有属性/方法(也就是Vue内部使用的)

component: 定义组件directive: 定义指令use: 定义插件---mount: 挂载unmount: 卸载

挂载

基本语法

一个应用实例必须在调用了 .mount() 方法后才会渲染

●传入参数: 可以是一个 CSS 选择器字符串(常用) 或者一个实际的 DOM 元素

●返回值:根组件实例

// 挂载应用, 返回根组件实例const instance = app.mount('#app')console.log(instance)

分析结果. 可知

1instance是一个Proxy对象

2在选项中定义的内容会被挂载到instance对象上

根组件实例

之前, 我们通过调试工具改变data中的定义的状态时, 视图会响应变化

如何通过代码实现同样的功能呢?

示例

setTimeout(() => {  instance.msg = 'world'}, 1000)

在data中定义的状态会被代理到instance上.

当改变代理对象的状态值时, 可以拦截到set操作, 从而自定义set操作.

在自定义的set操作中更新DOM

响应式原理初步

示例

<script>  const data = {    msg: 'hello',  }
  const pData = new Proxy(data, {    get: function (target, key) {      return target[key]    },    set: function (target, key, value) {      target[key] = value      console.log('更新DOM')      document.querySelector('#app').innerHTML = value    },  })
  setTimeout(() => {    pData.msg = 'world'  }, 1000)
  console.log(data, pData)</script>

●data模拟原始数据

●pData模拟代理数据

初次渲染时, 从data中获取数据, 后续修改代理对象的值, 会被拦截到, 并且更新DOM

注意点

1如果不调用.mount(), 不会解析模板

2mount()方法应该在应用配置的最后被调用

基本选项

状态

data选项

1data选项必须是一个函数(在介绍组件时再详细讨论)

2在函数中返回一个对象, 在对象中定义状态

3在data中定义的状态, 可以在模板中使用

示例

const app = createApp({  data() {    return {      msg: 'hello',    }  },})

思考

Q: data选项可以定义成箭头函数吗?

A: 可以, 箭头函数和普通函数的区别在于函数内部this的指向.

●普通函数中, this指向当前根组件实例

●箭头函数不绑定this, 指向window

如果需要使用箭头函数, 同时也需要能拿到当前实例. 可以通过如下方式

●data可以接受一个参数. 该参数指向当前根组件实例

不同类型类型说明

方法

methods选项

1语法: methods中定义方法

2作用: 修改data中的状态

示例

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <script src="../node_modules/vue/dist/vue.global.js"></script>  </head>  <body>    <div id="app">      <button v-on:click="increment">点击+1: {{count}}</button>    </div>
    <script>      const { createApp } = Vue
      const app = createApp({        data() {          return {            count: 0,          }        },        methods: {          increment() {            // 该函数中的this指向当前根组件实例instance            console.log(this)            this.count++          },        },      })      const instance = app.mount('#app')</script>  </body></html>

●methods中定义的方法要求是普通函数在普通函数中通过this拿到当前实例对象

小结

重要结论

●状态就是用来保存数据的

●方法就是用来修改数据的