vue项目实战：实战技巧总结

发布于

一、创建项目及配置

1.1 vue cli2 创建项目

代码语言：javascript
复制
vue init webpack project
代码语言：javascript
复制
npm install
代码语言：javascript
复制
npm run dev

1.2 vue cli3 创建项目

代码语言：javascript
复制
 vue create project

选择配置，看个人项目需求

代码语言：javascript
复制
TypeScript 支持使用 TypeScript 书写源码
 Progressive Web App (PWA) Support PWA 支持。
 Router 支持 vue-router 。
 Vuex 支持 vuex 。
 CSS Pre-processors 支持 CSS 预处理器。
 Linter / Formatter 支持代码风格检查和格式化。
 Unit Testing 支持单元测试。
 E2E Testing 支持 E2E 测试。

进入到项目根目录

代码语言：javascript
复制
 cd  project

启动项目

代码语言：javascript
复制
 npm run serve

二、安装 element-UI

代码语言：javascript
复制
npm i element-ui -S
2.1main.js 引入
2.1.1 全局引入
代码语言：javascript
复制
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Element)
2.1.2 按需引入

首先，安装 babel-plugin-component

代码语言：javascript
复制
npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

代码语言：javascript
复制
{
	"presets": [
		["es2015", {
			"modules": false
		}]
	],
	"plugins": [
		[
			"component",
			{
				"libraryName": "element-ui",
				"styleLibraryName": "theme-chalk"
			}
		]
	]
}

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

代码语言：javascript
复制
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);

Vue.component(Select.name, Select);

或写为

代码语言：javascript
复制
- Vue.use(Button)


    

  • Vue.use(Select)

三、安装 vuex

代码语言：javascript
复制
npm i vuex -s
3.1 /src/store 下面的 index.js 中
代码语言：javascript
复制
import Vue from 'vue'

import Vuex from 'vuex'


//挂载 Vuex

Vue.use(Vuex)


//创建 VueX 对象

const store = new Vuex.Store({

state:{name: 'helloVueX',

},

mutations:{},

actions:{},

modules:{}

})


export default store
3.2 main.js 引入

将 store 挂载到当前项目的 Vue 实例当中去

代码语言：javascript
复制
import Vue from 'vue'

import App from './App'

import router from './router'

import store from './store'


Vue.config.productionTip = false


new Vue({

el: '#app',

router,

store, //store:store 和 router 一样，将我们创建的 Vuex 实例挂载到这个 vue 实例中

render: h => h(App)

})
3.3 在组件中使用 Vuex
代码语言：html
复制
<template>

<div id='app'>

name:

<h1>{{ $store.state.name }}</h1>

</div>

</template>


methods:{

add(){

console.log(this.$store.state.name)

}

},

更具体的学习文档参考我的网站:

学习文档

四、配置scss环境

4.1.首先安装依赖
代码语言：javascript
复制
npm install node-sass sass-loader --save-dev
4.2.找到 build 中 webpack.base.conf.js,在 rules 中添加 scss 规则
代码语言：javascript
复制
{

test: /.scss$/,

loaders: ['style', 'css', 'sass']

}
4.3.在 vue 文件中使用
代码语言：html
复制
<style lang='scss'>


</style>

4.4 在 vue 项目全局中引入 scss

1.全局引用时需要安装 sass-resources-loader
代码语言：javascript
复制
npm install sass-resources-loader --save-dev
2.修改 build 中的 utils.js

将scss: generateLoaders('sass')

修改为
代码语言：javascript
复制
scss: generateLoaders('sass').concat({

loader: 'sass-resources-loader',

options: {

//你自己的 scss 全局文件的路径

resources: path.resolve(_\ _dirname, '../src/style/common.scss')

}

})

如果上面的不能正常编译

代码语言：javascript
复制
//配置 sass 编译路径


function generateSassResourceLoader() {

let loaders = [

cssLoader,

'sass-loader',

{

loader: 'sass-resources-loader',

options: {

// 多个文件时用数组的形式传入，单个文件时可以直接使用 path.resolve(__dirname, '../static/style/common.scss'

resources: path.resolve(__dirname, '../src/style/common.scss')

}

}

];

if (options.extract) {

return ExtractTextPlugin.extract({

use: loaders,

fallback: 'vue-style-loader'

});

} else {

return ['vue-style-loader'].concat(loaders);

}

}
在 cssLoaders 里面引入
代码语言：javascript
复制
sass:generateSassResourceLoader(),//新加的

scss:generateSassResourceLoader(),//新加的

4.5 引入全局的 sass

代码语言：javascript
复制
npm install --s node-sass sass-loader

1.首先你需要

代码语言：javascript
复制
npm install --s sass-resources-loader

2.在 build 目录下找到 utils.js 文件

代码语言：javascript
复制
Module build failed: TypeError: this.getResolve is not a function at Object.loader

安装 node-sass 运行报错

vue 安装 node-sass 编译报错

代码语言：txt
复制
安装node-scss报错

安装 node-scss 报错

在搭建 vue 脚手架 或者是在 vue 项目中，想使用 sass 的功能，

代码语言：javascript
复制
npm install node-sass --save-dev //安装 node-sass

npm install sass-loader --save-dev //安装 sass-loader

npm install style-loader --save-dev //安装 style-loader

这是因为当前 sass 的版本太高，webpack 编译时出现了错误，这个时候只需要换成低版本的就行，下面说一下修改方法，很简单，如下，找到 package.json 文件，里面的 "sass-loader"的版本更换掉 就行了。

代码语言：javascript
复制
将 "sass-loader": "^8.0.0"，更换成了 "sass-loader": "^7.3.1",

也可以先卸载当前版本，然后安装指定的版本

卸载当前版本
代码语言：javascript
复制
npm uninstall sass-loader
安装
代码语言：javascript
复制
npm install sass-loader@7.3.1 --save-dev

五、配置less环境

安装 less 和 less-loader
代码语言：javascript
复制
npm install less less-loader --save

修改 webpack.base.config.js 文件，配置 loader 加载依赖，让其支持外部的 less,在原来的代码上添加

代码语言：javascript
复制
// 此种方法在控制台中标签样式显示的是style标签样式

{

test: /.less$/,

loader: "style-loader!css-loader!less-loader",

}
代码语言：javascript
复制
// 可以在控制台中看到当前标签样式来自于哪个less文件

{

test: /.less$/,

loader: "style-loader!css-loader!less-loader",

options: {

sourceMap: true

}

}

在 vue 文件中的 style 标签中添加 lang="less"即可在标签中使用 less，或者外部引入 less

参考文档

六、引入font-awesome

代码语言：javascript
复制
npm install font-awesome --save

然后在 main.js 引入 font-awesome/css/font-awesome.min.css 即可。

7、vue 配置网站的 ico

7.1方式一：
代码语言：txt
复制
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
7.2 方式二
代码语言：javascript
复制
webpack.dev.conf.js

new HtmlWebpackPlugin({

filename: 'index.html',

template: 'index.html',

favicon: 'favicon.ico', // 新增

inject: true

}),


