vue 入门notes

文章目录

    • vue
    • 一、js基础
    • 二、封装缓存
    • 三、组件
      • 1、组件创建、引入、挂载、使用
      • 2、组件间的传值
        • - 父组件主动获取子组件的数据和方法（子组件给父组件传值）：
        • - 子组件主动获取父组件的数据和方法（父组件给子组件传值）：
        • -非父子组件间的传值
          • 广播方式
          • Vuex方式 -- 解决（不同页面）组件间数据共享
    • 四、生命周期(钩子)函数
    • 五、请求数据的三种方式
          • 1、vue-resource
          • 2、Axios
          • 3、fetch-jsonp
          • 4、tips
    • 六、路由（自动挂载组件以及加载数据）
          • 1、配置路由
          • 2、实际使用
            • 1、配置
            • 2、 ‘/’ 路由出口（放在根组件）：
            • 3、router-link 路由出口（类似a标签）：
            • 4、Js编程式路由（编程式导航）：由js代码主动发起路由
            • 5、vue路由的hash模式（默认，有#）和history模式（无#）
            • 6、路由的嵌套
          • 3、路由传参
          • 4、路由模块化

vue

  • 每一个组件都是一个页面(html/template+js+css/scss)，实现组件的完整性——组件化

  • main.js入口文件，在这里可以引入用到的node_modules包(模块)以及插件，即用即导入——模块化

  • App.vue 根组件(根页面)，

  • meta viewport 移动端窗口（视口），可以使用百度界面的meta标签的 viewport属性

  • 若在全局样式有 html{font-size:62.5%} —— 将字体变为0.625倍，为了适合移动端，则此时的 1rem 就 相当于电脑的 1px ！

  • 创建项目：
    在这里插入图片描述
    第一次安装脚手架：
    cnpm install -g vue-cli （安装vue cli2脚手架）
    vue init webpack demo1 （vue init webpack-simple demo1）
    npm run dev
    npm run build
    OR
    cnpm install -g @vue/cli （安装vue cli3脚手架）
    vue create demo1
    运行：npm run serve （运行速度比2快了许多）
    编译：npm run build

  • vue cli3 提供了GUI界面来创建（管理）项目：
    vue ui
    然后进入locallhost:8080

一、js基础

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

二、封装缓存

1、直接使用：
在这里插入图片描述
2、封装后使用：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、组件

组件挂载。页面由组件组成。路由：动态挂载组件。创建组件，开头大写，组件=template+js+scss，所有内容要被根节点包含起来，组件必须包含根元素（一般是div）。自定义标签名不能重复。

1、组件创建、引入、挂载、使用

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

2、组件间的传值

组件间的传值，可以是变量（地址），也可以是对象（函数–地址），还可以是整个组件（类–地址）！

- 父组件主动获取子组件的数据和方法（子组件给父组件传值）：

父组件主动获取子组件的数据和方法：
在这里插入图片描述

- 子组件主动获取父组件的数据和方法（父组件给子组件传值）：

子组件主动获取父组件的数据和方法:
在这里插入图片描述

父组件给子组件传值：
在这里插入图片描述
例子： 无论是传变量、函数还是组件，父组件传值方式都是动态属性绑定，子组件接收方式有两种，一种props数组形式接收——props:[]，一种props对象形式接收，对象形式接收可以验证父组件传值的合法性！
父组件传变量：
在这里插入图片描述
子组件props数组接收变量：
在这里插入图片描述

子组件props对象接收变量并验证，验证不通过则会出现警告：

在这里插入图片描述

-非父子组件间的传值

广播方式

在这里插入图片描述
例子：
在这里插入图片描述
在这里插入图片描述

Vuex方式 – 解决（不同页面）组件间数据共享

Vuex是vue官方提供的状态管理插件，解决（不同页面）组件间同一状态的数据共享问题和组件的数据持久化。
也可以通过localstorage（缓存）实现，也可以使用SessionStorage实现！
注:小项目中，能不用Vuex就不用。

1、数据共享
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

2、数据持久化
直观体现：在控制台的network中，多次请求数据时，如果用缓存则会多次请求，若用Vuex则可以达到一次请求，多次使用（并且动态改变、共享）。

四、生命周期(钩子)函数

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

五、请求数据的三种方式

在这里插入图片描述

1、vue-resource

在这里插入图片描述
在这里插入图片描述

2、Axios

在这里插入图片描述

在这里插入图片描述

3、fetch-jsonp


在这里插入图片描述

4、tips
  • Axios不支持jsonp请求。而fetch-jsonp可以支持，可以在vue、react中使用，fetch-jsonp用法和Axios很像。
  • vue-resource是vue的官方插件，在man.js引入并使用后，全局组件都可以直接使用，这是一个被推荐的重要原因；而Axios则是在哪里需要在哪引入，Axios可以在vue、react中使用。
  • 要用箭头函数替代function，避免指向被改变。
  • 安装依赖包时一定要加 --save，这样会在package.json中声明版本，下次install才能被找到。
  • vue-resource、Axios、fetch-jsonp都可以在git上找到源码和安装使用方法

