美文网首页
2.实例化Vue对象

2.实例化Vue对象

作者: 初家大老爷 | 来源:发表于2019-07-01 18:18 被阅读0次

    2.1 创建一个Vue实例

    每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的,传入选项对象参数,创建想要达到的行为。选项对象的完整内容参考API 文档的选项列表。

    实例框架

    var vm = new Vue({
            // 选项
    });
    

    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue.js实例</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
        <div id="vue-app">
        
        </div>
    
        <script src="app.js"></script>
    </body>
    </html>
    

    app.js

    // 实例化Vue对象
    var vm = new Vue({
            el: '#vue-app',
            data: {
                name: "米斯特吴",
                job: "web开发"
            },
            methods: {
                greet: function(){
                    return: 'Good Morning';
                }
            }
    });
    

    2.2 数据和方法

    2.2.1 数据

    • 当Vue实例被创建时,将data对象中的所有属性加入到Vue响应式系统中;
    • 当属性值发生改变时,视图将会产生“响应”,匹配更新为新的值,视图会进行重渲染;
    • 只有当实例被创建时data中存在的属性才是响应式

    实例框架
    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Vue.js</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
        <div id="vue-app">
            <p>Name: {{ name }}</p>
            <p>Job: {{ job }}</p>
        </div>
        
        <script src="app.js"></script>
    </body>
    </html>
    

    app.js

    var vm = new Vue({
        el: '#vue-app',
        data: {
            name: '米斯特吴',
            job: 'Web'
        }
    });
    

    2.2.2 方法

    实例框架
    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Vue.js</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
        <div id="vue-app">
            <h1>{{ greet() }}</h1>
        </div>
        
        <script src="app.js"></script>
    </body>
    </html>
    

    app.js

    var vm = new Vue({
        el: '#vue-app'
        methods: {
            greet: function() {
                return 'Good Morning!';
            }
        }
    });
    

    相关文章

      网友评论

          本文标题:2.实例化Vue对象

          本文链接:https://www.haomeiwen.com/subject/plhhfctx.html