Vue学习笔记

1.  v-for

v-for在2.0中如果要加序号 不能直接使用  $ index了

<template>
  <div>
      {{ hello }}
      <p v-html="hello"></p>
      <p v-text="hello"></p>
      {{num + 1}}
      {{status ? "success" : "false"}}
      <ul>
          <li v-for="(item,index) in list" :class="{odd:index % 2}">
              {{index}}--{{item.name}}--{{item.price}}
          </li>
      </ul>
      <ul>
        <li v-for="(value,key) in objList">          
            {{key+"："+value}}
        </li>
      </ul>
  </div>
</template>

<script>
  export default{
    data(){
      return {
        hello:"<span>Word</span>",
        num:1,
        status:true,
　　　　 //列表渲染
        list:[
          {
            name:'apple',
            price:34
          },{
            name:'banana',
            price:25
          }
        ],
　　　　 //对象渲染
        objList:{
          name:'apple',
          price:34,
          color:'red',
          weight:14
        }
      }
    }
  }
</script>

以上代码 运行结果如下：

组件引用(也就是新建了vue文件后，引入到app.vue中)

（1）、在components下新建一个vue模板文件。  //比如建一个名为a的vue文件

（2）、在App.vue的Script中引入组件    //import  componentA from './components/a'     .vue可省略

（3）、在App.vue的export default{  }中注册组件  

// export default {

　　components:{

　　　　componentA

　　},

　　data(){

　　return{

　　}

　　}　　

}

子组件自定义事件

1.app.vue中引入了子组件，对该组件进行自定义事件

例如   <componentA @my-event="onmyevent"></componentA>

2.在script的methods中 

onmyevent(param){

　　console.log("自定义事件："+param);   //param是传过来的参数

}

3.在子组件  a.vue中 ，通过button绑定该事件

<button @click="emitmyevent">emit</button>

4.在子组件页面中 script的methods中

emitmyevent(){

　　this.$emit('my-event',this.hello)           //'my-event'  是父组件的事件名称   this.hello  是传递的参数

}

 父组件向子组件传递参数

 在app.vue中引入了组件，并且想把组件中的number传递个子组件使用

<componentA @my-event="onmyevent" number="5"></componentA>

在子页面中直接{{ number }}是不可以使用number中的值的。

需要申明一下，例如这样：

还可以打印出来number的值

export default{
    props:['number'],
    data(){
      return {
          hello:"我将把我的内容传递给父页面",
          cssBlue:'blue'
      }
    },
    methods:{
      emitmyevent(){
        this.$emit('my-event',this.hello)
      }
    }
  }