vue 1.0

一、基础组件

data：存放数据

methods:存放方法

watch:监听数据  

watch:{  
            'newinput':function(vue,oldvue){     //newinput是数据名
                console.log(vue+'---'+oldvue)
            }
        }

二、模板指令

v-text 与 v-html  

v-show 与 v-if    //show是通过display:none; 来写的

v-for

v-on 事件绑定

v-on:click="todo"  和 @click="todo"  相等
v-bind 是对属性的操作
v-bind:src="imgSrc"
v-bind:class  简写成 :class（可接对象，可接数组）

三、组件间调用  components 先要注册  调用的时候，大写转成中线来调用

<template>
    <compon></compon>    //组件名大写要用中线来替换
</template>
<script>
import compon from './compon';  //只是导入，必须注册
export default{
       components:{    //注册
            compon
        }
}
</script>

compon.vue
<template>
    <div :class="['otherclass']">123</div>
</template>

四、组件间传值 

父传子  方法一：props

<template>
    <compon msgfromcom="abc"></compon>    //父要传的值
</template>
conpon.vue
<template>
    <div :class="['otherclass']">{{msgfromcom}}</div>   //直接可以使用
    <button @click="buttonclick">click</button>
</template>
<script>
    export default{
        data(){

        },
        props:['msgfromcom'],       //必须先要注册
        methods:{
            buttonclick(){
                alert(this.msgfromcom)
            }
        }
    }
</script>

方法二： this.$broadcast('onaddNew',this.items); 直接传值

events:{   //接收
            'onaddNew':function(items){
                console.log(items)
            }
}

子传父      其中一种方法是this.$emit

<template>
    <button @click="tar">click</button>
</template>
<script>
    export default{
        data(){
            return {
                tes:123
            };
        },
        props:['compon'],
        methods:{
            tar(){
                this.$emit('tell-me',this.tes);  //通过方法传递data中的test的值，定义传递方法名tell-me
            }
        }
    }
</script>

<p v-text="myp"></p>
<compon-a compon='idear' v-on:tell-me="myidear"></compon-a>
//首先注册组件，通过自定义方法 v-on:tell-me来绑定方法，myidear是自定义方法
myidear(msg){     
                this.myp=msg;
}                   //绑定方法，msg是传过来的值

 第二种 同理 使用   this.$dispatch('tell-me',this.tes);

小例子

store.js

const storage_key = 'todos-vuejs';
export default{
    fetch(){
        return JSON.parse(window.localStorage.getItem(storage_key) || '[]')
    },
    save(items){
        window.localStorage.setItem(storage_key,JSON.stringify(items));
    }
}

index.vue

<template>
    <input type="text" v-model="newinput" v-on:keyup.enter="subinput" />
    <ul>
        <li v-for="item in items" v-text="item.a" v-bind:class="[{'fined':item.infined}]" v-on:click="lisel(item)"></li>
    </ul>
</template>
<script>
import stor from './store';
    export default {
        data() {
            return {
                newinput:'',
                msg: 'hello world!',
                items:stor.fetch()
            };
        },
        methods:{
            subinput:function(){
                this.items.push({
                    a:this.newinput,
                    infined:false
                });
                this.newinput='';
            },
            lisel:function(item){
                item.infined = !item.infined;
            }
        },
        watch:{
            'items':function(vue,oldvue){
                stor.save(vue);
            },
            deep: true
        },
        computed: {
            time() {
                return Date.now();
            }
        }
    };
</script>
<style>
    .fined{
        color:red;
    }
</style>

关于组件间传值一直很乱，小结一下：  ☆☆☆☆☆☆

vue1.0

方法一、父组件传子组件，子组件传父组件 可以用统一的方法 this.$broadcast，this.$dispatch然后那边用events来接收。

方法二、都需要在组件上写一些东西。

父组件传子组件 :xxx='要传的值'，然后子组件props['xxx']来接收。

子组件传父组件 this.$emit('xxx',‘要传的值’)，然后父组件 @xxx='方法名' 来接收。

五、v-ref

接触这个指令是当时要控制一个表格已选取消的一个功能

用 iview创建表格

<i-table border v-ref:itablecenel :columns="columns4" :data="data1" @on-select="tableSelect"></i-table>
<button @click="tableCenel">取消选择</button>

获取组件信息并取消选择

tableCenel(){
    let i=0;
    for(i in this.$refs.itablecenel.objData){
        this.$refs.itablecenel.objData[i]._isChecked=false;
    }
}

需要注意的是，在dom元素里面写法是 v-ref:XXX   ，不加双引号

在获取的时候，用this.$refs

六、vm.$nextTick 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

接触这个方法是因为要是ready方法里用brodcast广播，结果发现广播不出去，用延时就可以广播出去

this.$nextTick(() => {       //写在ready() 里------父组件
    this.$broadcast('getaaa',aaa);
});

子组件接收用events，照常接收

@