六、路由（自动挂载组件以及加载数据）

1、配置路由

在这里插入图片描述
补充：第五步：设置路由出口（即在哪个作用域下渲染这些路由下的组件）
在这里插入图片描述

2、实际使用
1、配置

在这里插入图片描述
在这里插入图片描述

2、 ‘/’ 路由出口（放在根组件）：

在这里插入图片描述

3、router-link 路由出口（类似a标签）：

在这里插入图片描述

4、Js编程式路由（编程式导航）：由js代码主动发起路由

其实 点击 router-link组件，内部调用的也是 router.push()方法
在这里插入图片描述
在这里插入图片描述

5、vue路由的hash模式（默认，有#）和history模式（无#）

在这里插入图片描述

6、路由的嵌套

在这里插入图片描述

3、路由传参

get传参
在这里插入图片描述

post传参

4、路由模块化

路由模块化 —— 单独开一个js文件放路由配置，然后export暴露，在main.js中引入并挂载
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

spring集成 JedisCluster 连接 redis3.0 集群

spring集成 JedisCluster 连接 redis3.0 集群

2019独角兽企业重金招聘Python工程师标准>>> spring集成 JedisCluster 连接 redis3.0 集群 博客分类&#xff1a; 缓存 spring 客户端采用最新的jedis 2.7 1. maven依赖&#xff1a; <dependency> <groupId>redis.clients</groupId> <artifact…
阅读更多...
火狐浏览器复制网页文字_从Firefox中的网页链接的多种“复制”格式中选择

火狐浏览器复制网页文字_从Firefox中的网页链接的多种“复制”格式中选择

火狐浏览器复制网页文字Tired of having to copy, paste, and then format links for use in your blogs, e-mails, or documents? Then see how easy it is to choose a click-and-go format that will save you a lot of time and effort with the CoLT extension for Firef…
阅读更多...
vscode配置、使用git

vscode配置、使用git

文章目录一、下载、配置git二、vscode配置并使用git三、记住密码一、下载、配置git 1、git-win-x64点击下载后安装直接安装&#xff08;建议复制链接用迅雷等下载器下载&#xff0c;浏览器太慢&#xff0c;记住安装位置&#xff09;。 2、配置git环境变量&#xff1a; 右键 此…
阅读更多...
BTrace功能

BTrace功能

