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

忘是亡心i 2024-02-18 12:30 6阅读 0赞

>     <!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>
>         
>         
>         <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>
> 
> <!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>
> 
> 
> 
> 
> 
> <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>