美文网首页
data与el的两种写法

data与el的两种写法

作者: 不服输的小蜗牛 | 来源:发表于2022-03-24 21:39 被阅读0次
    1.data与el的两种写法

    1.new Vue 的时候配置el属性
    2.先创建Vue实例,然后通过vm.$mount()指定el的值。(vm是Vue 实例)

    2.data有两种写法:

    (1)对象式
    (2)函数式

    一个重要原则

    由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script type="text/javascript" src="vue.js">
        
            </script>
        </head>
        <body>
            <div >
                <h1 id='one'>在new Vue中使用el标签</h1>
                <h1 id='two'>先创建Vuew,然后调用$mount方法设置应用到那个id上</h1>
                <h1 id='three'>{{name}}</h1>
                <h1 id='four'>{{name}}</h1>
            </div>
        </body>
        <script type="text/javascript">
        new Vue({
            el:'#one',
        
        })
        
        function data(){
            return {
                name:'在Vue中使用函数设置data'
            }
        }
        var  vm = new Vue({
            
        })
        vm.$mount('#two')
        
        new Vue({
            el:'#three',
            data:{
                name:'我是第一种方式设置data'
            }
        })
        
        new Vue({
            el:'#four',
            data:data
        })
        </script>
    </html>
    
    

    相关文章

      网友评论

          本文标题:data与el的两种写法

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