vue之el和data的两种写法 


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>el和data的两种写法</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">

  <h1 v-model:x="name">你好啊！{{name}}</h1>
</div>

<!--
data和el的2种写法：
1。el有2种写法
  1。new Vue的时候配置el属性。
  2。先创建vue实例，随后再通过vm.$mount('#root')指定el的值，将root挂载在vm对象上。
2。data 的2种写法
  1。对象式。  data:{}
  2。函数式.   data:function(){return { name:'尚硅谷'}}
  目前是使用那种都可以，以后学习组件的时候，data必须使用函数式，否则会报错。

3。一个重要的原则：
  由vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。


-->
<script type="text/javascript">

    const v = new Vue({
        // el: '#root', //el第一种写法
        //data的第一种写法
        data: {
            name: 'jack',
        },
        //data的第二种写法
        data(){
            return {
                name:'jack'
            }
        }
    })
    console.log(v);
    setTimeout(() => {
        //el第二种写法
        v.$mount('#root'); //挂载
    }, 1000);

</script>
</body>
</html>
posted @ 2022-05-29 23:49  King-DA  阅读(29)  评论(0)    收藏  举报