Vue常用的12个系统指令以及自定义指令
用指令前必先了解指令的作用，用在什么地方
指令：
作用：增强HTML标签功能
a.所有指令都是v-开头
b.所有指令代码位置：标签的开头标签位置
c.所有指令都是取代之前的DOM操作
一、12个常用的系统指令
-
v-text （类似于js中innerText）
a.替换标签全部内容
b.不可以识别字符串中标签 -
v-html （类似于js中innerHTML）
a.替换标签全部内容
b.可以识别字符串中标签
替换全部
是多少：{{msg}}
-
v-on
作用：绑定事件
语法： v-on:事件名=“methods中的方法”
’ v-on: ‘ 简写为 ’ @ ‘另一种语法：
@事件名.修饰符 = “methods中的方法”
once（只执行一次）和prevent（阻止）常用修饰符
{{count}}
- v-if 条件渲染
v-if 实现原理： 通过 动态创建 或 移除 元素，实现 元素的 显示 和 隐藏 - v-show
v-show 实现原理：通过 切换元素的 display:none 样式，控制元素的显示和隐藏
v-if和v-show代码：
"app">
"flag">奔跑的五花
"flag">奔跑的五花
v-if和v-show：
一般来说：v-if有更高的切换消耗
而v-show有更高的初始渲染消耗
频繁切换用v-show ,运行时条件不可能改变用v-if
- v-for 列表渲染
语法：v-for=‘item in 容器’
a. 当容器为数组时：
语法：v-for=“item in 数组”
写法1： item in 数组
item指的是数组中每个元素的值
写法2： (item,index) in 数组
(item ,index) item指的是数组中每个元素的值，index指每个元素的下标
- {{item}}
- {{item}}====={{index}}
- {{a}}====={{b}}
b. 当容器为对象时：
第一种写法：item in 对象
第二种写法：(item,key) in 对象
第三种写法：(item,key,index) in 对象
’ item ‘指key-value中的value值
‘ key ’指key-value中的key值
’ index ‘值key-value所对应的索引/下标
- {{item}}
- {{item}} ====={{key}}
- {{item}} ====={{key}}===={{index}}
注意：
vue建议我们给每个循环遍历的标签li加key属性
key属性值特点要求是 唯一值
作用：vue渲染页面时，根据 key的标识 找到每个元素 效率更高
基础–系统指令–v-for-key
数组最终写法：< li v-for="(v,i) in 数组" :key=“i”>
对象最终写法：< li v-for="(v,k,i) in 对象" :key=“i”>
v-if和v-for在同一个标签中使用的问题:
不推荐在同一元素上使用v-if和v-for,当它们处于同一节点，v-for的优先级比v-if更高，这意味着v-if将分别重复运行于每个v-for循环中，当只想为部分项渲染节点时，这种优先级的机制会十分有用。
而如果希望有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 < template >) 上
- v-else
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别
v-else不需要加条件
条件为真
条件为假
-
v-bind
'v-bind: ’ 可以简写为 ’ : ’
概念：动态地绑定一个或多个 attribute，或一个组件 prop 到表达式绑定attribute可以分为三种：
a.绑定标签的任何属性
场景：当标签的属性值是不确定的是可以修改的
语法：v-bind: 要绑定的属性名=“data中的数据”
P标签
b.绑定class
绑定class可以分为：
对象语法 ：{ }
内容
内容
数组语法 :class="[ ]"
内容
内容
c.绑定style
同样style也可以分为对象语法和数组语法
对象语法： ：style="{css属性名:data中的数据}"
内容
数组语法：:style="[ ]"
内容
- v-model
作用：绑定表单元素
解释：v-model绑定的是value
把data中的msg的值和value值进行关联
当输入框中value值变化->msg变->data中的数据->响应式数据->{{msg}}自动更新
限制：