Vue指令
-
问：什么是指令?
- 指令的本质就是标签中的vue自定义属性。
- 指令格式以“v-”开始，例如：v-cloak,v-text,v-html等
[注意]：v-html尽量少用甚至不用，因为可能引发XSS攻击。
-
问：指令有什么作用?
- 当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。(简化操作)
常用指令
1. v-cloak
- 作用：解决浏览器在加载页面时因存在时间差而产生的闪动问题
- 原理：先隐藏元素挂载位置，处理好渲染后再显示最终的结果
- 注意：需要与css规则一起使用
- 如果后期有多个元素需要解决闪动问题，可以将v-cloak写在跟元素上
示例
<style>
[v-cloak]{
display: none;
}
</style>
<body>
<!-- v-cloak -->
<div v-cloak>
{
{str1}}
</div>
</body>
2.数据绑定属性
- v-text 填充纯文本
- 相比插值表达式更简洁
- 不存在插值表达式的闪动问题
- v-html 填充HTML片段
- 存在安全问题
- 本网站内部数据可以使用，来自第三房的数据不可用
示例代码
<body>
<div id="app">
<!-- 插值表达式形式 -->
<div>{
{str1}}</div>
<div>{
{str2}}</div>
<!-- 上面直接原样渲染出来 -->
<!-- v-text 与 插值表达式形式一样 -->
<div v-text='str1'></div>
<div v-text='str2'></div>
<!-- v-html 会解析字符串中的标签 -->
<div v-html='str1'></div>
<div v-html='str2'></div>
</div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
str1: '迫使vue示例重新渲染。注意它仅仅影响示例本身和插入插槽内容的子组件，而不是所有子组件',
str2: '<a href="http://www.baidu.com">百度</a>',
}
})
</script>
-
v-pre 填充原始信息
-
跳过表达式的编译过程，显示原始信息
<span v-pre>{
{这里不会被编译}}</span>
有时候我们不想指令中的表达式进行运行，只需要给表达式加个引号，例如：
<div v-html='"msg"'></div>
3.v-once
- 作用：只渲染元素和组件一次，之后元素和组件将失去响应式(数据层面)功能
- 如何理解响应式
- 布局响应式：随着终端设备的屏幕尺寸的变化而改变布局
- 数据响应式：数据变化后页面随之变化，页面中的数据变化代码中的数据也跟着变化(双向数据绑定)
<!-- 动态修改msg值，此绑定将不会发生改变 -->
<div v-once>{
{msg}}</div>
4.v-bind
- 作用：动态的绑定一个或多个attribute [组件内：一次声明，多次使用]
- 场景：服用某个数据的时候会使用
<!-- v-bind 绑定href属性值 -->
<a v-bind:href="url" v-bind:target="type">跳转</a>
<!-- v-bind 绑定href属性值 简写形式 -->
<a :href="url" :target="type">跳转</a>
示例代码
<!-- #app中的 v-bind -->
<a :href="url" :target="type" :alt="alt">{
{alt}}</a>
<!-- script vue实例中的data -->
data: {
url:'https://baidu.com',
type:'_blank',
alt:'百度'
}
5.v-on
5.1 基本使用
- 作用：绑定事件监听器 (事件绑定)
- 场景：服用某个数据的时候会使用
- 示例
<!-- 常规写法 -->
<button v-on:click="num++">点击</button>
<!-- 缩写 -->
<button @click="num++">点击</button>
<!-- 事件处理函数调用:直接写函数名 -->
<button @click="say">点击</button>
<!-- 事件处理函数调用:常规调用 -->
<button @click="alert('123')">点击</button>
如果事件处理函数为自定义函数，则需要先进行定义，定义的方式如下：
...
data: {
...
},
methods:{
functionName:function(arg1,arg2...){
//something to do
}
}
注意：事件绑定 v-on 属性表达式中切记不能直接写业务逻辑，例如 @click=“alert(‘123’)”
事件处理函数传参
<button @click="say('hi',$event)">点击</button>
- 事件对象的传递与接收注意点
- 如果事件对象直接使用函数名并且不写小括号，那么默认会将事件对象所谓唯一参数进行传递。
- 如果使用常规的自定义函数调用(只要写了小括号),那么如果需要使用事件对象则必须作为最后一个参数进行传递，且事件对象的名称必须是"$event"
5.2 事件修饰符
- 含义：用来处理事件的特定行为
示例
<!-- 停止冒泡 -->
<button @click.stop="say">点击</button>
<!-- 阻止默认行为 -->
<button @click.prevent="say">点击</button>
<!-- 串联修饰符 -->
<button @click.stop.prevent="say">点击</button>
5.3 按键修饰符
- 含义：在监听键盘事件时，我们经常需要检查详细的按键。Vue允许为v-on在监听键盘事件时添加按键修饰符
示例
<!-- 只有在 key 是 enter 回车键的时候调用 -->
<button v-on:keyup.enter="submit">点击</button>
<!-- 只有在 key 是 delete 键的时候调用 -->
<button v-on:keyup.delete="handle">点击</button>
6.循环分支指令
6.1 循环指令
- 作用：根据一组数据或对象的选项列表进行渲染
- 指令：v-for
- 示例1 数组遍历使用
<!-- 模板部分 -->
<ul>
<!-- 直接取值 -->
<li v-for='item in fruits'>{
{item}}</li>
<!-- 带索引 -->
<li v-for='（item ,index）in fruits'>{
{item}}{
{index}}</li>
</ul>
<!-- js部分 -->
data:{
fruits:['apple','pear','banana']
}
细节：key的作用，提高性能，不影响显示效果(如果没有id，可以考虑使用索引替代)
- 示例2 对象遍历使用
<!-- 模板部分 -->
<ul>
<li v-for='（value,key,index）in obj'>{
{value +'-'+key+'-'+'index}}</li>
</ul>
<!-- js部分 -->
...
data:{
obj:{
username:'lucy',
age:20,
gender:'male'
}
}
...
6.2 分支指令
作用 :根据表达式的布尔值进行判断是否渲染该元素
- v-if
- v-else-if
- v-else
- v-show 根据表达式真假值，切换元素的display css属性
示例
<!-- 模板部分 -->
<div v-if="score >= 90"> 优秀 </div>
<div v-else-if="score >= 80 && score < 90"> 良好 </div>
<div v-else-if="score >= 70 && score < 80"> 一般 </div>
<div v-else> 不及格 </div>
<!-- v-show -->
<div v-show='flag'>测试v-show</div>
<!-- JavaScript部分 -->
......
data: { score: 88, flag:false }
......
思考：v-if系列与v-show的区别是什么??
v-if : 控制元素是否渲染
v-show : 控制元素是否显示(已经渲染，display:none)