wanglingli95的博客

一、什么是Vuex？概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，定义一系列规范来对 vue 中多个组件的共享状态进行使用和操作数据，也是一种组件间通信的方式，且适用于任意组件间通信。二、Vuex的核心概念state：存放着需要共享的数据。 mutations：存放着对state的数据进行修改的函数，你不能直接改变 store 中的状态，改变 store 中数据的唯一途径就是提交 (commit) mutations中的函数对数据进行修改。三、Vuex的具体使用方法

需求：1.点击按钮实现天气的切换； 2.用watch进行监视天气产生变化的数据； 实现代码（helloworld.vue实现代码）：<template> <!-- 准备好一个容器--> <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">切换天气</button> </div><

一、使用场景在微信支付场景中，需要调用二维码插件来生成二维码。首先梳理一下微信支付的流程： 在确定使用微信支付的时候，会把当前订单的订单号发给后台开发人员； 后台开发人员利用订单号去数据库中查询订单信息，比如商品名称、订单金额等，还有一些微信官方要求的信息，整合这些信息之后后台开发人员就会将这些数据发送给微信官方，微信官方接收到请求后，返回一个携带了支付必要信息的链接给后台开发人员； 后台开发人员将微信官方提供的字符链接返回给前端开发人员，利用二维码插件将这个链接生成一个二维码展示到页面中，用户使

一、百度地图插件1.1 百度地图基本使用关于百度地图的基本使用在官方网站中有详细的介绍，可以参考以下链接：百度地图开发平台https://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B51.2 百度地图的使用步骤1.2.1 申请密钥百度地图的使用需要一个专属的密钥（ak）作为路径，具体申请流程如图：在申请ak之前，首先要注册百度的账号，然后要申请成为百度开发者。完成以上两步之后才能去获取ak密钥。申请注册的步骤很简单，只需

一、需求说明：实现页面基本布局。 单击“+”按钮时，对应商品的数量增加，当单击“-”按钮时，对应商品的数量减少，当数量减少到1时，“-”按钮无法再进行操作。 每个对应商品后面都有一个“移除”按钮，当单击“移除”按钮时，当前商品列表项会删除，页面效果图如下： 二、实现过程：HelloWorld.vue代码示例：<template> <div> <table id="mytable"> <thead> .

一、计算属性1.1 什么是计算属性首先通过一个示例来介绍计算属性，需求是把一个字符串倒序显示，具体代码如示例1所示：<template> <div class="hello"> <h1>{{msg}}转为{{msg.split('').reverse().join('')}}</h1> </div></template><script>export default { name: 'H

一、使用组件的复用完成如下分类页面效果：利用父组件给子组件Category.vue传递数据完成不同内容的复用：父组件App.vue示例代码：<template> <div class="container"> <!-- 步骤三：调用子组件 --> <Category title="美食" :listData="foods"></Category> <Category title="游戏" :listDa

需求说明：利用组件的复用完成美食、游戏、电影的分类布局。 使用具名slot完成分类组件的不同内容显示。实现过程：1.创建一个分类子组件（Category.vue)，在子组件中定义具名插槽：<template> <div class="category"> <h3>{{title}}分类</h3> <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） --> <slot name="center"&

本章作业——利用父子组件的传值完成数量控制器的功能需求：单击“增加1”按钮的时候，对应数量会增加1。 单击“减少1”按钮的时候，对应数量会减少1。项目运行的页面效果如图所示：实现过程：父组件示例代码（App.vue)：<template> <div id="app"> <p>{{total}}</p> <!-- 第三步：调用组件 --> <Counter @father_add="

上机训练——移动端标题栏需求说明完成移动端标题子组件，在子组件中接收标题和两张修饰图片； 在父组件中调用子组件，并传递给子组件对应的内容； 图片以import的方式进行导入，页面效果如图所示。实现过程：父组件示例代码（App.vue)：<template> <div id="app"> <TitleItem :list="listdata"></TitleItem> </div></templat

需求说明：完成网易健康页面的基本布局。 在生命周期函数created()中使用Axios请求“网易健康”数据，数据为本地模拟的数据，详见health.json文件。health.json文件：链接：https://pan.baidu.com/s/1_f3rKXSEse7QoJ_FZtfGuA提取码：2jf5遍历渲染显示“网易健康”接口数据到页面中，页面效果如图。实现过程：在项目下安装axios：npm i axios将health.json文件放到static文件夹下。

