Vue2基础学习

vue基础学习

  • Vue基础指令
    • v-show 和 v-if
    • v-on指令
    • v-bind指令
    • v-bind操作class
    • v-bind 操作style
    • v-for 指令练习:图书管理案例
    • v-model
    • v-model原理
  • 指令修饰符
    • v-model指令修饰符
    • @click.stop-》阻止冒泡
    • 按键修饰符
    • 阻止默认行为
  • 计算属性
    • 计算属性简写
    • computed计算属性VS方法methods
    • 计算属性完整写法
  • watch 侦听器(监视器)
    • watch 侦听器简写
    • watch 侦听器完整写法
  • Vue生命周期
    • Vue生命周期钩子函数
  • Vue-cli
    • 使用步骤
    • 项目目录介绍
    • 项目支持Less
    • 普通组件的注册
      • 局部注册
      • 全局注册
    • 组件的样式冲突 scoped
    • data是一个函数
    • 组件通信
      • 父->子通信
      • 子 -> 父通信
      • 什么是prop
    • EventBus非父子通信(了解)
    • res 和 refs
    • Vue异步更新和$nextTick
    • slot插槽
    • ViewRouter
      • 查询参数传参
      • 动态路由传参
    • 首页重定向和404
    • 点击按钮跳转
  • Vuex

Vue基础指令

v-show 和 v-if

在这里插入图片描述

应用场景:
这里的请登录注册,对于已经登录的用户是不需要展示的;而购物车,当鼠标移入的时候会显示,鼠标移出隐藏…
在这里插入图片描述

v-on指令

以下演示了如何定义方法,如何获取data中的变量
在这里插入图片描述
以下演示函数传参
在这里插入图片描述

v-bind指令

作用:动态设置html标签属性->src、title、url,可使用简写,:src:url
在这里插入图片描述
练习:
在这里插入图片描述

v-bind操作class

在这里插入图片描述

v-bind 操作style

适应场景:某个具体属性的动态设置
在这里插入图片描述

v-for 指令练习:图书管理案例

在这里插入图片描述

v-model

作用:给表单元素使用,双向数据绑定,可以快速获取或设置表单元素内容
在这里插入图片描述

v-model原理

在这里插入图片描述

指令修饰符

在这里插入图片描述

v-model指令修饰符

在这里插入图片描述

@click.stop-》阻止冒泡

在这里插入图片描述

按键修饰符

在这里插入图片描述

阻止默认行为

在这里插入图片描述

计算属性

计算属性简写

基于现有的数据,计算出来的新属性。依赖的数据变化,自动重新计算。
在这里插入图片描述

computed计算属性VS方法methods

在这里插入图片描述

计算属性完整写法

计算属性默认的简写,只能读取访问,不能"修改"。如果要"修改"→需要写计算属性的完整写法。
在这里插入图片描述
在这里插入图片描述

watch 侦听器(监视器)

watch 侦听器简写

作用:监视数据变化,执行一些 业务逻辑 或 异步操作
在这里插入图片描述

watch 侦听器完整写法

完整写法>添加额外配置项
(1) deep: true 对复杂类型深度监视
(2) immediate: true 初始化立刻执行一次handler方法
具体查看视频:https://www.bilibili.com/video/BV1HV4y1a7n4?p=33&spm_id_from=pageDriver&vd_source=c3fc4867486b99c0b85501121f575279

Vue生命周期

Vue生命周期钩子函数

Vue生命周期:一个Vue实例从 创建到销毁的整个过程生命周期四个阶段: 创建挂载更新销毁
Vue生命周期过程中,会自动运行一些函数,被称为[生命周期钩子],让开发者可以在[特定阶段] 运行自己的代码
在这里插入图片描述

Vue-cli

使用步骤

1.全局安装(一次): yarn global add @vue/clinpm i @vue/cli -g
2.查看 Vue 版本:vue --version
3.创建项目架子:vue create project-name (项目名-不能用中文)
4.启动项目: yarn servenpm run serve (找package.json)

项目目录介绍

在这里插入图片描述

项目支持Less

