VVVZCS的博客

如果使用html5 history模式可以让我们的url中没有#，使得网页url看起来更加正常（某些软件情景中只能使用不带#的url）但是history模式下URL的跳转会从浏览器的历史记录中加载，而不会重新加载页面，如果有一个Vue动态参数路由组件中使用了beforeRouteUpdate方法，同时开启了history模式，就会造成beforeRouteUpdate没有效果（现阶段）...

由于本台电脑暂时还没有配置php服务器，所以只给出方法，暂时不做实际操作1，配置json数据文件到php服务器2，更改config文件夹中的index.js的proxyTable下面是原来使用本地json文件的代码：如果你配置了php服务器，请更改成3，修改package.json文件在你键入npm run dev 启动服务之后，其实是由webpack-dev-se...

假如我们在一个页面中设置了window.addEventListener('scroll', this.handleScroll)，那么当我们使用路由跳转到其他页面的时候，可能就会仍停留在原来的位置，什么意思呢，就是我们在A页面中滑动到比如距离Top500px的距离，这个时候在A页面的500px地方有一个路由可以跳转到B页面，B页面设置了window.addEventListener('scr...

keep-aliv能够帮助我们实现页面ajax请求只被请求一次，在你跳转页面的时候，也不会被请求多次，可是比如在旅游页面中，当我们在城市选择页面重新选择城市，这个时候就需要重新发送一个ajax请求，来显示对应城市的推荐内容解决方法1：使keep-alive新增的一个生命周期函数activated（实际上还有一个对应的deactivated函数），这个函数和mounted相比，mounted...

1，在码云上新建分支2，输入命令3，添加轮播图插件 在github上搜索vue-awesome-swiper使用2.6.7版本，稳定一点4，安装swiper5，使用方法入口文件main.js导入：模板：6，在你编写完代码，并且测试正常先进行推送前3个是把index-swiper推送到线上切换到master...

mapState映射可以将State中的数据yourName映射到本地this.yourName，使用之前要将相应的文件引入state：页面组件：原本使用state中数据的方法：使用mapState之后：除了使用这种数组的方式，mapState里面也可以放一个对象意思是将公用数据中的city映射到此组件中的计算属性currentCity中...

这个是由于，Bscroll默认点击事件关闭的this.scroll = new Bscroll(this.$refs.wrapper, {click: true})开启一下就好，后面还可以添加其他事件

先看两个子组件现在想要实现一个按钮每一次点击之后，child-two和child-one交替出现那么现在我们也可以通过动态组件来实现这个功能发现效果完全一样，这是因为component是Vue里面的动态标签，它能够自动根据is里的内容，选择不同的子组件------------------------------------------------------...

现在页面显示是这样的：我现在想要实现一个功能，要循环显示一个列表那么现在child组件可能在很多个地方被调用，我希望在不同地方调用child的时候，这个列表到底怎么循环，列表的样式不是我这个child组件所控制的，而是外部告诉我们组件的每一项该怎么样渲染。这样写的意思是，child组件做一个列表循环，但是至于渲染成什么样子，child并不关心具体要怎么样显示，由...

、页面展示是这样的：那么什么时候会用到slot呢，假设有个需求，除了template里的内容外，还要展示一些内容，但是这些内容不是由子组件所决定的，而是父组件决定的，我们把content传递给子组件，当你接收了content之后，就可以在子组件中用插值表达式使用了但是发现p标签出来了，我们可以给插值表达式套一个div，然后让div里面的v-html = this.con...

1 rem = html font-size = 50px在reset.css文件中假如一个二倍图的div高度是86px那么对应的我们应该填43px移动端一般用rem表示宽高所以这里我们应该填写0.86rem如果一个一倍图的高度是23px那么我们应该填写0.46rem同理3倍图...

我们在之前的项目中，使用的都是本地的JSON数据文件，那么在实际项目开发过程中，肯定是不能用本地的JSON文件的，所以我们需要把JSON文件放在服务器上，我们使用的是Apache2.4本地服务器1，下载压缩包http://httpd.apache.org/download.cgi2，下载完之后，解压到自己定义的目录D:\DevelopTools\Apache然后更改...

1，在项目文件夹下运行npm run build这行代码会把我们所编写的代码更改成浏览器能够识别的代码，同时也是压缩过后的代码2，我们会发现在原来的项目文件夹中多出了一个dist文件夹，这个文件夹就是我们要放到线上的内容我们把这个dist文件夹给到后端的工作人员，后端的工作人员，后端的工作人员就会把这个文件挂载到后端服务器上现在我们把dist文件夹里的内容放在htdocs文件夹...

store->index.jsexport default new Vuex.Store({  state,  mutations,  actions,  modules: {    user  }}) user.jsconst state = {  userName: 'ReSword'}const mutations = {  //}const a...

1，动态路由2,静态路由props对象方法3，静态路由函数方式

记录一下大佬的话

parent.vue<template> <div> <roles :roleData="item" v-for="item of roleData"></roles> </div></template><script>import Roles

1，安装2，结构要求：外部一层，里面一层，再下去才是内容3，使用方法：ref可以供我们获得dom元素

假如我们页面中有许多个组件组成，每个组件都有自己的json数据，如果每个组件都单独请求一个ajax，那么整个页面就会发送许多个ajax请求，这样的页面运行肯定是很慢的那么怎么样做才合理呢？我们希望整个首页只请求一个json数据，也就是只发送一个ajax请求对于类似上面这样情况，我们把ajax请求放在Home.vue中，然后通过子父组件传值，把每个子组件需要的数据都传给子组件使用...

1，定义变量，并使用有些时候某些颜色代码在整个页面中会多次使用，那么将其提取出来，声明成一个变量，在css中使用变量作为颜色，如果以后有什么需求要改动，那么直接改动变量声明的颜色代码就可以2，路径改写对于某些路径下的文件，可能会有多个组件调用，那么写起来会很麻烦，在Vue中@代表src目录，那么我们能不能自己定义一个路径呢？在build目录下的weback.base...

1，首先创建个项目2，去iconfont官网找对应的图标3，添加至项目4，下载到本地5，解压6，选择文件并导入在项目代码中的asset文件夹放置：放置模板：7，在main.js中导入8，使用方法：class中有iconfont，图标代码在iconfont里的项目中：...

对Vue项目进行npm run build生成的dist文件夹中index.html是我们前端代码的入口文件css.map用来调试我们的css代码在线上有用的是.css文件，当你在用webpack打包的时候，他会把css样式打包到这里js.map都是辅助文件manifest.js是webpack打包生成的配置文件vendor.js是各个页面，各个组件公用的代码...

1，在index.html文件中的name为viewport的meta的content中增加minimum-scale=1.0,maximum-scale=1.0,user-scalable=no用户通过手指放大缩小是无效的，并且页面比例始终是1:12，引入asset.css因为对于不同的手机端，有些默认的css样式不是统一的，所以通过导入一个asset.css来使所有的样式统一...

我们可以把网页拆分成很多个部分首先是一个大的网页，然后上面是一个组件，左边也是一个组件，但是又可以拆分成2个组件，右边也是一个组件，但是也可以细分为3个组件那么现在我想要父子组件传值可以通过：父组件-子组件：通过props传值子组件-父组件：通过事件触发传值那么现在我想要第一层的组件和第三层的组件传值，如果用父子组件传值方法，那么就只能一层一层传，如果我现在想要右边的第三层...

先写一个事件绑定这段代码点击Child是没有作用的这是因为当我给一个组件绑定一个事件的时候，<child @click="handleClick"></child>，这个实际上绑定的是一个自定义的事件当你鼠标点击的时候，触发的并不是这个click事件当我点击的时候，就能够触发childclick事件这是因为当我在div里面绑定事件<di...

先来看把计算属性写成函数的样式：现在改成对象的样式，并且使用get和set这两种方式显示的结果是一样的这样子也能够改变页面上的值但是当我想对fullName进行赋值的时候这是不行的系统会说fullName没有setter函数下面我使用set方法页面上也会跟着变动，这是因为当你对fullName赋值时，传入的值被保存到value中，...

1，计算属性模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：<div id="example"> {{ message.split('').reverse().join('') }}</div>在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量messag...

1，插值表达式{{xxxxx}}2，v-text让元素的inner-text内容变为和v-text值相对应的data数据3，v-html和v-text同理，只不过能显示html语法（和inner-html作用相同）上面3个模板语法中也可以添加变量如v-html：...

之前使用的都是CSS动画，现在使用JS动画来实现点击出现Hello World，再点击消失的动画下面是基础代码：先把change点击一下，让Hello World消失再点击一下，发现beforeEnter会出来，也就是说当元素从隐藏到显示的时候，即将显示的那一瞬间，beforeEnter就会执行实际上before-enter还可以传入一个值，这个值指的是transi...

先简单讲下Vue实例：每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的当创建一个Vue实例时，你可以传入一个选项对象。一个Vue应用由一个通过new Vue创建的根Vue实例，以及可选的嵌套的，可复用的组件树组成。所有的Vue组件都是Vue实例，并且接受相同的选项对象（一些根实例特有的选项除外）实例生命周期钩子每个Vue实例在被创建时都要经过一系列的初始化过程...

先简单的用两个animate特效<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Hello World</title> <script src="vue.js" ty

我们先来实现一个点击后能够放大和缩小的动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Hello World</title> <script src="vue.js&quo

先来看一下简单的切换显示按钮我现在希望在Hello world能有一个渐隐渐现的效果那么就需要在div外层包裹一个transition标签当然只是这样是无法形成过渡效果的当你在外层加了transition标签之后，Vue会自动的构建一个动画的流程，当动画执行的一瞬间，他会往内部的div上增加两个class名字，分别是fade-enter和fade-enter-a...

父组件向子组件传值这是最开始的代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Hello World</title> <script src="vue.js&qu

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Hello World</title> <script src="vue.js" type="text/java

实现一个样式，点击完Hello World变色，再点击变回去一，Class与Style绑定1，对象语法首先在div上添加一个handleDivClick函数，然后再绑定一个class，并且class的值为activated，但是class是否有值，让其根据isActivated来判断当isActivated为false时：当其为true时当activated...

首先需要知道v-if这个指令v-if的意思是它可以根据v-if后面表达式的值，来让这个标签是否存在现在是false改变isShow的值发现Hello World就出来了其实条件渲染就是通过判断v-if的值，来渲染页面除了v-if还有一个v-show指令同样可以做到判断条件然后来渲染页面那么他们两个有什么不同呢开始时，isShow都是false...

首先我们先正常显示一个hello world发现可以正常显示，控制台也不会报错那现在我们对父组件传递的content有一个类型要求，那么props里面就可以直接写一个对象，对象里面的key值就是我们传递的数据名，值就是类型名那么，我现在把hello world改成123页面也可以正常显示，而且也不报错我们在content前面加一个冒号，他表示后面引号...

先来看多页应用拿b站来看：当我们第一次刷新页面，返回了b站的主页，然后点进番剧模块：发现又返回了一个番剧页面，这个时候我们点回退发现又返回了一个主页，也就是说我们每一次跳转页面的时候，后台服务器2都会给我们返回一个新的html文档，这种网站就是多页面应用优点：首屏时间（页面首个页面内容展现的时间）非常快，这是因为只需要一个http请求，请...

打开Vue默认项目夹，然后进入到main.js里面，它是整个项目的入口文件el表示挂载到id等于app的元素上然后再点开index.html文件当中这个Vue就是挂载到这个div上components: { App } 等于 components: { App ：APP }，就是定义一个局部组件的使用，这是一种es6的写法，当你键和值一样的时候，写一个就可以了，App其实就...