vue3数据指令绑定

vue3.0语法基础（二）路由、组件传值、生命周期

一、指令概览

指令	简介	缩写
{{}}	①插值表达式，实现数据的双向绑定 ②其中内容作为表达式时，还可以用js的语法进行解析
v-html	绑定的内容为html
v-bind	绑定属性	:
v-text	元素的文本属性绑定
v-model	用户输入时，属性双向绑定	:model

v-if	条件判断，一般用来控制dom的显示和隐藏 （也可用v-show）
v-on	绑定事件，点击、回车等等 另外还有各种事件修饰符、案件修饰符可用，       帮助我们更加精确的处理	@
v-for	绑定循环

v-bind:style	绑定内联样式	:style
v-bind:class	绑定自定义样式	:class

二、指令详解

整理了个小案例，把每个属性都简单应用了一下：

参考地址：菜鸟教程-vue3.0

<template>
  <div id="#example1">
    <h1 v-bind:title="myTitle">{{ message1 }}</h1>
    <p>使用 v-html 指令: <span v-html="rawHtml"></span></p>
    <p><span v-text="rawHtml"></span></p>
    <input v-model="mesForm" placeholder="编辑我……" />
    <p>input 表单消息是: {{ mesForm }}</p>
    <br />
    <p v-if="seen">v-if指令：现在你看到我了</p>
    <br />
    <ul>
      <li v-for="item in sites" :key="item.id">{{ item.text }}</li>
    </ul>
    <br />
    <button @click="counter += 1">增加 1</button>
    <p>这个按钮被点击了 {{ counter }} 次。</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message1: '欢迎干洋芋果果学习vue',
      myTitle: '我绑定了title属性',
      rawHtml: '<span style="color: red">这里会显示红色！</span>',
      mesForm: '双向绑定表单',
      seen: true /* 改为false，信息就无法显示 */,
      sites: [
        { text: 'Google', id: '0' },
        { text: 'Runoob', id: '1' },
        { text: 'Taobao', id: '2' }
      ],
      counter: 0
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>