如下图,要想在代码中写less样式,得安装相关依赖:

  • 给style加上 lang="less"
  • 安装依赖 yarn add less less-loader -D
    在这里插入图片描述

普通组件的注册

局部注册

局部注册:只能在注册的组件内部使用

  • 创建vue组件(比如在components目录下)
  • 在使用的组件内导入并注册
<template><div class="app"><MyHeader></MyHeader><MyMain></MyMain><MyFoot></MyFoot></div>
</template><script>
import MyHeader from './components/MyHeader.vue'
import MyMain from './components/MyMain.vue'
import MyFoot from './components/MyFoot.vue'
export default {components: { // 局部注册MyHeader: MyHeader,MyMain: MyMain,MyFoot: MyFoot}
}
</script>
<style lang="less">
.app {width: 600px;height: 600px;background-color: #87ceeb;
}
</style>
<template><div class="header">我是头头</div>
</template>
<script>
export default {}
</script><style>
.header {height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: pink;
}
</style>

其它两个组件就不粘贴了,一样的写法…

全局注册

  • 创建vue组件(比如在components目录下)
  • main.js进行全局注册
    比如说上面那个例子,header-main-footer结构,我想在三层结构里都加个button,就可以把button定义全局组件,使用的时候
import Vue from 'vue'
import App from './App.vue'
// 引入
import MyButton from './components/MyButton'Vue.config.productionTip = false// 进行全局注册,在所有的组件范围内都可以用
Vue.component('MyButton', MyButton) // (组件名,组件对象)new Vue({render: h => h(App),
}).$mount('#app')

在其它组件中直接使用就行了,也无须import引入,后续button有变化,只需要改全局组件即可
在这里插入图片描述

组件的样式冲突 scoped

默认情况:写在组件中的样式会全局生效, 因此很容易造成多个组件之间的样式冲突问题
1、**全局样式**:默认组件中的样式会作用到全局
2、**局部样式**:可以给组件加上 scoped 属性,可以让样式只作用于当前组件

data是一个函数

一个组件的 data 选项必须是一个函数。 保证每个组件实例,都有独立的一份数据对象
在这里插入图片描述

组件通信

组件通信,就是指 组件与组件 之间的数据传递

  • 组件的数据是独立的,无法直接访问其他组件的数据。
  • 想用其他组件的数据->组件通信
    组件关系分类: 父子关系 、非父子关系
    在这里插入图片描述

父->子通信

在这里插入图片描述
代码如下:

<template><div style="border:3px solid #000; margin:10px">我是父组件<Son :title="myTitle"></Son></div>
</template><script>
import Son from './components/Son.vue'
export default {components: {Son: Son},data() {return {myTitle: "你好呀我是"}}
}
</script>
<style >
</style>
<template><div style="border:3px solid #000; margin:10px">我是Son组件{{title}}</div></template><script>
export default {// 通过 props 接收props: ['title']
}
</script><style scope>
</style>

子 -> 父通信

在这里插入图片描述

什么是prop

在这里插入图片描述
相关视频:https://www.bilibili.com/video/BV1HV4y1a7n4?p=51&spm_id_from=pageDriver&vd_source=c3fc4867486b99c0b85501121f575279

EventBus非父子通信(了解)

在这里插入图片描述
EventBus.js

import Vue from 'vue'
const Bus = new Vue()
export default Bus

res 和 refs

在这里插入图片描述

Vue异步更新和$nextTick

在这里插入图片描述

slot插槽

适应场景:组件结构一样,内容不一样
在这里插入图片描述
插槽视频:https://www.bilibili.com/video/BV1HV4y1a7n4?p=66&spm_id_from=pageDriver&vd_source=c3fc4867486b99c0b85501121f575279

ViewRouter

视频地址:https://www.bilibili.com/video/BV1HV4y1a7n4?p=73&spm_id_from=pageDriver&vd_source=c3fc4867486b99c0b85501121f575279

查询参数传参

在这里插入图片描述

动态路由传参

在这里插入图片描述

首页重定向和404

在这里插入图片描述

点击按钮跳转

在这里插入图片描述
如果跳转的时候传参呢
在这里插入图片描述
总结
在这里插入图片描述

