常见指令
1. v-bind
- 主要是将值插入到
模版内容中，可以用：来简写 - 动态绑定一个或多个attribute，或一个组件prop到表达式
：class绑定多个class样式- 可以是具体一个样式属性，也可以是一个对象/方法
//对象语法{active:boolean},也可以是多个键值对的形式 {active:boolean,mUnerLine:boolean}
<view :class="{active:isActive}">mTest</view>
//将样式对象放到一个属性当中
<view :class="mClassObject">mTest</view>
//将返回的样式对象放到一个方法当中
<view :class="getClassObject()">mTest</view>
//将样式放到一个数组当中,支持三元运算符
<view :class="['mNewClass',isActive ? 'mActive' : 'mUnActive']">mTest</view>
//将样式放到一个数组当中,数组内也可以放具体对象
<view :class="['mNewClass',{active:isActive}]">mTest</view>
：style绑定多个CSS内联样式,可以用驼峰或者短横线分割(需要单引号包裹起来)来命名
//styley样式为固定值
<view :style="{color:'green',fontSize:'20px'}">mTest</view>
//style样式为data中的参数变量
<view :style="{color:mColor,fontSize:mSize+'px'}">mTest</view>
//style样式为data中的参数对象
<view :style="mStyleObject">mTest</view>
//style样式为多个对象，放到数组中
<view :style="[mStyleObject,mNextStyleObject]">mTest</view>
- 动态绑定属性
:[属性名]="值"的格式来定义
<view :[mName]="mValue">mTest</view>
- 封装高阶组件
<view v-bind="mBindObject">mTest</view>
mBindObject:{
mFontSize:fontSize,
mColor:color,
mBackground:background
}
2. v-on
- 监听用户发生的事件：点击、拖拽、键盘事件等等
- 可以用
@来缩写，默认传入Event对象 .stop子组件拦截点击事件，父组件无法触发点击.mouseMove鼠标移动事件.once只触发一次.keyup获取键盘抬起事件，或者某个按键事件
<input type="text" @keyup.enter="mEnterKeyUp">
- 绑定多个事件：
<view v-on="{click:mClick,mousemove:mMouseMove}">mTest</view>
特殊指令
1. v-once
- 数据发生变化时，
元素或者组件以及其所有的子元素将视为静态内容并且跳过 - 可以用于
性能优化 - 父节点使用，子节点也只会渲染一次
<view v-once>
<view>
{{targetNnumber}}
</view>
</view>
2. v-text
- 等价于
{{}}
<view>
<text v-text="targetNnumber"/>
<view>
{{targetNnumber}}
</view>
</view>
3. v-html
- 默认情况展示内容
本身是html，vue不会对其特殊的进行解析，如果写完内容被解析出来，可以使用v-html来进行展示
<view v-html="mHtmlContent"></view>
- 如果
直接使用v-html 渲染 HTML 字符串有可能会造成安全问题。如果字符串中包含有恶意的代码，那么很有可能会导致XSS（跨站脚本攻击）风险。因此在 v-html 使用过程中，需要注意一些安全问题。 - Vue 3 中提供了一个新的 API：
createVNode，可以用于创建虚拟节点，它可以帮助我们更好地渲染动态内容。
<view ref="htmlContainer" v-html="sanitizedHTML"></view>
const rawHTML = '<p><strong>这是一段<strong>不受信任的</strong>HTML内容</strong></p>';
// 创建一个计算属性来进行HTML内容的净化处理
const sanitizedHTML = computed(() => {
// 自定义的净化函数，用于过滤不安全的HTML标签和属性
function sanitizeHTML(unsafeHTML) {
// 在这里添加你的净化逻辑，可以使用正则表达式、DOM操作等方法
const safeHTML = unsafeHTML.replace(/<script.*?<\/script>/gi, '');
return safeHTML;
}
return sanitizeHTML(rawHTML);
});
4.V-pre
- 用于
跳过元素和他的子元素的编译过程，显示原始的Mustache标签- 跳过不需要变异的节点 ，
加快编译速度
- 跳过不需要变异的节点 ，
