Vue2学习笔记

Vue介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue快速入门

视频链接 el:挂载点 data:数据对象 Vue基础 本地应用 网络应用 综合应用

Vue基础

Vue实例的作用范围是什么呢？Vue会管理el选项命中的元素及其内部的后代元素。

是否可以使用其他的选择器？可以使用其他的选择器，但是建议使用ID选择器。

是否可以设置其他的dom元素呢？可以使用其他的双标签，不能使用HTML和BODY

data:数据对象 Vue中用到的数据定义在data中 data中可以写复杂类型的数据 渲染复杂类型数据时,遵守js的语法即可

Vue指令 内容绑定,事件绑定 v-text v-html v-on基础 显示切换,属性绑定 v-show v-if v-bind 列表循环,表单元素绑定v-for v-on补充 v-model

本地应用

v-text v-text指令的作用是:设置标签的内容(textContent) 默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容 内部支持写表达式

v-html v-html指令的作用是:设置元素的innerHTML 内容中有html结构会被解析为标签 v-text指令无论内容是什么,只会解析为文本 解析文本使用v-text,需要解析html结构使用v-html

v-on v-on指令的作用是:为元素绑定事件 事件名不需要写on 指令可以简写为@ 绑定的方法定义在methods属性中 方法内部通过this关键字可以访问定义在data中数据

创建Vue示例时: el(挂载点),data(数据),methods(方法) v-on指令的作用是绑定事件,简写为@ 方法中通过this,关键字获取data中的数据 v-text指令的作用是:设置元素的文本值,简写为{{}} v-html指令的作用是:设置元素的innerHTML

v-show v-show指令的作用是:根据真假切换元素的显示状态 原理是修改元素的display,实现显示隐藏 指令后面的内容,最终都会解析为布尔值 值为true元素显示,值为false元素隐藏 数据改变之后,对应元素的显示状态会同步更新

v-if v-if指令的作用是:根据表达式的真假切换元素的显示状态 本质是通过操纵dom元素来切换显示状态 表达式的值为true,元素存在于dom树中,为false,从dom树中移除 频繁的切换v-show,反之使用v-if,前者的切换消耗小

v-bind v-bind指令的作用是:为元素绑定属性 完整写法是 v-bind:属性名 简写的话可以直接省略v-bind,只保留 :属性名 需要动态的增删class建议使用对象的方式

图片切换 列表数据使用数组保存 v-bind指令可以设置元素属性,比如src v-show和v-if都可以切换元素的显示状态,频繁切换用v-show

v-for v-for指令的作用是:根据数据生成列表结构 数组经常和v-for结合使用 语法是( item,index ) in 数据 item 和 index 可以结合其他指令一起使用 数组长度的更新会同步到页面上,是响应式的

v-on补充 事件绑定的方法写成函数调用的形式，可以传入自定义参数 定义方法时需要定义形参来接收传入的实参 事件的后面跟上 .修饰符 可以对事件进行限制 .enter 可以限制触发的按键为回车 事件修饰符有多种

v-model v-model指令的作用是便捷的设置和获取表单元素的值 绑定的数据会和表单元素值相关联 绑定的数据←→表单元素的值

记事本 列表结构可以通过v-for指令结合数据生成 v-on结合事件修饰符可以对事件进行限制,比如.enter v-on在绑定事件时可以传递自定义参数 通过v-model可以快速的设置和获取表单元素的值 基于数据的开发方式

网络应用

axios功能强大的网络请求库 axios必须先导入才可以使用 使用get或post方法即可发送对应的请求 then方法中的回调函数会在请求成功或失败时触发 通过回调函数的形参可以获取响应内容,或错误信息

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios.get(地址).then(function(response){},function(err){})
axios.get(地址?查询字符串).then(function(response){},function(err){})
axios.get(地址?key=value&key2=value2).then(function(response){},function(err){})
axios.post(地址).then(function(response){},function(err){})
axios.post(地址,参数对象).then(function(response){},function(err){})
axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})

axios+vue axios回调函数中的this已经改变,无法访问到data中数据 把this保存起来,回调函数中直接使用保存的this即可 和本地应用的最大区别就是改变了数据来源

回车查询 应用的逻辑代码建议和页面分离，使用单独的js文件编写 axios回调函数中this指向改变了，需要额外的保存一份 服务器返回的数据比较复杂时，获取的时候需要注意层级结构

点击查询 自定义参数可以让代码的复用性更高 methods中定义的方法内部，可以通过this关键字点出其他的方法

