• Vue2_lesson4_el与data的两种方式

    vue2学习第四节

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

  • 相关阅读:
    第十章：C语言的调试
    Hadoop分布式计算框架-MapReduce
    双11预售在即，小红书品牌如何高效分析竞品？
    排序算法两万字总结(C语言实现)
    java中 得到两个数组中不同的元素 有效
    徐建鸿：深耕中医康养的“托钵行者”
    FPGA+MCU+SDRAM方案，用于服装厂生产过程中以及设计过程中制作样板，剪裁布料
    Redis篇---第五篇
    AXI协议详解(10)-非对齐传输
    进程,线程,并发相关入门
  • 原文地址：https://blog.csdn.net/Sirow/article/details/126610027