el和data的两种写法

一、el

1、实例化Vue对象时,写在内部

2、实例化Vue对象后,挂载容器

对象.$mount(id选择器)

二、data

1、对象式

2、函数式

  注意:写成一般函数(一般函数在对象中可简写),不能写成箭头函数

 

案例

 

<!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>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="contianer">
        <h1>Hello, {{name}}</h1>
    </div>
    <script type="text/javascript">
        // 第一种,el 实例化对象直接写, data 为对象式
/*         new Vue({
            el: "#contianer",
            data:{
                name:"jojo"
            }
        }) */
        // 第二种,el 先实例化Vue,再挂载,data 函数为函数
/*         const vm = new Vue({
            data:function(){
                return{
                    name:"wt"
                }
            }
        }) */

        // 函数简写
        const vm = new Vue({
            data(){
                console.log("abc",this)
                return {
                    name: "jojo"
                }
            }
        })
        vm.$mount("#contianer")
        console.log(vm)
    </script>
</body>
</html>

 

posted @ 2024-12-27 10:31  市丸银  阅读(12)  评论(0)    收藏  举报