Vue2_lesson4_el与data的两种方式

vue2学习第四节

1.代码
2.总结

1.代码

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>Documenttitle>
    <script src="../vue/vue.js">script>
head>
<body>
    
    <div id="root"><h1>你好,{{name}}h1>div>
    <script>
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        
        //el的两种写法
        /*const v = new Vue({
            // el:'#root', //第一种写法
            data:{ 
                name:'尚硅谷',
            }
        })
        console.log(v)
        v.$mount("#root") //第二种写法。把模板交给Vue实例，Vue实例解析模板然
                            //后再把数据放回去。这里放就是挂载的意思，就是mount这个词。*/
        //data的两种写法
        new Vue({
            el:'#root',
            //data的第一种写法:对象式
            /*data:{
                name:'尚硅谷'
            }*/

            //data的第二种写法:函数式 返回数据必须用对象形式
            //组件的时候必须用麻烦的函数式
            data(){ //不能写成箭头函数
                //function是Vue帮我调用的
                console.log('@@@',this)//此处的this是Vue实例对象
                return{
                    name:'尚硅谷'
                }
            }

            // data:function(){ //不能写成箭头函数
            //     //function是Vue帮我调用的
            //     console.log('@@@',this)//此处的this是Vue实例对象
            //     return{
            //         name:'尚硅谷'
            //     }
            // }

            // data:()=>{ 
            //     console.log('@@@',this)//this是window
            //     return{
            //         name:'尚硅谷'
            //     }
            // }

        })
    script>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

2.总结

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实例了。

相关阅读:
【蓝桥杯】蓝桥杯双周赛第二场ABCD题
盘点JAVA中延时任务的几种实现方式
Failed to connect to bitbucket.org port 443 错误原因, 解决办法
锂电池保护IC：HC5106锂电池保护IC，供应储能电源、无线吸尘器等电动工具、电动自行车、无人机、笔记本电脑等电子产品
事件溯源（Event Sourcing）和命令查询责任分离（CQRS）经验
无胁科技-TVD每日漏洞情报-2022-9-9
Abbexa丨Abbexa Actin-pan细胞ELISA试剂盒介绍
2024最新软件测试【测试理论+ 接口测试】面试题（内附答案）
线下门店价格怎么检查
cuda实践之一（hello world）

原文地址：https://blog.csdn.net/Sirow/article/details/126610027