<返回更多

Vue 技术栈(全家桶)

2021-08-26    清桥呆马
加入收藏

尚硅谷前端研究院

第 1 章:Vue 核心

介绍与描述

Vue 的特点

与其它 JS 框架的关联

Vue 周边库

……

初识 Vue

Vue 技术栈(全家桶)

 

效果

Vue 技术栈(全家桶)

 

html 中包含了一些JS 语法代码,语法分为两种,分别为:

插值语法

指令语法

数据绑定

效果

Vue 技术栈(全家桶)

 

双向数据绑定

MVVM 模型

  1. M:模型(Model) :对应data 中的数据
  2. V:视图(View) :模板
  3. VM:视图模型(ViewModel) : Vue 实例对象

事件处理

效果

Vue 技术栈(全家桶)

 

事件修饰符

按键修饰符

计算属性与监视

效果

Vue 技术栈(全家桶)

 

监视属性-watch

Vue 技术栈(全家桶)

 

class 与 style 绑定

理解

class 绑定

style 绑定

条件渲染

条件渲染指令

比较v-if 与v-show

列表渲染

效果

Vue 技术栈(全家桶)

 


Vue 技术栈(全家桶)

 


Vue 技术栈(全家桶)

 

遍历数组: v-for / index 遍历对象: v-for / key

收集表单数据

Vue 技术栈(全家桶)

 

效果

Vue 技术栈(全家桶)

 

  1. 功能: 对要显示的数据进行特定格式化后再显示
  2. 注意: 并没有改变原本的数据, 是产生新的对应的数据

内置指令与自定义指令

常用内置指令

  1. v-text : 更新元素的 textContent
  2. v-html : 更新元素的 innerHTML
  3. v-if : 如果为true, 当前标签才会输出到页面
  4. v-else: 如果为false, 当前标签才会输出到页面
  5. v-show : 通过控制display 样式来控制显示/隐藏
  6. v-for : 遍历数组/对象
  7. v-on : 绑定事件监听, 一般简写为@
  8. v-bind : 绑定解析表达式, 可以省略v-bind
  9. v-model : 双向数据绑定
  10. v-cloak : 防止闪现, 与css 配合: [v-cloak] { display: none }

自定义指令

注册全局指令

Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase()

})

注册局部指令

directives : {

'my-directive' : { bind (el, binding) {

el.innerHTML = binding.value.toupperCase()

}

}

}

1) 使用指令

v-my-directive='xxx'

Vue 实例生命周期

效果

Vue 技术栈(全家桶)

 

Vue 技术栈(全家桶)

 

  1. 初始化显示

beforeCreate()

  1. 更新状态: this.xxx = value

beforeUpdate()

  1. 销毁vue 实例: vm.$destory()

beforeDestory()

第 2 章:Vue 组件化编程

模块与组件、模块化与组件化

模块

组件

模块化

当应用中的js 都以模块来编写的, 那这个应用就是一个模块化的应用。

组件化

当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用,。

非单文件组件

单文件组件

一个.vue 文件的组成(3 个部分)

模板页面

<template> 页面模板

</template>

JS 模块对象

<script> export default {

data() {return {}}, methods: {},

computed: {}, components: {}

}

</script>

样式

<style> 样式定义

</style>

基本使用

  1. 引入组件
  2. 映射成标签
  3. 使用组件标签

第 3 章:使用 Vue 脚手架

初始化脚手架

说明

  1. Vue 脚手架是Vue 官方提供的标准化开发工具(开发平台)。
  2. 最新的版本是 4.x。
  3. 文档: https://cli.vuejs.org/zh/。

具体步骤

第一步(仅第一次执行):全局安装@vue/cli。

npm install -g @vue/cli

第二步:切换到你要创建项目的目录,然后使用命令创建项目

vue create xxxx 第三步:启动项目

npm run serve

备注:

1.

如出现下载缓慢请配置 npm 淘宝镜像:

npm

config

set

registry

 

https://registry.npm.taobao.org

 

2. Vue 脚手架隐藏了所有webpack 相关的配置,若想查看具体的webpakc 配置, 请执行:vue inspect > output.js

模板项目的结构

├── node_modules

├── public

│ ├── favicon.ico: 页签图标

│ └── index.html: 主页面

├── src

│ ├── assets: 存放静态资源

│ │ └── logo.png

│ │── component: 存放组件

│ │ └── HelloWorld.vue

│ │── App.vue: 汇总所有组件

│ │── main.js: 入口文件

├── .gitignore: git 版本管制忽略的配置

├── babel.config.js: babel 的配置文件

├── package.json: 应用包配置文件

├── README.md: 应用描述文件

├── package-lock.json:包版本控制文件

ref

  1. 作用:用于给节点打标识
  2. 读取方式:this.$refs.xxxxxx

props

读取方式一: 只指定名称

props: ['name', 'age', 'setName']

读取方式二: 指定名称和类型

props: {

name: String, age: Number,

setNmae: Function

}

