首页 / VUE / Vue（1）- 入门

Vue（1）- 入门

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vue（1）- 入门，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1479字，纯文字阅读大概需要3分钟。

内容图文

Vue特点：渐进式【由浅到深，由简单到复杂】

script 方式引入即可使用： 

                <
                script 
                src
                ="vue.js"
                 type
                ="text/javascript"
                 charset
                ="utf-8"
                ></
                script
                >

使用全局函数Vue()创建 应用对象app【Vue实例】： 

                1
                <
                div 
                id
                ="app"
                >
                2
                <
                p
                >{{name}}</p>3</div>4<script type="text/javascript">5var app =new Vue({
6        el: ‘#app‘,
7        data: { name : "Vue" }
8    });
9</script>
起名规范：使用 vm 为应用起名字 ：【ViewModel（视图模型） 的缩写】
                    <
                    script 
                    type
                    ="text/javascript"
                    >
                    var
                     vm 
                    =
                    new
                     Vue({
        
                    //
                     省略
                        });

                    </
                    script
                    >
常用的【属性】和【方法】: 一般都是 $ 前缀 , 以便与用户自定义属性区分开来
                    <
                    div 
                    id
                    ="app"
                    >
                    
    {{a}}

                    </
                    div
                    >
                    <
                    script 
                    type
                    ="text/javascript"
                    >
                    var
                     vm 
                    =
                    new
                     Vue({
        el   : 
                    "
                    #app
                    "
                    ,
        data : { a : 
                    1
                     }
    });
    vm.$data.a 
                    =
                    "
                    test....
                    "
                    //
                     等同于 vm.a
                        vm.$watch(
                    ‘
                    a
                    ‘
                    , 
                    function
                    (newVal, oldVal){
        console.log(newVal, oldVal);
    })

                    </
                    script
                    >
                    <!--
　　【属性】
　　　　（1）
                    vm.$el         　　　　-- document.getElementById(‘app‘)
　　　　（2）vm.$data       　　　　-- 获取 data
   　　      vm.$data.a = ‘aaa‘  -- 等同于 vm.a = ‘aaa‘
            Vue 会把 data 或 method 绑定到自己身上所以可以直接使用 vm.a 进行获取和修改内容      
    【方法】
        vm.$watch     -- 观察变量a的值的变化

                    -->
响应式的概念：简单的说就是实时响应数据
                     1
                    <
                    div 
                    id
                    ="app"
                    >
                     2
                        {{a}}{{b}}

                     3
                    </
                    div
                    >
                     4
                    <
                    script 
                    type
                    ="text/javascript"
                    >
                     5
                    var
                     data 
                    =
                     { a : 
                    1
                     };

                     6
                    var
                     vm 
                    =
                    new
                     Vue({

                     7
                            el   : 
                    "
                    #app
                    "
                    ,

                     8
                            data : data

                     9
                        });

                    10
                    </
                    script
                    >
                    11
                    <!--
                    12
                        (1) data.a = 2;      第一种修改方式, - 实时响应成功

                    13
                        (2) vm.a = 2;        第二种修改方式, - 实时响应成功

                    14
                        (3) vm.b = 3;        data里面没有【提前】准备好b - 响应失败，直接显示了{{b}}

                    15
                        (4) Object.freeze()函数用来阻止修改属性,用来禁止【响应式】

                    16
                    -->
 

原文：https://www.cnblogs.com/abdusalam10/p/11902036.html

内容总结

以上是互联网集市为您收集整理的Vue（1）- 入门全部内容，希望文章能够帮你解决Vue（1）- 入门所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1107855.html

来源：【匿名】