自学内容网 自学内容网
自学内容网 > 正文

vue内置指令和自定义指令

🕗 发布于 2024-11-17 12:20 vue.js  javascript  前端  

常见的指令：
                        v-bind    : 单向绑定解析表达式, 可简写为 :xxx
                        v-model    : 双向数据绑定
                        v-for      : 遍历数组/对象/字符串
                        v-on       : 绑定事件监听, 可简写为@

                        通常和@click=“”一起用
                        v-if          : 条件渲染（动态控制节点是否存存在）
                        v-else     : 条件渲染（动态控制节点是否存存在）
                        v-show     : 条件渲染 (动态控制节点是否展示)
v-text指令：
                        1.作用：向其所在的节点中渲染文本内容，当做字符串解析。
                        2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

v-html指令：
                        1.作用：向指定节点中渲染包含html结构的内容。
                        2.与插值语法的区别：
                                    (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
                                    (2).v-html可以识别html结构。
                        3.严重注意：v-html有安全性问题！！！！
                                    (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
                                    (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

v-cloak指令（没有值，就是没有等于号）：
                        1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
                        2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

如果不加v-cloak，那么页面进入后，就会出现{{name}}，
没有解析，等五秒后服务器响应才能够解析出来
加上v-cloak，刚开始vue实例未接管容器，那么v-cloak就不会删除，
配合css样式，页面有标签，但是不显示
，当vue接管容器之后，v-cloak就被删除了，那么display:none;就失效了，
这样可以保证在网速过慢的时候，页面不是出现一大堆没有解析的标签

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>v-cloak指令</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>

  <div id="root">
    <h2 v-cloak>{{name}}</h2>
  </div>
  <!-- 下面这行代码的意思是服务器晚三秒再响应，用于模拟网速过慢的情况 -->
  <script type="text/javascript" src="http://lo calhost:8080/resource/5s/vue.js"></script>
</body>

<script type="text/javascript">
  console.log(1)
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  new Vue({
    el: '#root',
    data: {
      name: '尚硅谷'
    }
  })
</script>

</html>

 v-once指令：
                        1.v-once所在节点在初次动态渲染后，就视为静态内容了。
                        2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。 

设置了这个属性之后，n值就是初始状态渲染到页面上，后面再怎么变也不会变他 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-once指令</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<!-- 准备好一个容器-->
<div id="root">
<h2 v-once>初始化的n值是:{{n}}</h2>
<h2>当前的n值是:{{n}}</h2>
<button @click="n++">点我n+1</button>
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

new Vue({
el:'#root',
data:{
n:1
}
})
</script>
</html>

v-pre指令：
                    1.跳过其所在节点的编译过程。
                    2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-pre指令</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<!-- 准备好一个容器-->
<div id="root">
<h2 v-pre>Vue其实很简单</h2>
<h2 >当前的n值是:{{n}}</h2>
<button @click="n++">点我n+1</button>
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

new Vue({
el:'#root',
data:{
n:1
}
})
</script>
</html>

自定义指令总结：

所有指令里面相关的this都是window

            一、定义语法：

                  (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命名。

                  3.局部自定义属性只能给所指定的vm使用，要想其他vm都可以用，需要设置为全局属性 

                   4.自定义属性就相当于拥有自定义对象属性的bind、update，而没有inserted

                  5.自定义的属性不靠返回值，考函数所传入的参数，有两个参数，第一个参数指的是标签，第二个参数是标签的信息，如下：

结果：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>自定义指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<!-- 准备好一个容器-->
<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>


 


原文地址：https://blog.csdn.net/2301_77451464/article/details/143737423

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024