vue学习笔记

如果属性的值是html的代码，要想让代码解释为标签而不是原样输出，需要使用v-html指令，创建RenderHtmlApp.vue组件

<template>
    <div id="example1" class="demo">
        <p>Using mustaches: {{ rawHtml }}</p>
        <p>Using v-html directive: <span v-html="rawHtml"></span></p>
    </div>
</template>
<script>
export default {
    name : 'RenderHtmlApp',
    data(){
        return {
            rawHtml: '<span style="color: red">This should be red.</span>'
        }
    }
}
</script>
<style>
.demo {
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
}
</style>

在app中注册

<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 />
</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'
export default {
  name: 'App',
  components: {
    Counter,
    Message,
    ReverseMessage,
    TowWayBinding,
    ConditionalRendering,
    ListRendering,
    RenderHtmlApp
  }
}
</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>