vue指令笔记总结（一）
程序员文章站
2022-02-19 06:34:30
...
本节内容
| 指令 | 属性 |
|---|---|
| v-cloak | 解决代码闪烁 |
| v-text | 写入文本 |
| v-html | 写入html结构 |
| v-bind | 绑定js属性 缩写 ： |
| v-on | 绑定js时间 缩写 @ |
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
/* []是属性选择器，选中【】内带有相同属性的标签 */
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 这个指令是用来保持在元素上直到关联实例结束时进行编译。在页面加载时会闪烁 先显示{{message}} ，后编译。解决了插值表达式闪烁的问题-->
<p v-cloak>{{message}}</p>
<!-- v-text 默认无闪烁，且覆盖h4标签内的文本，h4标签内写入元素会被v-text定义的属性覆盖 -->
<h4 v-text="message"></h4>
<div v-text="message2"></div>
<!--v-text 解析失败-->
<div v-html="message2"></div>
<!--v-html 解析成功-->
<input type="button" value="按钮" v-bind:title="mytitle + '还可以加后缀哦'" />
<input type="button" value="按钮" :title="mytitle + '简写为：了'" />
<!--v-bind中，可以写js表达式 且缩写为冒号： -->
<!-- vue中提供了v-on： -->
<input type="button" value="按钮" v-on:mouseover='alert("我是傻逼")' />
<input type="button" value="按钮" @mouseover='alert("我也是傻逼")' />
<!-- v-on: 等价于 @ -->
<!-- v-on：中有些方法不能直接用，需要在script标签中添加methods方法，可以是function -->
</div>
<script src="vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: '123',
message2: '<h1>哈哈，我是大号h1，又大又粗</h1>',
mytitle: '这是我自定义的title标签',
},
});
</script>
</body>
</html>
总结
1. v-text和v-html有一个相同点：标签里的值会被定义的属性覆盖
2. 复制代码自用时，建议更改为自己的vue.js地址
上一篇： vue.js---i18n的使用