前端基础之内置指令与自定义指令

v-text 指令

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script type="text/javascript" src="../js/vue.js"></script> <!-- 引入Vue.js -->

</head>

<body>

<div id="root">

<div>你好,{{name}}</div>

<div v-text="name">你好,</div>

<div >{{str}}</div>

</div>

<script type="text/javascript">

new Vue({

el:'#root',

data:{

name:'尚硅谷',

str:'<h3>你好</h3>'

}

})

</script>

</body>

</html>

可以在标签内使用v-text来代替{{}}指令

并且v-text是将内容直接作为字符串来进行解析的

V-html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script type="text/javascript" src="../js/vue.js"></script> <!-- 引入Vue.js -->

</head>

<body>

<div id="root">

<div>你好,{{name}}</div>

<div v-html="str">{{str}}</div>

</div>

<script type="text/javascript">

new Vue({

el:'#root',

data:{

name:'尚硅谷',

str:'<h3>你好</h3>',

}

})

</script>

</body>

</html>

v-html会将输入的包含html结构的内容进行解析,v-html存在安全问题,容易出现xss攻击

v-once 指令

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script type="text/javascript" src="../js/vue.js"></script> <!-- 引入Vue.js -->

</head>

<body>

<div id="root">

<h2 v-once>初始化n时值为:{{n}}</h2>

<h2>当前的n值为:{{n}}</h2>

<button @click="n++">点我n++</button>

</div>

<script type="text/javascript">

new Vue({

el:'#root',

data:{

name:'尚硅谷',

n:1

}

})

</script>

</body>

</html>

v-once指令在节点初次动态渲染后,就视为静态内容了,之后不参与更新

V-pre

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script type="text/javascript" src="../js/vue.js"></script> <!-- 引入Vue.js -->

</head>

<body>

<div id="root">

<h2 v-pre>Vue其实很简单</h2>

<h2 v-pre>当前的n值为:{{n}}</h2>

<button @click="n++">点我n++</button>

</div>

<script type="text/javascript">

new Vue({

el:'#root',

data:{

name:'尚硅谷',

n:1

}

})

</script>

</body>

</html>

使用v-pre指令之后,跳过所在节点的编译过程

自定义指令

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script type="text/javascript" src="../js/vue.js"></script> <!-- 引入Vue.js -->

</head>

<body>

<div id="root">

<h2> 当前的n值是:<span v-text="n"></span></h2>

<h2> 放大10倍之后的n值是:<span v-big="n"></span></h2>

<button @click="n++">点我n++</button>

<hr>

<input type="text" v-fbind:value="n">

</div>

<script type="text/javascript">

new Vue({

el:'#root',

data:{

n:1

},directives: {

//函数式写法,何时会被调用

//1.初始化时被调用

//2.指令所在的模板被重新解析时就会发生变化

big(element,binding){

element.innerText=binding.value*10;

},

fbind:{//完整写法,何时会被调用

//指令与元素成功绑定时

bind(element,binding){

console.log('bind')

element.value=binding.value

},

//指令所在元素被插入页面时

inserted(element,binding){

console.log('inserted')

element.focus();

},

//指令所在的模板被重新解析时

update (element,binding) {

console.log('updated')

element.value=binding.value

}

}

}

})

</script>

</body>

</html>

这个一打开就获取焦点这个功能,需要我们在元素被插入到页面时就使用,需要细分时间段

我们需要注意一点,如果我们使用函数时写法时,相当于只写了bind和update

如果自定义v-XXX中出现了--就需要使用' '包裹

如v-max-number:在书写时就需要使用'v-max-number'

而且在自定义中的this不是vm二十windows

如果需要创建全局自定义函数,就需要在创建vue实例之前指定

相关推荐
万少9 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL14 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl0230 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang31 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景33 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼34 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿36 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再38 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55542 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录1 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css