vue2.0开辟谈天顺序(四) 完全体验一次Vue开辟(上)

在我终身的黄金时代,我有很多期望。我想爱,想吃,还想在一瞬间变成天上半明半暗的云。
                                   ——王小波
上一章研讨了vue中组件的通讯,算是对vue的组件通讯有了大抵的相识。综合上三章对搭建项目也算是心有成竹了,这一章我将把本身在开辟全部项目时的一些总结分享给人人。

X-chat项目github地点:https://github.com/ermu592275…
X-chat是我模仿他人项目的UI纯手打的,在这里示意感谢,同时贴上CookIM(我模仿的项目)的地点:
码云地点:http://git.oschina.net/cookee…
演示地点:https://im.cookeem.com/chat/#…

一、关于CSS
尽人皆知,vue组件的css款式能够写在<style></style>中,固然也能够写成一个css文件然后link进去。
我在项目中关于CSS的写法以下:

1.运用bootstarp.css

装置npm install bootstarp --save
引入有两种要领:在index.html中link或许main.js也就是进口文件中improt,须要注重的是import不支持运用cdn,所以假如是cdn能够在index.html中link进来
import以下:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import router from './router'
import store from './store'

import App from './App'
import 'bootstrap/dist/css/bootstrap.css' //只需引入就够了
import 'animate.css/animate.css'
import './base.css'

Vue.use(VueRouter)
console.log(store)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

2.运用base.css声明基础款式
我在src目录下创建了base.css将reset款式以及大众的款式都放在了base.css中,也在main.js中引入

import './base.css'

3.在每一个组件中声明对应的款式
在每一个组件中写对应的款式,而且加上scoped显现款式的作用域,能有用的防备款式争执,今后不再为css款式的定名而头疼。

<style scoped> // 加上scoped
.hint {
    margin: 0;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 99;
}
....
</style>

假如要运用sass或less语法,请参考:https://segmentfault.com/a/11…

4.过渡结果

组件的切换,如果能加上过渡结果就更好了。在vue中能够经由过程一下体式格局完成过渡结果:

  • 在 CSS 过渡和动画中自动运用 class

  • 能够合营运用第三方 CSS 动画库,如 Animate.css

  • 在过渡钩子函数中运用 JavaScript 直接操纵 DOM

  • 能够合营运用第三方 JavaScript 动画库,如 Velocity.js

我在项目中运用了animate.css,用法和bootstarp十分相似,只须要装置今后在main.js中引入就能够了。

npm install animate.css --save

main.js

import 'animate.css/animate.css'

也运用了Vue供应的transition封装组件,transition多用在前提衬着(v-if),动态数组等情况下。
我在项目中的运用以下:
APP.vue

<template>
    <div>
<!-- 1.运用transition组件将须要完成过渡结果的组件(也能够是元素)包裹,而且定义一个name属性 -->
        <transition name="listbar">   
            <listbar></listbar>
        </transition>
        <div class="rightpart" v-bind:style="height">
            <router-view></router-view>
        </div>
        <transition name="daggerbar">
            <daggerbar></daggerbar>
        </transition>
        <transition name="hinttst">
            <hint></hint>
        </transition>
    </div>
</template>

<script>
import Headerbar from './Header.vue'
import Listbar from './List.vue'
import Footerbar from './Footer.vue'
import Daggerbar from './Dagger.vue'
import Hint from './Hint.vue'

export default {
    components: {
        Headerbar,
        Listbar,
        Footerbar,
        Daggerbar,
        Hint
    },
    data () {
        return {
            height: 'height:'+document.documentElement.clientHeight+'px',
            showdagger: this.$store.state.cCtrl.showDagger
        }
    },
    methods: {
        daggerCtrl: function(){
            this.$store.commit('daggerCtrl')
        }
    }
}

</script>

<style>
.rightpart {
    position: relative;
    float: left;
    width: 83%;
}
/*2. 增添对应的style,注重前缀为transition的name属性名 !!*/
.daggerbar-enter-active, .daggerbar-leave-active {
      transition: opacity .5s;
}
.daggerbar-enter, .daggerbar-leave-active {
      opacity: 0;
}
.hinttst-enter-active {
      transition: all .3s ease;
}
.hinttst-enter {
      transform: translateX(-100%);
      opacity: 0;
}
/*.listbar-enter-active {
    transition: all .3s ease;
}
.listbar-enter {
    margin-left: -100%;
}*/
</style>

