vue的系统指令与修饰符
什么是指令？
指令就是再vue中 使用v-前缀的html特殊属性 指令就是用来扩展再vue中标签的功能
语法： 写在开标前 v-指令=“指令值”
Vue基本指令
差值表达式 又叫声明式渲染/文本差值
语法：{{表达式}}
属性指令
v-bind
功能：可以让html标签里的**属性（名和值）**变成动态的从data中获取
<div v-bind:id="dynamicId"></div>
v-bind可以简写为 ：
内容指令
让标签的内容变成动态的
v-text 转义输出
v-text="数据名"
功能：可以让html标签里的内容变成动态的（从data中获取），相当于innerText。
对比v-text和插值({{}})表达式：
插值表达式更加灵活，可以在标签里面的某个地方显示，但是v-text会让整个标签的内容全部变化。
v-html 非转义输出（原封不动进行替换）
v-html="数据"
功能：可以让html标签里的内容变成动态的（从data中获取），但是不会对内容中的html标签进行转义。相当于innerHTML。
注：
双花括号和 v-text（相当于innerText）会将数据解释为普通文本。 v-html相当于innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width='device-width', initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
都是用来绑定标签中的内容
v-html:等价于在页面以字符串拼接的方式添加节点内容
v-txex:
-->
<div id="root">
<!-- <div>
为什么不能通过{{}}直接添加HTML代码？
因为如果第三方有恶意脚本的话,那么可能会对页面造成安全威胁,怕xss攻击
v-html保证页面一定是通过程序员编写的
{{mySrc}}
</div> -->
<div v-html="mySrc"></div>
<!-- <div>
{{myTest}}
</div> -->
<div v-text="myTest"></div>
</div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// Vue.config.productionTip = false;
let vm = new Vue({
el:"#root",
data:{
mySrc:`<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>`,
myTest:'今天星期一'
}
});
</script>
条件渲染指令
v - if、v-else-if、v-else
功能：v-if是动态的向DOM树内添加或者删除DOM元素
这三个指令与JavaScript的条件语句 if、else、else if 类似 Vue
的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
v-show
功能：v-show本质就是标签display设置为none，控制隐藏
v-if和 v-show的区别?
相同点：
v-show和 v-if都是 控制 dom元素 的 显示和隐藏 的。不同点：
1、原理不同：
v-if是通过dom元素的删除和添加，来完成显示和隐藏，
v-show是通过修改样式属性display的值，来完成显示和隐藏。 2、性能消耗的不同
v-if的性能损耗体现在切换时，
v-show的性能损耗在首次（特别是首次处于的显示的情况下）3、使用场景的不同 v-if使用在元素切换不频繁的场景。 v-show使用在元素切换频繁的场景。
4、安全性的不同 v-if的安全性好 v-show的安全性不好。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width: 100px;
height: 100px;
background-color: red;
}
#box1{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="root">
<!-- 事件的绑定v-on -->
<button v-on:click="fun">切换</button>
<div id="box" v-show="isShow"></div>
<!-- <div id="box1" v-if="isIf"></div> -->
<!--
另外，v-if指令还可以结合v-else-if ， v-else一起使用
-->
<p v-if="age>15">大宝</p>
<p v-else-if="age==15">中宝</p>
<p v-else>小宝</p>
</div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:".root",
data:{
isShow:false,
isIf:false,
age:15
},
methods:{
fun:function(){
// this就是vm实例对象
// console.log(this);
this.isShow = !this.isShow;
}
}
});
</script>
列表渲染（循环指令）
v-for
功能：把数据进行循环显示在html里（渲染）。推荐操作的数据类型：数组、对象、字符串、数字
语法：
用in或者用of都可以：
<li v-for="值 in 数据" v-bind:属性="值">{{值}}</li>
<li v-for="值 of 数据">{{值}}</li>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li{
list-style: disc;
}
</style>
</head>
<body>
<div class="root">
<!-- 用in和of都行 -->
<!-- 数字 -->
<!-- <ul >
<li v-for="(v,index) in len">{{v}}-{{index}}</li>
</ul> -->
<!-- 字符串 -->
<!-- <ul>
<li v-for="(v,index) in str">{{v}}-{{index}}</li>
</ul> -->
<!-- 数组 -->
<!-- <ul>
<li v-for="(v,index) in hobby" :key="">{{v}}-{{index}}</li>
</ul> -->
<!-- 对象 -->
<!-- <ul>
<li v-for="(v,index) in score">{{v}}-{{index}}</li>
</ul> -->
<!-- 数组对象的嵌套 -->
<ul >
<li v-for="(v,index) in arr" :key="index">
{{v}}
<ul>
<li v-for="(v1,index1) in v" :key="index1">
{{v1}}
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:".root",
data:{
len:10,
str:"helloworld",
hobby:["吃饭","睡觉,"rap","篮球"],
score:{
english:100,
math:98
},
arr:[
{a:1,b:11},
{a:22,b:22},
{a:33,b:33}
]
}
});
</script>
注意：
1、空数组，null，undefined不循环
2、也可以进行循环嵌套
3、v-for和v-if使用在同一个标签里时，v-for 的优先级比 v-if 更高，即：v-for套着v-if，先循环再判断
列表渲染时的key:
在标签里使用属性key，可以唯一标识一个元素。
1、当 Vue.js 用 v-for 更新已渲染过的元素列表时，它默认用“就地复用”策略。即：尽量不进行dom元素的操作，只替换文本。
2、如果你希望不进行dom操作，就用key（key不要使用下标），因为key的目的是为了唯一标识一个元素。
有了key后，可以跟踪每个节点的身份，从而重用和重新排序现有元素
建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为（就地复用）以获取性能上的提升。
注意：
key不要使用（数组）下标，并不是会报错，而是失去了唯一标识的意义
事件绑定(指令)
v-on
功能：绑定事件，vue通过v-on指令把事件和处理函数进行绑定。
v-on指令可以简写为：@ 事件处理函数需要放在`methods`选项当中去，事件名 不带on，函数可以按照ES5的写法，也可以按照ES6的写法。
语法：
<input type="button" v-on:事件名="方法" >
<input type="button" v-on:事件名="方法(参数)" >
<input type="button" v-on:事件名="方法($event,参数)">
其他
v-cloak
功能：防闪烁，模板没编译完，电脑配置差，网速慢等等，有可能会看到{{}}，体验不佳，不如用css先隐藏，之后再显示，包括被包裹的子元素。这个指令保持在元素上直到关联实例结束编译。和 CSS 规则，如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
v-once
功能：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
修饰符
在程序世界里，修饰符是用于限定类型以及类型成员的声明的一种符号
在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理
事件修饰符v-on
- .stop 当事件触发时，阻止事件冒泡
- .prevent 当事件触发时，阻止元素默认行为
- .capture 当事件触发时，阻止事件捕获
- .self 限制事件仅作用于节点自身
- .once 事件被触发一次后即解除监听
- .passive 移动端，限制事件用不调用preventDefault()方法
按键修饰符@keyup
.delete 回格 / 删除
.tab 制表
.enter 回车
.esc 退出
.space 空格
.left 左
.up 上
.right 右
.down 下
v-model的修饰符
- .lazy 默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。
- .number 自动将用户的输入值转化为数值类型
- .trim 自动过滤用户输入的首尾空格
鼠标修饰符
- .left 左键
- .right 右键
- .middle 中键
组合修饰符
- .ctrl Ctrl键
- .alt Alt键
- .shift Shift键
- .meta meta键（Windows系统键盘上为田键）
1114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
