vue 起步_code

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div>{{data1}}</div>
    <ul>
      <li v-for="(item, index) in list">
        {{item.name}} - {{item.price}} - {{index}}
      </li>
    </ul>
<!--     <p v-text="hello"></p>
    <p v-html="hello"></p>
    {{ num + 1}}

    <ul>
      <li v-for="item in list" v-text="item.name + ‘-‘ + item.price">
      </li>
    </ul>
    <ul>
      <li v-for="(item, index) in objList">
        {{index + ":" + item}}
      </li>
    </ul> -->
    <!-- <componentA v-for="(item, key) in objList" >
    </componentA>  -->
    <button v-on:click="addItem">addItem</button>
    <a v-bind:href="linlk" :title="linlk">to baidu</a>
    <a class="ccc" v-bind:class = "classStr"> to calss</a>
    <a class="ccc" v-bind:class = "[classRed,{‘blue‘:blueSwitch}]"> 控制class</a>
    <button v-on:click="clickBlue">clickBlue</button>
    <p v-if="blueSwitch">isPartA</p>
    <p v-show="blueSwitch">isPartB</p>

  </div>
</template>
<script>
import Vue from ‘vue‘
//引入组件
import componentA from ‘./a‘
export default {
  components:{
    componentA:componentA
  },
  name: ‘HelloWorld‘,
  data() {
    return {
      msg: ‘ helloWord ‘,
      hello: ‘<span> word</span>‘,
      num: 1,
      data1:‘data1‘,
      list: [{
          name: ‘apple‘,
          price: 64
        },
        {
          name: ‘banana‘,
          price: 25
        }
      ],
      objList:{
        name:‘tong‘,
        possword:‘123456465‘,
        id:‘vasd‘,
        group:‘01‘
      },
      linlk:‘http://www.baidu.com‘,
      classStr:[‘classStr‘,‘classStr1‘],
      classRed:[‘classRed‘],
      blueSwitch:true,
    }
  },  
  methods:{//事件
    addItem (){
      this.list.push({
        name :‘pinaapple‘,
        price:2564
      });
      console.log(this.list);
      Vue.set(this.list,1,{
        name :‘changeAapple‘,
        price:111
      });

    },
    clickBlue (){
      if(this.blueSwitch == false){
          this.blueSwitch = true;
          return false;
      }
      if(this.blueSwitch == true){
          this.blueSwitch = false;
          return false;
      }
    }
  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  /* display: inline-block; */
  margin: 0 10px;
}
a {
  color: #42b983;
}
.blue {
  color: blue;
}
</style>