Vue 关于 el 和 data 的两种写法

el 的两种写法

el 的第一种写法：new Vue 的时候配置 el 属性

el 的第一种实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>el 第一种写法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    <h2>{{msg}}</h2>
</div>

<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            msg:'你好 Vue'
        }
    })
</script>

</body>
</html>

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

el 的第二种实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>el 第二种写法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    <h2>{{msg}}</h2>
</div>

<script type="text/javascript">
    const vm = new Vue({
        data: {
            msg: '你好 Vue'
        }
    })
    vm.$mount('#root')
</script>

</body>
</html>

data 的两种写法

data 的第一种写法：对象式

data 第一种实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>data 第一种写法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    <h2>{{msg}}</h2>
</div>

<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            msg:'你好 Vue'
        }
    })
</script>

</body>
</html>

data 的第二种写法：函数式 （推荐使用）

推荐使用原因：后续组件的使用 data 必须使用 函数式 否则会报错

另一个重要的原则：由 Vue 管理的函数，一定不要使用箭头函数，一旦使用，this 就不再是 Vue实例了

data 第二种实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>data 第二种写法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    <h2>{{msg}}</h2>
</div>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data() {
            return {
                msg: '你好 Vue'
            }
        }
    })
</script>

</body>
</html>

posted @ 2022-04-01 11:34 春暖花开鸟阅读(116) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue 中组件的实例对象和 Vue的实例对象的关系

· Vue 之 Hello Vue

· [Vue]el和data的两种写法

· Vue之el与data的两种写法

· Vue中el和data的两种写法