组件

定义一个组件a.vue，模板如下：

<template>
  <div>
    {{msg}}
  </div>
</template>

<script>
  export default {
    name: 'hello',
    data () {
      return {
        msg: 'i am a!'
      }
    }
  }
</script>

<style scoped>

</style>

在另外一个组件中引入组件，然后再定义组件，再写入布局中 如：

<template>
  <div>
    <aaa></aaa>
  </div>
</template>

<script>
  import aaa from './a.vue';
  export default {
    components: {
      aaa
    },
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

循环

<li v-for="value in itemData">
      <ol>
        {{value.name}}
     </ol>
</li>

如果要改变数组中的某一项，使用全局vue的方法vue.set(array,index,{数据}) 如：

 import Vue from 'vue'
        Vue.set(this.itemData,1,{
          name: 'xiaoer',
          age: 12,
          sex: 0
        })

组件数据绑定

v-bind 可以绑定变量 可以缩写为 如 v-bind:dataA :dataA

<aaa :dataA="dataA"></aaa>

  data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        dataA: '我是绑定的变量'
      }
    },

v-bind:class :class 可以绑定属性 如 v-bind:class="classColor"

<aaa :class="classColor"></aaa>

  data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        classColor: 'red-font'
      }
    },

:style 绑定样式 如

<a href="http://www.baidu.com" :style="bindStyle">跳转</a>
data() {
  return {
    bindStyle: {
      'color': 'red',
      'font-size': '30px'  
    }
  }
}

v-if v-show v-if="true" 为true时显示，false时隐藏， v-show也一样，区别在于v-if=false时会清除标签元素， v-else=false时显示，当不显示时清除标签

事件绑定 v-on:click="" v-on可以缩写为@ @click 可以绑定指定的事件如@click.13 // 按了回车键entry @click.entry

父组件回调子组件事件

1.在子组件中添加一个事件如@click="clickChild"，在clickChild方法中使用this.$emit('bindChild',回传参数);
2.在父组件中绑定到子组件的点击事件 <child @clickChild="clickEvent">,然后在对应的clickEvent方法中接收回传参数 具体如下：

// 子组件
<button @click="emitEvent">点我啊</button>
    methods: {
      emitEvent () {
          this.$emit('my-event',this.msg);
      }
    }
// 父组件
<aaa @my-event="myAAAEvent"></aaa>
    methods: {
      myAAAEvent (value) {
        alert(value);
      }
    }

表单绑定v-model <input v-model="myValue" type="text"> myValue的值就是输入框的值，输入框的值就是myValue的值

表单绑定checkbox

    <input v-model="myBox" type="checkbox" value="1">
    <input v-model="myBox" type="checkbox" value="2">
    <input v-model="myBox" type="checkbox" value="3">
    <br>
    {{myBox}}

myBox: []

// 对应的myBox的值是一个数组，就是value中的值

表单绑定radio单选

    <input v-model="myBox" type="radio" value="1">
    <input v-model="myBox" type="radio" value="2">
    <input v-model="myBox" type="radio" value="3">
    <br>
    {{myBox}}

myBox: ''
// myBox的值是一个数据就是value中的值

select 选择框

    <select v-model="selectionData" title="哈哈">
      <option value="5">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <br>
    {{selectionData}}

 selectionData: ''
// 对应的值也是selectionData=value中的值

select 选择框 循环使用

<option v-for="item in selectionData" v-bind:value="item.value">{{item.text}}</option> 注意！ 在这里要想动态获取要使用v-bind，其他的也一样

    <select v-model="myValue" title="哈哈">
      <option v-for="item in selectionData" v-bind:value="item.value">{{item.text}}</option>
    </select>
    <br>
    {{myValue}}

        myValue: '',
        selectionData: [
          {
              text: '大海',
              value: '1'
          },{
            text: '小海',
            value: '二'
          },{
            text: '大海3',
            value: '0'
          }
        ]

v-model

    <input type="text" v-model.lazy="myValue">
    <br>
    {{myValue}}
// 当按下回车键时或鼠标点击框外面后或者tab键后才将数据给到myValue
    <input type="text" v-model.number="myValue">
    <br>
    {{myValue}}
// 当输入数字时才获取数据

计算属性

当我们对某些输入的字符在显示的时候要做处理的时候可以使用计算属性
使用方法：在methods的同级json处 加上computed 对象，在里面定义一个方法作为计算属性 如： 在这里就可以将值做处理，大小写转换啊什么的

computed: {
        myValueWithoutNum () {
            return this.myValue+1;
        }
    }
    <input type="text" v-model="myValue">
    <br>
    {{myValueWithoutNum}}

    myValue: '',
// 解释，当输入的字符改变时会触发myValueWithoutNum()方法的调用，所以{{myValueWithoutNum}}也是跟着输入变化而变化的  也可以用方法的方式实现

watch 监听数据变化，当数据变化的时候调用

    watch: {
      myValue: function (newVal, oldVal) {
        console.log(newVal,oldVal);
      },
      msg: function (newVal, oldVal) {
        console.log(newVal,oldVal);
      }
    },

父组件传值到子组件

// 父组件   这里的number可以用绑定的模式获取到如 :number="numData"  
number命令不要用大写，用-  如果用了-在子组件中就用大小写显示，接收还是用-
 <aaa @my-event="myAAAEvent" number="100"></aaa>
// 子组件
props: ['number'],
// 获取到的值是100
{{number}}

在子组件中的props接收的数据形式有两种

  props:{'number','data'}  
  props: {
    'number-to': [Number,String,Object...]
  }

父组件向子组件插入布局

  // 父
    <aaa @my-event="myAAAEvent" number="100">
      <p>我是插进来的，哈哈哈</p>
    </aaa>
// 子
    <slot></slot>
// 第二种-------------------------------------------------------------------------------------------
// 父
    <aaa @my-event="myAAAEvent" number="100">
      <p slot="headSlot">我是插进来的，哈哈哈</p>
    </aaa>
// 子
    <br>
    <slot name="headSlot">空白头</slot>
    <p>随意</p>
    <slot name="footSlot">空白脚</slot>

动态组件 <p :is="currentView"></p> currentView: 'com-a',如果配合<keep-alive>标签使用当切回来时，之前的数据会被缓存

    <keep-alive>
      <div :is="currentView"></div>
    </keep-alive>
    <button @click="showB">点击展示B</button>

currentView: 'aaa'
showB () {
        this.currentView = bbb;
 }

动画