webpack.prod.conf.js



new HtmlWebpackPlugin({

filename: config.build.index,

template: 'index.html',

inject: true,

minify: {

removeComments: true,

collapseWhitespace: true,

removeAttributeQuotes: true

// more options:

// https://github.com/kangax/html-minifier#options-quick-reference

},

// necessary to consistently work with multiple chunks via CommonsChunkPlugin

chunksSortMode: 'dependency',

favicon: 'favicon.ico' // 新增

}),

八、引入自定义公共样式

在 router/index.js 里面引入公共样式

代码语言：javascript
复制
import 'bootstrap/dist/css/bootstrap.css' //引入 bootstrap

import 'bootstrap-vue/dist/bootstrap-vue.css'

import '@/common/common.css'

import '@/common/index.css'

九、路由按需加载

代码语言：javascript
复制
const port = () => import('@/pages/port') //入口页面、
代码语言：javascript
复制
const router = new Router({

// mode: 'history',

routes: [

{

path: '/',

name: 'port',

component: resolve => require.ensure([], () => resolve(require('@/pages/port')), 'port'),

}]

})

参考文档

十、全局自定义方法

main.js 里面挂载方法到 vue.prototype
代码语言：javascript
复制
Vue.prototype.isMobile = function() {

let flag = navigator.userAgent.match(

/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i

)

return flag;

}
组件里面使用
代码语言：javascript
复制
mounted: function() {

this.isMobile();

}

十一、引入接口文件暴露到全局

11.1 在 main.js 里面引入接口暴露到全局'
代码语言：javascript
复制
// 接口暴露在全局

import { server } from './config/api'

Vue.prototype.$server = server;
代码语言：javascript
复制
//api.js


export const server = {

getContentMenu: (paramObj)=>fetch('/content/menu',paramObj),//内容详情查询

getContentListPort: (paramObj)=>fetch('/content/list/'+paramObj),//入口页面接口

getContentList:(paramObj)=>fetch('/content/list/'+paramObj),//内容详情查询

getPageviews:(paramObj)=>fetch('/webpage/1/view',paramObj)//流量统计接口

}


组件里面使用：



