Vue2.0进阶回顾随笔（一）

书写规范

如果你不这样做，可能会导致一些意想不到的错误

命名

函数名

驼峰法

needZero(){...}

变量名

也是驼峰法

data() {
  return {
    msg: '云天河移动端首页',
    id: 1,
    name: "云天河",
    message: "<h5>这里是v-html</h5>",
    indexHeader: {
      beginTime: "2018-02-05 18:16:03",
      endTime: "2018-02-05 20:16:03",
      cantJoinTime: "2018-02-05 22:16:03",
      destination: "云天河商城",
      releaseUsername: "云天河",
    }
  }
},

文件名

大写开头的驼峰式

IndexHeader.vue

组件名

引入时

用文件名

import IndexHeader from '@/components/IndexHeader'

使用时

模板中使用，全部小写，中间以 - 分割
动态赋值的属性名，也是
用 v-bind: 或者 : 都可以表示这个值为属性

<index-header
  :begin-time="indexHeader.beginTime"
  :end-time="indexHeader.endTime"
  :cant-join-time="indexHeader.cantJoinTime"
  :destination="indexHeader.destination"
  :release-username="indexHeader.releaseUsername">
</index-header>

v-on: 缩写成 @ 表示为点击事件
如果你想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on 如：

<my-component v-on:click.native="doTheThing"></my-component>

接收数据

驼峰法

<script>
export default {
    props: {
        beginTime: String,
        endTime: String,
        cantJoinTime: String,
        destination: String,
        releaseUsername: String,
    },
}
</script>

细节

v-if与v-show的区别

在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程
因为 v-if 之中的模板也可能包括数据绑定或子组件
v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）
相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗
因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好

v-for

在迭代属性输出的之前，v-for 会对属性进行升序排序输出
v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供一个 key 的特殊属性

computed vs methods

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

computed 对象内的方法如果在初始化时绑定到元素上的事件会先执行一次这个方法
而 methods 内的方法则不会；
例如以下实例初始化时会自动执行一遍 name1 和 greet 这两个方法

var app = new Vue({
    el: '#app',
    data: {
        name: 'Vue.js'
    },
    // 在 `methods` 对象中定义方法
    computed: { 
        name1: function(){  alert('222') },
        greet: function (event) {
            // `this` 在方法里指当前 Vue 实例
            alert('Hello ' + this.name + '!')
            // `event` 是原生 DOM 事件
            if (event) {
                alert(event.target.tagName)
            }
        }
    }
})
// 也可以用 JavaScript 直接调用方法

v-bind与v-model对比

v-bind 用于绑定属性和数据 v-model 用在表单控件上的，用于实现双向数据绑定
所以如果你用在除了表单控件以外的标签是没有任何效果的

v-model之复选框

复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组

自定义指令

钩子函数相关

Vuex

Web开发前后端模式都差不多一个套路
视图层、逻辑层、控制层...
只是前端方面对于控制层方面，分得更多一点
路由分发、状态分发

思路大致如下

import * as types from '../types';
// 通用配置

// -----------------------------------------------------------:
//     设置初始状态
// -----------------------------------------------------------:
const state = {
  loading: false, // false -> 关 true -> 开
  collapse: true, // false -> 隐藏 true -> 显示
};

// -----------------------------------------------------------:
//     处理逻辑[可以异步]，数据交互常用。 它提交的是 Mutation 
// -----------------------------------------------------------:
/**
    外部通过类似
    this.$store.dispatch('setLoadingState', false)
    来实现访问 actions 方法 
*/
const actions = {
  // loading 层  显示状态
  setLoadingState({ commit }, status) {
    commit(types.common_loading, status);
  },
  setCollapseState({ commit }, status) {
    commit(types.common_collapse, status);
  }
}

// -----------------------------------------------------------:
//     通过 getters 实现 向外暴露状态参数
// -----------------------------------------------------------:
/**
    外部通过类似
    this.$store.state.模块名.collapse
    来实现访问 getters 参数 
*/
const getters = {
  loading: state => state.loading,
  collapse: state => state.collapse,
}

// -----------------------------------------------------------:
//     状态变更[同步执行] - 可接收 actions 中调用，来实现更新状态
// -----------------------------------------------------------:
const mutations = {
  // loading层 切换
  [types.common_loading](state, status) {
    state.loading = !status;
  },
  // 手风琴 切换
  [types.common_collapse](state, status) {
    state.collapse = !status;
  }
}

export default {
  state,
  actions,
  getters,
  mutations
}

使用示例

<template>
    <div>
        <div class="cell" v-if="getCollapse">
            <ul class="detail-cell">
                <li><i class="icon">&#xe615;</i><span>本文主要讲了、、、</span></li>
            </ul>
        </div>
        <div>
            <el-button v-on:click="toggleButton" type="info">{{ getToggleButton }}</el-button>
        </div>
    </div>
</template>
<script>
import tools from '@/tools';
export default {
    computed: {
        getToggleButton() {
            return !this.$store.state.common.collapse ? '点击展开' : '点击收起';
        },
        getCollapse() {
            return this.$store.state.common.collapse;
        }
    },
    methods: {
        // 切换
        toggleButton() {
            let status = this.$store.state.common.collapse;
            this.$store.dispatch('setCollapseState', status);
        }
    }
}
</script>