指令
指令是有 v- 前缀的特殊属性。
- 指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。
- 指令的作用是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
- 一些指令能够接收一个“参数”，在指令名称之后以冒号（ : ）表示。
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>
如果 isButtonDisabled 的值是 null 、undefined 或 false ，则 disabled 甚至不会被包含在渲染出来的 button 元素中。
v-on
v-on 指令，它用于监听 DOM 事件。v-on缩写为‘ @ ’，下文简称为 @事件
<!-- 完整语法 -->
<view v-on:click="doSomething">点击</view>
<!-- 缩写 -->
<view @click="doSomething">点击</view>
v-once
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。
和前端框架中的理解不同，客户端里要实现复用的逻辑，会标记模板节点的状态，添加了 v-once 能保证节点只渲染一次，但是并不一定能优化渲染性能，反而可能会拖慢客户端复用节点时的比对效率。
h5、微信小程序均不支持
<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 组合模板，可以重新考虑是否通过使用组件来替代。
- App端和H5端支持
v-html，微信小程序会被转为rich-text，其他端不支持v-html。
跨端的富文本处理方案详见：https://ask.dcloud.net.cn/article/35772
<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://qiniu-web-assets.dcloud.net.cn/unidoc/zh/[email protected]"/></div>'
}
}
}
</script>