Vue 基础（三）：过滤器与内置指令
过滤器
定义
对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）
语法
注册：Vue.filter(name,callback) 或 new Vue{filters:{}}
使用：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”
备注
过滤器也可以接收额外参数、多个过滤器也可以串联
并没有改变原本的数据, 是产生新的对应的数据
示例
这里提前引入了BootCDN下载的day.js。
显示格式化后的时间
现在是：{{fmtTime}}
现在是：{{getFmtTime()}}
现在是：{{time | timeFormater}}
现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}
尚硅谷
<div id="root2">
<h2>{{msg | mySlice}}</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
//全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
new Vue({
el:'#root',
data:{
time:1621561377603, //时间戳
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'){
// console.log('@',value)
return dayjs(value).format(str)
}
}
})
new Vue({
el:'#root2',
data:{
msg:'hello,atguigu!'
}
})
</script>
效果：
内置指令
v-text
作用
向其所在的节点中渲染文本内容。
与插值语法的区别
v-text会替换掉节点中的内容，{{xx}}则不会。
示例
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'尚硅谷',
str:'<h3>你好啊！</h3>'
}
})
</script>
效果
可以看到v-text是不能识别html结构的，会将内容原样搬到页面上
v-html
作用
向指定节点中渲染包含html结构的内容。
与插值语法的区别
v-text会替换掉节点中的内容，{{xx}}则不会。
v-html可以识别html结构。
使用v-html要注意安全性问题
在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
一定要在可信的内容上使用v-html，永不要用在用户提交的内容上
实例
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'尚硅谷',
str:'<h3>你好啊！</h3>',
}
})
</script>
效果
v-cloak(没有值)
本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
<!-- 引入Vue -->
</head>
<body>
<div id="root">
<h2 v-cloak>{{name}}</h2>
</div>
<script type="text/javascript" src="xxxxxx"></script>
</body>
<script type="text/javascript">
console.log(1)
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'尚硅谷'
}
})
</script>
如果中间引入了一个其他资源，因为网速或者服务器问题一直没有被返回，导致后面的vue一直被卡着，没有被解析，html中就会出现{{xxx}}，这时使用v-cloak配合css，可以暂时将起隐藏，vue实例创建完毕后会自动去除该属性。
v-once
v-once所在节点在初次动态渲染后，就视为静态内容了。
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
实例
初始化的n值是:{{n}}
当前的n值是:{{n}}
<button @click=”n++”>点我n+1
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
n:1
}
})
</script>
后续只有第二个h2会变化，第一个h2将始终显示初始值
v-pre
跳过其所在节点的编译过程，可利用它跳过没有使用指令语法、没有使用插值语法的节点，会加快编译
Vue其实很简单
当前的n值是:{{n}}
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
n:1
}
})
</script>
