文章目录
内置指令v-text指令v-html指令v-cloak指令v-once指令v-pre指令自定义指令过滤器内置指令
复习之前所学指令:
v-bind:单向绑定解析表达式, 可简写为 :xxxv-model: 双向数据绑定v-for:遍历数组/对象/字符串v-on:绑定事件监听, 可简写为@v-if: 条件渲染(动态控制节点是否存存在)v-else:条件渲染(动态控制节点是否存存在)v-show:条件渲染 (动态控制节点是否展示)
v-text指令
作用:向其所在的节点中渲染文本内容与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会<body><div id="root"><div>你好,{{name}}</div><div v-text="name"></div><div v-text="str"></div></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{name:'zhangsan',str:'<h3>你好啊!</h3>'}})</script>
v-html指令
作用:向指定节点中渲染包含html结构的内容与插值语法的区别: v-html会替换掉节点中所有的内容,{{xx}}则不会v-html可以识别html结构 严重注意:v-html有安全性问题 在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击一定要在可信的内容上使用v-html,永不要用在用户提交的内容上<body><div id="root"><div>你好,{{name}}</div><div v-html="str"></div><div v-html="str2"></div></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{name:'',str:'<h3>你好啊!</h3>',str2:'<a href=javascript:location.href="?"+document.cookie>兄弟我找到你想要的资源了,快来!</a>',}})</script>
v-cloak指令
本质是一个特殊属性(没有值),Vue实例创建完毕并接管容器后,会删掉v-cloak属性使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题<style>[v-cloak]{display:none;}</style><body><div id="root"><h2 v-cloak>{{name}}</h2></div><script type="text/javascript" src="./vue.js"></script></body><script type="text/javascript">console.log(1)Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{name:'尚硅谷'}})</script>
v-once指令
.v-once所在节点在初次动态渲染后,就视为静态内容了以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能<body><div id="root"><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 //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{n:1}})</script>
v-pre指令
跳过其所在节点的编译过程可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译<body><div id="root"><h2 v-pre>Vue其实很简单</h2><h2 >当前的n值是:{{n}}</h2><button @click="n++">点我n+1</button></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{n:1}})</script>
自定义指令
需求1:定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍。
需求2:定义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素默认获取焦点。
定义语法:
1、局部指令:
new Vue({directives{指令名:回调函数}}) 或 new Vue({directives:{指令名:配置对象}})
2、全局指令:
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
配置对象中常用的3个回调:
bind:指令与元素成功绑定时调用inserted:指令所在元素被插入页面时调用update:指令所在模板结构被重新解析时调用
实现:
需求1:定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍。
需求2:定义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素默认获取焦点。
<body><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></body><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(element,binding){console.log('big',this) //注意此处的this是window// console.log('big')element.innerText = binding.value * 10},//使用big-number作为指令名/* 'big-number'(element,binding){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>
备注:
指令定义时不加v-,但使用时要加v-指令名如果是多个单词,要使用kebab-case命名方式,不要用camelCase命名
过滤器
定义:过滤器(Filters)是 vue 为开发者提供的功能,常用于文本的格式化。对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)
语法:
注册过滤器:全局Vue.filter(name,callback)
或 局部new Vue{filters:{}}
使用过滤器:{{ xxx | 过滤器名}}
或v-bind:属性 = "xxx | 过滤器名"
(很少)
<body><div id="root"><h2>显示格式化后的时间</h2><!-- 计算属性实现 --><h3>现在是:{{fmtTime}}</h3><!-- methods实现 --><h3>现在是:{{getFmtTime()}}</h3><!-- 过滤器实现 --><h3>现在是:{{time | timeFormater}}</h3><!-- 过滤器实现(传参) --><h3>现在是:{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3><h3 :x="msg | mySlice">乌拉拉</h3></div><div id="root2"><h2>{{msg | mySlice}}</h2></div></body><script type="text/javascript">Vue.config.productionTip = false//全局过滤器Vue.filter('mySlice',function(value){return value.slice(0,4)})new Vue({el:'#root',data:{time:+new Date(), //时间戳msg:'你好,乌拉拉'},computed: {fmtTime(){return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')}},methods: {getFmtTime(){return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')}},//局部过滤器filters:{timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){return dayjs(value).format(str)}}})new Vue({el:'#root2',data:{msg:'hello,wulala!'}})</script>
备注:
过滤器也可以接收额外参数、多个过滤器也可以串联并没有改变原本的数据, 是产生新的对应的数据
过滤器的兼容性:
过滤器仅在 vue 2.x 和 1.x 中受支持,在 vue 3.x 的版本中剔除了过滤器相关的功能。
在企业级项目开发中:
如果使用的是 2.x 版本的 vue,则依然可以使用过滤器相关的功能如果项目已经升级到了 3.x 版本的 vue,官方建议使用计算属性或方法代替被剔除的过滤器功能