Vue.js -- 渐进式JavaScript框架（2）

最新推荐文章于 2024-06-02 21:34:19 发布

Lazy_Life

最新推荐文章于 2024-06-02 21:34:19 发布

阅读量278

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/Lazy_Life/article/details/81297160

版权

Vue.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.Vue.js 的计算属性：

计算属性（computed）：定义的是一些方法，在方法中完成复杂的逻辑运算，相比 methods 属性对应的方法，具有依赖缓存的优势；

<body>
    <div id="module">
        <h1>{{str}}</h1>
        <h4>{{'计算后的处理数据为:' + test}}</h4>         //输出"计算后的处理数据为:5"
    </div>
    <script>
        new Vue({
            el : '#module',
            data : {
                str : 'hello',
                count : 2,
                val : 3,
            },
            //计算属性
            computed : {
                test : function(){
                    var num = this.count + this.val;
                    console.log(num)          //输出5
                    return num;
                }
            }
        })
    </script>
</body>

2.Vue.js 将输入的信息打印到控制台：

<body>
    <div id="module">
        <h1>{{str}}</h1>
        <input type="text" v-model="myInput">
    </div>
    <script>
        new Vue({
            el : '#module',
            data : {
                myInput : '',
                str : 'hello'
            },
            //将信息打印在控制台
            watch : {
                myInput : function(newValue,oldValue){
                    console.log('新值' + newValue + '旧值' + oldValue)
                }
            }
        })
    </script>
</body>

3.Vue.js 中的生命周期（lifecycle）：

（1）实例的 lifecycle ，生命周期，就是从实例出生到销毁的过程，这个过程的每一个阶段，都是一个接口，可以利用这些接口去做想做的事情；

（2）Vue 的所有功能的实现，都是围绕其生命周期进行的，在生命周期的不同阶段，调用对应的钩子函数，可以实现组件数据管理和 DOM 操作两大功能；

<body>
    <div id="module">
        <h1>{{str}}</h1>
        <button @click="show">点我试试</button>
        <p>{{msg}}</p>
    </div>
    <script>
        new Vue({
            el : "#module",
            data : {
                str : 'hello',
                msg : 'my name is' 
            },
            methods : {
                show : function(){
                    this.msg = 'jack'
                }
            },
            beforeCreate : function(){             
                console.log('实例创建之前') 
                console.log(this.$el)          //输出undefined
                console.log(this.$data)	       //输出undefined
            },
            created : function(){                  
                console.log('实例创建成功')
                console.log(this.$el)          //输出undefined
                console.log(this.$data)		   //输出data这个对象	 
            },
            beforeMount : function(){              
                console.log('实例挂载在DOM节点之前')
                console.log(this.$el)          //输出el控制的元素标签
                console.log(this.$data)
            },
            mounted : function(){                  
                console.log('实例成功挂载在DOM节点')
                console.log(this.$el)
                console.log(this.$data)
            },
            beforeUpdate : function(){
                console.log('实例数据更新之前')
                console.log(this.$el)
                console.log(this.$data)         //输出数据更新了的data对象
            },
            updated : function(){
                console.log('实例数据更新成功')
                console.log(this.$el)
                console.log(this.$data)
            },
            beforeDestroy : function(){          //因为实例在销毁，所以不会有任何输出
                console.log('实例销毁之前')
                console.log(this.$el)
                console.log(this.$data)
            },
            destroyed : function(){
                console.log('实例销毁成功')
                console.log(this.$el)
                console.log(this.$data)
            }
        })
    </script>
</body>

4.Vue.js 中的组件：

（1）全局组件：可以使用在任何一个实例中；

（2）局部组件：只能使用在自己的实例中；

（3）复合组件：是将全局组件组合在一起（父子组件），不适用于局部组件；

（4）调用这些组件，直接在写入 html 标签即可；

<body>
    <div id="module">
        <h1>{{str}}</h1>
        //调用局部组件和全局组件
        <test></test>
        <demo></demo>
    </div>
    <div id="demo">
        //调用全局组件
        <demo></demo>
        <list></list>
    </div>
    <script>
        //创建全局组件（第一个参数是组件名）
        Vue.component('demo',{
            template : '<h1>这是一个全局组件</h1>',
        })
        //创建复合组件
        Vue.component('list',{
            template : `<ul>
                <li>复合组件</li>
                <li><demo></demo></li>
            </ul>`
        })
        //实例1
        new Vue({
            el : '#module',
            data : {
                str : 'hello'
            }, 
            //创建局部组件
            components : {
                'test' : {
                    template : '<h2>这是一个局部组件</h2>',
                }
            },
        })
        //实例2
        new Vue({
            el : '#demo'
        })
    </script>
</body>

Lazy_Life

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js -- 渐进式JavaScript框架（2）

1.Vue.js 的计算属性：计算属性（computed）：定义的是一些方法，在方法中完成复杂的逻辑运算，相比 methods 属性对应的方法，具有依赖缓存的优势；&lt;body&gt; &lt;div id="module"&gt; &lt;h1&gt;{{str}}&lt;/h1&gt; &lt;h4&gt;{{'计算后的处理数据为:' + ...
复制链接

扫一扫

专栏目录