2019独角兽企业重金招聘Python工程师标准>>> BTrace功能 一、背景 在生产环境中可能经常遇到各种问题&#xff0c;定位问题需要获取程序运行时的数据信息&#xff0c;如方法参数、返回值、全局变量、堆栈信息等。为了获取这些数据信息&#xff0c;我们可以…
阅读更多...
.NET(c#) 移动APP开发平台 - Smobiler(1)

.NET(c#) 移动APP开发平台 - Smobiler(1)

原文&#xff1a;https://www.cnblogs.com/oudi/p/8288617.html 如果说基于.net的移动开发平台&#xff0c;目前比较流行的可能是xamarin了&#xff0c;不过除了这个&#xff0c;还有一个比xamarin更好用的国内的.net移动开发平台&#xff0c;smobiler&#xff0c;不用学习另外…
阅读更多...
如何在Vizio电视上禁用运动平滑

如何在Vizio电视上禁用运动平滑

Vizio维齐奥New Vizio TVs use motion smoothing to make the content you watch appear smoother. This looks good for some content, like sports, but can ruin the feel of movies and TV shows. 新的Vizio电视使用运动平滑来使您观看的内容显得更平滑。 这对于某些内容(例…
阅读更多...
无服务器架构 - 从使用场景分析其6大特性

无服务器架构 - 从使用场景分析其6大特性

2019独角兽企业重金招聘Python工程师标准>>> 无服务器架构 - 从使用场景分析其6大特性 博客分类&#xff1a; 架构 首先我应该提到&#xff0c;“无服务器”技术肯定有服务器涉及。 我只是使用这个术语来描述这种方法和技术&#xff0c;它将任务处理和调度抽象为与…
阅读更多...
Enable Authentication on MongoDB

Enable Authentication on MongoDB

1、Connect to the server using the mongo shell mongo mongodb://localhost:270172、Create the user administrator Change to the admin database: use admindb.createUser({user: "Admin",pwd: "Admin123",roles: [ { role: "userAdminAnyDataba…
阅读更多...
windows驱动程序编写_如何在Windows中回滚驱动程序

windows驱动程序编写_如何在Windows中回滚驱动程序

windows驱动程序编写Updating a driver on your PC doesn’t always work out well. Sometimes, they introduce bugs or simply don’t run as well as the version they replaced. Luckily, Windows makes it easy to roll back to a previous driver in Windows 10. Here’s…
阅读更多...
在Windows 7中的Windows Media Player 12中快速预览歌曲

在Windows 7中的Windows Media Player 12中快速预览歌曲

Do you ever wish you could quickly preview a song without having to play it? Today we look at a quick and easy way to do that in Windows Media Player 12. 您是否曾经希望无需播放就可以快速预览歌曲&#xff1f; 今天&#xff0c;我们探讨一种在Windows Media Play…
阅读更多...
Vue.js中的8种组件间的通信方式；3个组件实例是前6种通信的实例，组件直接复制粘贴即可看到运行结果

Vue.js中的8种组件间的通信方式；3个组件实例是前6种通信的实例，组件直接复制粘贴即可看到运行结果

文章目录一、$children / $parent二、props / $emit三、eventBus四、ref五、provide / reject六、$attrs / $listeners七、localStorage / sessionStorage八、Vuex实例以element ui为例。例子从上往下逐渐变复杂&#xff08;后面例子没有删前面的无用代码&#xff0c;有时间重新…
阅读更多...
不可思议的混合模式 background-blend-mode

不可思议的混合模式 background-blend-mode

本文接前文&#xff1a;不可思议的混合模式 mix-blend-mode 。由于 mix-blend-mode 这个属性的强大&#xff0c;很多应用场景和动效的制作不断完善和被发掘出来&#xff0c;遂另起一文继续介绍一些使用 mix-blend-mode 制作的酷炫动画。 CSS3 新增了一个很有意思的属性 -- mix-…
阅读更多...
如何更改从Outlook发送的电子邮件中的“答复”地址

如何更改从Outlook发送的电子邮件中的“答复”地址

If you’re sending an email on behalf of someone else, you might want people to reply to that person instead of you. Microsoft Outlook gives you the option to choose a different default Reply address to cover this situation. 如果您要代表其他人发送电子邮件&…
阅读更多...
在Windows 7或Vista资源管理器中禁用缩略图预览

在Windows 7或Vista资源管理器中禁用缩略图预览

If you want to speed up browsing around in explorer, you might think about disabling thumbnail previews in folders. 如果要加快在资源管理器中的浏览速度&#xff0c;可以考虑禁用文件夹中的缩略图预览。 Note that this works in Windows 7 or Vista 请注意&#xf…
阅读更多...
mysql 表数据转储_在MySQL中仅将表结构转储到文件中

mysql 表数据转储_在MySQL中仅将表结构转储到文件中

mysql 表数据转储For this exercise, we will use the mysqldump utility the same as if we were backing up the entire database. 在本练习中&#xff0c;我们将像备份整个数据库一样使用mysqldump实用程序。 Syntax: 句法&#xff1a; mysqldump -d -h localhost -u root -…
阅读更多...
lenos快速开发脚手架

lenos快速开发脚手架

2019独角兽企业重金招聘Python工程师标准>>> lenos一款快速开发模块化脚手架&#xff0c; lenos(p为spring boot版本扩展名)一款快速开发模块化脚手架&#xff0c;采用spring bootspringSpringMvcmybatisshiroswaggerehcachequartzfreemarkerlayui技术开发&#xff…
阅读更多...
火狐ok谷歌适配_“ OK Google”在锁定手机上的安全性越来越高

火狐ok谷歌适配_“ OK Google”在锁定手机上的安全性越来越高

火狐ok谷歌适配If you use “OK Google” to invoke the Assistant on your phone, things are about to change. Google is removing the “Unlock with Voice Match” feature, so the Assistant is going to get a lot more secure. 如果您使用“确定Google”在手机上调用助…
阅读更多...
angular ng-zorro 用组件自身方的法来重置表单校验

angular ng-zorro 用组件自身方的法来重置表单校验

官网文档的API并没有提供对应的重置表单校验函数の说明&#xff0c;在控制台打印this.validateForm&#xff08;校验表单对象&#xff09; 往往我们只关注亮色函数、属性&#xff0c;而这次重置函数藏在__prop__中&#xff01; 激动万分的使用 this.validateForm.reset()&…
阅读更多...
Django用户注册、登录、注销（一）

Django用户注册、登录、注销（一）

使用Django自带的用户认证系统编写认证、登录、注销基本功能 功能&#xff1a; 使用Django默认的User表 1&#xff09;注册 判断是否已存在此用户&#xff0c;存在的话提示报错“用户已存在”&#xff1b; 判断两次输入的密码是否一致&#xff0c;不一致的话提示报错“密码不一…
阅读更多...
如何在PowerPoint中自动调整图片大小

如何在PowerPoint中自动调整图片大小

PowerPoint can automatically resize an image to fit a shape. You can also resize multiple images already in your presentation to all be the same size. Here’s how it works. PowerPoint可以自动调整图像大小以适合形状。 您还可以将演示文稿中已有的多个图像调整为…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023