指令是带有v-前缀的特殊属性
指令属性的值预期是单个JavaScript表达式(v-for例外情况)
一些指令能够接收一个参数,在指令名称之后以冒泡(:)表示
v-bind
动态绑定一个或者多个属性,或者一个组件prop到表达式。
v-bind缩写为‘:’
在绑定prop时,prop必须在子组件中声明。
可以用修饰符指定不同的绑定类型
<image v-bind:src="imgUrl"></image>
<!-- 缩写 -->
<image :src="imgUrl"></image>
<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>
<button v-bind:disabled="isButtonDisabled">Button</button>
如果isButtonisabled的值是null、undefined或者false,则disabled甚至不会被包含在渲染出来的button元素中
v-on
v-on指令,它用于监听DOM事件。v-on缩写为@。
<!-- 完整语法 -->
<view v-on:click="doSomething">点击</view>
<!-- 缩写 -->
<view @click="doSomething">点击</view>
v-once
只渲染元素和组件一次,随后重新渲染,元素/组件及其所有的子节点将视为静态内容并跳过
<view v-once>This will never change: {{msg}}</view>
<!-- 有子元素 -->
<view v-once>
<text>comment</text>
<text>{{msg}}</text>
</view>
v-html
更新元素的innerHTML
内容按普通HTML插入,不会作为Vue模板进行编译
如果试图使用v-html组合模板,可以重新考虑是否通过使用组件来替代
<template>
<view>
<view v-html="rawHtml"></view>
</view>
</template>
<script>
export default {
data() {
return {
rawHtml: '<div style="text-align:center;background-color: #007AFF;"><div >我是内容</div><img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-
4f28-11eb-b680-7980c8a877b8.png"/></div>'
}
}
}
</script>