```js</code></pre></div></div><p>import axios from &#39;axios&#39;;</p><p>axios.defaults.timeout = 5000;</p><p>axios.defaults.baseURL =&#39;&#39;; //填写域名</p><p>//http request 拦截器</p><p>axios.interceptors.request.use(</p><p>  config =&gt; {</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">config.data = JSON.stringify(config.data);</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">config.headers = {</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">  &#39;Content-Type&#39;:&#39;application/x-www-form-urlencoded&#39;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">}</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">return config;</code></pre></div></div><p>  },</p><p>  error =&gt; {</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">return Promise.reject(err);</code></pre></div></div><p>  }</p><p>);</p><p>//响应拦截器即异常处理</p><p>axios.interceptors.response.use(response =&gt; {</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">return response</code></pre></div></div><p>}, err =&gt; {</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">if (err &amp;&amp; err.response) {</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">  switch (err.response.status) {</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">    case 400:</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">        console.log(&#39;错误请求&#39;)</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      break;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">    case 401:</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">        console.log(&#39;未授权，请重新登录&#39;)</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      break;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">    case 403:</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      console.log(&#39;拒绝访问&#39;)</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      break;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">    case 404:</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      console.log(&#39;请求错误,未找到该资源&#39;)</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      break;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">    case 405:</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      console.log(&#39;请求方法未允许&#39;)</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      break;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">    case 408:</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      console.log(&#39;请求超时&#39;)</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      break;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">    case 500:</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      console.log(&#39;服务器端出错&#39;)</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      break;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">    case 501:</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      console.log(&#39;网络未实现&#39;)</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      break;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">    case 502:</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      console.log(&#39;网络错误&#39;)</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      break;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">    case 503:</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      console.log(&#39;服务不可用&#39;)</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      break;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">    case 504:</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      console.log(&#39;网络超时&#39;)</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      break;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">    case 505:</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      console.log(&#39;http版本不支持该请求&#39;)</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      break;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">    default:</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      console.log(`连接错误${err.response.status}`)</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">  }</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">} else {</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">  console.log(&#39;连接到服务器失败&#39;)</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">}</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">return Promise.resolve(err.response)</code></pre></div></div><p>})</p><p>/**</p><ul class="ul-level-0"><li>封装get方法</li><li>@param url</li><li>@param data</li><li>@returns {Promise}
*/</li></ul><p>export function fetch(url,params={}){</p><p>  return new Promise((resolve,reject) =&gt; {</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">axios.get(url,{</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">  params:params</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">})</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">.then(response =&gt; {</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">  resolve(response.data);</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">})</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">.catch(err =&gt; {</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">  reject(err)</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">})</code></pre></div></div><p>  })</p><p>}</p><p>/**</p><ul class="ul-level-0"><li>封装post请求</li><li>@param url</li><li>@param data</li><li>@returns {Promise}
*/</li></ul><p> export function post(url,data = {}){</p><p>   return new Promise((resolve,reject) =&gt; {</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0"> axios.post(url,data)</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      .then(response =&gt; {</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">        resolve(response.data);</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      },err =&gt; {</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">        reject(err)</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      })</code></pre></div></div><p>   })</p><p> }</p><p>/**</p><ul class="ul-level-0"><li>官网接口请求封装</li><li>@param url</li><li>@param data</li><li>@returns {Promise}
*/</li></ul><p>export const server = {</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">getContentMenu: (paramObj)=&gt;fetch(&#39;/content/menu&#39;,paramObj),//内容详情查询</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">getContentListPort: (paramObj)=&gt;fetch(&#39;/content/list/&#39;+paramObj),//入口页面接口</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">getContentList:(paramObj)=&gt;fetch(&#39;/content/list/&#39;+paramObj),//内容详情查询</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">getPageviews:(paramObj)=&gt;fetch(&#39;/webpage/1/view&#39;,paramObj)//流量统计接口</code></pre></div></div><p>}</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">## 十二、provide /inject 完美解决不跳转不闪动页面刷新

原理：此方法使用的是 v-if 来控制 router-view 的显示或隐藏，v-if 从 false 变为 true 时，vue 会重新渲染 router-view 区域，所以当参数变化时，只需让 v-if 从 true =&gt; false =&gt; true,就能实现页面刷新。

##### 12.1 找到route-view
```js</code></pre></div></div><p>//App.vue</p><p>   &lt;template&gt;</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">  &lt;div id=&#34;app&#34;&gt;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">    &lt;router-view v-if=&#34;isRouterAlive&#34;/&gt;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">  &lt;/div&gt;</code></pre></div></div><p>   &lt;/template&gt;</p><p>   &lt;script&gt;</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">export default {</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">  name: &#39;App&#39;,</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">  provide() {</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">    return {</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      reload: this.reload//调用reload方法</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">    }</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">  },</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">  data() {</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">    return {</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      isRouterAlive: true//一开始router-view为true</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">    }</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">  },</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">  methods: {</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">    reload() {</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      this.isRouterAlive = false</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">         //在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      this.$nextTick(() =&gt; {</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">        this.isRouterAlive = true</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      })</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">    }</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">  }</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">}</code></pre></div></div><p>   &lt;/script&gt;</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">#####  12.2在页面操作
```js</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">export default {</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">  name: &#39;newproduct&#39;,</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">  inject:[&#39;reload&#39;],//在export default下面加上这一段</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">  method:{</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">    //调用App.vue下的this.reload()方法，来改变v-if的状态</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">    clickDiv(){//刷新按钮调用的方法</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">      this.reload()</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">    }</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">  }</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">[参考文档：如何实现 vue 中不跳转不闪动页面刷新？provide /inject 完美解决方案](https://segmentfault.com/a/1190000018875444)

## 十三、vue动态绑定 class

#####  13.1 对象方法
```js</code></pre></div></div><p>:class=&#34;{ &#39;active&#39;: isActive }&#34;</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">  
#### 13.2 判断是否绑定一个active
```js</code></pre></div></div><p>:class=&#34;{&#39;active&#39;:isActive==-1}&#34;  </p><p>或者</p><p>:class=&#34;{&#39;active&#39;:isActive==index}&#34;</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0"></code></pre></div></div><h6 id="ecshm" name="13.3%E7%BB%91%E5%AE%9A%E5%B9%B6%E5%88%A4%E6%96%AD%E5%A4%9A%E4%B8%AA">13.3绑定并判断多个</h6><h6 id="coc0p" name="%E7%AC%AC%E4%B8%80%E7%A7%8D%EF%BC%88%E7%94%A8%E9%80%97%E5%8F%B7%E9%9A%94%E5%BC%80%EF%BC%89">第一种（用逗号隔开）</h6><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">:class=&#34;{ &#39;active&#39;: isActive, &#39;sort&#39;: isSort }&#34;</code></pre></div></div><h6 id="2tn7s" name="%E7%AC%AC%E4%BA%8C%E7%A7%8D%EF%BC%88%E6%94%BE%E5%9C%A8-data-%E9%87%8C%E9%9D%A2%EF%BC%89">第二种（放在 data 里面）</h6><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">:class=&#34;classObject&#34;
data() {
	return {
		classObject: {
			active: true,
			sort: false
		}
	}
}</code></pre></div></div><h6 id="b3odb" name="%E7%AC%AC%E4%B8%89%E7%A7%8D%EF%BC%88%E4%BD%BF%E7%94%A8-computed-%E5%B1%9E%E6%80%A7%EF%BC%89">第三种（使用 computed 属性）</h6><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">:class=&#34;classObject&#34;
data() {
		return {
			isActive: true,
			isSort: false
		}
	},
	computed: {
		classObject: function() {
			return {
				active: this.isActive,
				sort: this.isSort
			}
		}
	}</code></pre></div></div><h6 id="kkg0" name="13.4%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95">13.4数组方法</h6><h6 id="c8emo" name="1.%E5%8D%95%E7%BA%AF%E6%95%B0%E7%BB%84">1.单纯数组</h6><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">:class=&#34;[isActive,isSort]&#34;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">data() {
	return {
		isActive: &#39;active&#39;,
		isSort: &#39;sort&#39;
	}
}</code></pre></div></div><p>数组与三元运算符结合判断选择需要的class</p><p>三元运算符后面的“：”两边的class需要加上单引号</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">:class=&#34;[isActive?&#39;active&#39;:&#39;&#39;]&#34;</code></pre></div></div><p>或者</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">:class=&#34;[isActive==1?&#39;active&#39;:&#39;&#39;]&#34;</code></pre></div></div><p>或者</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">:class=&#34;[isActive==index?&#39;active&#39;:&#39;&#39;]&#34;</code></pre></div></div><p>或者</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">:class=&#34;[isActive==index?&#39;active&#39;:&#39;otherActiveClass&#39;]&#34;</code></pre></div></div><h6 id="39tjt" name="13.5-%E6%95%B0%E7%BB%84%E5%AF%B9%E8%B1%A1%E7%BB%93%E5%90%88%E5%8A%A8%E6%80%81%E5%88%A4%E6%96%AD">13.5 数组对象结合动态判断</h6><p>//前面这个 active 在对象里面可以不加单引号，后面这个 sort 要加单引号</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">:class=&#34;[{ active: isActive }, &#39;sort&#39;]&#34;</code></pre></div></div><p>或者</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">:class=&#34;[{ active: isActive==1 }, &#39;sort&#39;]&#34;</code></pre></div></div><p>或者</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">:class=&#34;[{ active: isActive==index }, &#39;sort&#39;]&#34;</code></pre></div></div><p>应用于组件</p><p>如果直接在自定义组件中使用 class 或 :class，那么样式规则就会直接应在这个组件的根元素上。</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;div id=&#34;app&#34;&gt;
    &lt;text-component :class=&#34;{&#39;isStrong&#39;:isStrong}&#34;&gt;&lt;/text-component&gt;
&lt;/div&gt;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;script&gt;
    Vue.component(&#39;text-component&#39;, {
        template: &#39;&lt;p class=&#34;content&#34;&gt;不懂基因测序的学霸不是好的人工智能公司 CEO&lt;/p&gt;&#39;
    });
    var app = new Vue({
        el: &#39;#app&#39;,
        data: {
            isStrong: true
        }
    });
&lt;/script&gt;</code></pre></div></div><p>参考文档01</p><p>参考文档02</p><h4 id="evhu6" name="style%E4%B8%89%E5%85%83%E8%A1%A8%E8%BE%BE%E5%BC%8F">style三元表达式</h4><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;span v-bind:style=&#34;{&#39;display&#39;:config.isHaveSearch ? &#39;block&#39;:&#39;none&#39;}&#34; &gt;动态绑定样式&lt;/span&gt;</code></pre></div></div><p>参考文档</p><p>也可以使用 v-bind:style 或 :style 直接给 HTML 元素绑定样式，它也有对应的对象语法与数组语法。</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;div id=&#34;app&#34;&gt;
    &lt;div :style=&#34;border&#34;&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;script&gt;
    var app = new Vue({
        el: &#39;#app&#39;,
        data: {
            border:{
                border:&#39;1px solid #00F&#39;,
                textShadow:&#39;0 0 .3em gray&#39;
            }
        }
    });
&lt;/script&gt;</code></pre></div></div><p>因为 JS 属性不支持短横分隔命名，所以我们这里使用 CSS 也支持的驼峰命名法。</p><p>参考文档</p><h4 id="es5vn" name="%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7computed">计算属性computed</h4><h6 id="8831l" name="%E4%BE%8B%EF%BC%9A%E5%8F%8D%E8%BD%AC%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%9A">例：反转字符串：</h6><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;div id=&#34;app&#34;&gt;
  &lt;p&gt;原始字符串: {{ message }}&lt;/p&gt;
  &lt;p&gt;计算后反转字符串: {{ reversedMessage }}&lt;/p&gt;
&lt;/div&gt;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;script&gt;
var vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Runoob!&#39;
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
  }
})
&lt;/script&gt;</code></pre></div></div><p>我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。。换句话说，computed 是局部渲染，而 methods 是全部渲染</p><p>区别：</p><ul class="ul-level-0"><li>1.methods是个方法，比如你点击事件要执行一个方法，这时候就用methods,</li><li>2.computed是计算属性，实时响应的，比如你要根据data里一个值随时变化做出一些处理，就用computed。</li><li>3.我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。</li><li>4.methods必须需要一定的条件去触发,而computed则不需要.</li><li>5.computed依赖缓存，如果不需要经常变动的用computed，需要经常变动的用methods。如果你需要传参数，就用methods。</li></ul><h4 id="8fho5" name="computed">computed</h4><p>computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">var vm = new Vue({
	el: &#39;#app&#39;,
	data: {
		name: &#39;Google&#39;,
		url: &#39;http://www.google.com&#39;
	},
	computed: {
		site: {
			// getter
			get: function() {
				return this.name + &#39; &#39; + this.url
			},
			// setter
			set: function(newValue) {
				var names = newValue.split(&#39; &#39;)
				this.name = names[0]
				this.url = names[names.length - 1]
			}
		}
	}
})</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = &#39;http://www.runoob.com&#39;;
document.write(&#39;name: &#39; + vm.name);
document.write(&#39;&lt;br&gt;&#39;);
document.write(&#39;url: &#39; + vm.url);</code></pre></div></div><p>从实例运行结果看在运行 vm.site = &#39;http://www.runoob.com&#39;; 时，setter 会被调用， vm.name 和 vm.url 也会被对应更新。</p><h3 id="16stu" name="%E5%8D%81%E5%9B%9B%E3%80%81style%E6%A0%B7%E5%BC%8F%E7%BB%91%E5%AE%9A">十四、style样式绑定</h3><p>class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。</p><p>Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。</p><h6 id="8gh8e" name="14.1-class-%E5%B1%9E%E6%80%A7%E7%BB%91%E5%AE%9A">14.1 class 属性绑定</h6><p>我们可以为 v-bind:class 设置一个对象，从而动态的切换 class：</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>css</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-css"><code class="language-css" style="margin-left:0">&lt;style&gt;
.active {
    width: 100px;
    height: 100px;
    background: green;
}
&lt;/style&gt;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>html</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-html"><code class="language-html" style="margin-left:0">&lt;div id=&#34;app&#34;&gt;
  &lt;div v-bind:class=&#34;{ active: isActive }&#34;&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;script&gt;
new Vue({
  el: &#39;#app&#39;,
  data: {
    isActive: true
  }
})
&lt;/script&gt;</code></pre></div></div><p>例：text-danger 类背景颜色覆盖了 active 类的背景色：</p><h6 id="61akj" name="%E6%96%B9%E6%B3%95%E4%B8%80%EF%BC%9A%E5%9C%A8%E5%AF%B9%E8%B1%A1%E4%B8%AD%E4%BC%A0%E5%85%A5%E6%9B%B4%E5%A4%9A%E5%B1%9E%E6%80%A7%E7%94%A8%E6%9D%A5%E5%8A%A8%E6%80%81%E5%88%87%E6%8D%A2%E5%A4%9A%E4%B8%AA-class-%E3%80%82">方法一：在对象中传入更多属性用来动态切换多个 class 。</h6><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>css</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-css"><code class="language-css" style="margin-left:0">&lt;style&gt;
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
&lt;/style&gt;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>html</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-html"><code class="language-html" style="margin-left:0">&lt;div id=&#34;app&#34;&gt;
  &lt;div class=&#34;static&#34;
     v-bind:class=&#34;{ active: isActive, &#39;text-danger&#39;: hasError }&#34;&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;script&gt;
new Vue({
  el: &#39;#app&#39;,
  data: {
    isActive: true,
    hasError: true
  }
})
&lt;/script&gt;</code></pre></div></div><h6 id="5m1jr" name="%E6%96%B9%E6%B3%95%E4%BA%8C%EF%BC%9A%E7%9B%B4%E6%8E%A5%E7%BB%91%E5%AE%9A%E6%95%B0%E6%8D%AE%E9%87%8C%E7%9A%84%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%EF%BC%9A">方法二：直接绑定数据里的一个对象：</h6><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>css</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-css"><code class="language-css" style="margin-left:0">&lt;style&gt;
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
&lt;/style&gt;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>html</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-html"><code class="language-html" style="margin-left:0">&lt;div id=&#34;app&#34;&gt;
  &lt;div v-bind:class=&#34;classObject&#34;&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;script&gt;
new Vue({
  el: &#39;#app&#39;,
  data: {
    classObject: {
      active: true,
      &#39;text-danger&#39;: true
    }
  }
})
&lt;/script&gt;</code></pre></div></div><h6 id="fvjoj" name="%E6%96%B9%E6%B3%95%E4%B8%89%EF%BC%9A%E7%BB%91%E5%AE%9A%E8%BF%94%E5%9B%9E%E5%AF%B9%E8%B1%A1%E7%9A%84%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%EF%BC%9A">方法三：绑定返回对象的计算属性：</h6><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>css</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-css"><code class="language-css" style="margin-left:0">&lt;style&gt;
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
&lt;/style&gt;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>html</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-html"><code class="language-html" style="margin-left:0">&lt;div id=&#34;app&#34;&gt;
  &lt;div v-bind:class=&#34;classObject&#34;&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;script&gt;
new Vue({
  el: &#39;#app&#39;,
  data: {
  isActive: true,
  error: null
  },
  computed: {
    classObject: function () {
      return {
        active: this.isActive &amp;&amp; !this.error,
        &#39;text-danger&#39;: this.error &amp;&amp; this.error.type === &#39;fatal&#39;,
      }
    }
  }
})
&lt;/script&gt;</code></pre></div></div><h6 id="6r6hh" name="%E6%96%B9%E6%B3%95%E5%9B%9B%EF%BC%9A%E6%95%B0%E7%BB%84%E8%AF%AD%E6%B3%95">方法四：数组语法</h6><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>css</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-css"><code class="language-css" style="margin-left:0">&lt;style&gt;
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
&lt;/style&gt;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>html</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-html"><code class="language-html" style="margin-left:0">&lt;div id=&#34;app&#34;&gt;
    &lt;div v-bind:class=&#34;[activeClass, errorClass]&#34;&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;script&gt;
new Vue({
  el: &#39;#app&#39;,
  data: {
    activeClass: &#39;active&#39;,
    errorClass: &#39;text-danger&#39;
  }
})
&lt;/script&gt;</code></pre></div></div><p>还可以使用三元表达式来切换列表中的 class ：</p><p>errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类：</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>css</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-css"><code class="language-css" style="margin-left:0">&lt;style&gt;
.text-danger {
    width: 100px;
    height: 100px;
    background: red;
}
.active {
    width: 100px;
    height: 100px;
    background: green;
}
&lt;/style&gt;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>html</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-html"><code class="language-html" style="margin-left:0">&lt;div id=&#34;app&#34;&gt;
    &lt;div v-bind:class=&#34;[errorClass ,isActive ? activeClass : &#39;&#39;]&#34;&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;script&gt;
new Vue({
  el: &#39;#app&#39;,
  data: {
    isActive: true,
    activeClass: &#39;active&#39;,
    errorClass: &#39;text-danger&#39;
  }
})
&lt;/script&gt;</code></pre></div></div><h4 id="fiif7" name="style%E6%A0%B7%E5%BC%8F%E9%82%A6%E5%AE%9A">style样式邦定</h4><p>v-bind:style直接设置样式：</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>html</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-html"><code class="language-html" style="margin-left:0">&lt;div id=&#34;app&#34;&gt;
    &lt;div v-bind:style=&#34;{ color: activeColor, fontSize: fontSize + &#39;px&#39; }&#34;&gt;菜鸟教程&lt;/div&gt;
&lt;/div&gt;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;script&gt;
new Vue({
  el: &#39;#app&#39;,
  data: {
    activeColor: &#39;green&#39;,
    fontSize: 30
  }
})
&lt;/script&gt;</code></pre></div></div><p>也可以直接绑定到一个样式对象：</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>html</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-html"><code class="language-html" style="margin-left:0">&lt;div id=&#34;app&#34;&gt;
  &lt;div v-bind:style=&#34;styleObject&#34;&gt;菜鸟教程&lt;/div&gt;
&lt;/div&gt;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;script&gt;
new Vue({
  el: &#39;#app&#39;,
  data: {
    styleObject: {
      color: &#39;green&#39;,
      fontSize: &#39;30px&#39;
    }
  }
})
&lt;/script&gt;</code></pre></div></div><p>v-bind:style 可以使用数组将多个样式对象应用到一个元素上：</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>html</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-html"><code class="language-html" style="margin-left:0">&lt;div id=&#34;app&#34;&gt;
  &lt;div v-bind:style=&#34;[baseStyles, overridingStyles]&#34;&gt;菜鸟教程&lt;/div&gt;
&lt;/div&gt;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;script&gt;
new Vue({
  el: &#39;#app&#39;,
  data: {
    baseStyles: {
      color: &#39;green&#39;,
      fontSize: &#39;30px&#39;
    },
    overridingStyles: {
      &#39;font-weight&#39;: &#39;bold&#39;
    }
  }
})
&lt;/script&gt;</code></pre></div></div><p>参考文档</p><h3 id="4b0d8" name="%E5%8D%81%E4%BA%94%E3%80%81vue%E7%BB%84%E4%BB%B6%E5%8F%82%E6%95%B0%E4%BC%A0%E9%80%92%EF%BC%9A">十五、vue组件参数传递：</h3><p>Vue 组件间通信包括：父子组件间通信，兄弟组件间通信以及模块之间通信等。Vue 是数据驱动视图更新的框架, 所以对于 Vue 来说组件间的数据通信非常重要。Vue 实现组件间通信有很多方式，今天我来给大家讲解一下父子组件间通信：props 和\$emit。</p><h4 id="cgg62" name="15.1.%E5%AD%90%E7%BB%84%E4%BB%B6%E5%90%91%E7%88%B6%E7%BB%84%E4%BB%B6%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0;">15.1.子组件向父组件传递参数;</h4><h4 id="27a8s" name="%E5%AD%90%E7%BB%84%E4%BB%B6-A%EF%BC%9A">子组件 A：</h4><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">    &lt;template&gt;
      &lt;div class=&#34;childA-wrapper&#34;&gt;
        子组件A
      &lt;/div&gt;
    &lt;/template&gt;
    &lt;script&gt;
    export default {
      data() {
        return {
          childA: &#39;我是组件A传过来的值&#39;
        }
      },
      created: function() {},
      mounted() {
        this.sendDataParent()
      },
      methods: {
        sendDataParent() {
          // getChildDataA是在父组件on监听的方法
          // 第二个参数this.childA是需要传的值
          this.$emit(&#39;getChildDataA&#39;, this.childA)
        }
      }
    }
    &lt;/script&gt;</code></pre></div></div><h4 id="b0td5" name="%E5%AD%90%E7%BB%84%E4%BB%B6-B%EF%BC%9A">子组件 B：</h4><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">  &lt;template&gt;
  &lt;div class=&#34;childB-wrapper&#34;&gt;
    子组件B
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  data() {
    return {
      childB:&#39;我是组件B传过来的值&#39;
    }
  },
  created:function() {
  },
  mounted(){
    this.sendDataParent()
  },
  methods: {
   sendDataParent() {
        // getChildDataB是在父组件on监听的方法
        // 第二个参数this.childB是需要传的值
        this.$emit(&#39;getChildDataB&#39;, this.childB)
      }
  }
}
&lt;/script&gt;</code></pre></div></div><h4 id="dlbim" name="%E7%88%B6%E7%BB%84%E4%BB%B6%EF%BC%9A">父组件：</h4><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">  &lt;template&gt;
        &lt;div&gt;
            &lt;v-childA v-on:getChildDataA=&#34;getChildDataA&#34;&gt;&lt;/v-childA&gt;
            &lt;v-childB v-on:getChildDataB=&#34;getChildDataB&#34;&gt;&lt;/v-childB&gt;
            &lt;div&gt;获取组件A传过来的值:{{childAValue}}&lt;/div&gt;
            &lt;div&gt;获取组件B传过来的值:{{childBValue}}&lt;/div&gt;
        &lt;/div&gt;
    &lt;/template&gt;

    &lt;script&gt;
    import childA from &#39;@/components/childA.vue&#39;
    import childB from &#39;@/components/childB.vue&#39;
    export default {
      data() {
        return {
            childAValue:&#39;&#39;,
            childBValue:&#39;&#39;,
        }
      },
      methods: {
       getChildDataA(childA){
        console.log(childA)
        this.childAValue=childA
       },
       getChildDataB(childB){
        console.log(childB)
        this.childBValue=childB
       }
      },
      components: { &#39;v-childA&#39;: childA, &#39;v-childB&#39;: childB}
    }
    &lt;/script&gt;</code></pre></div></div><h4 id="emq89" name="15.2%E3%80%81%E7%88%B6%E7%BB%84%E4%BB%B6%E5%90%91%E5%AD%90%E7%BB%84%E4%BB%B6%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0">15.2、父组件向子组件传递参数</h4><h6 id="5jrn5" name="%E7%88%B6%E7%BB%84%E4%BB%B6%EF%BC%9A">父组件：</h6><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;template&gt;
        &lt;div&gt;
            &lt;v-childA&gt;&lt;/v-childA&gt;
            &lt;v-childB  :sendBData=&#34;sendB&#34;&gt;&lt;/v-childB&gt;
        &lt;/div&gt;
    &lt;/template&gt;

    &lt;script&gt;
    import childA from &#39;@/components/childA.vue&#39;
    import childB from &#39;@/components/childB.vue&#39;
    export default {
      data() {
        return {
            sendB:&#39;父组件向B组件传递的参数&#39;
        }
      },
      methods: {
      },
      components: { &#39;v-childA&#39;: childA, &#39;v-childB&#39;: childB}
    }
    &lt;/script&gt;</code></pre></div></div><h6 id="b00t1" name="%E5%AD%90%E7%BB%84%E4%BB%B6-B%EF%BC%9A">子组件 B：</h6><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;template&gt;
  &lt;div class=&#34;childB-wrapper&#34;&gt;
    子组件B:{{sendBData}}
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
  data() {
    return {}
  },
  created: function() {},
  mounted() {},
  methods: {},
  props: {
    sendBData: String,
    required: true
  }
}

&lt;/script&gt;</code></pre></div></div><h4 id="2qf5n" name="15.3%E3%80%81%E9%9D%9E%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E8%BF%9B%E8%A1%8C%E4%BC%A0%E5%80%BC%EF%BC%9B">15.3、非父子组件进行传值；</h4><h6 id="4ml47" name="bus.js">bus.js</h6><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">  import Vue from &#39;vue&#39;
  export default new Vue()</code></pre></div></div><h6 id="e9v53" name="%E7%BB%84%E4%BB%B6-childB:">组件 childB:</h6><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;template&gt;
    &lt;div class=&#34;childB-wrapper&#34;&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import Bus from &#39;@/common/bus.js&#39;
  export default {
    data() {
      return {
        childB: &#39;我是组件B的内容&#39;
      }
    },
    created: function() {},
    mounted() {
      this.elementByValue()
    },
    methods: {
      elementByValue: function () {
          Bus.$emit(&#39;val&#39;, this.childB)
        }
    }
  }

  &lt;/script&gt;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">##### 组件 childA：

  &lt;template&gt;
      &lt;div class=&#34;childA-wrapper&#34;&gt;
        A组件：&lt;span&gt;{{childB}}&lt;/span&gt;
      &lt;/div&gt;
    &lt;/template&gt;
    &lt;script&gt;
    import Bus from &#39;@/common/bus.js&#39;
    export default {
      data() {
        return {
          childB: &#39;&#39;
        }
      },
      created: function() {},
      mounted() {
        var that = this
        // 用 $on事件来接收参数
        Bus.$on(&#39;val&#39;, (data) =&gt; {
          console.log(data)
          that.childB = data
        })
      }
    }

    &lt;/script&gt;</code></pre></div></div><p>更多请查看：你不知道的vue组件传值方式</p><h4 id="b82dl" name="16.vue%E8%84%9A%E6%89%8B%E6%9E%B6%E9%85%8D%E7%BD%AE%E9%A2%84%E6%B8%B2%E6%9F%93%EF%BC%8Cprerender-spa-plugin-%E9%85%8D%E7%BD%AE">16.vue脚手架配置预渲染，prerender-spa-plugin 配置</h4><p>用到插件：cnpm install prerender-spa-plugin --save</p><p>脚手架 2.0：(自己的是 2.0)</p><h6 id="fn2fe" name="16.1-build/webpack.prod.conf.js-%E9%85%8D%E7%BD%AE">16.1 build/webpack.prod.conf.js 配置</h6><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">const PrerenderSPAPlugin = require(&#39;prerender-spa-plugin&#39;)
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const webpackConfig = merge(baseWebpackConfig, {
	plugins: [
		// vue-cli 生成的配置就有了
		new HtmlWebpackPlugin({
			filename: config.build.index,
			template: &#39;index.html&#39;,
			inject: true,
			minify: {
				removeComments: true,
				collapseWhitespace: true,
				removeAttributeQuotes: true
			},
			chunksSortMode: &#39;dependency&#39;
		}),
		// 配置 PrerenderSPAPlugin
		new PrerenderSPAPlugin({
			// 生成文件的路径，也可以与 webpakc 打包的一致。
			staticDir: path.join(\_\ _dirname, &#39;../dist&#39;),

			// 对应自己的所有路由文件，比如 index 有参数，就需要写成 /index/param1。这个其实不需要；千万不要加&#39;/&#39;这个 嵌套路由得 commonquestion 直接写即可
			routes: [&#39;index&#39;, &#39;...&#39;, &#39;/commonQuestion&#39;, &#39;/commonQuestion/questionList&#39;, &#39;/commonQuestion/questionDetailInfo&#39;],
			// ；
			renderer: new Renderer({
				inject: { // 可选；最好还是用
					foo: &#39;bar&#39;
				},
				headless: false, // 可选；最好用
				renderAfterTime: 5000, // 通过实践是必选 官网说可选有误 一定要必选
				renderAfterDocumentEvent: &#39;render-event&#39; // 可选；最好用
			})
		}),
	]
})</code></pre></div></div><h6 id="974bi" name="16.2.%E8%B7%AF%E7%94%B1%E5%BE%97-index.js-%E6%B7%BB%E5%8A%A0%E5%B1%9E%E6%80%A7%EF%BC%9A">16.2.路由得 index.js 添加属性：</h6><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0"> mode:‘history’,</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">    修改config/index.js 中的build的 assetsPublicPath: ‘/’ ；不然会导致刷新页面路径错乱导致样式或者js丢失；

    修改main.js

    new Vue({
      el: &#39;#app&#39;,
      router,
      store,				// 如果需要了切记引入啊   切记需要挂载的全部挂载上去
      render: h =&gt; h(App),
      mounted () {
        document.dispatchEvent(new Event(&#39;render-event&#39;))
      }
    })</code></pre></div></div><h6 id="drom7" name="16.3.build/webpack.prod.conf.js-%E9%85%8D%E7%BD%AE">16.3.build/webpack.prod.conf.js 配置</h6><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">const PrerenderSPAPlugin = require(&#39;prerender-spa-plugin&#39;);
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require(&#39;path&#39;);
module.exports = {
	configureWebpack: config =&gt; {
		if (process.env.NODE_ENV !== &#39;production&#39;) return;
		return {
			plugins: [
				new PrerenderSPAPlugin({
					// 生成文件的路径，也可以与 webpakc 打包的一致。
					// 下面这句话非常重要！！！
					// 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
					staticDir: path.join(\_\ _dirname, &#39;dist&#39;),
					// 对应自己的路由文件，比如 a 有参数，就需要写成 /a/param1。
					routes: [&#39;/&#39;, &#39;/product&#39;, &#39;/about&#39;],
					// 这个很重要，如果没有配置这段，也不会进行预编译
					renderer: new Renderer({
						inject: {
							foo: &#39;bar&#39;
						},
						headless: false,
						renderAfterTime: 5000, // 必选哈
						// 在 main.js 中 document.dispatchEvent(new Event(&#39;render-event&#39;))，两者的事件名称要对应上。
						renderAfterDocumentEvent: &#39;render-event&#39;
					})
				}),
			],
		};
	}
}</code></pre></div></div><h6 id="d0a" name="16.4-main.js-%E9%85%8D%E7%BD%AE">16.4 main.js 配置</h6><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">new Vue({
	router,
	store,
	render: h =&gt; h(App),
	mounted() {
		document.dispatchEvent(new Event(&#39;render-event&#39;))
	}
}).\$mount(&#39;#app&#39;)</code></pre></div></div><p>其他修改同 2.0;</p><p>参考文档</p><h4 id="5eqia" name="%E5%8D%81%E5%85%AD%E3%80%81vue-SPA%E5%8D%95%E9%A1%B5%E9%9D%A2%E7%9A%84-SEO-%E4%BC%98%E5%8C%96">十六、vue SPA单页面的 SEO 优化</h4><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">vue-meta-info </code></pre></div></div><p>官方地址： monkeyWangs/vue-meta-info</p><h6 id="fegh" name="1.%E5%AE%89%E8%A3%85">1.安装</h6><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">npm install vue-meta-info --save</code></pre></div></div><h6 id="6j40e" name="2.%E5%85%A8%E5%B1%80%E5%BC%95%E5%85%A5-vue-meta-info">2.全局引入 vue-meta-info</h6><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">import Vue from &#39;vue&#39;
import MetaInfo from &#39;vue-meta-info&#39;

Vue.use(MetaInfo)</code></pre></div></div><h6 id="crbo7" name="3.%E7%BB%84%E4%BB%B6%E5%86%85%E9%9D%99%E6%80%81%E4%BD%BF%E7%94%A8-metaInfo">3.组件内静态使用 metaInfo</h6><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;template&gt;
  ...
&lt;/template&gt;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;script&gt;
  export default {
    metaInfo: {
      title: &#39;My Example App&#39;, // set a title
      meta: [{                 // set meta
        name: &#39;keyWords&#39;,
        content: &#39;My Example App&#39;
      }]
      link: [{                 // set link
        rel: &#39;asstes&#39;,
        href: &#39;https://assets-cdn.github.com/&#39;
      }]
    }
  }
&lt;/script&gt;</code></pre></div></div><h6 id="b88v6" name="4.%E5%A6%82%E6%9E%9C%E4%BD%A0%E7%9A%84-title-%E6%88%96%E8%80%85-meta-%E6%98%AF%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD%E7%9A%84%EF%BC%8C%E9%82%A3%E4%B9%88%E4%BD%A0%E5%8F%AF%E8%83%BD%E9%9C%80%E8%A6%81%E8%BF%99%E6%A0%B7%E4%BD%BF%E7%94%A8">4.如果你的 title 或者 meta 是异步加载的，那么你可能需要这样使用</h6><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;template&gt;
  ...
&lt;/template&gt;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;script&gt;
  export default {
    name: &#39;async&#39;,
    metaInfo () {
      return {
        title: this.pageName
      }
    },
    data () {
      return {
        pageName: &#39;loading&#39;
      }
    },
    mounted () {
      setTimeout(() =&gt; {
        this.pageName = &#39;async&#39;
      }, 2000)
    }
  }
&lt;/script&gt;</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;meta name=&#34;参数&#34; content=&#34;具体的描述&#34;&gt;</code></pre></div></div><h6 id="2keb0" name="5.meta%E6%A0%87%E7%AD%BE%E5%85%B1%E6%9C%89%E4%B8%A4%E4%B8%AA%E5%B1%9E%E6%80%A7%EF%BC%8C%E5%88%86%E5%88%AB%E6%98%AFhttp-equiv%E5%B1%9E%E6%80%A7%E5%92%8Cname%E5%B1%9E%E6%80%A7">5.meta标签共有两个属性，分别是http-equiv属性和name属性</h6><ol class="ol-level-0"><li>name 属性
name 属性主要用于描述网页，比如网页的关键词，叙述等。与之对应的属性值为 content，content 中的内容是对 name 填入类型的具体描述，便于搜索引擎抓取。
meta 标签中 name 属性语法格式是：&lt;meta name=&#34;参数&#34; content=&#34;具体的描述&#34;&gt;</li></ol><p>其中 name 属性共有以下几种参数。(A-C 为常用属性)</p><h6 id="5fmph" name="A.-keywords(%E5%85%B3%E9%94%AE%E5%AD%97)">A. keywords(关键字)</h6><p>说明：用于告诉搜索引擎，你网页的关键字。</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;meta name=&#34;keywords&#34; content=&#34;XX网，汽车，车主，评选&#34;&gt;</code></pre></div></div><h6 id="1lb3h" name="B.-description(%E7%BD%91%E7%AB%99%E5%86%85%E5%AE%B9%E7%9A%84%E6%8F%8F%E8%BF%B0)">B. description(网站内容的描述)</h6><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">说明：用于告诉搜索引擎，你网站的主要内容。</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;meta name=&#34;description&#34; content=&#34;汽车评选，XX网，评选，汽车&#34;&gt;</code></pre></div></div><h6 id="7bba6" name="C.viewport(%E7%A7%BB%E5%8A%A8%E7%AB%AF%E7%9A%84%E8%A7%86%E5%8F%A3)">C.viewport(移动端的视口)</h6><p>说明：这个属性常用于设计移动端网页。</p><p>举例</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;meta name=&#34;viewport&#34; content=&#34;width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no&#34;/&gt;</code></pre></div></div><h6 id="416qu" name="D.-robots(%E5%AE%9A%E4%B9%89%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E%E7%88%AC%E8%99%AB%E7%9A%84%E7%B4%A2%E5%BC%95%E6%96%B9%E5%BC%8F)">D. robots(定义搜索引擎爬虫的索引方式)</h6><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">说明：robots 用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。
content 的参数有 all,none,index,noindex,follow,nofollow。默认是 all。</code></pre></div></div><p>举例：</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;meta name=&#34;robots&#34; content=&#34;none&#34;&gt;</code></pre></div></div><p>具体参数如下：</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">1.none : 搜索引擎将忽略此网页，等价于 noindex，nofollow。
2.noindex : 搜索引擎不索引此网页。
3.nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
4.all : 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于 index，follow。
5.index : 搜索引擎索引此网页。
6.follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。</code></pre></div></div><h6 id="3ari5" name="E.-author(%E4%BD%9C%E8%80%85)">E. author(作者)</h6><p>说明：用于标注网页作者</p><p>举例：</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">&lt;meta name=&#34;author&#34; content=&#34;Lxxyx,841380530@qq.com&#34;&gt;</code></pre></div></div><h6 id="4rdg4" name="F.-generator(%E7%BD%91%E9%A1%B5%E5%88%B6%E4%BD%9C%E8%BD%AF%E4%BB%B6)">F. generator(网页制作软件)</h6><p>说明：用于标明网页是什么软件做的</p><p>举例: (不知道能不能这样写)：</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">&lt;meta name=&#34;generator&#34; content=&#34;Sublime Text3&#34;&gt;</code></pre></div></div><h6 id="3jh88" name="G.-copyright(%E7%89%88%E6%9D%83)">G. copyright(版权)</h6><p>说明：用于标注版权信息</p><p>举例：</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">&lt;meta name=&#34;copyright&#34; content=&#34;Lxxyx&#34;&gt; //代表该网站为Lxxyx个人版权所有。</code></pre></div></div><h6 id="30in8" name="H.-revisit-after(%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E%E7%88%AC%E8%99%AB%E9%87%8D%E8%AE%BF%E6%97%B6%E9%97%B4)">H. revisit-after(搜索引擎爬虫重访时间)</h6><p>说明：如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问。</p><p>举例：</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">&lt;meta name=&#34;revisit-after&#34; content=&#34;7 days&#34; &gt;</code></pre></div></div><h6 id="4udl8" name="I.-renderer(%E5%8F%8C%E6%A0%B8%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93%E6%96%B9%E5%BC%8F)">I. renderer(双核浏览器渲染方式)</h6><p>说明：renderer 是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。比如说 360 浏览器。</p><p>举例：</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;meta name=&#34;renderer&#34; content=&#34;webkit&#34;&gt; //默认webkit内核
&lt;meta name=&#34;renderer&#34; content=&#34;ie-comp&#34;&gt; //默认IE兼容模式
&lt;meta name=&#34;renderer&#34; content=&#34;ie-stand&#34;&gt; //默认IE标准模式</code></pre></div></div><h6 id="fc3h7" name="6.-http-equiv-%E5%B1%9E%E6%80%A7">6. http-equiv 属性</h6><p>http-equiv 相当于 HTTP 的作用，比如说定义些 HTTP 参数啥的。</p><p>meta 标签中 http-equiv 属性语法格式是：</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;meta http-equiv=&#34;参数&#34; content=&#34;具体的描述&#34;&gt;</code></pre></div></div><p>其中 http-equiv 属性主要有以下几种参数：</p><h6 id="bejup" name="A.-content-Type(%E8%AE%BE%E5%AE%9A%E7%BD%91%E9%A1%B5%E5%AD%97%E7%AC%A6%E9%9B%86)(%E6%8E%A8%E8%8D%90%E4%BD%BF%E7%94%A8-HTML5-%E7%9A%84%E6%96%B9%E5%BC%8F)">A. content-Type(设定网页字符集)(推荐使用 HTML5 的方式)</h6><p>说明：用于设定网页字符集，便于浏览器解析与渲染页面</p><p>举例：</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;meta http-equiv=&#34;content-Type&#34; content=&#34;text/html;charset=utf-8&#34;&gt;  //旧的HTML，不推荐
&lt;meta charset=&#34;utf-8&#34;&gt; //HTML5设定网页字符集的方式，推荐使用UTF-8</code></pre></div></div><h6 id="dq21v" name="B.-X-UA-Compatible(%E6%B5%8F%E8%A7%88%E5%99%A8%E9%87%87%E5%8F%96%E4%BD%95%E7%A7%8D%E7%89%88%E6%9C%AC%E6%B8%B2%E6%9F%93%E5%BD%93%E5%89%8D%E9%A1%B5%E9%9D%A2)">B. X-UA-Compatible(浏览器采取何种版本渲染当前页面)</h6><p>说明：用于告知浏览器以何种版本来渲染页面。（一般都设置为最新模式，在各大框架中这个设置也很常见。）</p><p>举例：</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;meta http-equiv=&#34;X-UA-Compatible&#34; content=&#34;IE=edge,chrome=1&#34;/&gt; //指定IE和Chrome使用最新版本渲染当前页面</code></pre></div></div><h6 id="cuvkm" name="C.-cache-control(%E6%8C%87%E5%AE%9A%E8%AF%B7%E6%B1%82%E5%92%8C%E5%93%8D%E5%BA%94%E9%81%B5%E5%BE%AA%E7%9A%84%E7%BC%93%E5%AD%98%E6%9C%BA%E5%88%B6)">C. cache-control(指定请求和响应遵循的缓存机制)</h6><p>用法 1.</p><p>说明：指导浏览器如何缓存某个响应以及缓存多长时间。这一段内容我在网上找了很久，但都没有找到满意的。</p><p>最后终于在 Google Developers 中发现了我想要的答案。</p><p>举例:</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">&lt;meta http-equiv=&#34;cache-control&#34; content=&#34;no-cache&#34;&gt;</code></pre></div></div><p>共有以下几种用法：</p><ul class="ul-level-0"><li>no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。</li><li>no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）</li><li>public : 缓存所有响应，但并非必须。因为 max-age 也可以做到相同效果</li><li>private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说 CDN 就不允许缓存 private 的响应）</li><li>maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60 表示响应可以再缓存和重用 60 秒。
参考链接：HTTP 缓存
用法 2.(禁止百度自动转码)</li></ul><p>说明：用于禁止当前页面在移动端浏览时，被百度自动转码。虽然百度的本意是好的，但是转码效果很多时候却不尽人意。所以可以在 head 中加入例子中的那句话，就可以避免百度自动转码了。</p><p>举例：</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">&lt;meta http-equiv=&#34;Cache-Control&#34; content=&#34;no-siteapp&#34; /&gt;</code></pre></div></div><h6 id="dhc5j" name="D.-expires(%E7%BD%91%E9%A1%B5%E5%88%B0%E6%9C%9F%E6%97%B6%E9%97%B4)">D. expires(网页到期时间)</h6><p>说明:用于设定网页的到期时间，过期后网页必须到服务器上重新传输。</p><p>举例：</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">&lt;meta http-equiv=&#34;expires&#34; content=&#34;Sunday 26 October 2016 01:00 GMT&#34; /&gt;</code></pre></div></div><h6 id="67lrh" name="E.-refresh(%E8%87%AA%E5%8A%A8%E5%88%B7%E6%96%B0%E5%B9%B6%E6%8C%87%E5%90%91%E6%9F%90%E9%A1%B5%E9%9D%A2)">E. refresh(自动刷新并指向某页面)</h6><p>说明：网页将在设定的时间内，自动刷新并调向设定的网址。</p><p>举例:</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">&lt;meta http-equiv=&#34;refresh&#34; content=&#34;2；URL=http://www.lxxyx.win/&#34;&gt; //意思是2秒后跳转向我的博客</code></pre></div></div><h6 id="4v40v" name="F.-Set-Cookie(cookie-%E8%AE%BE%E5%AE%9A)">F. Set-Cookie(cookie 设定)</h6><p>说明：如果网页过期。那么这个网页存在本地的 cookies 也会被自动删除。</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>txt</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">&lt;meta http-equiv=&#34;Set-Cookie&#34; content=&#34;name, date&#34;&gt; //格式
&lt;meta http-equiv=&#34;Set-Cookie&#34; content=&#34;User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT&#34;&gt; //具体范例</code></pre></div></div><p>更详细更具体的 vue 学习文档访问</p><p>vue学习文档01</p><p>vue学习文档02</p>
#腾讯云前端性能优化大赛#前端性能监控#vue.js#javascript