0
点赞
收藏
分享

微信扫一扫

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

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>

举报

相关推荐

0 条评论