3.el和data的两种写法

言人冰

已于 2022-02-11 16:38:33 修改

阅读量278

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-02-11 16:37:50 首次发布

本文链接：https://blog.csdn.net/YRB20/article/details/122882666

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中创建实例的两种方式，一是通过`new Vue`时直接配置`el`，二是先创建实例后使用`$mount`指定元素。同时，讲解了`data`属性的声明，包括对象式和函数式，并强调在组件中必须使用函数式以避免数据污染。示例代码展示了如何使用这两种方式及函数式`data`的正确用法。

摘要由CSDN通过智能技术生成

`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>