读取方式三: 指定名称/类型/必要性/默认值

props: {

name: {type: String, required: true, default:xxx},

}

混入

  1. Vue 插件是一个包含install 方法的对象
  2. 通过install 方法给Vue 或Vue 实例添加方法, 定义全局指令等

插件

  1. Vue 插件是一个包含install 方法的对象
  2. 通过install 方法给Vue 或Vue 实例添加方法, 定义全局指令等

Todo-list 案例

Vue 技术栈(全家桶)

 

组件化编码流程(通用)

  1. 实现静态组件:抽取组件,使用组件实现静态页面效果
  2. 展示动态数据:

Vue 中的自定义事件

绑定事件监听

<Header @addTodo="addTodo"/>

或者

<Header ref="header"/> this.$refs.header.$on('addTodo'this.addTodo)

触发事件

this.$emit('addTodo', todo)

  1. Vue 原型对象上包含事件处理的方法
  1. 所有组件实例对象的原型对象的原型对象就是Vue 的原型对象
  1. 全局事件总线

指定事件总线对象

new Vue({

beforeCreate () { // 尽量早的执行挂载全局事件总线对象的操作

Vue.prototype.$globalEventBus this

},

}).$mount('#root')

this.$globalEventBus.$on('deleteTodo'this.deleteTodo)

this.$globalEventBus.$emit('deleteTodo'this.index)

this.$globalEventBus.$off('deleteTodo')

  1. 这种方式的思想与全局事件总线很相似
  2. 它包含以下操作:
  1. 需要引入一个消息订阅与发布的第三方实现库: PubSubJS

使用PubSubJS

  1. 在线文档: https://github.com/mroderick/PubSubJS
  2. 下载: npm install -S pubsub-js
  3. 相关语法

过度与动画

效果

Vue 技术栈(全家桶)

 

Vue 技术栈(全家桶)

 

基本过渡动画的编码

  1. 在目标元素外包裹<transition name="xxx">
  2. 定义class 样式

第 4 章:Vue 中的 ajax

解决开发环境 Ajax 跨域问题

使用代理服务器

github 用户搜索案例

Vue 技术栈(全家桶)

 

https://api.github.com/search/users?q=xxx

vue 项目中常用的 2 个 Ajax 库

axios

通用的Ajax 请求库, 官方推荐,使用广泛

vue-resource

vue 插件库, vue1.x 使用广泛,官方已不维护。

slot 插槽

效果

效果一(不使用插槽):

Vue 技术栈(全家桶)

 

效果二(默认插槽):

Vue 技术栈(全家桶)

 

效果三(具名插槽):

Vue 技术栈(全家桶)

 

效果三(作用域插槽):

Vue 技术栈(全家桶)

 

理解

父组件向子组件传递带数据的标签,当一个组件有不确定的结构时, 就需要使用slot 技术,注意:插槽内容是在父组件中编译后, 再传递给子组件的。

分类

  1. 默认插槽
  2. 命名插槽
  3. 作用域插槽

第 5 章:vuex

理解 vuex

vuex 是什么

  1. 概念:专门在Vue 中实现集中式状态(数据)管理的一个Vue 插件,对vue 应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。
  2. Github 地址: https://github.com/vuejs/vuex

什么时候使用 Vuex

案例

Vue 技术栈(全家桶)

 

Vue 技术栈(全家桶)

 

Vue 技术栈(全家桶)

 

actions

在组件中使用: $store.dispatch('对应的action 回调名') 触发

Vue 技术栈(全家桶)

 

mutations

在action 中使用:commit('对应的 mutations 方法名') 触发

Vue 技术栈(全家桶)

 

getters

Vue 技术栈(全家桶)

 

modules

第 6 章:vue-router

相关理解

vue-router 的理解

vue 的一个插件库,专门用来实现SPA 应用

对SPA 应用的理解

  1. 单页Web 应用(single page web application,SPA)。
  2. 整个应用只有一个完整的页面
  3. 点击页面中的导航链接不会刷新页面,只会做页面的局部更新。
  4. 数据需要通过ajax 请求获取。

路由的理解

什么是路由?

路由分类

基本路由

效果

Vue 技术栈(全家桶)

 

  1. 定义路由组件
  2. 注册路由
  3. 使用路由

嵌套(多级)路由

Vue 技术栈(全家桶)

 

Vue 技术栈(全家桶)

 

Vue 技术栈(全家桶)

 

相关 API:

  1. this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
  2. this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
  3. this.$router.back(): 请求(返回)上一个记录路由
  4. this.$router.go(-1): 请求(返回)上一个记录路由
  5. this.$router.go(1): 请求下一个记录路由

第 7 章:Vue UI 组件库

移动端常用UI 组件库

  1. Vant https://youzan.github.io/vant
  2. Cube UI https://didi.github.io/cube-ui
  3. Mint UI http://mint-ui.github.io

PC 端常用UI 组件库

  1. Element UI https://element.eleme.cn
  2. IView UI https://www.iviewui.com
声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>