el与data的俩种写法

最新推荐文章于 2024-07-24 14:58:19 发布

阿瞒有我良计15

最新推荐文章于 2024-07-24 14:58:19 发布

阅读量41

点赞数

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

本文链接：https://blog.csdn.net/qq_56444564/article/details/129829488

版权

VUE 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

el的俩种写法：

new Vue的时候配置el属性
先创建Vue实例，随后在通过vm.$mount('#root')指定el的值

代码示例：

方法一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
    {{date}}
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#root",
        data: {
            date: "今天是2023-03-29"
        }
    })
</script>
</body>
</html>

方法二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
    {{date}}
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        data: {
            date: "今天是2023-03-29"
        }
    })
    vm.$mount('#root')
</script>
</body>
</html>

data的俩种写法：

对象式
函数式

如何选择:目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

代码示例：

方法一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
    {{day}}
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#root",
        data: {
            day: "今天是2023-03-29"
        }
    })
</script>
</body>
</html>

方法二：

普通：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
    {{day}}
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#root",
        data: function () {
            return {day: "今天是2023-03-29"}
        }
    })
</script>
</body>
</html>

简写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
    {{day}}
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#root",
        data() {
            return {day: "今天是2023-03-29"}
        }
    })
</script>
</body>
</html>

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了.

如下举例：

console.log打印的是vue这个实例对象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
    {{day}}
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#root",
        data: function () {
            console.log(this)
            return {day: "今天是2023-03-29"}
        }
    })
</script>
</body>
</html>

运行结果：

改成箭头函数试一试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
    {{day}}
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#root",
        data: () => {
            console.log(this)
            return {day: "今天是2023-03-29"}
        }
    })
</script>
</body>
</html>

运行结果：