Vuex


store定义
在这里插入图片描述

在这里插入图片描述
修改state中的数据
在这里插入图片描述
调用mutation传参,如果有多个,包装成json对象即可
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/69721.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTML 标签讲解

HTML 标签讲解 HTML 语言结构根元素元数据元素主体根元素大纲元素文本内容语义化内联文本图像与多媒体编辑标识table表格内容表单内容table表单 HTML 语言结构 Markup &#xff08;标记、标签&#xff09;用来容纳和描述内容 严格意义上&#xff0c;标签是指开始标签&#xf…

优化爬虫效率:利用HTTP代理进行并发请求

网络爬虫作为一种自动化数据采集工具&#xff0c;广泛应用于数据挖掘、信息监测等领域。然而&#xff0c;随着互联网的发展和网站的增多&#xff0c;单个爬虫往往无法满足大规模数据采集的需求。为了提高爬虫的效率和性能&#xff0c;我们需要寻找优化方法。本文将介绍一种利用…

企业无线局域网部署最佳实践

文章目录 企业无线局域网部署最佳实践引言1. 无线网规划和设计a. 选择合适的频宽b. 网络规划工具c. 考虑物理环境d. 用户密度和需求e. 未来扩展f. 安全性和策略g. 测试和验证2. 无线局域网容量2.1 用户和设备预测2.2 应用流量分析2.3 带宽管理2.4 无线技术选择2.5 网络健康检查…

鳄鱼指标和ADX组合后,发现买卖信号真清晰

通过之前的文章分享&#xff0c;anzo capital昂首资本相信各位投资者对ADX已经有了深刻的理解&#xff0c;今天在后台有小伙伴分享了鳄鱼指标&#xff0c;没想到的是&#xff0c;鳄鱼指标和ADX组合后&#xff0c;买卖信号变的更清晰了&#xff0c;今天就分享一下。 鳄鱼指标是一…

uni-app 之 vue语法

uni-app 之 vue语法 image.png --- v-html 字符 --- image.png <template><view><view>{{title}}</view>--- v-html 字符 ---<view>{{title2}}</view><view v-html"title2"></view><view>{{arr}}</view&g…

垃圾回收 - 标记压缩算法

压缩算法是将标记清除算法与复制算法相结合的产物。 1、什么是标记压缩算法 标记压缩算法是由标记阶段和压缩阶段构成。 首先&#xff0c;这里的标记阶段和标记清除算法时提到的标记阶段完全一样。 接下来我们要搜索数次堆来进行压缩。压缩阶段通过数次搜索堆来重新填充活动对…

51单片机简易时钟闹钟八位数码管显示仿真( proteus仿真+程序+原理图+报告+讲解视频)

