05-el与data的两种写法

最新推荐文章于 2024-06-06 08:47:46 发布

搞钱自律

最新推荐文章于 2024-06-06 08:47:46 发布

阅读量143

点赞数

文章标签： el data

本文链接：https://blog.csdn.net/weixin_43472934/article/details/129541960

版权

1.el的第一种写法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>el与data的两种写法</title>

  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

  <!-- 准备好一个容器 -->
  <div id="root">
    <h1>{{name}}</h1>
  </div>

  <script type="text/javascript">
    Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

    new Vue({
      el:'#root',
      data:{
        name:'jack'
      }
    })
  </script>
  
</body>
</html>

2.el的第二种写法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>el与data的两种写法</title>

  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

  <!-- 准备好一个容器 -->
  <div id="root">
    <h1>{{name}}</h1>
  </div>

  <script type="text/javascript">
    Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

    const v = new Vue({
      //第一种写法
      //el:'#root',
      data:{
        name:'jack'
      }
    })

    //第二种写法
    //v.$mount('#root')
    setTimeout(() => {
      v.$mount('#root')
    }, 1000);
  </script>
  
</body>
</html>

3.data的第一种写法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>el与data的两种写法</title>

  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

  <!-- 准备好一个容器 -->
  <div id="root">
    <h1>{{name}}</h1>
  </div>

  <script type="text/javascript">
    Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

    const v = new Vue({
      //el:'#root',
      // data的第一种写法
      data:{
        name:'jack'
      }
    })

    v.$mount('#root')
  </script>
  
</body>
</html>

4.data的第二种写法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>el与data的两种写法</title>

  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

  <!-- 准备好一个容器 -->
  <div id="root">
    <h1>{{name}}</h1>
  </div>

  <script type="text/javascript">
    Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

    const v = new Vue({
      //el:'#root',
      // data的第一种写法：对象式
      /*data:{
        name:'jack'
      }*/

      //data的第二种写法：函数式
      data:function(){
        return{
          name:'jack'
        }
      }
    })

    v.$mount('#root')
  </script>
  
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>el与data的两种写法</title>

  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

  <!-- 准备好一个容器 -->
  <div id="root">
    <h1>{{name}}</h1>
  </div>

  <script type="text/javascript">
    Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

    const v = new Vue({
      //el:'#root',
      // data的第一种写法
      /*data:{
        name:'jack'
      }*/

      //data的第二种写法
      // data:function(){
      // console.log('@@@',this) //此处的this是Vue实例对象
      //   return{
      //     name:'jack'
      //   }
      // }

      //同样的写法：
      // data(){
      //   console.log('@@@',this) //此处的this是Vue实例对象
      //   return{
      //     name:'jack'
      //   }
      // }

      //同样的写法：
      data:()=>{
        console.log('@@@',this) //此处的this是window对象
        return{
          name:'jack'
        }
      }
    })

    v.$mount('#root')
  </script>
  
</body>
</html>

总结

data与el的2种写法
  1.el有2中写法
    （1）、new Vue时候配置el属性
    （2）、先创建Vue实例，随后再通过vm.$mount('#root')指定el的值
  2.data有2种写法
    （1）、对象式
    （2）、函数式
     如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
  3.一个重要的原则
     由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了
     目前Vue管理的函数就只有data

搞钱自律

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
05-el与data的两种写法

data与el的2种写法1.el有2中写法（1）、new Vue时候配置el属性（2）、先创建Vue实例，随后再通过vm.$mount('#root')指定el的值2.data有2种写法（1）、对象式（2）、函数式如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。3.一个重要的原则由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了目前Vue管理的函数就只有data。
复制链接

扫一扫