Vue 内置指令 && 自定义指令
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Vue 内置指令</title>
6 <script type="text/javascript" src="../js/vue.js"></script>
7 <script type="text/javascript" src="../js/day.min.js"></script>
8 <style>
9 [v-cloak]{
10 display: None;
11 }
12 </style>
13 </head>
14 <body>
15 <!--
16 内置指令：
17 v-bind：单项绑定解析表达式，可简写为“:xxx”
18 v-model：双向数据绑定
19 v-for：遍历数组、对象、字符串
20 v-on：绑定时间监听，可简写为“@”
21 v-if、v-else-if、v-else：条件渲染（动态控制节点是否存在）
22 v-show：条件渲染（动态孔子节点是否展示）
23 v-text：向其所在的节点中渲染文本内容。与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会
24 v-html：
25 1.作用：向指定节点中渲染包含html结构的内容
26 2.与差值语法的区别：
27 .v-html会替换掉节点中所有的内容，{{xxx}}则不会
28 .v-html可以识别html结构
29 3.严重注意：v-html有安全性问题！！！
30 .在网站上动态渲染任意HTML是非常危险的，容易导致xss攻击
31 .一定要在可以的内容上使用v-html，永不要用在用户提交的内容上
32 v-cloak：没有值
33 1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
34 2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
35 v-once:没有值
36 1.v-once所在节点在初次动态渲染后，就视为静态内容了（只读一次n的值）
37 2.以后数据的改变不会硬气v-once所在结构的更新，可以用于优化性能
38 v-pre：没有值
39 1.跳过其所在节点的编译过程(vue不解释该节点)
40 2.可利用它跳过：没有使用指令语法、没有使用差值语法的节点，会加快编译
41 -->
42 <div id="root" v-cloak>
43 <div>你好，{{name}}</div>
44 <div v-text="name">你好，</div>
45
46 <div v-text="str"></div> <!-- html 标签不被解析 -->
47 <div v-html="str"></div> <!-- html 标签会被解析 -->
48
49 <h3 v-once>n的初始值：{{n}}</h3>
50 <h3>当前n的值：{{n}}</h3>
51 <button @click="n++">点我n的值+1</button>
52
53 <h3 v-pre>n的初始值：{{n}} 这里加了pre属性后，{{n}}并不会解析</h3>
54 </div>
55 </body>
56
57 <script type="text/javascript" >
58 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
59
60 let vm = new Vue({
61 el: "#root",
62 data:{
63 name: 'BaiYeShu',
64 str: '<h3>你好，</h3>',
65 n: 1
66 },
67
68 });
69 </script>
70 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Vue 自定义指令</title>
6 <script type="text/javascript" src="../js/vue.js"></script>
7 <script type="text/javascript" src="../js/day.min.js"></script>
8
9 </head>
10 <body>
11 <!--
12 自定义指令总结：
13 1.定义语法：
14 .局部指令：
15 new Vue({
16 directives:{指令名：配置对象} 或者 directives:{指令名：回调函数}
17 })
18 .全局指令：
19 Vue.directive('指令名', 配置对象) 或者 Vue.directive('指令名', 回调函数)
20 2.配置对象中常用的3个回调：
21 .bind: 指令与元素成功绑定时调用
22 .inserted: 指令所在元素被插入页面时调用
23 .update: 指令所在模板结构被重新解析时调用
24 3.备注
25 .指令定义时不加v-，但使用时要加v-
26 .指令名如果是多个单词，要使用kebab-case命名方式，不要用kebabCase命名
27
28 -->
29 <div id="root" v-cloak>
30 <h2>{{name}}</h2>
31 <h2>当前的n值是：<span v-text="n"></span></h2>
32 <h2>n放大10倍的值是：<span v-big="n"></span></h2>
33 <button @click="n++">点我n+1</button>
34 <br />
35 <input type="text" v-big-number="n" >
36 </div>
37 </body>
38
39 <script type="text/javascript" >
40 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
41 Vue.directive('big-number',{ // 全局指令
42 bind(element, binding){
43 element.value = binding.value;
44 },
45 inserted(element, binding){
46 element.setFouse();
47 },
48 update(element, binding){
49 element.value = binding.value;
50 }
51 })
52
53 let vm = new Vue({
54 el: "#root",
55 data:{
56 name: 'BaiYeShu',
57 n: 1
58 },
59 directives:{
60 'big'(element, binding){
61 console.log('big', this); // 这里directives，所有指令相关的函数，this都是window
62 element.innerText = binding.value * 10;
63 },
64 // 'big-number':{ // 局部指令
65 // bind(element, binding){
66 // element.value = binding.value;
67 // },
68 // inserted(element, binding){
69 // element.setFouse();
70 // },
71 // update(element, binding){
72 // element.value = binding.value;
73 // }
74 // }
75 }
76
77 });
78 </script>
79 </html>
Vue 内置指令 && 自定义指令的更多相关文章
- Vue基础进阶 之 自定义指令
自定义指令-----钩子函数 自定义指令 除了内置指令,Vue也允许用户自定义指令: 注册指令:通过全局API Vue.directive可以注册自定义指令: 自定义指令的钩子函数: bind: in ...
- Vue内置组件keep-alive的使用
本文主要介绍Vue内置组件keep-alive的使用. Vue内置组件keep-alive的使用 keep-alive接收三个props:●include - 字符串或正则表达式.只有名称匹配的组件会 ...
- pytest封神之路第四步 内置和自定义marker
可以通过命令行查看所有marker,包括内置和自定义的 pytest --markers 内置marker 内置marker本文先讲usefixtures .filterwarnings .skip ...
- vue内置指令与自定义指令
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
- 2.0 vue内置指令与自定义指令
1.1 常用内置指令 1) v:text : 更新元素的 textContent 2) v-html : 更新元素的 innerHTML 3) v-if : 如果为 true, 当前标签才会输出到页 ...
- vue内置指令详解——小白速会
指令 (Directives) 是带有 v- 前缀的特殊属性,职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM. 内置指令 1.v-bind:响应并更新DOM特性:例如:v-bi ...
- (尚016)Vue指令(11个自带指令+自定义指令)
1.Vue常用指令 1)v:text:更新元素的 textContent 2)v-html:更新元素的 innerHTML 3)v-if:如果为true,当前标签才会输出到页面 4)v-else:如果 ...
- vue.js实现内部自定义指令和全局自定义指令------directive
在Vue中,我们平时数据驱动视图时候,内部自带的指令有时候解决不了一些需求,这时候,Vue给我们一个很好用的东东 directive 这个单词是我们写自定义指令的关键字哦 之定义指令为我们提供了几个钩 ...
- Vue（十三）自定义指令
自定义指令 分类:全局指令.局部指令 1. 自定义全局指令 使用全局方法Vue.directive(指令ID,定义对象) 2. 自定义局部指令 <!DOCTYPE html> < ...
随机推荐
- MinGW 和 TDM 的问题
目前遇到的一个小问题就是批量声明时的初始化. mingw gcc 9.2:不支持int a,b,c=5; 所得数为a=0 b=0 c=5. 而在TDM gcc 5.1中,可以同时赋值. 第二个问题,T ...
- DEDECMS登录后台，无法连接数据库的原因
在CMS的网页模块中,当迁移网站出现后台无法登录的时候 最可能的情况有下列几种: 1. 数据库服务器宕机.如果是云上的数据库时,需要联系客服进行解决.是有自己的搭建的数据库,需要查看服务是否正常启动 ...
- 513. Find Bottom Left Tree Value - LeetCode
Question 513. Find Bottom Left Tree Value Solution 题目大意: 给一个二叉树,求最底层,最左侧节点的值 思路: 按层遍历二叉树,每一层第一个被访问的节 ...
- ABP框架之——数据访问基础架构
大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享阅读心得,希望我的文章能成为你成长路上的一块垫脚石,我们一起精进. 几乎所有的业务应用程序都要适用一种数据库基础架构,用来实现数据访问逻辑,以便从数 ...
- 表达式的动态解析和计算，Flee用起来真香
前言 在很多项目中经常会出现需要动态解析表达式和计算的场景,比如一些自动审核规则,或者是一些变量的值通过维护的公式在运行过程中动态算出:由于场景需求,都需要比较灵活的配置对应的表达式,然后希望在需要的 ...
- 为什么 C# 访问 null 字段会抛异常？
一:背景 1. 一个有趣的话题 最近在看 硬件异常 相关知识,发现一个有意思的空引用异常问题,拿出来和大家分享一下,为了方便讲述,先上一段有问题的代码. namespace ConsoleApp2 { ...
- Tomcat部署接口环境遇到的问题，有没有人能帮忙解决指导一下
1.在虚拟机中用Tomcat部署一个接口环境:linux+jdk+Tomcat 前提条件:代码包啥的别人都用过,可以部署成功 2.具体部署: a. 利用xftp把所有的代码包war包传送到tomcat ...
- （数据科学学习手札139）geopandas 0.11版本重要新特性一览
本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 大家好我是费老师,就在几天前,geopandas ...
- Linux文本三剑客-sed
sed工作原理: sed: Stream Editor.流编辑器 --- 属于行编辑工具 sed和vim一样都是文本编辑工具. 行编辑工具:一行一行处理文件内容 全屏编辑工具:一次性将文件内容加载到内 ...
- Node.js精进（6）——文件
文件系统是一种用于向用户提供底层数据访问的机制,同时也是一套实现了数据的存储.分级组织.访问和获取等操作的抽象数据类型. Node.js 中的fs模块就是对文件系统的封装,整合了一套标准 POSIX ...