VUE框架MVVM架构思想解析与实现封装dom对象------VUE框架

╰半橙微兮° 2024-02-06 05:09 51阅读 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">
>             <h1>{
>         {msg}}</h1>
>             
>             v-bind指令:<input type="text" v-bind:value="name1">
>             
>             v-model指令:<input type="text" v-model:value="name2">
>             <br>
>             
>             
>             
>             
>             
>             
>             
>             
>             
>             
>             v-bind指令:<input type="text" :value="name1">
>             v-model指令:<input type="text" v-model="name2">
>             <br>
>             消息1:<input type="text" :value="msg">
>             消息2:<input type="text" v-model="msg">
>         </div>
>         <script>
>             new Vue({
>                 el : "#app",
>                 data : {
>                     msg : "Hello",
>                     name1 : "Jack",
>                     name2 : "Rose",
>                     link : "https://www.baidu.com"
>                 }
>             });
>         </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">
> 
> <h1>\{ \{msg\}\}</h1>
> 
> 
> 
> v-bind指令:<input type="text" v-bind:value="name1">
> 
> 
> 
> v-model指令:<input type="text" v-model:value="name2">
> 
> <br>
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> v-bind指令:<input type="text" :value="name1">
> 
> v-model指令:<input type="text" v-model="name2">
> 
> <br>
> 
> 消息1:<input type="text" :value="msg">
> 
> 消息2:<input type="text" v-model="msg">
> 
> </div>
> 
> <script>
> 
> new Vue(\{
> 
> el : "\#app",
> 
> data : \{
> 
> msg : "Hello",
> 
> name1 : "Jack",
> 
> name2 : "Rose",
> 
> link : "https://www.baidu.com"
> 
> \}
> 
> \});
> 
> </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">
>             <h1>{
>         {msg}}</h1>
>             
>             
>             <input type="text" v-model="name">
>         </div>
>         
>         
>         
>         
>         
>         
>         
>         
>     
>         <script>
>             // 这个就是vm
>             const vm = new Vue({
>                 el : "#app",
>                 data : {
>                     msg : "Hello World",
>                     // 这就是我们的model
>                     name : "ZhangSan"
>                 }
>             });
>             
>         </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">
> 
> <h1>\{ \{msg\}\}</h1>
> 
> 
> 
> 
> 
> <input type="text" v-model="name">
> 
> </div>
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> <script>
> 
> // 这个就是vm
> 
> const vm = new Vue(\{
> 
> el : "\#app",
> 
> data : \{
> 
> msg : "Hello World",
> 
> // 这就是我们的model
> 
> name : "ZhangSan"
> 
> \}
> 
> \});
> 
> </script>
> 
> </body>
> 
> </html>