vue笔记-基础篇-初识vue

1.Vue概述

首先，vue是一个javascript框架，它的中文官方网站为https://cn.vuejs.org/，读音类似于view，特点是渐进式、简单易用、灵活、体积小
在官网首页已经说明概括了使用vue的好处

2.安装

vue有多种安装方式，本质都是下载vue源码打包后的js文件，后期需要工程化的时候可以使用npm的方式安装，前期学习只需要直接下载js文件，并在html中引入即可使用vue实例。
直接下载js文件有两种类型，一种为生产版本、一种为开发版本，具体的区别可以参考官方文档。
vue的开发版本下载链接为https://cn.vuejs.org/js/vue.js，此版本为2.6.14

3.hello world

首先下载vue.js文件，将其放入文件夹中

在新创建的html中引入该js文件

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

在script标签中创建vue实例

<script>
    let app = new Vue({
        el: '#app',
        data: {
            msg: 'hello world!'
        }
    })
</script>

在body中创建vue实例需要挂载的元素，并使用vue实例中定义好的data变量

    <div id="app">{{msg}}</div>

访问页面即可看到vue中定义的msg变量已经被打印到屏幕上了

按f12打开控制台，输入app即可看到html中定义的app变量内容，它代表了vue实例，当我们通过控制台为vue实例中的变量赋值时，页面上的值也会发生变化
这个效果表明vue是响应式的

完整的代码

    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>


    <div id="app">{{msg}}</div>


<script>
    let app = new Vue({
        el: '#app',
        data: {
            msg: 'hello world!'
        }
    })
</script>

4.插值表达式

在上例中直接在div中写入了{{msg}}，通过vue就可以将此值替换为实例中变量的值，这个过程就称为插值，花括号被称为Mustache语法
花括号中使用vue实例的变量时不需要加this，里面可以使用变量、计算属性、函数等等

  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../vue.js"></script>


<div id="app">
  {{msg}}
  {{hello()}}
</div>


<script>
  let app = new Vue({
    el: '#app',
    data: {
      msg: 'hello world!'
    },
    methods: {
      hello(){
        console.log("methods hello")
        console.log(this.msg)
      }
    }
  })
</script>

除了使用这种语法外，还可以通过指令的方式进行插值

5.指令与options

vue允许在html标签中写入一些不属于html标签的属性，假设在div中添加aaa属性，则vue实例在解析时会知道添加了此标签的地方在插值时需要添加时间戳
在此例中aaa就代表了vue中的指令，vue内置了一些固定名称的指令，如果这些指令不能够满足要求的话，用户还可以自定义指令
具体内置了哪些指令，在官网的api中已经写的很清楚了https://cn.vuejs.org/v2/api/

这其中的v-text、v-html等指令也可以实现插值的功能
接着看下vue实例是怎么创建出来的

let app = new Vue({
    el: '#app',
    data: {
      msg: 'hello world!'
    },
    methods: {
      hello(){
        console.log("methods hello")
        console.log(this.msg)
      }
    }
  })

在脚本中通过new Vue的方式创建了vue实例，在创建时给它传入了一些配置属性，这个配置属性对象就称为options

  const options = {
    el: '#app',
    data: {
      msg: 'hello world!'
    },
    methods: {
      hello(){
        console.log("methods hello")
        console.log(this.msg)
      }
    }
  }
  let app = new Vue(options)

具体这个options中可以配置哪些kv呢，在文档中已经明确的指明了


在文档中所有以选项开头的都可以写在options中，举个例子，比如生命周期中的created选项，它的类型是function，因此在options中就可以这样配置

const options = {
    el: '#app',
    data: {
      msg: 'hello world!'
    },
    methods: {
      hello(){
        console.log("methods hello")
        console.log(this.msg)
      }
    },
    created: function(){
      console.log("created")
    }
  }

当页面加载时就会调用created这个函数

6.生命周期

一个对象从创建到销毁中间发生的步骤就称为生命周期，在通过new关键字创建vue实例时，它的生命周期就已经开始了，vue在内部提供了多个钩子告诉开发者在特定的生命周期环节需要做什么事，比如在刚创建好vue对象时打印一条日志，当vue对象挂载到页面dom中时再打印一条日志等等
在代码中的实现方式就是调用options中写好的指定名称的函数

此图标明了vue实例从创建到销毁时会经历的所有过程，其中红色框代表了在特定你环节下可以执行的钩子函数，这些函数名称固定，可以写到options中，当vue实例执行到该步骤时就会调用options中的指定方法