歌曲搜索 服务器返回的数据比较复杂时，获取的时候需要注意层级结构 通过审查元素快速定位到需要操纵的元素

歌曲播放 歌曲id依赖歌曲搜索的结果，对于不用的数据也需要关注

歌曲封面 在vue中通过v-bind操纵属性 本地无法获取的数据，基本都会有对应的接口

歌曲评论 在vue中通过v-for生成列表

播放动画 audio标签的play事件会在音频播放的时候触发 audio标签的pause事件会在音频暂停的时候触发 通过对象的方式设置类名，类名生效与否取决于后面值的真假

综合应用

综合应用 不同的接口需要的数据是不同的，文档的阅读需要仔细 页面结构复杂之后，通过审查元素的方式去快速定位相关元素 响应式的数据都需要定义在data中定义

Vue项目搭建

安装Vue项目所需要文件

#安装NodeJS
官网下载
#全局安装Vue CLI
npm install -g @vue/cli
#安装element-ui
npm i element-ui -S
#安装axios
npm install axios

创建vue项目

• 命令行：直接通过命令行方式创建vue项目 vue create vue-project01
• 图形化界面：通过命令先进入到图形化界面，然后再进行vue工程的创建 vue ui

vue项目目录介绍

重点文件或目录介绍：

• node_modules：当前项目依赖的js包
• assets：静态资源存放目录
• components：公共组件存放目录
• App.vue：项目的主组件，页面的入口文件
• main.js：整个项目的入口文件
• package.json：项目的配置信息、依赖包管理
• vue.config.js：vue-cli配置文件

vue项目中src中的重点文件和目录

• api：存放封装了Ajax请求文件的目录
• components：公共组件存放目录
• views：存放视图组件的目录
• App.vue：项目的主组件，页面的入口文件
• main.ts：整个项目的入口文件
• router.ts：路由文件

首先在vue.config.js文件中修改运行端口

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    port: 7000
  }
})

在main.js文件中引入ElementUI

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(ElementUI);

修改App.vue文件,并且添加路由

<!-- 模版部分，由它生成HTML代码 -->
<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<!-- 控制模版的数据来源和行为 -->
<script>
export default {
  components: { },
  data () {
    return {
      message: "Hello Vue"
    }
  }
  
}
</script>


<!-- CSS样式 -->
<style>

</style>

在src\router\index.js文件中添加路由

const routes = [
  {
    path: '/emp',
    name: 'emp',
    component: () => import( '../views/tlias/EmpView.vue')
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import( '../views/tlias/DeptView.vue')
  },
  {
    path: '/',
    redirect: '/link'
  },
  {
    path: '/element',
    component: () => import( '../views/element/ElementView.vue')
  }
]

在src\views文件下新建文件夹element，并且在此目录下新建vue文件，列如ElementView.vue

路由 Vue-Router

路由组成：

• VueRouter：路由器，根据路由请求在路由视图中动态渲染对应的视图组件
• <router-link>：路由链接组件，浏览器会解析成<a>
• <router-view>：路由视图组件，用来展示与路由路径匹配的视图组件

状态管理 vuex

vuex 介绍

• vuex 是一个专为 Vue.js 应用程序开发的状态管理库
• vuex 可以在多个组件之间共享数据，并且共享的数据是响应式的，即数据的变更能及时渲染到模板
• vuex 采用集中式存储管理所有组件的状态

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

安装vuex：npm install vuex@next --save

vuex中的几个核心概念：

• state：状态对象，集中定义各个组件共享的数据
• mutations：类似于一个事件，用于修改共享数据，要求必须是同步函数
• actions：类似于mutation，可以包含异步操作，通过调用mutation来改变共享数据

注：mutations中定义的函数不能直接调用，必须通过状态对象的 commit 方法来调用

注：在actions中定义的函数可以声明context参数，通过此参数可以调用mutations中定义的函数

注：在actions中定义的函数不能直接调用，必须通过 this.$store.dispatch('函数名称') 这种方式调用

TypeScript

TypeScript 介绍

• TypeScript（简称：TS） 是微软推出的开源语言
• TypeScript 是 JavaScript 的超集（JS 有的 TS 都有）
• TypeScript = Type + JavaScript（在 JS 基础上增加了类型支持）
• TypeScript 文件扩展名为 ts
• TypeScript 可编译成标准的 JavaScript，并且在编译时进行类型检查

TypeScript 常用类型

TS中的常用类型如下：