vue 第一次总结

学习vue一个星期的总结：

<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<template>
  <div id="app">
    这是一个基本的vue应用
    <ul class = "ul">
      <li>下面是简单数组</li>
      <li v-for ="item in arr":key='item'>
        {{item}}
      </li>
      </br>
    </ul>
    <ul class = "ul">
      <li>下面是对象数组</li>
      <li v-for ="item in str":key='item.data'>
        {{item.data}}，{{item.wht}}
      </li>
      </br>
      <li>下面是对象</li>
      <li v-for ="(value,key,index) in student":key='value'>
        {{index}}.{{key}}:{{value}}
      </li>
      <li>
        <p style="fone-size:20px"> v-for循环时，数组和对象的差别</p
        <p>
          循环数组时候两个参数，第一个为数组内元素(也就是值)，第二个为元素索引（item,index）</br>
          循环对象时候可以有三个参数，第一个为键值，第二个为键名，第三个为索引（value,key,index）
        </p>
      </li>
    </ul>
    <ul class = "ul">
      <li>所有书籍</li>
      <li class = "book" v-for="(item,index) in book":key="index" @click="getInformation(item,index)">
        书名：{{item.bookName}}
      </li>
      </br></br>
    </ul>
    <ul class = "ul">
      <li class="view" v-for="(item,index) in book":key="index">
        <a herf = "#" class ="a"
        v-if ="item.bookPrice >40 && item.bookPrice <50"
        @click ="getInformation(item,index)">
          价格在40元到50元之间的书籍：{{item.bookName}}
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      arr:[1, 2, 3, 6],
      str:[
        {
          data:"今天是背单词第一天",
          wht:"背了100个单词"
        },
        {
          data:"今天是第二天",
          wht:"又背了100个单词，而且复习了昨天的"
        },
      ],
      student:{
        name:"陈等等",
        sex:"女"
      },
      book:[
        {
          bookName:"三国演义",
          bookPrice:"30"
        },
        {
          bookName:"红楼梦",
          bookPrice:"40"
        },
        {
          bookName:"水浒传",
          bookPrice:"50"
        },
        {
          bookName:"西游记",
          bookPrice:"60"
        },
        {
          bookName:"时间简史",
          bookPrice:"40.5"
        },
        {
          bookName:"鲁滨逊漂流记",
          bookPrice:"55.6"
        },
        {
          bookName:"雾都孤儿",
          bookPrice:"35.2"
        },
      ]
    };
  },
  methods: {
    getInformation:function(item,index){
      this.bookName = item.bookName;
      this.bookPrice = item.bookPrice;
      alert(this.bookName+"  "+this.bookPrice+"元");
    }
  }
};
</script>


<style>
html,
body {
  width: 100%;
  height: 100%;
}
#app{
  position: absolute;
  left:300px;
}
</style>
<style lang="scss" scoped>
div {
  width: 100%;
  height: 100%;
}
.book{
  list-style-type:none;
  font-weight:bold;
  color:red;
  cursor: pointer;
}
.book:hover {
  background:#dbdbdb;//鼠标悬停时出现一横条背景色
  color:black;//鼠标悬停或者划过时字变成黑色
}
.view{
  list-style-type:none;
}
.a{
  cursor: pointer;
  color:hsl(256, 85%, 42%);
  text-decoration: none ;
  font-size: 20px;
}
.a:hover {
  background:#dbdbdb;
  color:black;
}
.a:active { color: #F0F; }
</style>