vue读书笔记

<template>
    <div id="computed-basics">
        <p>Has published books:</p>
        <span>{{ publishedBooksMessage }}</span>
    </div>
</template>
<script>
export default {
    name : 'Computed',
    data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    // a computed getter
    publishedBooksMessage() {
      // `this` points to the vm instance
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }
}
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <Counter/>
  <Message />
  <ReverseMessage />
  <TowWayBinding />
  <ConditionalRendering />
  <ListRendering />
  <render-html-app />
  <Computed />
</template>
<script>
import Counter from './components/Counter.vue'
import Message from './components/Message.vue'
import ReverseMessage from './components/ReverseMessage.vue'
import TowWayBinding from './components/TwoWayBinding.vue'
import ConditionalRendering from './components/ConditionalRendering.vue'
import ListRendering from './components/ListRendering.vue'
import RenderHtmlApp from './components/RenderHtmlApp.vue'
import Computed from './components/Computed.vue'
export default {
  name: 'App',
  components: {
    Counter,
    Message,
    ReverseMessage,
    TowWayBinding,
    ConditionalRendering,
    ListRendering,
    RenderHtmlApp,
    Computed
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>