vue实战项目：项目技巧总结（二）

微芒不朽
1,957 阅读21分钟

十三、vue动态绑定 class

13.1 对象方法
:class="{ 'active': isActive }"

13.2 判断是否绑定一个active

:class="{'active':isActive==-1}"  
或者
:class="{'active':isActive==index}"
13.3绑定并判断多个
第一种（用逗号隔开）
:class="{ 'active': isActive, 'sort': isSort }"
第二种（放在 data 里面）
:class="classObject"
data() {
 return {
  classObject: {
   active: true,
   sort: false
  }
 }
}
第三种（使用 computed 属性）
:class="classObject"
data() {
  return {
   isActive: true,
   isSort: false
  }
 },
 computed: {
  classObject: function() {
   return {
    active: this.isActive,
    sort: this.isSort
   }
  }
 }
13.4数组方法
1.单纯数组
:class="[isActive,isSort]"
data() {
 return {
  isActive: 'active',
  isSort: 'sort'
 }
}

数组与三元运算符结合判断选择需要的class 三元运算符后面的“：”两边的class需要加上单引号

:class="[isActive?'active':'']"

或者

:class="[isActive==1?'active':'']"

或者

:class="[isActive==index?'active':'']"

或者

:class="[isActive==index?'active':'otherActiveClass']"
13.5 数组对象结合动态判断

//前面这个 active 在对象里面可以不加单引号，后面这个 sort 要加单引号

:class="[{ active: isActive }, 'sort']"

或者

:class="[{ active: isActive==1 }, 'sort']"

或者

:class="[{ active: isActive==index }, 'sort']"

应用于组件 如果直接在自定义组件中使用 class 或 :class，那么样式规则就会直接应在这个组件的根元素上。

<div id="app">
    <text-component :class="{'isStrong':isStrong}"></text-component>
</div>
<script>
    Vue.component('text-component', {
        template: '<p class="content">不懂基因测序的学霸不是好的人工智能公司 CEO</p>'
    });
    var app = new Vue({
        el: '#app',
        data: {
            isStrong: true
        }
    });
</script>

参考文档01 参考文档02

style三元表达式

<span v-bind:style="{'display':config.isHaveSearch ? 'block':'none'}" >动态绑定样式</span>

参考文档

也可以使用 v-bind:style 或 :style 直接给 HTML 元素绑定样式，它也有对应的对象语法与数组语法。

<div id="app">
    <div :style="border"></div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            border:{
                border:'1px solid #00F',
                textShadow:'0 0 .3em gray'
            }
        }
    });
</script>

因为 JS 属性不支持短横分隔命名，所以我们这里使用 CSS 也支持的驼峰命名法。

参考文档

计算属性computed

例：反转字符串：
<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。。换句话说，computed 是局部渲染，而 methods 是全部渲染 区别：

  • 1.methods是个方法，比如你点击事件要执行一个方法，这时候就用methods,
  • 2.computed是计算属性，实时响应的，比如你要根据data里一个值随时变化做出一些处理，就用computed。
  • 3.我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
  • 4.methods必须需要一定的条件去触发,而computed则不需要.
  • 5.computed依赖缓存，如果不需要经常变动的用computed，需要经常变动的用methods。如果你需要传参数，就用methods。

computed

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

var vm = new Vue({
 el: '#app',
 data: {
  name: 'Google',
  url: 'http://www.google.com'
 },
 computed: {
  site: {
   // getter
   get: function() {
    return this.name + ' ' + this.url
   },
   // setter
   set: function(newValue) {
    var names = newValue.split(' ')
    this.name = names[0]
    this.url = names[names.length - 1]
   }
  }
 }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = 'http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);

从实例运行结果看在运行 vm.site = 'http://www.runoob.com'; 时，setter 会被调用， vm.name 和 vm.url 也会被对应更新。

十四、style样式绑定

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。 Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

14.1 class 属性绑定

我们可以为 v-bind:class 设置一个对象，从而动态的切换 class：

<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
</style>
<div id="app">
  <div v-bind:class="{ active: isActive }"></div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>

例：text-danger 类背景颜色覆盖了 active 类的背景色：

方法一：在对象中传入更多属性用来动态切换多个 class 。
<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
</style>
<div id="app">
  <div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
  </div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
    hasError: true
  }
})
</script>
方法二：直接绑定数据里的一个对象：
<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
</style>
<div id="app">
  <div v-bind:class="classObject"></div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    classObject: {
      active: true,
      'text-danger': true
    }
  }
})
</script>
方法三：绑定返回对象的计算属性：
<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
</style>
<div id="app">
  <div v-bind:class="classObject"></div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
  isActive: true,
  error: null
  },
  computed: {
    classObject: function () {
      return {
        active: this.isActive && !this.error,
        'text-danger': this.error && this.error.type === 'fatal',
      }
    }
  }
})
</script>
方法四：数组语法
<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
</style>
<div id="app">
    <div v-bind:class="[activeClass, errorClass]"></div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>

