文章目录
一、 指令
1-1 内置指令
v-bind,v-v-model,v-for,v-on,v-else,v-show
1-1-1 v-text
-
<div> <div v-text="name"></div> <div v-html="str"></div> </div> <script> new Vue({ el: '#root', data: { name: 'aaa', str:'<h3>你好呀</h3>' } }) </script> -
- 向其所在节点中渲染文本内容
- 替换节点中的内容
-
cookie
1-1-2 v-html
- 作用： 向指定节点中渲染html结构的内容
- 与插值语法区别：
- 替换节点中所有内容
- v-html可以识别html结构
- v-html有安全性问题
- 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
- 在可信的内容上加上v-html，永远不要相信用户提交的内容
1-1-3 v-cloak
-
- 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
- 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
-
<styel> [v-cloak]{ display:none; } </styel> <body> <h2 v-cloak> {{name}} </h2> </body>
1-1-4 v-once指令
-
<div id="root"> <h2 v-once> 初始化的n值是：{{n}} </h2> <h2> 当前的n值是：{{n}} </h2> <button @click="n++"> 点我n+1 </button> </div> <script> new Vue({ el:"", data: { n: 1 } }) </script> -
- 所在节点在初次动态渲染后，视为静态内容了
- 以后数据的变化不会引起v-once所在结构的更新，可以用于性能优化
1-1-5 v-pre
-
- 跳过所在节点的编译过程
- 可以利用它跳过：没有使用指令语法，没有使用插值语法的节点，会加快编译
-
不管是否有指令语法这些，直接拉过内容就用
1-2 自定义指令
-
指令语法：
- 功能： 用于解析标签（标签属性、标签体内容、绑定事件…）
- 举例：
v-bind：href="xxx",xxx同样要写js表达式，且可以直接读取到data中的所有属性 - Vue中有很多指令，且形式都是： v-???
-
<!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> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <button id="btn">点我创建一个输入框</button> <div id="root"> <!-- - 定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍--> <!-- 准备好一个容器 --> <div id="root"> <h2>当前的n值是： <span v-text="n"></span></h2> <h2>放大10倍后的值是： <span v-big="n"></span></h2> <button @click="n++">点我n+1</button> </div> <!-- - 定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点 --> </div> <script> new Vue({ el: '#root', data: { n: 1 }, directives: { // big函数何时会被调用？ 1. 指令与元素成功绑定时，指令所在的模板被重新解析 big(element, binding) { console.log(element); console.log(binding); element.innerText = binding.value * 10 }, fbind(element, binding) { element.value = binding.value element.focus() } } }) </script> </body> </html>
1-2-2
<!--
需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
自定义指令总结：
一、定义语法：
(1).局部指令：
new Vue({ new Vue({
directives:{指令名:配置对象} 或 directives{指令名:回调函数}
}) })
(2).全局指令：
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
二、配置对象中常用的3个回调：
(1).bind：指令与元素成功绑定时调用。
(2).inserted：指令所在元素被插入页面时调用。
(3).update：指令所在模板结构被重新解析时调用。
三、备注：
1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
-->
二、 一个完整例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>自定义指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
自定义指令总结：
一、定义语法：
(1).局部指令：
new Vue({ new Vue({
directives:{指令名:配置对象} 或 directives{指令名:回调函数}
}) })
(2).全局指令：
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
二、配置对象中常用的3个回调：
(1).bind：指令与元素成功绑定时调用。
(2).inserted：指令所在元素被插入页面时调用。
(3).update：指令所在模板结构被重新解析时调用。
三、备注：
1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
-->
<!-- 准备好一个容器-->
<div id="root">
<h2>{{name}}</h2>
<h2>当前的n值是：<span v-text="n"></span> </h2>
<!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> -->
<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
<button @click="n++">点我n+1</button>
<hr/>
<input type="text" v-fbind:value="n">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
//定义全局指令
/* Vue.directive('fbind',{
//指令与元素成功绑定时（一上来）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
}) */
new Vue({
el:'#root',
data:{
name:'尚硅谷',
n:1
},
directives:{
//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
/* 'big-number'(element,binding){
// console.log('big')
element.innerText = binding.value * 10
}, */
big(element,binding){
console.log('big',this) //注意此处的this是window
// console.log('big')
element.innerText = binding.value * 10
},
fbind:{
//指令与元素成功绑定时（一上来）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
}
}
})
</script>
</html>
扫一扫
3631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
