Vue2.0中el与data的两种写法

最新推荐文章于 2024-07-12 15:14:43 发布

所念皆星河73

最新推荐文章于 2024-07-12 15:14:43 发布

阅读量113

点赞数

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

本文链接：https://blog.csdn.net/weixin_60664694/article/details/131108401

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

先说结论

el有以下2种写法
- new Vue时配置el属性
- 先创建Vue实例，随后再通过调用$mount()函数挂载el
data有以下2种写法
- 对象式
- 函数式
  
  用组件时，data必须使用函数式，否则会报错
一个重要的原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

el的两种写法

都在代码中。(CSDN中无语法高亮，建议复制到自己的VSCode中查看代码)


<body>
    <!-- 准备好容器 -->
    <div id="root">
        <h1>你好，{{name}}</h1>
    </div>
    <script>
          <!-- 准备好一个Vue实例 -->
          const vm=new Vue({
                  // el: "#root",第一种写法。在创建Vue实例时，就与容器绑定
                  data: {
                      name:"尚硅谷"

                  }
              })
          //第二种写法，需要用变量接收Vue实例,然后调用$mount()函数，与容器绑定。更灵活。mount挂载
          //给vue实例vm挂载一个容器
          vm.$mount("#root")//挂载. 这不能写this，得写vm。

    </script>
</body>

data对象式和函数式

<body>
    <!-- 准备好容器 -->
    <div id="root">
        <h1>你好，{{name}}</h1>
    </div>
    <script>
          <!-- 准备好一个Vue实例 -->
          const v=new Vue({
                  el: "#root",
                  //data的第一种写法：对象式
                /*   data: {
                      name:"尚硅谷"
                  }
                */

              // data的第二种写法：函数式。data属性的值是一个普通函数(不能是箭头函数)，该函数必须返回对象，该函数供Vue底层调用
           /*    data:function () {
                  //返回一个对象{}，在{}里配置对象的属性
                  return{
                      name:"尚硅谷"
                  }
              } */
              //简写为
              data(){
                  //因为是普通函数，所以此处的this是此Vue实例对象；如果是箭头函数，此处的this是window对象
                  console.log("此处的this是该Vue实例对象",this)
                  return{name:"尚硅谷"}//必须了return。组件中必须用这种写法
              }
              })
    </script>
</body>

例子2：

<body>
    <!-- 准备好容器 -->
    <div id="root">
        <h1>你好，{{name}}</h1>
        <h1>{{course}} </h1>
        <!-- 用了v-model或:value就不写name属性了 -->
        <div><input type="text" v-model="score"> </div>
    </div>
    <script>
          <!-- 准备好一个Vue实例 -->
          const vm = new Vue({
            data(){
                return{
                    name:'Mary',
                    course:'java',
                    score:'100'

                }
            }
          })
          vm.$mount('#root')
          
    </script>
</body>