vue基础

什么是vue

vue不是一门语言，只是通过JavaScript封装的一套用于构建用户界面的前端框架，有自己独特的API和开发模式，它最主要的使用场景是进行单页应用开发，能够在我们进行web单页开发的时候大大提升开发效率

什么是单页应用

多页面应用
单页面应用

vue 开发的就是单页应用

第一个vue案例-Helloworld

<!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>
  <!-- 1.引入vue.js，只要引入了vue.js，就会在全局挂载一个Vue构函数 -->
  <script src="./js/vue.js"></script>
</head>

<body>
  <!-- 2.添加一个模块结构：控制vue所影响的范围 -->
  <div id="app">
    <!-- 5.添加模板dom结构 -->
    <h1>{{msg}}</h1>
  </div>

  <script>
    // 3.创建一个vue实例,它可实现渲染（数据和模板的关联），所以你得告诉它你的模板和数据
    let VM = new Vue({
      // 4.添加配置
      // 4.1 el:指定模板，指定选择器，它就是后期vue实例所影响的范围
      el: '#app',
      // 4.2 data,data用于指定模板所对应的数据(业务处理数据)，它是一个对象
      data: {
         msg: 'hello world',
      }

    })
  </script>
</body>

</html>

什么是mvvm

m：model:数据
v:view:视图模板
vm:vue实例，可以实现数据和模板的关联(渲染)
特点
- 数据变化，模板视图自动刷新渲染
- 模板视图中的数据变化，数据也会自动的变化

在 MVVM 概念中：
Model 表示当前页面渲染时所依赖的数据源。
View 表示当前页面所渲染的 DOM 结构。
ViewModel 表示 vue 的实例，它是 MVVM 的核心。

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel，它把每个 HTML 页面都拆分成了这三个部分
当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构
当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中

html版本的全局组件的创建和使用

什么是组件

一个组件相当于是一个小模块
它是html、css与js的集合体，可以用于描述页面中的某个结构(模块)
组件是独立存在于我们的vue应用里面的，意味着它可以复用，不需要我们将结构代码或者是业务代码重复的编写，而且也很方便进行维护
在Vue中组件的出现是为了拆分Vue实例的代码量，让我们以不同的组件来划分不同的功能模块

创建vue的全局组件

语法
Vue.component(组件名称，组件的配置)
配置说明(这里只列举其中两个)：
- template:用于描述当前组件的结构
- data：用于定义当前组件的关联的数据
一个示例

Vue.component('mycom', {
      // 定义结构
      template: `<div>
                    <h1>我是组件的内容---{{msg}}</h1>
                 </div>  `,
      // 定义数据
      data() {
        return {
          msg: 'hello
        }
      }
}

template的作用及细节

作用：用于描述当前组件的结构，描述结构使用html
细节：template只能有一个根元素，意味着如果有多个元素，我们需要将其包裹到一个父容器中，这个父容器一般可以使用div
示例：

template: `
         <div>
             <h1>我是组件的内容---{{msg}}</h1>
             <button>点我啊</button>
         </div> 
        `,

data必须是一个函数

作用：用于定义当前组件所需要使用到的数据
细节：组件的data必须是一个函数，且返回一个对象,以便每个实例可以维护一份被返回对象的独立拷贝
示例：

data: function () {
        return {
            成员...
        }
    }

使用全局组件

使用方式：
- 组件是html,js,css的集合，类似于一个元素，我们可以将组件作为自定义元素来使用
- 你可以将组件进行任意次数的复用
示例：

<div id="app">
    <p>{{msg}}</p>
    <!-- 使用组件，就像使用一个标签一样，
    组件的名称就是这个标签名 -->
    <mycom></mycom>
  </div>

单文件组件的添加和渲染

几乎所有的vue项目开发都是使用单文件组件，也就是常说的组件化开发

组件化开发是什么

组件化开发指的是：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护
组件化开发的好处
- 提高了前端代码的复用性和灵活性
- 提升了开发效率和后期的可维护性
vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件
在vue中，扩展名为.vue的文件也称为单文件组件，意思是使用一个文件来描述一个组件

脚手架创建项目的过程和运行项目的方式

下载安装脚手架
全局安装脚手架
npm install -g @vue/cli
使用脚手架创建vue项目
打开终端或powershell
vue create 项目名称
运行脚手架项目
进行项目目录，打开终端或powershell
输入命令:
npm run serve
编译完成之后通过浏览器展示

单文件组件的创建

扩展名为.vue的文件就是单文件组件
单文件组件结构的基本说明
- template:用于描述组件的结构
- script:用于添加组件的功能(script行为)，使用export default暴露当前的组件实例
- style:用于设置组件的样式

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "hello word",
    };
  },
};
</script>
<style lang="less">
h1 {
  color: aqua;
}
</style>

细节说明

template模板结构只能有一个根元素（vue2.0中的规则）
export default用于暴露当前的组件实例，default表示默认就会暴露的成员
单文件组件的data必须是一个函数，且返回一个对象
样式可以使用预处理器，scoped可以用于定义局部作用域样式