3.el和data的两种写法

Posted 2022-11-30 言人冰

el 和 data 的两种写法

  <div id="root">
       <h2>你好，name</h2> 
    </div>

el

第一种写法是new Vue时候配置el属性。

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    new Vue(
        el: '#root',
        data:
             name:'北京'
              
    )
</script>

第二种写法是先创建Vue实例，随后再通过v.$mount(’#root’)指定el的值

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    let v = new Vue(
        data:
             name:'北京'
              
    )
    v.$mount('#root')
</script>

data有2种写法

(1).对象式
(2).函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

函数式的写法如下
函数不能写成箭型函数,不然this就指Window对象了

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    let v = new Vue(
        data:function()
            console.log('&&',this) //这里的this指vue实列对象
            return
                name:'北京'
             //注意要有返回值
        
        //函数可以简写成下面这种
        data()
				console.log('@@@',this) //此处的this是Vue实例对象
				return
					name:'尚硅谷'
				
			
    )
    v.$mount('#root')
</script>