4/28 Vue 3 模板语法

插入值

文本

# message属性单向绑定
<div id="app">
  <p>{{ message }}</p>
</div>
# 如果希望值不更新，可是用v-once指令
<span v-once>这个将不会改变: {{ message }}</span>

Html

<div id="example1" class="demo">
    <p>使用双大括号的文本插值: {{ rawHtml }}</p>
    <p>使用 v-html 指令: <span v-html="rawHtml"></span></p>
</div>
 
<script>
const RenderHtmlApp = {
  data() {
    return {
      rawHtml: '<span style="color: red">这里会显示红色！</span>'
    }
  }
}
 
Vue.createApp(RenderHtmlApp).mount('#example1')
</script>

属性

1, HTML 属性中的值应使用 v-bind 指令

<div v-bind:id="dynamicId"></div>

2, 表达式

<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">hahaha</div>
</div>
  
<script>
const app = {
  data() {
    return {
      ok: true,
      message: 'RUNOOB!!',
      id: 1
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

指令

指令是带有 v- 前缀的特殊属性。指令用于在表达式的值改变时，将某些行为应用到 DOM 上

<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>
  
<script>
const app = {
  data() {
    return {
      seen: true  /* 改为false，信息就无法显示 */
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

参数

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性

<div id="app">
    <p><a v-bind:href="url">百度</a></p>
</div>
  
<script>
const app = {
  data() {
    return {
      url: 'https://www.baidu.com'
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

# 在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
# 另一个例子是 v-on 指令，它用于监听 DOM 事件：

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

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

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

修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：阻止默认提交

<form v-on:submit.prevent="onSubmit"></form>

用户输入

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
 
<script>
const app = {
  data() {
    return {
      message: 'Runoob!'
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>
# v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
# 按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

缩写

v-bind 缩写

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

v-on 缩写

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