vue学习-模板语法

1. 插值

• v-once 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能

• v-html 容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要将用户提供的内容作为插值

 

<template>
  <div class="hello">
    <div>{{ msg }}</div>
    <div>{{ test }}</div>
    <div v-once>这个将不会改变: {{ test }}</div>
    <div v-html="rawHtml"></div>
    <div v-bind:id="id">id</div>
    <div>{{ test.split('').join(',') }}</div>
  </div>
</template>

<script>
export default {
  props: {
    msg: String
  },
  data() {
    return { 
      test: '普通文本',
      rawHtml: '<h1 style="color: red">原始html</h1>',
      id: 'aid',
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#aid {
  color: green;
}
</style>

 

---

2.指令

<!-- 完整语法 -->
<a v-bind:href="url"> ... </a>

<!-- 缩写 -->
<a :href="url"> ... </a>

<!-- 动态参数的缩写 -->
<a :[key]="url"> ... </a>


<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>

<!-- 缩写 -->
<a @click="doSomething"> ... </a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

注意事项：避免使用大写字符来命名键名

<!--在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。-->
<a v-bind:[someAttr]="value"> ... </a>