码迷,mamicode.com
首页 > 其他好文 > 详细

创建Vue实例的三种方法

时间:2019-12-23 00:42:57      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:字符串   ted   rip   div   参数   tle   new   http   https   

第一种

<html>
    <head><title>TEST</title></head>
    <body>
        <div id='app'>{{msg}}</div> // 页面为 <div id=’app’> hello vue </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
        new Vue({
            el: "#app",
            data: {msg: "hello vue"},
        })
    
        </script>
    </body>
</html>

第二种

<html>
    <head><title>TEST</title></head>
    <body>
        <div id='app'>{{msg}}</div> // 页面为 <p id='zzz'> hello vue </p> 也就是说,会把 原始的 div标签替换掉
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
        new Vue({
            el: "#app",
            data: {msg: "hello vue"},
                        template: "<p id='zzz'> {{msg}}</p>
        })
    
        </script>
    </body>
</html>

第三种

render 函数,以字符串(网上太多,故没写),要么以component对象作为参数创建。

<html>
    <head><title>TEST</title></head>
    <body>
        <div id='app'>{{msg}}</div> // 页面为 <h5 id='aaa'>aaaaa</h5> 也就是说,会把 原始的 div标签替换掉
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
        new Vue({
            el: "#app",
            data: {msg: "hello vue"}, // 不会使用
                        template: "<p id='zzz'> {{msg}}</p>, //不会用到
                        render: h =>  h({
                                                    template: <h5 id='aaa'> {{msg}} </h5>,
                                                    data: function() {
                                                        return {msg: 'aaaaa'}
                                                    },
                                                    created: function(){ console.log('123')}
                                                }
        })
    
        </script>
    </body>
</html>

创建Vue实例的三种方法

标签:字符串   ted   rip   div   参数   tle   new   http   https   

原文地址:https://www.cnblogs.com/jijizhazha/p/12081522.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!