还可以使用三元表达式来切换列表中的 class ： errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类：

<style>
.text-danger {
    width: 100px;
    height: 100px;
    background: red;
}
.active {
    width: 100px;
    height: 100px;
    background: green;
}
</style>
<div id="app">
    <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>

style样式邦定

v-bind:style直接设置样式：

<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    activeColor: 'green',
    fontSize: 30
  }
})
</script>

也可以直接绑定到一个样式对象：

<div id="app">
  <div v-bind:style="styleObject">菜鸟教程</div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    styleObject: {
      color: 'green',
      fontSize: '30px'
    }
  }
})
</script>

v-bind:style 可以使用数组将多个样式对象应用到一个元素上：

<div id="app">
  <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    baseStyles: {
      color: 'green',
      fontSize: '30px'
    },
    overridingStyles: {
      'font-weight': 'bold'
    }
  }
})
</script>

参考文档

十五、vue组件参数传递：

Vue 组件间通信包括：父子组件间通信，兄弟组件间通信以及模块之间通信等。Vue 是数据驱动视图更新的框架, 所以对于 Vue 来说组件间的数据通信非常重要。Vue 实现组件间通信有很多方式，今天我来给大家讲解一下父子组件间通信：props 和$emit。

15.1.子组件向父组件传递参数;

image
image

子组件 A：

    <template>
      <div class="childA-wrapper">
        子组件A
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          childA: '我是组件A传过来的值'
        }
      },
      created: function() {},
      mounted() {
        this.sendDataParent()
      },
      methods: {
        sendDataParent() {
          // getChildDataA是在父组件on监听的方法
          // 第二个参数this.childA是需要传的值
          this.$emit('getChildDataA', this.childA)
        }
      }
    }
    </script>

子组件 B：

  <template>
  <div class="childB-wrapper">
    子组件B
  </div>
</template>

<script>
export default {
  data() {
    return {
      childB:'我是组件B传过来的值'
    }
  },
  created:function() {
  },
  mounted(){
    this.sendDataParent()
  },
  methods: {
   sendDataParent() {
        // getChildDataB是在父组件on监听的方法
        // 第二个参数this.childB是需要传的值
        this.$emit('getChildDataB', this.childB)
      }
  }
}
</script>

父组件：

  <template>
        <div>
            <v-childA v-on:getChildDataA="getChildDataA"></v-childA>
            <v-childB v-on:getChildDataB="getChildDataB"></v-childB>
            <div>获取组件A传过来的值:{{childAValue}}</div>
            <div>获取组件B传过来的值:{{childBValue}}</div>
        </div>
    </template>

    <script>
    import childA from '@/components/childA.vue'
    import childB from '@/components/childB.vue'
    export default {
      data() {
        return {
            childAValue:'',
            childBValue:'',
        }
      },
      methods: {
       getChildDataA(childA){
        console.log(childA)
        this.childAValue=childA
       },
       getChildDataB(childB){
        console.log(childB)
        this.childBValue=childB
       }
      },
      components: { 'v-childA': childA, 'v-childB': childB}
    }
    </script>

15.2、父组件向子组件传递参数

image
image
父组件：
<template>
        <div>
            <v-childA></v-childA>
            <v-childB  :sendBData="sendB"></v-childB>
        </div>
    </template>

    <script>
    import childA from '@/components/childA.vue'
    import childB from '@/components/childB.vue'
    export default {
      data() {
        return {
            sendB:'父组件向B组件传递的参数'
        }
      },
      methods: {
      },
      components: { 'v-childA': childA, 'v-childB': childB}
    }
    </script>

子组件 B：
<template>
  <div class="childB-wrapper">
    子组件B:{{sendBData}}
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  created: function() {},
  mounted() {},
  methods: {},
  props: {
    sendBData: String,
    required: true
  }
}

</script>

15.3、非父子组件进行传值；

image
image
bus.js
  import Vue from 'vue'
  export default new Vue()

组件 childB:
<template>
    <div class="childB-wrapper">
    </div>
  </template>
  <script>
  import Bus from '@/common/bus.js'
  export default {
    data() {
      return {
        childB: '我是组件B的内容'
      }
    },
    created: function() {},
    mounted() {
      this.elementByValue()
    },
    methods: {
      elementByValue: function () {
          Bus.$emit('val', this.childB)
        }
    }
  }

  </script>