transition有四个类名,用于定义enter/leave的过渡结果:

  1. v-enter: 定义进入过渡的最先状况。在元素被插进去时见效,鄙人一个帧移除。

  2. v-enter-active: 定义进入过渡的完毕状况。在元素被插进去时见效,在 transition/animation 完成今后移除。

  3. v-leave: 定义脱离过渡的最先状况。在脱离过渡被触发时见效,鄙人一个帧移除。

  4. v-leave-active: 定义脱离过渡的完毕状况。在脱离过渡被触发时见效,在 transition/animation 完成今后移除。

在项目中运用到的CSS相干临时是这些,其他坑留着今后踩。

二、关于template
template包含了html的代码,vue和angular一样,也有本身的模版语法,可大抵分为以下几类:

  1. 赋值 包含{{}} v-html v-bind

  2. 掌握 包含 v-if v-on

  3. 过滤 vue2.0烧毁了自带的fitler,如今只能本身写了

起首声明,以下内容大多是从vue官网中copy过来的,只是为了做一个总结性的概述,满足喜好疾速浏览的朋侪,更细致的内容请移步到官网中。
赋值
所谓赋值,就是把Vue实例中的数据(data声明的部份)衬着到html中。vue比拟angular没有脏搜检机制,而是用了基于依靠追踪的视察体系。不会像angular那样watcher越多,越来越慢。
赋值有一下几种体式格局:

  • {{}} 最常见的体式格局

    <span>Message: {{ msg }}</span>
  • v-once一次性插值,当数据转变时,插值处的内容不会转变

    <span v-once>This will never change: {{ msg }}</span>
  • v-html 插进去html文本的时刻用此体式格局

    <div v-html="rawHtml"></div>
  • v-bind 为属性赋值时运用此体式格局,能够简写为:

      <div v-bind:id="dynamicId"></div>
      <div :id="dynamicId"></div>

    个中css的绑定以下:

<!-- isActive值为true就增添active属性 -->
<div v-bind:class="{ active: isActive }"></div>
  • v-for用于以数组的情势衬着html

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

v-model 双向数据绑定,差别的范例绑定的体式格局个有差别,下面是一个input范例的简朴事例,其他范例请看文档:http://cn.vuejs.org/v2/guide/…

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

以上就是赋值操纵的简朴引见,更多庞杂的操纵(特别是v-bind:class和v-for)请浏览官网http://cn.vuejs.org/v2/guide/…

掌握
我在这里将前提衬着和事宜监听归于掌握一类,实在不太好,然则又不知道该怎样分。有点牵强,厚着脸皮往下写

  • 前提衬着
    v-if依据前提显现或隐蔽组件

<h1 v-if="ok">Yes</h1>

v-else放在v-if的背面,示意当v-if为false时,要显现的内容。

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

v-else-if,望文生义,用作 v-ifelse-if 块。能够链式的屡次运用:

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-show: 和v-if用法雷同,然则v-show的元素会一直衬着并保存在DOM中,只是转变display值。

<h1 v-show="ok">Hello!</h1>

v-if 有更高的切换斲丧而 v-show 有更高的初始衬着斲丧。因而,假如须要频仍切换运用 v-show 较好,假如在运行时前提不大可能转变则运用 v-if 较好。

  • 事宜监听
    v-on: 监听DOM事宜触发绑定的methods。

<div id="example-1">
  <button v-on:click="counter += 1">增添 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

能够简写为@click="counter += 1"。vue还供应了事宜修饰符和按键修饰符.
事宜修饰符比方阻挠冒泡:

<a v-on:click.stop="doThis"></a>

按键修饰符指按下键盘上的某个键触发此methods,比方enter键:

<input v-on:keyup.enter="submit">

还能够自定义按键修饰符:

//main.js
Vue.config.keyCodes = { 
  v: 86,
  f1: 112,
  mediaPlayPause: 179,
  up: [38, 87]
}

过滤
转变数据显现的体式格局而不转变数据底本的值,不如时候显现花样改成yyyy-MM-dd但底本的date对象不会转变。vue2.0烧毁了之前1.0上的一切自带过滤器,如今要本身写了。用法以下:

<!-- in mustaches -->
{{ msg| capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
<script>
export default {
    name: 'hello',
    data () {
        return {
            msg: 'Welcome to Your Vue.js App!'
        }
    },
    filters: {
        capitalize: function (value) { // value对应 | 前面的数据
          if (!value) return ''
          value = value.toString()
          return value + 'you are lovely'
        }
      }
}
</script>
    原文作者:ermu
    原文地址: https://segmentfault.com/a/1190000008004514
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