一、组件的概念及复用1.1 为什么要使用组件组件（component）是vue.js最核心的功能，也是整个框架最精彩的地方，当然也最难掌握。组件是可复用的 Vue 实例, 把一些公共的模块抽取出来，然后写成单独的的工具组件或者页面，在需要的页面中就直接引入即可那么我们可以将其抽出为一个组件进行复用。例如页面头部、侧边、内容区，尾部，上传图片，等多个页面要用到一样的就可以做成组件，提高了代码的复用率。1.2 组件的复用1.2.1 使用props传递数据的基本用法组件不仅仅是把模板的内容

需求：使用Axios的get方法调用本地模拟的评论数据 将获得的评论数据显示在页面上，模拟的评论数据详见health.json文件。health.json文件：链接：https://pan.baidu.com/s/1_f3rKXSEse7QoJ_FZtfGuA提取码：2jf5实现过程：将health.json文件放到static文件夹下。 在main.js中引入axios，并将axios挂载到vue原型。import axios from 'axios'// 只能把axio

实现新闻管理案例开发文档：获取数据接口地址：/api/get/news接口参数：pageindex：页码pagesize:每页的条数请求类型：get返回的数据：{ status:200, message:"获取新闻列表成功", list:[ { "id":1, "title":"解忧杂货店", "content":"《解忧杂货店》是日本作家东野圭吾

一、条件渲染指令条件渲染指令主要包括：v-if、v-else、v-show指令。1.1 V-if 指令语法：v-fi=' 表达式 '根据表达式结果的真假来确定是否显示当前元素，如果表达式为true，显示该元素；如果表达式为false，则隐藏该元素。示例代码(HelloWord.vue)：<template> <div class="hello"> <h1 v-if="isShow">表达式的值为真就能显示</h1> &

一、安装并导入mock.js1.1 项目文件下安装mockjscnpm i mockjs1.2 项目中新建mock文件 // 引入mock模块import Mock from 'mockjs'1.3 将mock文件在main.js中导入import Vue from 'vue'import App FROM './App.vue'import './mock/index.js'二、Mock.js语法2.1 生成字符串 生成指定次数字符串 im.

任务1：什么是前端路由1.1 vue-router 的理解vue-router是vue .js官方提供的一套专用的路由插件库，专门用来实现 SPA 应用。1.2 对 SPA 应用的理解单页 Web 应用（single page web application，SPA）。 整个应用只有一个完整的页面。 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。 数据需要通过 ajax 请求获取。1.3 什么是路由一个路由就是一组映射关系（key - value），key 为路径, v

一、Vue.js是什么？目前典型的前端三大框架：Angular.js、React.js、Vue.js。其中，Vue.js框架更容易上手，灵活度更高，在企业级开发中受到前端开发人员的青睐。Vue.js的官方文档中是这样介绍的：简单小巧的核心，渐进式的技术栈，足以应付任何规模的应用。Vue.js的官方文档介绍详情：介绍 — Vue.js (vuejs.org)https://cn.vuejs.org/v2/guide/index.html1.1 创建一个 Vue 应用（HelloWorld 例子

发生情景：当我安装好Vue-cli脚手架后，在Visual Studio Code终端运行“vue init webpack ww”进行创建名为ww的项目，结果报错：解决方案：1.以管理员身份打开Visual Studio Code：2.在终端执行两条命令：get-ExecutionPolicy返回结果会是 Restrictedset-ExecutionPolicy RemoteSigned整个过程如下： 成功创建ww项目！...

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。1.ECMAScript 和 JavaScript 的关系ECMAScript 和 JavaScript 到底是什么关系？1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种..

本章简介 目前典型的前端三大框架：Angular.js、React.js、Vue.js。其中，Vue.js框架更容易上手，灵活度更高，在企业级开发中受到前端开发人员的青睐，所以本书的大觅项目采用的vue.js框架完成。任务1 大觅项目业务场景1.1大觅项目业务分析大觅项目的业务类型属于票务销售，首先分析一下大觅项目的业务，如下图：1.2大觅项目技术栈选型 本项目选择的核心技术是前端组件化框架Vue.js,因此确定了Vue.js+Webpack这套技术栈...