##### 组件 childA：

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

    </script>

更多请查看：你不知道的vue组件传值方式

16.vue脚手架配置预渲染，prerender-spa-plugin 配置

用到插件：cnpm install prerender-spa-plugin --save 脚手架 2.0：(自己的是 2.0)

16.1 build/webpack.prod.conf.js 配置
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const webpackConfig = merge(baseWebpackConfig, {
 plugins: [
  // vue-cli 生成的配置就有了
  new HtmlWebpackPlugin({
   filename: config.build.index,
   template: 'index.html',
   inject: true,
   minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
   },
   chunksSortMode: 'dependency'
  }),
  // 配置 PrerenderSPAPlugin
  new PrerenderSPAPlugin({
   // 生成文件的路径，也可以与 webpakc 打包的一致。
   staticDir: path.join(\_\ _dirname, '../dist'),

   // 对应自己的所有路由文件，比如 index 有参数，就需要写成 /index/param1。这个其实不需要；千万不要加'/'这个 嵌套路由得 commonquestion 直接写即可
   routes: ['index', '...', '/commonQuestion', '/commonQuestion/questionList', '/commonQuestion/questionDetailInfo'],
   // ；
   renderer: new Renderer({
    inject: { // 可选；最好还是用
     foo: 'bar'
    },
    headless: false, // 可选；最好用
    renderAfterTime: 5000, // 通过实践是必选 官网说可选有误 一定要必选
    renderAfterDocumentEvent: 'render-event' // 可选；最好用
   })
  }),
 ]
})
16.2.路由得 index.js 添加属性：
​ mode:‘history’,
    修改config/index.js 中的build的 assetsPublicPath: ‘/’ ；不然会导致刷新页面路径错乱导致样式或者js丢失；

    修改main.js

    new Vue({
      el: '#app',
      router,
      store,    // 如果需要了切记引入啊   切记需要挂载的全部挂载上去
      render: h => h(App),
      mounted () {
        document.dispatchEvent(new Event('render-event'))
      }
    })
16.3.build/webpack.prod.conf.js 配置
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
 configureWebpack: config => {
  if (process.env.NODE_ENV !== 'production') return;
  return {
   plugins: [
    new PrerenderSPAPlugin({
     // 生成文件的路径，也可以与 webpakc 打包的一致。
     // 下面这句话非常重要！！！
     // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
     staticDir: path.join(\_\ _dirname, 'dist'),
     // 对应自己的路由文件，比如 a 有参数，就需要写成 /a/param1。
     routes: ['/', '/product', '/about'],
     // 这个很重要，如果没有配置这段，也不会进行预编译
     renderer: new Renderer({
      inject: {
       foo: 'bar'
      },
      headless: false,
      renderAfterTime: 5000, // 必选哈
      // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
      renderAfterDocumentEvent: 'render-event'
     })
    }),
   ],
  };
 }
}
16.4 main.js 配置
new Vue({
 router,
 store,
 render: h => h(App),
 mounted() {
  document.dispatchEvent(new Event('render-event'))
 }
}).\$mount('#app')

其他修改同 2.0;

参考文档

十六、vue SPA单页面的 SEO 优化

vue-meta-info 

官方地址： monkeyWangs/vue-meta-info

1.安装
npm install vue-meta-info --save
2.全局引入 vue-meta-info
import Vue from 'vue'
import MetaInfo from 'vue-meta-info'

Vue.use(MetaInfo)
3.组件内静态使用 metaInfo
<template>
  ...
</template>
<script>
  export default {
    metaInfo: {
      title: 'My Example App', // set a title
      meta: [{                 // set meta
        name: 'keyWords',
        content: 'My Example App'
      }]
      link: [{                 // set link
        rel: 'asstes',
        href: 'https://assets-cdn.github.com/'
      }]
    }
  }
</script>
4.如果你的 title 或者 meta 是异步加载的，那么你可能需要这样使用
<template>
  ...
</template>
<script>
  export default {
    name: 'async',
    metaInfo () {
      return {
        title: this.pageName
      }
    },
    data () {
      return {
        pageName: 'loading'
      }
    },
    mounted () {
      setTimeout(() => {
        this.pageName = 'async'
      }, 2000)
    }
  }
</script>
<meta name="参数" content="具体的描述">
5.meta标签共有两个属性，分别是http-equiv属性和name属性
  1. name 属性 name 属性主要用于描述网页，比如网页的关键词，叙述等。与之对应的属性值为 content，content 中的内容是对 name 填入类型的具体描述，便于搜索引擎抓取。 meta 标签中 name 属性语法格式是：
