Vue-实例生命周期钩子、条件/列表渲染、修饰符

最新推荐文章于 2024-01-16 18:48:30 发布

杯似坛酒

最新推荐文章于 2024-01-16 18:48:30 发布

阅读量561

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/abundoning/article/details/123311624

版权

本文详细解析了Vue实例的生命周期钩子，包括自动执行的特性及11个生命周期函数。同时，介绍了Vue的模板语法，如条件渲染、列表渲染、样式绑定，并探讨了计算属性、方法与监听器的优缺点。此外，还讲解了事件绑定、修饰符的使用，以及v-model的双向数据绑定及其修饰符的应用。

摘要由CSDN通过智能技术生成

Vue

Vue实例生命周期钩子

概念：

实例生命周期钩子就是Vue实例在 " 某一个时间点 " 会自动执行的函数

特点：

- 自动执行，不需要手动调用

- 不需要写在methods配置项里

生命周期函数数量：11

生命周期图示及相关注解

Vue模板语法

概念：

V层中使用的Vue指令语法

所有的以 ' v-' 开头的指令语法，实际上底层都对应着JS表达式，因此能够实现M > V

语法：

实例：通过三种方式实现Vue实例与div元素绑定

<body>
    <div id="app">
        <div>{
  {name + 'chazhi'}}</div>              //1-插值表达式
        <div v-text="name + 'text'"></div>        //2-div元素与name绑定
        <div v-html="name + 'html'"></div>        //3-div元素通过innerHtml与name绑定
    </div>
    <script>
        var vm =new Vue({
            el:'#app',
            data:{
                name:"<h1>Test</h1>",
            }
        })
    </script>
</body>

上例效果

由例子：

- 插值表达式与 v-test 的渲染效果相同

- 且由于每一个Vue指令语法都是JS表达式，因此可以通过字符串拼接添加内容

实例：由计算属性、方法、监听器三种方式实现div元素渲染及修改

计算属性：

特点：

- 具备缓存(对数据进行存储)

- 不产生冗余

<body>
    <div id="app">
        <div>{
  {fullName}}</div>         //插值表达式引用
    </div>
    <script>
        var vm =new Vue({
            el:'#app',
            data:{
                firstName:'Dell',
                lastName:'Lee',
            },
            computed:{       //配置项computed > 计算属性：计算后返回并渲染   具有缓存的特点
                fullName:function(){
                    console.log('re-conputed')    //若计算属性依赖的的计算对象无变化的情况下进行第2，3，多次渲染，则不会执行console.log('re-conputed')
                    return this.firstName + ' ' + this.lastName
                }
            }
        })
    </script>
</body>

方法：

相比computed：

- 不具备缓存

<body>
    <div id="app">
        <div>{
  {fullName()}}</div>        //插值表达式调用
    </div>
    <script>
        var vm =new Vue({
            el:'#app',
            data:{
                firstName:'Dell',
                lastName:'Lee',
            },
            methods:{                            //配置项methods  >  方法
                fullName:function(){
                    console.log('re-conputed')
                    return this.firstName + ' ' + this.lastName;    //通过方法属性也能完成上述功能，但它没有缓存特点，性能不如computed
                }
           }
        })
    </script>
</body>

监听器：

相比computed：

- 产生冗余

- 代码量大

<body>
    <div id="app">
        <div>{
  {fullName}}</div>        //插值表达式引用
    </div>
    <script>
        var vm =new Vue({
            el:'#app',
            data:{
                firstName:'Dell',
                lastName:'Lee',
                fullName:'Dell Lee',        //冗余
            },
            watch:{        //配置项watch  >  监听器， 具备缓存特点，但是代码量比comp

最低0.47元/天解锁文章

杯似坛酒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-实例生命周期钩子、条件/列表渲染、修饰符

VueVue实例生命周期钩子概念：实例生命周期钩子就是Vue实例在 " 某一个时间点 " 会自动执行的函数特点：- 自动执行，不需要手动调用- 不需要写在methods配置项里生命周期函数数量：11生命周期图示及相关注解Vue模板语法概念：V层中使用的Vue指令语法所有的以 ' v-' 开头的指令语法，实际上底层都对应着JS表达式，因此能够实现M > V...
复制链接

扫一扫