美文网首页
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