Vue-3【生命周期、模板、计算属性、方法、侦听器】

最新推荐文章于 2022-10-29 21:24:59 发布

可乐雪碧薄荷糖

最新推荐文章于 2022-10-29 21:24:59 发布

阅读量234

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/Yesterday_Tomorrow/article/details/110733555

版权

Vue 专栏收录该内容

41 篇文章 2 订阅

订阅专栏

一.生命周期

(1).生命周期图

实例销毁后双向绑定无法生效调用destoryed

二.模板语法

(1).v-once

会造成插值的数据只会渲染一次，之后不会自动渲染

<div id="root">
    <span v-once>{{content}}</span>
</div>
<body>
    <script>
        let vm = new Vue({
            el:'#root',
            data:{
                content:'test1'
            }
        })
        vm.content = 'test2'
    </script>
 //此处打印test1

(2).v-html

向表达式标签中插入子级html代码

<div id="root">
    <p>插值表达式:{{rawHtml}}</p>
    <p>使用了v-html：<span v-html="rawHtml"></span></p>
    
</div>
<body>
    <script>
        let vm = new Vue({
            el:'#root',
            data:{
                rawHtml:'<span style="color: #f40;">我是红色</span>'
            }
        })
        vm.content = 'test2'
    </script>
    插值表达式:<span style="color: #f40;">我是红色</span>
    使用了v-html：我是红色

(3).v-text

输出文字不输出标签，向表达式标签中插入子级text文本

三.计算属性

(1).插值表达式中的计算

追加字符串

<p>插值表达式:{{rawHtml+'--鲁迅'}}

三元表达式

<p>{{flag ? 'a' : 'b'}}</p>

逻辑处理

<div id="root">
    <span>{{rawHtml.split('').reverse('').join('')}}</span>
</div>
<body>
    <script>
        let vm = new Vue({
            el:'#root',
            data:{
                rawHtml:'大家好,我叫王思聪'
            }
        })
        vm.content = 'test2'
    </script>
聪思王叫我,好家大

计算属性 computed

<div id="root">
    <span>{{reverseText}}</span>
</div>
<body>
    <script>
        let vm = new Vue({
            el:'#root',
            data:{
                rawHtml:'大家好,我叫王思聪'
            },
            computed:{
                reverseText(){
                   return this.rawHtml.split('').reverse('').join('')
                }
            }
        })
       
    </script>
    聪思王叫我,好家大

方法的方式实现

<div id="root">
    <span>{{reverseText()}}</span>
</div>
<body>
    <script>
        let vm = new Vue({
            el:'#root',
            data:{
                rawHtml:'大家好,我叫王思聪'
            },
            methods:{
                reverseText(){
                    return this.rawHtml.split('').reverse('').join('')
                }
            }
        })
       
    </script>

注意插值表达式那里要用()执行一下

计算属性只有与这个计算属性相关联的属性改变时才会执行一次

而方法则不管有关无关都会执行一次

(2).动态传值时拼接

注意在此拼接是须要用''隔开属性表达式

<div id="root">
    <test :content = "'在吗？'+rawHtml"></test>    
</div>
<body>
    <script>
        Vue.component('test',{
            props:['content'],
            template:"<span>{{content}}</span>"
        })
        let vm = new Vue({
            el:'#root',
            data:{
                rawHtml:'a'
            }
        })
        vm.content = 'test2'
    </script>
    //在吗?a

四.侦听属性

(1).watch

监听每一个data中的数据改变，从而执行对应方法

data中的属性名则为watch中的方法名

<div id="root">
    <span>{{fullName}}</span>
</div>
<body>
    <script>
        let vm = new Vue({
            el:'#root',
            data:{
                rawHtml:'大家好,我叫王思聪',
                sex:'我有很多的女人',
                fullName:''
            },
            watch:{
                rawHtml(){
                    this.fullName = this.rawHtml+this.sex
                },
                sex(){
                    this.fullName = this.rawHtml+this.sex
                }
            }
        })
       vm.sex = 'xxx'
    </script>

(2).get set

在计算属性中写入该属性的读取和写入的方法

<div id="root">
    <span>{{fullName}}</span>
</div>
<body>
    <script>
        let vm = new Vue({
            el:'#root',
            data:{
                rawHtml:'大家好,我叫王思聪',
                sex:'我有很多的女人',
               
            },
            computed:{
                fullName:{
                    get(){
                        return this.rawHtml+this.sex
                    },
                    set(data){
                        var arr  =data.split('')
                        this.rawHtml = arr[0]
                        this.rawHtml = arr[1];
                    }
                }
            }
        })
       vm.sex = 'xxx'
    </script>
    大家好,我叫王思聪xxx

注意，data中是没有fullName，这个get set只是使用了插值表达式的计算属性computed的特性

可乐雪碧薄荷糖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-3【生命周期、模板、计算属性、方法、侦听器】

一.生命周期(1).生命周期图实例销毁后双向绑定无法生效调用destoryed二.模板语法(1).v-once会造成插值的数据只会渲染一次，之后不会自动渲染<div id="root"> <span v-once>{{content}}</span></div><body> <script> let vm = new Vue({..
复制链接

扫一扫

专栏目录