<meta name="参数" content="具体的描述">

其中 name 属性共有以下几种参数。(A-C 为常用属性)

A. keywords(关键字)

说明：用于告诉搜索引擎，你网页的关键字。

<meta name="keywords" content="XX网，汽车，车主，评选">
B. description(网站内容的描述)
说明：用于告诉搜索引擎，你网站的主要内容。
<meta name="description" content="汽车评选，XX网，评选，汽车">
C.viewport(移动端的视口)

说明：这个属性常用于设计移动端网页。

举例

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
D. robots(定义搜索引擎爬虫的索引方式)
说明：robots 用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。
content 的参数有 all,none,index,noindex,follow,nofollow。默认是 all。

举例：

<meta name="robots" content="none">

具体参数如下：

1.none : 搜索引擎将忽略此网页，等价于 noindex，nofollow。
2.noindex : 搜索引擎不索引此网页。
3.nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
4.all : 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于 index，follow。
5.index : 搜索引擎索引此网页。
6.follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。
E. author(作者)

说明：用于标注网页作者 举例：

<meta name="author" content="Lxxyx,841380530@qq.com">
F. generator(网页制作软件)

说明：用于标明网页是什么软件做的 举例: (不知道能不能这样写)：

<meta name="generator" content="Sublime Text3">
G. copyright(版权)

说明：用于标注版权信息 举例：

<meta name="copyright" content="Lxxyx"> //代表该网站为Lxxyx个人版权所有。
H. revisit-after(搜索引擎爬虫重访时间)

说明：如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问。 举例：

<meta name="revisit-after" content="7 days" >
I. renderer(双核浏览器渲染方式)

说明：renderer 是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。比如说 360 浏览器。 举例：

<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式
6. http-equiv 属性

http-equiv 相当于 HTTP 的作用，比如说定义些 HTTP 参数啥的。 meta 标签中 http-equiv 属性语法格式是：

<meta http-equiv="参数" content="具体的描述">

其中 http-equiv 属性主要有以下几种参数：

A. content-Type(设定网页字符集)(推荐使用 HTML5 的方式)

说明：用于设定网页字符集，便于浏览器解析与渲染页面 举例：

<meta http-equiv="content-Type" content="text/html;charset=utf-8">  //旧的HTML，不推荐
<meta charset="utf-8"> //HTML5设定网页字符集的方式，推荐使用UTF-8
B. X-UA-Compatible(浏览器采取何种版本渲染当前页面)

说明：用于告知浏览器以何种版本来渲染页面。（一般都设置为最新模式，在各大框架中这个设置也很常见。） 举例：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面
C. cache-control(指定请求和响应遵循的缓存机制)

用法 1.

说明：指导浏览器如何缓存某个响应以及缓存多长时间。这一段内容我在网上找了很久，但都没有找到满意的。 最后终于在 Google Developers 中发现了我想要的答案。

举例:

<meta http-equiv="cache-control" content="no-cache">

共有以下几种用法：

  • no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
  • no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
  • public : 缓存所有响应，但并非必须。因为 max-age 也可以做到相同效果
  • private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说 CDN 就不允许缓存 private 的响应）
  • maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60 表示响应可以再缓存和重用 60 秒。 参考链接：HTTP 缓存 用法 2.(禁止百度自动转码)

说明：用于禁止当前页面在移动端浏览时，被百度自动转码。虽然百度的本意是好的，但是转码效果很多时候却不尽人意。所以可以在 head 中加入例子中的那句话，就可以避免百度自动转码了。 举例：

<meta http-equiv="Cache-Control" content="no-siteapp" />
D. expires(网页到期时间)

说明:用于设定网页的到期时间，过期后网页必须到服务器上重新传输。 举例：

<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
E. refresh(自动刷新并指向某页面)

说明：网页将在设定的时间内，自动刷新并调向设定的网址。 举例:

<meta http-equiv="refresh" content="2；URL=http://www.lxxyx.win/"> //意思是2秒后跳转向我的博客
F. Set-Cookie(cookie 设定)

说明：如果网页过期。那么这个网页存在本地的 cookies 也会被自动删除。

<meta http-equiv="Set-Cookie" content="name, date"> //格式
<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具体范例

更详细更具体的 vue 学习文档访问 vue学习文档01 vue学习文档02

放在一篇提示负载太大，所以只两次发了。

vue实战项目：项目技巧总结（一）

如果这篇文章帮助到了你，欢迎点赞和关注，搜索《叫我詹躲躲》加入我们的技术群一起学习讨论，共同探索前端的边界。

avatar
文章
阅读
粉丝