1. 文本指令
1.1 mustache{{}}语法-插值
mustache(八字须)，因为{{}}像八字须，所以也叫八字须语法- 如果标签中有其它内容，插值表达式不会覆盖，只会替换自己占位符的内容
- 插值表达式有闪烁的问题，详情参考
v-cloak指令<div> {{ msg }} </div> <!--把 msg 属性中的值插入到 div 标签中-->
1.2 v-cloak 指令解决插值语法闪烁的问题
- 如果我们的
vue包是在页面加载之后再加载的情况下,那么在页面加载完之后，vue包加载完之前，页面上会把插值
表达式当做字符串显示出来，然后当vue加载完之后，又变正常，这期间就会产生闪烁现象 - 解决方法一：把
vue引包放在页面的head标签中(不提倡)。
解决方法二：<div v-cloak> {{}} </div>/*v-cloak指令的原理：属性选择器，添加隐藏样式*/ [v-cloak]{ display:none } /*注：把盒子隐藏，vue 包加载完之后，会去掉页面中所有的v-cloak属性选择器的样式*/
1.3 v-text 指令-插值
v-text没有闪烁问题v-text会覆盖元素中原本的内容<div v-text='msg'></div> <!--注：把 msg 属性中的值插入到 div 标签中-->
1.4 v-html 指令-插值
v-html没有闪烁问题v-html会覆盖元素中原本的内容- 当插入的数据里面有标签的话，
v-html能解析出来<div v-html='msg'></div> <!--注：把 msg 属性中的值插入到 div 标签中-->
2. 属性指令
2.1 v-bind: 指令-绑定属性
- 如果要把
data里面的数据，当做标签属性的属性值使用的情况下就可以使用v-bind: v-bing:的缩写:<!-- 1. v-bing 绑定的属性，属性值默认为变量的时候，会去Vue实例的 data 中去找--> <input type="text" :title='msg'> <!-- 2. v-bing 绑定的属性，属性值的位置可以写 js 表达式--> <input type="text" :title='mes > 5 ? mes : mes + 1'> <!-- 3. v-bing 绑定的属性,属性值的位置如果要写字符串，或拼接字符串，字符串必须另外用''号或""号包裹--> <input type="text" :title='mes + "字符串"'>- Class类样式绑定
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div> // 1. 可以在对象中传入更多字段来动态切换多个 class。类样式应用与否，取决于后面布尔值，布尔值在 data 中控制 // 2. 此外，v-bind:class 指令也可以与普通的 class 属性共存。 //============================================================= <div v-bind:class="[activeClass, errorClass]"></div> // 3. 也可以绑定一个数组，数组中的成员为 data 中的属性 - Style内联样式绑定
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> // 样式的值 activeColor 和 fontSize 在 data 中控制 data: { activeColor: 'red', fontSize: 30 } //===================================================== <div v-bind:style="styleObject"></div> // 直接绑定到一个样式对象通常更好，这会让模板更清晰： data: { styleObject: { color: 'red', fontSize: '13px' } } //================================================== <div v-bind:style="[baseStyles, overridingStyles]"></div> // v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上： - 单选多选表单的
checked属性绑定//1. 单选框或多选框的选中属性 checked 是布尔属性，只读，不能赋值,表单选中状态取决于写不写 checked 属性 //2. 但是通过 v-bind 绑定之后，就可以赋值了，通过值来控制表单的选中状态 <input type="checkbox" v-bind:checked="false">
2.2 v-model 指令-属性的双向绑定
-
v-model只能运用在表单元素中 -
v-bing可以把data的数据绑定到表单中，但表单中修改了数据却不会同步到data中
这叫单向数据绑定 从M到V -
v-model可以实现数据双向绑定，data的值可以绑定到表单中，表单中修改了值，也可以
同步到data中v-model普通表单的应用：<input type="text" v-model='msg'> //注：v-model 就表示了表单的值，不需要写属性名radio单选框表单的应用://1. 在一组单选框中，原来是需要给它们写一个一样的 name=''，才可以互斥，实现单选 //2. 用了 v-model="变量"，可以不写 name ，也能互斥，达到单选效果，而且还可以通过变量给表单赋状态值 //3. 在单选框表单中需要写 value 值，当表单处于选中状态时就会把 value 值给 v-model 的变量 //4. v-model="变量" 中的变量定义在data中，可以动态获取客户端的选中值 //5. 示例： <label for="nan"> <input type="radio" id="nan" value="男" v-model='sex'>男 </label> <label for="nv"> <input type="radio" id="nv" value="女" v-model='sex'>女 </label>checkbox复选框表单的应用://1. 复选框 checkbox 一般应用较多是在同意协议上，和多项选择上 //2. 我们也可以通过 v-model="" 双向绑定，获取复选框是否选中的状态 //3. 示例单选： <label for="agree"> <input type="checkbox" id="agree" v-model='isAgree'>同意协议 </label> // 注：在 Vue 的 data 中定义属性 isAgree，可以获取复选框的选中状态 true 和 false //4. 示例多选： <input type="checkbox" value="游泳" v-model='hobbies'>游泳 <input type="checkbox" value="看书" v-model='hobbies'>看书 <input type="checkbox" value="爬山" v-model='hobbies'>爬山 <input type="checkbox" value="篮球" v-model='hobbies'>篮球 // 注：在 data 中， hobbies 定义成一个数组，它会接收每个被选中的value值 //5. 多选并赋初始值： <label v-for="item in origin"> <input type="checkbox" value="item" v-model='hobbies'>{{item}} </label> data:{ origin:['游泳','看书','爬山','篮球'] hobbies:[] }select下拉列表框的应用://1. 绑定下拉列表的的时候，只需要在select标签中绑定即可，会自动对应子元素 option 的 value 值 //2. 选中一个示例： <select v-model="fruit"> <option value="香蕉">香蕉</option> <option value="葡萄">葡萄</option> <option value="苹果">苹果</option> <option value="橘子">橘子</option> </select> data:{ fruit: '苹果' } //注：在data中定义属性 fruit ，可以双向的控制选中状态 //3. 选中多个示例： <select v-model="fruit" multiple> <option value="香蕉">香蕉</option> <option value="葡萄">葡萄</option> <option value="苹果">苹果</option> <option value="橘子">橘子</option> </select> data:{ fruit:[] } //注：加上 multiple 属性选择的时候按 Ctrl 键，可以实现多选，在 data 中 fruit 属性声明成一个数组接收选中的值
v-model的修饰符:
-
.lazy修饰符：v-model.lazy=""
默认情况下，input中一旦value值发生变化，就会同步到data的属性中
lazy修饰符可以让input值发生变化并且失去焦点或者回车时才同步到data中 -
.number修饰符：v-model.number=""
默认情况下，表单中的value值为String类型，不管绑定进去的值是不是String，绑定进去后
都会变成String类型，同步或者取出的value值也是String类型
.number修饰符可以让原本的number类型的值，不被默认变成String -
.trim修饰符：v-model.trim=""
.trim修饰符可以过滤表单内容左右两边的空格
3. 其它指令
3.1. v-pre 指令-显示原本内容
- 跳过这个元素和子元素的编译过程，显示原本的
{{Mustache}}语法字符<h1 v-pre>{{ mustache }}</p> <!--v-pre指令告诉Vue不要解析这个节点内部的内容，比如内容为一些不需要渲染的文本-->
3.2. v-once 指令-一次性绑定
- 该指令后面不需要跟任何表达式
- 该指令表示元素和组件只渲染一次，不会跟随着数据的改变而改变
<div v-once>{{ message }}</div> <!--相当于取消了与 data 数据的响应式-->
3.3 v-on: 指令-绑定事件
v-on:是vue中提供给标签绑定事件的v-on:的缩写@- 事件函数在
标签中调用的时候，如果不需要传参数，默认不需要加() - 在事件函数中有个默认参数对象
event - 如果要传参数，而且也想要使用默认参数
event，那么在调用的时候(参数, $event)
这样传才可以，如果不加$，会默认把event当做变量，去data中找 - 绑定的事件不需要加
on<input type="button" value="按钮" @click='show'> <!--注： click 是要绑定的事件,show 是事件处理函数，名字自定义，函数写在 methods 中-->
4. v-for 指令–循环
4.1 v-for循环普通数组
案例：遍历循环生成多个标签
data:{
list:[1, 2, 3, 4, 5]
}
<p v-for="ele in list"> {{ ele }} </p>
<!-- 注：ele 表示数组的每个元素值，在页面中生成了五个P标签，每个标签中放着一个对应的元素值-->
//-========================================================================================
<p v-for="(ele,index) in list"> {{ ele }} </p>
<!--注：ele 是元素值 index 为元素的索引-->
4.2 v-for循环对象数组
案例：循环遍历取出数组的对象值并生成多个标签
data:{
list:[
{id:1,name:'张三'},
{id:2,name:'李四'},
{id:3,name:'王五'}
]
}
<p v-for="ele in list"> {{ele.id}}----{{ele.name}} </p>
<!--注：生成了三个P标签，每个标签中有对应的数组元素值-->
<!--注：也可以取出元素索引(ele,index)-->
4.3 v-for循环遍历对象
案例：循环遍历对象取出对象的属性和值，并生成多个标签
data:{
obj:{
id:1,
name:'张三',
sex:'男'
}
}
<p v-for="(val,key) in obj"> {{val}}----{{key}} </p>
<!--注：val 是属性值 key是属性名，也可以取出索引(val,key,index)-->
4.4 v-for迭代数字
- 循环遍历数字，并生成多个标签
<p v-for="ele in 10"> {{ ele }} </p>
<!-- 注：迭代数字 ele 的值是从 1 开始的-->
4.5 key的使用
例如：
data:{
list:[
{id:1,name:'张三'},
{id:2,name:'李四'},
{id:3,name:'王五'}
]
}
<p v-for="ele in list" :key='ele.id'> {{ele.id}}----{{ele.name}} </p>
<!--注：在v-for循环的时候，key 属性的值只能为 number 或者 String-->
5. 条件渲染指令
5.1 v-if 和 v-else指令的使用
案例：每次重新删除或者创建元素
data:{
flag:true
}
<p v-if="flag">p1</p>
<p v-else-if="flag">p2</p>
<p v-else>p3</p>
<!--注：当 flag 为 true 的时候就渲染标签，为false时就不渲染-->
注： v-else-if 会从第一个 if 开始判断，碰到值为 true 的就执行
注： v-else 当前面的 if 的值都为 false 的时候，就会执行 v-else 的标签
注： if 后面除了写布尔值，还可以写表达式
注：一组 if 标签中，最终最多并且只会执行一个
5.2 v-show指令的使用
底层原理：每次切换元素的 display:none、block
data:{
flag:true
}
<p v-show="flag"></p>
<!--注：当 flag 为 true 的时候就显示标签，为 false 就隐藏标签，操作的是元素的 display：-->
5.3 v-if 和 v-show 的区别
- v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
- v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
- 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
- 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
6. 自定义指令
6.1 自定义指令概述
- 什么是自定义指令：
Vue给我们提供了一些特定的指令，但是在实际开发中有些功能的实现，在Vue中没有
对应的指令，那么我们就可以自己定义一些特定功能的指令 - 什么时候需要用自定义指令： 当不可避免的需要操作DOM的时候，就可以使用自定义指令来解决
- 注册自定义指令分为：
全局注册：在任何组件中都可以使用
局部注册：只能在当前组件中使用
6.2 注册和使用自定义指令
-
自定义全局指令语法：
Vue.directive('指令名', {}) -
参数1：自定义指令名称，在定义的时候指令名称前面不需要加
v-，但是调用的时候必须加v-，如果是驼峰命名法
的名称，则在使用的时候需要把驼峰转为-连接起来（如：fontSize 转为 font-size） -
参数2：是一个对象，里面有一些配置指令的生命钩子函数，这些函数可以在特定阶段， 执行相关操作生命钩子函数有
五个：bind、inserted、update、componentUpdated、unbind，可根据需求选用 -
结论：和样式相关的在bind中处理,和行为相关的在inserted中处理 ，bind、inserted、update、这三个较为常用 -
语法详解：
Vue.directive('指令名字', { bind(el, binding) { //只调用一次，当指令绑定到元素时调用，此时数据还在内存中解析，在这个阶段适合做一些样式操作， //因为样式是内联的，浏览器渲染的时候会应用到元素上 }, inserted(el, binding) { //只调用一次，被绑定的元素插入到父节点时调用（仅保证父节点存在，但不一定已被插入文档中），与`bind`的 //唯一区别是可以访问父节点的DOM }, update(el, binding) { //当作用该指令的模板（Vue管理的模板）发生更新的时候就会调用，<font color=red>此时的模板是更新前的内容 }, componentUpdated(el, binding) { //当作用该指令的模板（Vue管理的模板）发生更新的时候就会调用，<font color=red>此时的模板是更新后的内容 }, unbind(el, binding) { //只调用一次，指令与元素解绑时调用，可以做一些收尾工作，例如清除定时器 }, }) // 注：每个钩子函数中有两个参数 el 为绑定的该指令的 DOM 元素， binding 是一个对象，可以获取指令的值等信息 //参数 binding 是一个对象，常用的属性有三个 binding.name // 获取指令名，不包括v-前缀 binding.value //获取指令绑定的值,比如说'a' 获取的就是 a binding.expression // 获取指令绑定的值，比如说'a' 获取的就是 'a' -
注册一个全局自定义指令语法：
Vue.directive('focus',{ bind:function (el, binding) { // 指令应用到元素中的时候，可以绑定值如：v-color="'red'" } }) -
全局自定义指令（页面加载表单聚焦）
// 1. focus() 是 DOM 中的聚焦方法，定义在 inserted 中是因为，页面在加载的时候，只有当元素插入到了 DOM 中时， // focus() 方法才会生效 // 2. 在调用的时候需要加v-，例如：v-focus Vue.directive('focus',{ inserted:function(el){ el.focus() } }) -
自定义私有指令语法：
// 1. 全局指令，所有的 Vue 实例都可以调用 // 2. 局部(私有)的指令，只有当前 Vue 实例绑定区域可以调用 // 3. 局部的指令定义在当前的 Vue 实例里面，和 el、data、methods 平级-->directive // 4. 如果全局和局部的指令的名字相同，那么当前 Vue 实例，优先调用局部，就近原则 let vm = new Vue({ directive:{ '指令名称':{ bind:function(el){ //这里业务处理和上面的全局一样 } } } }) -
指令函数的简写形式：
//1. 大多数情况下，我们可能都是在 bind 和 updated 钩子上做重复动作，并且不用关心其它的钩子函数。所以可以这样简写 //全局：================================================================ Vue.directive('指令名称', function(){ // 在这里这样写就等同于把代码写到了 bind 和 updated 中去了 }) //局部：================================================================ let vm = new Vue({ directive:{ '指令名称':function(){ //在这里这样写就等同于把代码写到了 bind 和 updated 中去了 } } }) //注： 以上的简写方式就等同于把代码写到了 bind 和 updated 中去了
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
