vue3学习1：vue 的指令v-text，v-html，v-bind

指令是vue自定义的以v-开头的自定义属性。每个不同的属性都有各自不同的意义和功能

1. v-text

作用 ： 操作元素中的纯文本
简写： {{}}
举个栗子：

<template>
  <div id="app">
    <p v-text="username">abc</p>
    <p>---------</p>
    <p>姓名：{{username}}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      username:"Danny"
    }
  }
}
</script>

可以看出<p v-text="username">abc</p>会覆盖元素中默认的文本内容。；
使用p>姓名：{{username}}</p>只会将值放入{{}}中，它专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是插值表达
式

1. v-html

作用 ： 操作元素中的HTML标签，
v-text会将元素当成纯文本输出，v-html会将元素当成HTML标签解析后输出
举个栗子

<template>
  <div id="app">
    <p v-text="username"></p>
    <p>---------</p>
    <p v-html="username"></p>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      username:"<i style=\"color: #42b983\">Danny</i>"
    }
  }
}
</script>

{{}}/v-text不能解析html元素，只会照样输出

3. v-bind

作用 ： 用于绑定数据和元素属性
简写：使用 : 代替
举个栗子

<template>
  <div id="app">
    <input type="text" v-bind:placeholder="username">
    <p>---------</p>
    <input type="text" :placeholder="username">
    <p>---------</p>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      username:"input your username",
    }
  }
}
</script>