VUE框架实现原理及代码构成结构详解配置信息和开发者工具------VUE框架

爱被打了一巴掌 2024-02-18 13:24 53阅读 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>
>         <script src="../js/vue.js"></script>
>     </head>
>     <body>
>         <div id="app">
>             <div>
>                 <h1>{
>         {msg}}</h1>
>                 <h1>{
>         {name}}</h1>
>             </div>
>         </div>
>         <script>
>             //Vue的全局配置选项
>             //其中的productionTip可以设置是否生成生产提示信息
>             //默认值是true,如果是false则表示组织生成
>             Vue.config.productionTip = false;
>             new Vue({
>                 //关于template模板项,这个模板项下只能有一个根节点
>                 //只要data中的数据发生变化,模板语句一定会重新编译,重新渲染
>                 //如果使用template配置项的话,指定挂载位置的元素是直接被替换的
>                 //如果直接将模板语句写到html标签内,指定位置的挂载元素就不会被替换了
>                 //.$mount("#app")也可以不需要了
>                 //在VUE中有一个配置项el
>                 //el配置项也可以实现挂载
>                 // template : `<div>
>                 //     <h1>{
>         {msg}}</h1>
>                 //     <h1>{
>         {name}}</h1>
>                 //    </div>`,
>                 data : {
>                     msg : "Hello Vue!",
>                     //如果我们的name是以中文开始的就会显示不了data
>                     name : "a老杜!"
>                 },
>                 //EL配置项是用来指定我们接管什么容器的
>                 //和挂载的mount一个效果
>                 el : "#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>
> 
> <script src="../js/vue.js"></script>
> 
> </head>
> 
> <body>
> 
> <div id="app">
> 
> <div>
> 
> <h1>\{ \{msg\}\}</h1>
> 
> <h1>\{ \{name\}\}</h1>
> 
> </div>
> 
> </div>
> 
> <script>
> 
> //Vue的全局配置选项
> 
> //其中的productionTip可以设置是否生成生产提示信息
> 
> //默认值是true,如果是false则表示组织生成
> 
> Vue.config.productionTip = false;
> 
> new Vue(\{
> 
> //关于template模板项,这个模板项下只能有一个根节点
> 
> //只要data中的数据发生变化,模板语句一定会重新编译,重新渲染
> 
> //如果使用template配置项的话,指定挂载位置的元素是直接被替换的
> 
> //如果直接将模板语句写到html标签内,指定位置的挂载元素就不会被替换了
> 
> //.$mount("\#app")也可以不需要了
> 
> //在VUE中有一个配置项el
> 
> //el配置项也可以实现挂载
> 
> // template : \`<div>
> 
> // <h1>\{ \{msg\}\}</h1>
> 
> // <h1>\{ \{name\}\}</h1>
> 
> // </div>\`,
> 
> data : \{
> 
> msg : "Hello Vue!",
> 
> //如果我们的name是以中文开始的就会显示不了data
> 
> name : "a老杜!"
> 
> \},
> 
> //EL配置项是用来指定我们接管什么容器的
> 
> //和挂载的mount一个效果
> 
> el : "\#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>
>         <script src="../js/vue.js"></script>
>     </head>
>     <body>
>         <div id="id"></div>
>         <script>
>             const myVue = new Vue({
>                 template : `<h1>最近大火的电视剧{
>         {name}},上映时间是{
>         {releaseTime}},主角叫{
>         {lead.name}},年龄是{
>         {lead.age}}
>                             其他演员包括{
>         {actors[0].name}},年龄是{
>         {actors[0].age}},还有{
>         {actors[1].name}}年龄是{
>         {actors[1].age}}
>                     </h1>`,
>                 //谁可以给模板语句提供数据来源,data选项
>                 //data只能是object或者function两类
>                 //data配置项的专业叫法vue实例的数据对象
>                 //data实际上是给整个vue实例提供数据来源的
>                 //对象必须是纯粹的对象才行(含有零个或多个key和value对)
>                 //data数据的内容怎么插入到模板语句中?
>                 //{
>         {}}是VUE框架自己定义的一套语法,别的框架或者浏览器都看不懂且不能识别
>                 //插值语法{
>         {}}的中间不能有其他空格,这是vue框架自定义的语法标准,走了vue的编译器
>                 //所以一旦语法错误就识别不了了
>                 data : {
>                     name : "狂飙",
>                     releaseTime : "2023年1月1日",
>                     lead : {
>                         name : "高启强",
>                         age : 40
>                     },
>                     actors : [
>                         {
>                             name : "安欣",
>                             age : 30
>                         },
>                         {
>                             name : "高启兰",
>                             age : 27
>                         }
>                     ]
>                 }
>             })
>             myVue.$mount("#id")
>         </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>
> 
> <script src="../js/vue.js"></script>
> 
> </head>
> 
> <body>
> 
> <div id="id"></div>
> 
> <script>
> 
> const myVue = new Vue(\{
> 
> template : \`<h1>最近大火的电视剧\{ \{name\}\},上映时间是\{ \{releaseTime\}\},主角叫\{ \{lead.name\}\},年龄是\{ \{lead.age\}\}
> 
> 其他演员包括\{ \{actors\[0\].name\}\},年龄是\{ \{actors\[0\].age\}\},还有\{ \{actors\[1\].name\}\}年龄是\{ \{actors\[1\].age\}\}
> 
> </h1>\`,
> 
> //谁可以给模板语句提供数据来源,data选项
> 
> //data只能是object或者function两类
> 
> //data配置项的专业叫法vue实例的数据对象
> 
> //data实际上是给整个vue实例提供数据来源的
> 
> //对象必须是纯粹的对象才行(含有零个或多个key和value对)
> 
> //data数据的内容怎么插入到模板语句中?
> 
> //\{ \{\}\}是VUE框架自己定义的一套语法,别的框架或者浏览器都看不懂且不能识别
> 
> //插值语法\{ \{\}\}的中间不能有其他空格,这是vue框架自定义的语法标准,走了vue的编译器
> 
> //所以一旦语法错误就识别不了了
> 
> data : \{
> 
> name : "狂飙",
> 
> releaseTime : "2023年1月1日",
> 
> lead : \{
> 
> name : "高启强",
> 
> age : 40
> 
> \},
> 
> actors : \[
> 
> \{
> 
> name : "安欣",
> 
> age : 30
> 
> \},
> 
> \{
> 
> name : "高启兰",
> 
> age : 27
> 
> \}
> 
> \]
> 
> \}
> 
> \})
> 
> myVue.$mount("\#id")
> 
> </script>
> 
> </body>
> 
> </html>