Vue入门

2018-09-30 本文已影响8人 CP9

Vue.use(Router)

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：例如index.js中

import Router from 'vue-router'

Vue.use(Router)
...

使用全局的 script 标签，则无须如此（手动安装），例如index.html中

...
var router = new VueRouter({
    routes:[
        { path: '/foo', component: {template:'<div>foo</div>'} }
        ,{ path: '/bar', component: {template:'<div>bar</div>'} }
    ] 
})
...

Es6中export default 和 export 区别

单文件组件与全局组件的区别

全局组件

定义

Vue.component('my-component-name', { /* ... */ })

使用

new Vue({ el: '#container '})

单文件组件

在*.vue中定义

<template>
  <div id='app'>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

在index.html中使用，或者通过vue-router来使用

<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

Mint UI中的样式：PostCSS深入学习: 结合BEM和SUIT方法使用PostCSS

vue_cli构建的项目如何去除脏边距

在App.vue中的样式添加以下代码：

<style>
  ...
  * {
    margin: 0;
    padding: 0;
  }
</style>

CSS优先级

Vue中如何自定义提供给外部修改数据的组件

例如自定义ToolBar标题栏，组件的标题是需要使用该组件的地方去自定义的：

第一种方法：使用prop类型传值

定义组件ToolBar.vue

<template>
  <div :style="{background : bg_color}">
    <img src="../../static/img/toolbar_nav.png"/>
    <span>{{page_title}}</span>
    <i></i>
  </div>
</template>
<script>
export default{
  props: {
    page_title: String,
    bg_color: [Number, String]
  }
}
</script>

使用组件

<template>
    <div>
  <ToolBar page_title="业务开展区域查询" bgColor="#f1f1f1"></ToolBar>
    </div>
</template>

使用slot插槽，深入理解vue中的slot与slot-scope

定义组件ToolBar.vue

<template>
  <div :style="{background : bg_color}">
    <img src="../../static/img/toolbar_nav.png"/>
    <span>
      <!--使用slot插槽-->
      <slot></slot>
    </span>
    <i></i>
  </div>
</template>
...

使用组件

<template>
    <div>
      <ToolBar bgColor="#f1f1f1">业务开展区域查询</ToolBar>
    </div>
</template>

根据状态动态切换CSS样式

通过class对象绑定切换样式

<template>
  <div>
    <div class="page_rest">
      <button type="button" :class="{btnEnable : isInputNonEmpty}">{{button_name}}</button>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        isInputNonEmpty: false,
        credit_no: ''
      }
    },
    watch: {
      credit_no: function (val, oldVal) {
        if (val != null && val != undefined && val.length > 0) {
          this.isInputNonEmpty = true
        } else {
          this.isInputNonEmpty = false
        }
      }
    }
  }
</script>
<style scoped>
  .btnEnable {
    color: #ffffff;
    background-image: linear-gradient(90deg, #ff8c40 0%, #ff6400 100%)
  }
</style>

css实现遮罩效果以及帧布局使用

自定义组件绑定事件不起作用

// @click='handleClick’ 不起作用
@click.native='handleClick’

在组件上绑定事件，你不加 .native修饰符告诉它是这是原生点击事件，它会以为这是你定义的自定义事件。

Vue常用事件

[Vue中如何在父组件中获取自定义的CheckBox的选中状态]

自定义CheckBox通过v-model观察CheckBox的选中状态变化，然后通过监听器观察checked值得变化，在方法内部通过emit自定义事件，触发onCheckChange自定义事件

<template>
  <div>
    <input type="checkbox" id="checkbox-2-1" class="regular-checkbox big-checkbox" v-model="checked"/><label
    for="checkbox-2-1"></label>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        checked: false
      }
    },
    watch: {
      checked: function (val, oldVal) {
        this.$emit('onCheckChange', val)
      }
    }
  }
</script>

在使用CheckBox的父组件中绑定onCheckChange事件

<template>
  <div>
      <CheckBox type="checkbox" class="checkBox" @onCheckChange="onCheckChange"></CheckBox>
      <input type="text" class="phone" v-if="check" placeholder="请输入您的电话号码">
  </div>
</template>
<script>
  import CheckBox from '../Checkbox.vue'
  export default{
    components: {CheckBox},
    data(){
      return {
        check: false
      }
    },
    methods: {
      onCheckChange: function (val) {
        this.check = val
      }
    }
  }
</script>

Vue2.0组件之间的通信

html 去掉input 获取焦点时的边框

Vue2.0 如何传递数值或boolean

Vue中怎么才能使用data中的数据做为变量的值?

必须使用计算属性

input标签限制输入长度

oninput="if(value.length>11)value=value.slice(0,11)"