- 博客(25)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Vue学习30_Vue中使用axios
Vue中使用axiosaxios的功能特点：-在浏览器中发送XmlHttpRequests请求；-在node.js中发送http请求；-支持Promise API-拦截请求和相应；-转换请求和相应数据；axios的安装：npm install axios --saveaxios的基本使用：-导入 import axios from ’axios-使用：axios({ url:'http://123.207.32.32:8000/home/multidata', methods:'ge
2020-10-27 09:22:45
294
原创 Vue学习29_Vue中Devtools的安装以及vuex的几个核心概念
Vue状态管理的属性在使用vue时，vue为我们提供了一个浏览器插件Devtools，用于跟踪vue的操作，为我们使用vue进行开发时提供了极大的便利，安装方式有两种：一种是在谷歌浏览器的网上商店进行安装，点击浏览器右上角的菜单，更多工具，拓展程序，进去里面进行安装，我在安装时遇到了一个问题就是谷歌的网上商店进不去，所以这里采用另一种安装方式：附安装教程：https://blog.csdn.net/yizufengdou/article/details/103985709在最后一步拖拽时可能会提无法使
2020-10-26 12:36:00
280
原创 Vue学习28_Vue的状态管理vuex
Vue的状态管理vuexVuex：Vuex是一个专门为vue.js应用程序开发的状态管理模式，状态管理可以理解成把需要多个组件共享的变量全部存储在一个对象里；什么样的变量需要存放在vuex：比如说用户的登陆状态、用户名称、头像、地理位置；比如说商品的收藏，购物车的物品；vuex的基本使用：单页面状态管理：state中的数据在view中显示，view中的数据又可以执行一些actions，actions的执行又可以改变state中的数据，这样叫做单页面状态管理。示例代码：<templat
2020-10-25 18:00:07
121
原创 Vue学习24_Vue中ES6的模块化实现
Vue中ES6的模块化实现模块化导出：示例代码：let name = '小明'let age = 18let flag = trueif (flag) { console.log(name);}function sum(num1, num2) { return num1 + num2}export { flag, sum}// 导出函数export function result(num1, num2) { return num1 *
2020-10-25 09:33:58
309
原创 Vue学习23_Vue插槽slot的使用
Vue插槽slot的使用在组件开发过程中，我们有时候需要对组件预留出一个位置，根据需要往其中插入某些内容，倘若将组件写死，内容固定，不利用我们对组件的重复使用，Vue中引入了插槽的概念，使得我们能够在组建开发中，为组件预留出位置，在需要使用时根据需求插入不同的组件。插槽的基本使用示例代码： <div id="app"> <div> <cpn> <button>按钮<
2020-10-24 17:36:21
329
原创 Vue学习22_Vue父子组件的数据访问
Vue父子组件的数据访问父组件访问子组件：$ childern/$ refs示例代码： <div id="app"> <mycpn ref="ref1"></mycpn> <mycpn ref="ref2"></mycpn> <mycpn ref="ref3"></mycpn> <button type="button" @click="b
2020-10-24 17:22:13
134
原创 Vue学习21_Vue父子组件的数据传递案例（v-model双向绑定父子组件数据）
Vue父子组件的数据传递案例（v-model双向绑定父子组件数据）示例代码： <div id="app"> <mynpn :number1="num1" :number2="num2" @num1change="num1change" @num2change="num2change" /> </div> <template id="npn"> <div> <p
2020-10-24 17:12:35
172
原创 Vue学习20_Vue父子组件的数据传递
Vue父子组件的数据传递父组件向子组件传递数据(props):在组件开发中，我们有时候需要在子组件中访问父组件的数据，因此则需要用到props属性进行父组件向子组件传递数据：**示例代码：**其中需要在props对象中对父组件传递的数据进行限制，比如限定类型，限定默认值等，在使用父组件数据时，需要利用v-bind动态绑定props的值，令其等于父组件的数据名称，以此来达到使用父组件数据的目的 <div id="app"> <mycpn></myc
2020-10-24 17:09:55
148
原创 Vue学习19_Vue组件数据的存放及为什么组件的data必须是一个函数
Vue组件数据的存放组件中的数据存放于data(){}函数中，并且必须是一个函数！我们都知道，在Vue实例中，有一个属性data用于存放数据，我们可以将所需要的数据存放在data属性中，在实例中，data是一个属性，它可以是一个对象，对象中存放着我们所需要的数据，但是为什么在组件中，数据存放的data必须是一个函数呢？示例代码： <div id="app"> <!-- 使用组件 --> <mycpn></mycpn&
2020-10-24 16:53:36
375
原创 Vue学习18_Vue组件的语法糖与组件的分离写法
Vue组件的语法糖与组件的分离写法Vue组件的语法糖：在Vue中，传统的组件使用需要分三步进行，分别是创建组件构造器，注册组件与使用组件，但是如果使用一个组件都要使用这三部分，并且在Vue的组件开发中，使用组件是经常需要做的事情，每一次都使用这三部，未免有些太复杂，因此Vue提供了组件的语法糖写法，简化了使用组件的步骤。在这里，分别使用组件的语法糖注册全局组件与局部组件： <div id="app"> <cpn1></cpn1>
2020-10-24 16:44:51
156
原创 Vue学习17_Vue的全局组件与局部组件/父组件与子组件
Vue的全局组件与局部组件在Vue的组件中，我们有时候希望一个组件能够在全局中进行使用，而有的组件则希望在特定的实例中才能进行使用，因此Vue为我们提供了一种全局组件与局部组件的概念：全局组件与局部组件：示例代码： <div id="app"> <my_cpn></my_cpn> <my-cpn></my-cpn> </div> <script>
2020-10-24 16:25:53
204
原创 Vue学习16_Vue组件的基础使用步骤
Vue组件的基础使用步骤使用Vue组件大致可以分为三个步骤创建组件构造器：示例代码： // 创建组件构造器对象 const myComponent = Vue.extend({ // ES6语法``定义字符串，允许换行 template: ` <div> <p>头部导航</p>
2020-10-24 16:08:18
207
原创 Vue学习15_Vue中v-model的使用
Vue中v-model的使用在Vue中，我们有时候需要对数据进行双向绑定，所谓的双向绑定的意思就是在Vue的data中定义的变量的值，当改变data中变量的值时，通过Mustache语法获取的值也发生改变，当童Mustache获取的值发生改变时，data的值也随之改变v-model的基本使用:示例代码：将data中的变量与输入框的值进行双向绑定： <div id="app"> <input type="text" v-model="message">
2020-10-24 15:41:01
572
原创 Vue学习14_Vue高阶函数的使用
Vue高阶函数的使用filter函数：filter函数的回调函数必须是一个boolean值，当返回一个true值时，函数内部会自动将这次回调的n加入到新的数组中，当返回一个false值时，回调函数会将这一次的n过滤掉，个人理解为filter函数相当于一个过滤器，只有满足条件的n才会被留下示例代码：从数组中筛选小于100的数，保留到新的数组中 <script> // 定义一个数组 const str = [12, 20, 100, 23, 67, 4
2020-10-24 14:40:29
1858
原创 Vue学习13_Vue实现简易的图书购物车
Vue实现简单的图书商城利用vue实现简单的图书商城系统，包括点击对应的书本数量，数量增加，点击减少按钮，数量减少，加个也随着书本数量的变化而变化，当点击移除按钮时，书本从购物车中移除，当所有书本都被移除时，显示购物车为空信息提示：HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="
2020-10-23 17:39:42
2452
1
原创 Vue学习12_Vue中数组的常用方法
数组的常用方法push方法：push方法可以往数组最后面追加元素，既可以追加一个元素，也可以同时追加多个元素示例代码：使用push可以分别在数组最后追加元素，追加的元素可以是一个也可以是多个<div id="app"> <ul> <li v-for="letter in letters"> {{letter}} </li> <
2020-10-23 17:16:45
790
2
原创 Vue学习11_Vue的遍历循环
Vue的遍历循环v-for遍历数组：我们有时候需要对数组进行遍历，在vue中，v-for为我们提供了一种遍历数组的方式：我们既可以只遍历数组的值，也可以通过v-for遍历数组的下标值：示例代码： <div id="app"> <!-- 遍历未使用索引值 --> <p v-for="book in books">{{book}}</p> <!-- 遍历中使用索引值 -->
2020-10-23 16:22:21
671
3
原创 Vue学习10_Vue实现简易的切换登录方式
Vue实现简易的切换登录方式示例代码： <div id="app"> <!-- 这里涉及到Vue的虚拟Dom，在输入框输入的内容点击切换时，输入框内容还在，要想不复用，可以加个key，key一样复用，不一样不复用 --> <!-- 为v-if设置flag值，当其为true时显示账号登陆 --> <span v-if="flag"> <label for="username
2020-10-22 16:25:01
852
原创 Vue学习09_Vue的条件判断
Vue的条件判断v-if的基本使用： 有时候我们需要控制标签内容的显隐，在满足某些条件时，显示标签，某些时候又要隐藏标签，因此就可以引入v-if，为其设置一个boolean值，以此来控制标签的显隐：示例代码： <div id="app"> <h3 v-if="isShow">{{message}}</h3> </div> <script> const app = new Vue({
2020-10-22 16:06:34
348
原创 Vue学习09_v-on的修饰符
v-on的修饰符stop：stop修饰符的使用是为了解决事件冒泡问题：示例代码：在div块级标签内定义一个按钮，并且为div和按钮都添加了点击的事件监听： <!-- 事件冒泡，当按钮被点击时，div也会被点击 --> <div @click="divClick"> div内容 <button @click="btnClick">按钮</button> <
2020-10-22 15:41:36
185
原创 Vue学习08_事件监听及参数传递
事件监听在vue中，我们有时候需要对浏览器事件进行事件监听，比如当鼠标点击某一个按钮时，触发某种事件，这时，Vue为我们提供了方便快捷的方式v-on：v-on的基本使用示例代码：定义两个按钮，点击对应的按钮，对数据进行相应的增加和减少： <div id="app"> <h3>{{counter}}</h3> <button v-on:click="add">+</button> &l
2020-10-22 15:04:49
903
原创 阶段性知识点总结，往后将细写
一段时间以来的学习内容这一段时间以来，学习的东西太多来不及整理，先给出目录，后续将会对这一阶段所学内容进行整理：阶段学习目录表截图：ES6的学习：包括箭头函数的使用，块级作用域以及对象的增强写法vue的基础操作，包括v-for,v-on,v-once,v-cloak利用v-bind动态绑定属性vue的计算属性vue的事件监听：vue的条件判断：vue的循环遍历：利用之前所学知识点进行了一个图书购物车的小案例实现：vue高阶函数的使用：filter、map，reduce
2020-10-20 16:58:55
141
闽江学院计算机与控制工程学院linux实验报告
2020-11-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人