首页 > 其他分享 >VUE框架实现原理及代码构成结构详解------前端

VUE框架实现原理及代码构成结构详解------前端

时间:2023-11-20 22:31:54浏览次数:33  
标签:语句 VUE 详解 框架 Vue template ------ 模板

VUE框架实现原理及代码构成结构详解------VUE框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <title>第一个VUE程序</title>
    <!-- 安装vue -->
    <!-- 当使用script引入后就已经拥有了一个vue的全局变量 -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        // 第一步创建VUE实例
        // 为什么要new Vue(),不能直接调用Vue()函数吗?
        // 不行,因为直接调用,不创建实例会报错,必须要构造函数创建出来
        //源码创建对象时传递的对象options?
        //options表示多个选项,option中文意思就是选项
        // Vue框架要求这个options参数必须是一个纯粹的JS对象{}
        // {}这个对象中可以编写大量的key:value对象键值对
        // 一个键值对就是一个配置项
        // 可以配置多个配置项,template就是一个配置项
        // 关于template配置项,template翻译为模板
        // 用来指定模板语句,模板语句是字符串形式的
        // 什么是模板语句
        // Vue框架自己制定了一套含有特殊含义的特殊符号
        // Vue模板语句是Vue框架自己搞得语法规则
        // 我们的编写Vue框架的模板语句要遵循Vue的语法规则
        // Vue框架的模板语句可以是一个纯粹的HTML代码,也可以是Vue的特殊规则
        // 也可以是html代码加上Vue的特殊规则
        // template后面的模板语句会被Vue的编译器进行编译,转换成浏览器能够识别的HTML代码
        const myVue = new Vue({
            template : "<h1>Hello Vue!</h1>"
        })
        // 第二步
        // Vue实例都有一个$mount()方法,这个方法的作用是把这个Vue实例挂载到指定位置
        // 这段代码就是把我们创建出来的Vue实例对象myVue挂载到app这个div盒子上
        // #app是ID选择器,和CSS语法一致
        myVue.$mount('#app')
    </script>
</body>
</html>

标签:语句,VUE,详解,框架,Vue,template,------,模板
From: https://blog.51cto.com/u_16322355/8491911

相关文章

  • 并行与并发
    单核单核cpu下,线程实际还是串行执行的。操作系统中有一个组件叫做任务调度器,将cpu的时间片(windows下时间片最小约为15毫秒)分给不同的程序使用,只是由于cpu在线程间(时间片很短)的切换非常快,人类感觉是同时运行的。总结为一句话就是:微观串行,宏观并行。一般会将这种线程轮流......
  • 步进电机
    混合式步进电机:两相:步进角为1.8°,每转最细可分为400等份。五相:步进角为0.72°,每转最细可分为1000等份。关于速度和位移的控制:速度控制:与输入的脉冲速度成正比例关系。电机运转速度(rpm)=脉冲速度(pps(每秒送出的脉冲数)或Hz)*60/步进电机分割数......
  • C#编程精要:深入理解继承、多态、抽象和接口
    文章目录继承基类和派生类多重继承子类调用父类构造器子类调用父类方法多态静态多态性函数重载运算符重载动态多态性抽象类抽象属性抽象方法虚方法方法重写方法覆盖覆写和覆盖的区别密封类(sealed)接口接口特点定义接口实现接口接口继承显式实......
  • dns推荐(提升网络响应速度)
    1.阿里云ipv4233.5.5.5、233.6.6.6IPv6:2400:3200::1和2400:3200:baba::1腾讯云Ipv4119.29.29.29ipv62402:4e00::......
  • 《Unix/Linux系统编程》测试 (2)
    13.14server回答代码中有哪些宏,都在哪定义的有三个宏定义,分别是:MAX:定义为256SERVER_HOST:定义为"localhost"SERVER_PORT:定义为1234这些宏定义出现在代码的开头,在包含标准库头文件之后。这些宏定义用于给常量赋值,并在后续代码中使用这些常量client回答代码中有哪些宏......
  • Unity学习笔记--数据持久化XML文件(1)
    XML相关Xml是可拓展标记语言,一种文件格式。我们使用xml来完成对数据持久化的存储。等待我们有一程序运行结束之后,将内存中的数据进行保存,(保存在硬盘/服务器)实现对数据的持久化存储。xml文件的读取和保存以及修改要点:XMl文件的加载XML文件节点的查找访问XML文件节点内......
  • 数码管
    #数码管显示系统年,月,日,时间1importturtle,datetime2defdrawling(draw):34turtle.pendown()ifdrawelseturtle.penup()5turtle.fd(40)6turtle.right(90)78defdraworigin(d):9drawling(True)ifdin[2,3,4,5,6,8,9]elsedr......
  • CAP理论
    CAP理论,即:Consistency(一致性),指的是多个副本在任何时间点上的数据保持一致。在分布式系统中,当进行写操作时,要求所有副本都要看到最新的写入数据,以保持数据的一致性。换句话说,若在一个节点上修改了数据,并且采用了一致性的约束,那么在其他节点上对该数据的访问应该能看到这个更新。......
  • Go基础面经题
    Go基础1.基础特性Go的优势天生支持并发,性能高。单一的标准代码格式,比其他语言更具可读性。自动垃圾收集机制比Java和Python更有效,因为它与程序同时执行。Go数据类型int,string,float,bool,array,slice,map,channel,pointer,struct,interface,meth......
  • 网络空间安全导论第二章
    学期(2023-2024-1)学号(20232418)《网络》第2周学习总结教材学习内容总结思维导图工具推荐:xmindprocessonwps教材学习中的问题和解决过程问题1:什么是混合密码系统?问题1解决方案:混合密码系统是一种将对称密码和公钥密码结合起来使用的密码系统。它的基本思想是利用对称......