Vue2.0--14.小白入门教程--实例化多个vue对象,可初始化操作几种方法

课程地址:

https://study.163.com/course/courseMain.htm?courseId=1004711010

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>VueJS Tutorials</title>
    <link href="styles.css" rel="stylesheet" />
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<h1>Multiple Vue instances</h1>
<div id="vue-app-one">
    <h2>{{ title }}</h2>
    <p>{{ greet }}</p>

    <!--这里会同时在data和couputed里查找变量或者方法名,这两处的变量名不能冲突-->
    <!--初始化时会调用couputed里的test方法,并拿到test方法return回来的字符串显示出来-->
    <div v-text="test"></div>
    <button >{{test}}</button>

    <button @click="test()">test</button>
</div>
<div id="vue-app-two">
    <h2>{{ title }}</h2>
    <p>{{ greet }}</p>

    <!--点击时会调用methods里的changeTitle方法-->
    <button v-on:click="changeTitle">Change App One Title</button>
</div>
</body>

<script type="text/javascript">

    var one = new Vue({
        el: '#vue-app-one',
        data: {
//            初始化时后自动执行赋值,会被最外层的js调用,
            title: 'Vue App One',
        },
        //计算方法
        computed: {
            greet: function(){
                return 'Hello, from app one :)';
            },
            //初始化时被body里的div和button调用执行
            test(){
                    console.log(111111);
                    return 'test :)';
                },
        },
        //初始化时,会自动执行 只是初始化时会执行一次
        mounted(){
            console.log('自动执行');
        },
        methods:{
            //初始化时后自动执行,会被最外层的js调用,
            methodstest1(){
                console.log('自动执行1');
                //可以用用下面的methodstest2()方法
                //this.methodstest2();
            },
            //初始化时后自动执行,会被最外层的js调用,
            methodstest2(){
                console.log('自动执行2');
            },
        }
    });

    var two = new Vue({
        el: '#vue-app-two',
        data: {
            title: 'Vue App Two'
        },

        computed: {
            greet: function(){
                return 'Yo dudes, this is app 2 speaking to ya';
            },

        },
        methods: {
            changeTitle: function(){
                one.title = 'Title Changed';
            },

        }
    });

//    初始化时可以自动调用执行操作one实例里methods下的方法
    one.title = 'Changed from outside';
    one.methodstest1();
    one.methodstest2();

</script>
</html>
posted @ 2019-01-10 10:50  HaimaBlog  阅读(774)  评论(0)  编辑  收藏  举报