前端基础之内置指令与自定义指令
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实例之前指定