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>
凡所有相,皆是虚妄。