51单片机简易时钟闹钟八位数码管显示仿真( proteus仿真程序原理图报告讲解视频&#xff09; 1.主要功能&#xff1a;2.仿真3. 程序代码4. 原理图元器件清单 5. 设计报告6. 设计资料内容清单&&下载链接资料下载链接&#xff08;可点击&#xff09;&#xff1a; 51单片机…

腾讯云网站备案详细流程_审核时间说明

腾讯云网站备案流程先填写基础信息、主体信息和网站信息&#xff0c;然后提交备案后等待腾讯云初审&#xff0c;初审通过后进行短信核验&#xff0c;最后等待各省管局审核&#xff0c;前面腾讯云初审时间1到2天左右&#xff0c;最长时间是等待管局审核时间&#xff0c;网站备案…

选择最适合您的Bug管理软件:市场比较与推荐

“Bug管理软件哪家好&#xff1f;市场上有许多优秀的Bug管理系统品牌如&#xff1a;Zoho Projects、JIRA、Redmine、Bugzilla、MantisBT。” 一款高效的Bug管理系统可以帮助团队更有效地发现、记录和解决软件中的问题&#xff0c;从而提高产品质量和用户满意度。本文将为您介绍…

Java 复习笔记 - 面向对象篇

文章目录 一&#xff0c;面向对象概述二&#xff0c;类和对象&#xff08;一&#xff09;类和对象的概述&#xff08;二&#xff09;定义类的补充注意事项 三&#xff0c;封装四&#xff0c;就近原则和this关键字&#xff08;一&#xff09;就近原则&#xff08;二&#xff09;…

自学Python01-创建文件写入内容

此处省去安装和前言&#xff0c;需要两个东西 一个去下载安装python官方库 Welcome to Python.org 一个是编译器pycharm PyCharm 安装教程&#xff08;Windows&#xff09; | 菜鸟教程 PyCharm: the Python IDE for Professional Developers by JetBrains 第一节 练习print…

记录--移动端的双击事件好不好用?

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 前言 2023年了&#xff0c;我不允许还有人不会自己实现移动端的双击事件。 过来&#xff0c;看这里&#xff0c;不足 50 行的代码实现的双击事件。 听笔者娓娓道来。 dblclick js原生有个dblclick双击…

UDP的可靠性传输

UDP系列文章目录 第一章 UDP的可靠性传输-理论篇&#xff08;一&#xff09; 第二章 UDP的可靠性传输-理论篇&#xff08;二&#xff09; 文章目录 UDP系列文章目录前言1.TCP 和UDP格式对比2.UDP分片原理3.UDP 传输层应该注意问题4.MTU5.UDP 分片机制设计重点 一、ARQ协议什么…

【PowerQuery】PowerQuery导入JSON数据

Json数据是目前使用的最为频繁和广泛的一种数据交换格式,JSON的全称为JavaScript Object Notation。Json 主要用于在互联网的消息的数据交换信息传递,他的格式与XML有什么区别呢?为什么不用XML,用Json有啥好处呢?我们接下来讨论下Json相比XML的优势: XML传递的数据过多服…

手写RPC框架--2.介绍Zookeeper

RPC框架-Gitee代码(麻烦点个Starred, 支持一下吧) RPC框架-GitHub代码(麻烦点个Starred, 支持一下吧) 该项目的RPC通信将采用NettyZookeeper&#xff0c;所以会在前两章介绍使用方法 介绍Zookeeper Zookeepera.概述1) 数据模型2) Watcher机制 b.安装和基本操作1) Java操作zooke…

16字节协议的串口通信

1.协议要求 协议为帧传输&#xff0c;一共16字节。主要是2字节的固定帧头 EB 90&#xff0c;2字节的帧计数(用来计数发出的帧),10字节的数据和2字节的校验位 帧头&#xff1a;2字节&#xff0c;固定值 8’HEB、8’H90 帧计数&#xff1a;2字节&#xff0c;用来说明发出去帧是…

Netty服务端启动的整体流程-基于源码4.1.96Final分析

Netty采用的是主从Reactor多线程的模型&#xff0c;参考Scalable IO in Java&#xff0c;但netty的subReactor为一个组 一、从FileServer服务器示例入手 public final class FileServer {static final boolean SSL System.getProperty("ssl") ! null;// Use the …

【笔记】软件测试的艺术

软件测试的心理学和经济学 测试是为发现错误而执行程序的过程&#xff0c;所以它是一个破坏性的过程&#xff0c;测试是一个“施虐”的过程。 软件测试的10大原则 1、测试用例需要对预期输出的结果有明确的定义 做这件事的前提是能够提前知晓需求和效果图&#xff0c;如果不…

Linux 操作系统实战视频课 - GPIO 基础介绍

文章目录 一、GPIO 概念说明二、视频讲解沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇我们将讲解 GPIO 。 一、GPIO 概念说明 ARM 平台中的 GPIO(通用输入/输出)是用于与外部设备进行数字输入和输出通信的重要硬件接口。ARM 平台的 GPIO 特性可以根据具体的芯…

C++11新特性① | C++11 常用关键字实战详解

目录 1、引言 2、C11 新增关键字详解 2.1、auto 2.2、override 2.3、final 2.4、nullptr 2.5、使用delete阻止拷贝类对象 2.6、decltype 2.7、noexcept 2.8、constexpr 2.9、static_assert VC常用功能开发汇总&#xff08;专栏文章列表&#xff0c;欢迎订阅&#xf…